/* Site-wide pieces of the Know Old Stuff 2026 theme: header (top strip, logo row, category row), search bar, phone menu, footer.
   Sized for older readers: 16px+ text, high contrast, 48px tap targets, words next to icons.
   Spacing uses steps of 8px. Widths follow Blocksy's content container (1180px max) so edges line up. */

:root {
	/* Colour system
	   - Neutrals (ink, muted, line, band) for reading.
	   - Primary = deep teal: the one action colour (buttons, links, current state, top strip, footer).
	   - Accent = the logo's terracotta: small markers and labels (bullets, item stamps, prices), never large areas.
	   - Brand colours appear only inside the Pinterest/Google/WhatsApp/Facebook icons.
	   The --kos-forest-* names are kept from the first version and simply hold the primary colour. */
	--kos-ink: #141B1C;        /* body text */
	--kos-ink-2: #384446;      /* secondary text, nav labels */
	--kos-muted: #5D6A6C;      /* hints, meta (5:1 on white) */
	--kos-line: #DAE2E3;       /* borders, dividers */
	--kos-band: #F2F6F6;       /* soft panels */
	--kos-forest: #1D5B60;     /* primary: buttons, links, current state */
	--kos-forest-hover: #16474B;
	--kos-forest-deep: #112F32;/* top strip, footer */
	--kos-forest-tint: #E3EFEF;/* hover/selected backgrounds */
	--kos-terracotta: #D2492F; /* accent: the logo red */
	--kos-heading: #141414;    /* headings: near-black */
	--kos-focus: #E0A422;      /* keyboard focus ring */
	--kos-primary: var(--kos-forest);
	--kos-accent: var(--kos-terracotta);

	/* Older names kept for the homepage styles */
	--kos-felt: var(--kos-forest-deep);
	--kos-felt-deep: var(--kos-forest-deep);
	--kos-rule: var(--kos-line);
	--kos-green: var(--kos-forest);
	--kos-mist: var(--kos-band);

	--kos-sans: "Archivo", system-ui, sans-serif;
	--kos-serif: "Literata", Georgia, serif;
	--kos-top: var(--wp-admin--admin-bar--height, 0px);
}


/* White page background across the site (overrides Blocksy's cream). */
body.wp-child-theme-knowoldstuff { background-color: #fff; }

.kos-container {
	width: var(--theme-container-width, min(90vw, 1180px));
	max-width: var(--theme-normal-container-max-width, 1180px);
	margin-inline: auto;
}
:is(.kos-header, .kos-mini) a, .kos-mini a, .kos-drawer a, .kos-footer a { color: inherit; text-decoration: none; }
:is(.kos-header, .kos-mini) :focus-visible, .kos-mini :focus-visible, .kos-drawer :focus-visible,
.kos-searchbar :focus-visible, .kos-footer :focus-visible { outline: 3px solid var(--kos-focus); outline-offset: 3px; border-radius: 4px; }
.kos-ico { flex: none; display: block; }

/* ---------- Header ---------- */
.kos-header { position: relative; z-index: 100; background: #fff; font-family: var(--kos-sans); color: var(--kos-ink); border-bottom: 1px solid var(--kos-rule); }

/* Row 1: logo · search · buttons */
.kos-main { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 40px; padding-block: 20px; }
.kos-logo { display: block; }
.kos-logo img { height: 68px; width: auto; display: block; }

.kos-search {
	display: flex; align-items: center; justify-self: center; width: 100%; max-width: 560px; height: 52px;
	padding: 4px 4px 4px 16px; gap: 10px; border: 1.5px solid #AAB6B0; border-radius: 8px; background: #fff; color: var(--kos-muted);
}
.kos-search > svg { flex: none; }
:is(.kos-header, .kos-mini) form.kos-search input[type=search], .kos-mini form.kos-search input[type=search] {
	flex: 1; min-width: 0; height: 100%; padding: 0; border: 0 !important; background: transparent !important; box-shadow: none;
	font: 16.5px var(--kos-sans); color: var(--kos-ink);
}
.kos-search button {
	height: 100%; padding: 0 20px; border: 0; border-radius: 5px; cursor: pointer; min-height: 0;
	background: var(--kos-forest); color: #fff; font: 600 16px var(--kos-sans); transition: background .15s;
}
.kos-search button:hover { background: var(--kos-forest-hover); }
.kos-search button:active { background: var(--kos-forest-deep); }
.kos-search:hover { border-color: #7F8E87; }
.kos-search:focus-within { border-color: var(--kos-forest); box-shadow: 0 0 0 4px color-mix(in srgb, var(--kos-forest) 16%, transparent); }
/* One focus ring on the whole box, not a second one around the text field inside it. */
:is(.kos-header, .kos-mini) form.kos-search input[type=search]:focus,
:is(.kos-header, .kos-mini) form.kos-search input[type=search]:focus-visible,
.kos-mini form.kos-search input[type=search]:focus,
.kos-mini form.kos-search input[type=search]:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; }
:is(.kos-header, .kos-mini) form.kos-search button:focus-visible { outline: 3px solid var(--kos-focus); outline-offset: 2px; }

.kos-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
/* Pinterest and Google: matching secondary buttons; brand colour lives in the icon only. */
.kos-btn-pin, .kos-btn-google {
	display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border-radius: 8px;
	background: #fff; border: 1.5px solid var(--kos-line); color: var(--kos-ink) !important;
	font: 600 15.5px/1.15 var(--kos-sans); white-space: nowrap;
	transition: background .15s, border-color .15s, box-shadow .15s;
}
.kos-btn-pin:hover, .kos-btn-google:hover {
	background: var(--kos-forest-tint); border-color: var(--kos-forest); color: var(--kos-ink) !important;
	box-shadow: 0 4px 12px -6px rgba(23, 48, 42, .35);
}
.kos-btn-pin:active, .kos-btn-google:active { box-shadow: none; background: #DCE9E2; }
.kos-btn-pin .kos-ico, .kos-btn-google .kos-ico { width: 24px; height: 24px; }
.kos-g-long { display: flex; flex-direction: column; text-align: left; font-size: 15px; }
.kos-g-short { display: none; }
.kos-btn-google small { font-size: 12.5px; font-weight: 500; color: var(--kos-muted); }

.kos-mfollow, .kos-mtools { display: none; }
.kos-lbtn {
	display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
	width: 56px; height: 56px; padding: 0; border: 0; border-radius: 8px; background: none; cursor: pointer;
	color: var(--kos-ink); font: 600 13px var(--kos-sans); min-height: 0;
}
.kos-lbtn:hover, .kos-lbtn[aria-expanded="true"] { background: var(--kos-band); }

/* Row 3: categories as the navigation */
.kos-cats { border-top: 1px solid var(--kos-line); }
.kos-cats__inner { position: relative; }
.kos-cats__track {
	list-style: none; margin: 0; display: flex; gap: 8px;
	overflow-x: auto; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: none; position: relative;
}
.kos-cats__track::-webkit-scrollbar { display: none; }
.kos-cats__track > li { flex: none; scroll-snap-align: start; }
.kos-cats__track a { display: flex; align-items: center; }
.kos-cats__track img { object-fit: cover; border-radius: 50%; background: #fff; flex: none; transition: transform .18s ease, box-shadow .18s ease; }
:is(.kos-header, .kos-mini) .kos-cats__track a span { font-weight: 600; line-height: 1.2; color: var(--kos-ink); transition: color .15s; }
:is(.kos-header, .kos-mini) .kos-cats__track a:hover span, :is(.kos-header, .kos-mini) .kos-cats__track a[aria-current] span { color: var(--kos-forest); }
:is(.kos-header, .kos-mini) .kos-cats__track a[aria-current] span { font-weight: 700; }

/* Homepage: big round photos spread across the container */
.kos-cats--home .kos-cats__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(120px, 1fr); padding: 20px 0 18px; }
.kos-cats--home .kos-cats__track a { flex-direction: column; gap: 10px; text-align: center; padding: 4px; }
.kos-cats--home .kos-cats__track img { width: 80px; height: 80px; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--kos-line); }
:is(.kos-header, .kos-mini) .kos-cats--home .kos-cats__track a span { font-size: 16px; }
.kos-cats--home .kos-cats__track a:hover img { transform: translateY(-2px); box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--kos-forest), 0 8px 16px -8px rgba(23, 48, 42, .45); }
.kos-cats--home .kos-cats__track a[aria-current] img { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--kos-forest); }

/* Every other page: one row of chips (small photo + name), scrolls when there are more than fit */
.kos-cats--chips .kos-cats__track { padding: 12px 0; justify-content: safe center; }
.kos-cats--chips .kos-cats__track a {
	gap: 10px; height: 46px; padding: 0 16px 0 5px; border: 1px solid var(--kos-line); border-radius: 999px; background: #fff;
	transition: background .15s, border-color .15s;
}
.kos-cats--chips .kos-cats__track img { width: 34px; height: 34px; }
:is(.kos-header, .kos-mini) .kos-cats--chips .kos-cats__track a span { font-size: 15.5px; white-space: nowrap; }
.kos-cats--chips .kos-cats__track a:hover { border-color: var(--kos-forest); background: var(--kos-forest-tint); }
.kos-cats--chips .kos-cats__track a[aria-current] { border-color: var(--kos-forest); background: var(--kos-forest-tint); box-shadow: inset 0 0 0 1px var(--kos-forest); }

/* Arrows appear only when some categories are out of view. */
.kos-cats__arrow {
	position: absolute; top: 50%; z-index: 2; transform: translateY(-50%);
	width: 40px; height: 40px; padding: 0; min-height: 0; border-radius: 50%; display: grid; place-items: center;
	border: 1px solid var(--kos-rule); background: #fff; color: var(--kos-ink); cursor: pointer;
	box-shadow: 0 4px 14px -6px rgba(20, 35, 28, .45);
}
.kos-cats__arrow[data-dir="-1"] { left: -6px; }
.kos-cats__arrow[data-dir="1"] { right: -6px; }
.kos-cats__arrow:hover { background: var(--kos-forest); border-color: var(--kos-forest); color: #fff; }
.kos-cats__arrow[hidden] { display: none; }
.kos-cats__inner::before, .kos-cats__inner::after { content: ""; position: absolute; top: 0; bottom: 0; width: 44px; z-index: 1; pointer-events: none; }
.kos-cats__inner::before { left: 0; background: linear-gradient(to right, #fff, rgba(255,255,255,0)); }
.kos-cats__inner::after { right: 0; background: linear-gradient(to left, #fff, rgba(255,255,255,0)); }
.kos-cats__inner.at-start::before, .kos-cats__inner.at-end::after { display: none; }

/* ---------- Compact bar (appears on scroll up) ---------- */
.kos-mini {
	position: fixed; top: var(--kos-top); left: 0; right: 0; z-index: 900;
	background: #fff; border-bottom: 1px solid var(--kos-line); box-shadow: 0 8px 20px -14px rgba(23, 48, 42, .5);
	font-family: var(--kos-sans); color: var(--kos-ink);
	transform: translateY(-110%); visibility: hidden;
	transition: transform .25s ease, visibility 0s linear .25s;
}
.kos-mini.is-shown { transform: none; visibility: visible; transition: transform .25s ease, visibility 0s; }
.kos-mini .kos-cats { border-bottom: 0; }

/* ---------- Search bar (phones) ---------- */
.kos-searchbar { background: var(--kos-felt); padding-block: 12px; }
.kos-searchbar[hidden], .kos-drawer[hidden] { display: none; }
.kos-searchbar form input[type=search]:focus { outline: 3px solid var(--kos-focus) !important; outline-offset: 1px; }
.kos-searchbar form { display: flex; gap: 8px; }
.kos-searchbar form input[type=search], .kos-drawer form.kos-drawer__search input[type=search] {
	flex: 1; min-width: 0; height: 52px; padding: 0 16px; border-radius: 6px; box-shadow: none;
	border: 0 !important; background: #fff !important; font: 17px var(--kos-sans); color: var(--kos-ink);
}
.kos-searchbar button, .kos-drawer__search button {
	height: 52px; padding: 0 20px; border: 0; border-radius: 6px; cursor: pointer; min-height: 0;
	background: #fff; color: var(--kos-felt); font: 700 17px var(--kos-sans);
}

/* ---------- Phone menu ---------- */
.kos-drawer {
	position: fixed; inset: var(--kos-top) 0 0 0; z-index: 1000; background: #fff; overflow-y: auto;
	font-family: var(--kos-sans); color: var(--kos-ink); padding: 0 16px 40px;
}
html.kos-drawer-open { overflow: hidden; }
.kos-drawer__top { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.kos-drawer__title { font-weight: 700; font-size: 20px; }
.kos-drawer__search { display: flex; gap: 8px; margin-bottom: 8px; }
.kos-drawer form.kos-drawer__search input[type=search] { border: 2px solid #C5D0CA !important; }
.kos-drawer__search button { background: var(--kos-felt); color: #fff; }
.kos-drawer__cats { list-style: none; margin: 8px 0 0; padding: 0; }
.kos-drawer__cats a { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--kos-rule); font-size: 19px; font-weight: 650; }
.kos-drawer__cats img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex: none; }
.kos-drawer__cats a[aria-current] span { color: var(--kos-green); }
.kos-drawer__links, .kos-drawer__social { display: flex; flex-wrap: wrap; gap: 8px 32px; padding-top: 24px; font-size: 17px; font-weight: 600; }
.kos-drawer__links a, .kos-drawer__social a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 0; }
.kos-drawer__social { flex-direction: column; gap: 4px; padding-top: 16px; }

/* ---------- Footer ----------
   Flat midnight teal. Left: brand (Pinterest, Google preferred source) and the Copyscape/DMCA badges.
   Right: Categories (the main thing to click) and "Proudly featured in". Below: about/policy links centred,
   then copyright and disclaimer (left) with Back to top (right).
   Lines separate the groups only, never single links. Labels use the logo's red (#D85035). */
.kos-footer { --f-bg: #0B1F21; --f-text: #BFD0D1; --f-soft: #8AA4A6; --f-head: #fff; --f-label: #D85035; --f-line: rgba(255, 255, 255, .12);
	--f-btn: rgba(255, 255, 255, .24); --f-logos: brightness(0) invert(1);
	background: var(--f-bg); color: var(--f-text); font: 16px/1.6 var(--kos-sans); }

.kos-footer ul { list-style: none; margin: 0; padding: 0; }
.kos-footer li { margin: 0; }
.kos-footer h2 { margin: 0 0 18px; font-family: var(--kos-sans); font-size: 13px; font-weight: 800; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--f-label); }
.kos-footer a:hover { color: var(--f-head); }
.kos-footer__wrap > * { padding-block: 40px; }
.kos-footer__wrap > * + * { border-top: 1px solid var(--f-line); }

/* Brand */
.kos-footer__logo { display: inline-block; }
.kos-footer__logo img { display: block; width: auto; height: 72px; }
.kos-footer .kos-footer__tagline { margin: 18px 0 0; font-family: var(--kos-serif); font-size: 22px; font-style: italic; font-weight: 500; line-height: 1.3; color: var(--f-head); }
.kos-footer__follow { display: grid; justify-items: start; gap: 10px; margin-top: 22px; }
.kos-footer .kos-footer__pin { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px 0 12px;
	border: 1px solid var(--f-btn); border-radius: 999px; color: var(--f-head); font-weight: 650; }
.kos-footer .kos-footer__pin:hover { border-color: currentColor; }

/* Categories: plain links, spaced out, no lines between them */
.kos-footer__cats ul { display: flex; flex-wrap: wrap; gap: 14px 40px; }
.kos-footer__cats a { color: var(--f-head); font-size: 19px; font-weight: 650; line-height: 1.3; }
.kos-footer__cats a:hover { text-decoration: underline; text-decoration-color: var(--f-label); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Proudly featured in: logos only, not links */
.kos-footer__featured > p { margin: -6px 0 0; font-family: var(--kos-serif); font-size: 16px; font-style: italic; line-height: 1.5; color: var(--f-head); }
.kos-footer__featured ul { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 40px; margin-top: 22px; color: var(--f-head); }
.kos-footer__featured .kos-wm--iup b { padding-right: 8px; font-size: 26px; }
.kos-footer__featured .kos-wm--iup small { font-size: 9px; }
.kos-footer__featured .kos-wm--libelle { font-size: 28px; }
.kos-footer__featured .kos-wm--margriet { font-size: 26px; }
.kos-footer__featured img { display: block; max-height: 32px; width: auto; filter: var(--f-logos); }
.kos-footer .kos-footer__more { margin: 18px 0 0; font-family: var(--kos-sans); font-size: 14px; font-style: normal; color: var(--f-soft); }

/* Our promise: badges in one row; the (i) on each shows a short note on hover or tap */
.kos-footer__trust { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 48px; }
.kos-footer__trust h2 { margin: 0; }
.kos-trust { display: flex; flex-wrap: wrap; gap: 20px 26px; }
.kos-trust li { position: relative; }
.kos-trust__badge { display: block; overflow: hidden; border-radius: 6px; color: var(--kos-heading); }
.kos-trust__badge img { display: block; width: auto; height: 56px; }
.kos-footer a.kos-trust__badge { transition: box-shadow .15s; }
.kos-footer a.kos-trust__badge:hover { box-shadow: 0 0 0 3px var(--f-btn); }
.kos-trust__info { position: absolute; top: -9px; right: -9px; display: grid; place-items: center; width: 22px; height: 22px; padding: 0; border: 2px solid var(--f-bg); border-radius: 50%;
	background: color-mix(in srgb, #fff 18%, var(--f-bg)); color: var(--f-text); font: italic 700 13px/1 var(--kos-serif); cursor: help; transition: background-color .15s, color .15s; }
.kos-trust__info:hover, .kos-trust__info:focus { background: color-mix(in srgb, #fff 32%, var(--f-bg)); color: #fff; }
.kos-trust__info::before { content: ""; position: absolute; inset: -11px; }
.kos-trust__tip { position: absolute; bottom: calc(100% + 14px); left: 0; z-index: 5; width: 280px; padding: 12px 14px; border-radius: 10px; background: #fff;
	color: var(--kos-ink-2); font-family: var(--kos-serif); font-size: 14.5px; line-height: 1.45; text-align: left; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .55);
	opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s, transform .15s, visibility .15s; pointer-events: none; }
.kos-trust__tip strong { display: block; margin-bottom: 2px; font-family: var(--kos-sans); font-size: 14px; color: var(--kos-heading); }
.kos-trust li:hover .kos-trust__tip, .kos-trust__info:focus + .kos-trust__tip { opacity: 1; visibility: visible; transform: none; }

/* Bottom line: small links, copyright and disclaimer, Back to top */
.kos-footer .kos-footer__fine { padding-block: 28px 36px; }
.kos-footer__fine ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; }
.kos-footer__legal { display: flex; align-items: center; justify-content: space-between; gap: 20px 48px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--f-line); }
.kos-footer__fine nav a { font-size: 14.5px; color: var(--f-text); }
.kos-footer__fine nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kos-footer .kos-footer__copy { margin: 0; font-size: 14px; font-weight: 600; color: var(--f-text); }
.kos-footer .kos-footer__disclaimer { max-width: 80ch; margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--f-soft); }
.kos-footer__disclaimer a { color: var(--f-text); text-decoration: underline; text-decoration-color: var(--f-btn); text-underline-offset: 3px; }
.kos-totop { display: inline-flex; flex: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--f-btn); border-radius: 999px;
	background: transparent; color: var(--f-head); font: 650 15px var(--kos-sans); cursor: pointer; }
.kos-totop:hover { border-color: currentColor; }
.kos-totop:focus-visible { outline: 3px solid var(--kos-focus); outline-offset: 3px; }


/* Two columns, two rows: brand | categories, then protection | featured. The second row starts at the same
   height on both sides, so its dividing line and headings line up. */
.kos-footer__wrap > .kos-footer__split { padding-block: 0; }
.kos-footer__split { display: grid; grid-template-columns: 440px minmax(0, 1fr); grid-template-areas: "brand cats" "trust featured"; column-gap: 80px; }
.kos-footer__split .kos-footer__brand { grid-area: brand; padding-block: 56px 40px; }
.kos-footer__split .kos-footer__cats { grid-area: cats; padding-block: 56px 40px; }
.kos-footer__split .kos-footer__trust { grid-area: trust; display: block; padding-block: 36px 40px; border-top: 1px solid var(--f-line); }
.kos-footer__split .kos-footer__featured { grid-area: featured; padding-block: 36px 40px; border-top: 1px solid var(--f-line); }
.kos-footer__split .kos-footer__trust h2 { margin-bottom: 20px; }
.kos-footer__split .kos-footer__cats ul { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }

@media (max-width: 1240px) {
	.kos-footer__split { grid-template-columns: 400px minmax(0, 1fr); column-gap: 56px; }
}
@media (max-width: 1023px) {
	.kos-footer__split { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "trust" "cats" "featured"; }
	.kos-footer__split .kos-footer__brand { padding-bottom: 32px; }
	.kos-footer__split .kos-footer__cats { padding-top: 36px; border-top: 1px solid var(--f-line); }
}
@media (max-width: 640px) {
	.kos-footer__wrap > * { padding-block: 32px; }
	.kos-footer .kos-footer__cats ul { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
	.kos-footer__cats a { font-size: 17px; }
	.kos-footer__split .kos-footer__brand { padding-top: 40px; }
	.kos-footer__featured ul { gap: 16px 30px; }
	.kos-footer__trust { gap: 18px; }
	.kos-trust__tip { width: min(280px, calc(100vw - 48px)); }
	.kos-footer__legal { flex-direction: column; align-items: flex-start; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1240px) {
	.kos-main { column-gap: 24px; }
	.kos-g-long { display: none; }
	.kos-g-short { display: inline; }
}
@media (max-width: 1180px) {
}
@media (max-width: 1023px) {
	.kos-main { grid-template-columns: 1fr auto 1fr; column-gap: 8px; padding-block: 8px; width: calc(100% - 20px); }
	.kos-search, .kos-actions { display: none; }
	/* Phones: follow buttons left · logo centre · Search and Menu right */
	.kos-mfollow { display: flex; flex-direction: column; gap: 6px; justify-self: start; }
	:is(.kos-header, .kos-mini) .kos-mfollow a {
		display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px 0 6px;
		border: 1px solid var(--kos-line); border-radius: 999px; background: #fff;
		font: 600 12.5px/1 var(--kos-sans); color: var(--kos-ink); white-space: nowrap;
	}
	:is(.kos-header, .kos-mini) .kos-mfollow a:hover, :is(.kos-header, .kos-mini) .kos-mfollow a:active { border-color: var(--kos-forest); background: var(--kos-forest-tint); color: var(--kos-ink); }
	.kos-mfollow .kos-ico { width: 18px; height: 18px; }
	.kos-mtools { display: flex; justify-self: end; gap: 2px; }
	.kos-mtools .kos-lbtn { width: 50px; }
	.kos-logo { justify-self: center; }
	.kos-logo img { height: 52px; }
	/* Phones, homepage: compact chips in a grid, as many per row as fit, no scrolling. */
	.kos-cats--home .kos-cats__track { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); grid-auto-columns: auto; gap: 8px; padding: 14px 0; overflow: visible; }
	.kos-cats--home .kos-cats__inner::before, .kos-cats--home .kos-cats__inner::after, .kos-cats--home .kos-cats__arrow { display: none; }
	.kos-cats--home .kos-cats__track a { flex-direction: row; justify-content: flex-start; gap: 10px; height: 48px; padding: 0 10px 0 5px; text-align: left; border: 1px solid var(--kos-line); border-radius: 999px; background: #fff; }
	.kos-cats--home .kos-cats__track img,
	.kos-cats--home .kos-cats__track a:hover img,
	.kos-cats--home .kos-cats__track a[aria-current] img { width: 36px; height: 36px; box-shadow: none; transform: none; }
	:is(.kos-header, .kos-mini) .kos-cats--home .kos-cats__track a span { font-size: 14.5px; line-height: 1.15; }
	.kos-cats--home .kos-cats__track a:hover { border-color: var(--kos-forest); background: var(--kos-forest-tint); }
	.kos-cats--home .kos-cats__track a[aria-current] { border-color: var(--kos-forest); background: var(--kos-forest-tint); box-shadow: inset 0 0 0 1px var(--kos-forest); }
	/* Phones, other pages: the same chip row, slightly smaller, scrolling */
	.kos-cats--chips .kos-cats__track { justify-content: flex-start; padding: 10px 4px; gap: 6px; }
	.kos-cats--chips .kos-cats__track a { height: 44px; padding-right: 14px; }
	.kos-cats--chips .kos-cats__track img { width: 32px; height: 32px; }
	:is(.kos-header, .kos-mini) .kos-cats--chips .kos-cats__track a span { font-size: 15px; }
	.kos-cats__arrow { width: 34px; height: 34px; }
	.kos-cats__arrow[data-dir="-1"] { left: 0; }
	.kos-cats__arrow[data-dir="1"] { right: 0; }
}
/* Large phones and tablets have room either side of the centred logo */
@media (min-width: 480px) and (max-width: 1023px) {
	.kos-logo img { height: 64px; }
}
@media (max-width: 640px) {
}
@media (prefers-reduced-motion: reduce) {
	.kos-cats__track { scroll-behavior: auto; }
	.kos-mini, .kos-mini.is-shown { transition: none; }
}
@media (max-width: 359px) {
	/* Very narrow phones: keep the icons, shorten the words */
	:is(.kos-header, .kos-mini) .kos-mfollow a { font-size: 11.5px; padding: 0 8px 0 5px; }
	.kos-mtools .kos-lbtn { width: 44px; }
	.kos-logo img { height: 44px; }
}

/* ---------- "Proudly featured in" ([kos_featured]): About page and homepage ----------
   A white card: heading, then one tile per site (logo, what they cited, link to the mention) and a "50+ more" tile. */
.kos-featured { padding: 30px 32px 32px; border: 1px solid var(--kos-line); border-radius: 22px; background: #fff; box-shadow: 0 30px 60px -36px rgba(10, 30, 32, .45); font-family: var(--kos-sans); }
.kos-featured__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 24px; margin-bottom: 22px; }
.kos-featured .kos-featured__label { margin: 0; font-family: var(--kos-sans); font-size: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--kos-accent); }
.kos-featured .kos-featured__sub { margin: 0; font-family: var(--kos-serif); font-size: 16px; font-style: italic; line-height: 1.4; color: var(--kos-muted); }
.kos-featured__logos { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
.kos-featured__logos li { margin: 0; padding: 0; }
.kos-featured__logos a, .kos-featured__moretile {
	display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; height: 100%; box-sizing: border-box;
	padding: 20px 14px 16px; border: 1px solid var(--kos-line); border-radius: 16px; text-align: center; text-decoration: none;
}
.kos-featured__logos a { color: var(--kos-heading); transition: border-color .15s, box-shadow .15s, transform .15s; }
.kos-featured__logos a:hover, .kos-featured__logos a:focus-visible { border-color: var(--kos-forest); box-shadow: 0 14px 28px -20px rgba(10, 30, 32, .5); transform: translateY(-2px); }
.kos-featured__mark { display: grid; place-items: center; height: 54px; color: #3B4446; }
.kos-featured__mark img { display: block; max-height: 40px; max-width: 100%; width: auto; }
.kos-featured__note { font-family: var(--kos-serif); font-size: 14px; line-height: 1.4; color: var(--kos-ink-2); }
.kos-featured__see { margin-top: auto; padding-top: 4px; font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--kos-forest); }
.kos-featured__moretile { justify-content: center; border-style: dashed; border-color: #E2C8BD; background: #FBF4F1; }
.kos-featured__moretile strong { font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--kos-accent); }
.kos-featured__moretile span { font-family: var(--kos-serif); font-size: 14px; line-height: 1.4; color: var(--kos-ink-2); }
/* Simple wordmarks until official logo files are added */
.kos-wm { line-height: 1; white-space: nowrap; }
.kos-wm--iup { display: inline-flex; align-items: center; gap: 10px; text-align: left; }
.kos-wm--iup b { padding-right: 10px; border-right: 2px solid currentColor; font-family: Georgia, serif; font-size: 34px; font-weight: 700; letter-spacing: .02em; }
.kos-wm--iup small { font-family: var(--kos-sans); font-size: 11.5px; font-weight: 700; line-height: 1.25; letter-spacing: .04em; text-transform: uppercase; }
.kos-wm--libelle { font-family: Georgia, "Times New Roman", serif; font-size: 34px; font-style: italic; font-weight: 700; letter-spacing: -0.02em; }
.kos-wm--margriet { font-family: Georgia, "Times New Roman", serif; font-size: 32px; font-weight: 400; letter-spacing: .01em; }
@media (max-width: 999px) {
	.kos-featured__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 689px) {
	.kos-featured { padding: 22px 16px 18px; border-radius: 18px; }
	.kos-featured__head { margin-bottom: 16px; }
	.kos-featured__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.kos-featured__logos a, .kos-featured__moretile { padding: 16px 10px 14px; }
	.kos-featured__moretile { grid-column: 1 / -1; flex-direction: row; gap: 14px; text-align: left; }
	.kos-featured__moretile strong { font-size: 34px; }
	.kos-wm--iup b, .kos-wm--libelle { font-size: 27px; }
	.kos-wm--margriet { font-size: 26px; }
}
/* Wordmarks sized to fit the featured tiles */
.kos-featured__mark .kos-wm--iup { gap: 7px; }
.kos-featured__mark .kos-wm--iup b { padding-right: 7px; font-size: 28px; }
.kos-featured__mark .kos-wm--iup small { font-size: 9.5px; }
.kos-featured__mark .kos-wm--libelle { font-size: 30px; }
.kos-featured__mark .kos-wm--margriet { font-size: 28px; }
@media (max-width: 689px) {
	.kos-featured__mark { height: 44px; }
	.kos-featured__mark .kos-wm--iup b { padding-right: 0; border-right: 0; font-size: 26px; }
	.kos-featured__mark .kos-wm--iup small { display: none; }
	.kos-featured__mark .kos-wm--libelle { font-size: 25px; }
	.kos-featured__mark .kos-wm--margriet { font-size: 23px; }
	.kos-featured__note { font-size: 13.5px; }
}

/* ---------- Text links in post and page content ----------
   Links inside the writing (paragraphs, lists, tables) that go to our own guides and pages are in the accent red,
   so readers can tell they stay on the site; links to other websites keep the subtle teal.
   Only text links are touched: the homepage, post grids, buttons, cards and photo credits keep their own styles. */
:is(body.single-post, body.page:not(.home)) .entry-content :is(p, li, td, dd) a:not(.kos-more a, .kos-share a, .kos-side-popular a, .kos-guide a, .kos-author a, .kos-featured a, .kos-lot a, .kos-credit a, .wp-block-button a, .wp-element-button, .wp-block-post a, .wp-block-blocksy-query a) {
	color: var(--kos-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
	text-decoration-color: color-mix(in srgb, var(--kos-accent) 45%, transparent);
}
:is(body.single-post, body.page:not(.home)) .entry-content :is(p, li, td, dd) a:not(.kos-more a, .kos-share a, .kos-side-popular a, .kos-guide a, .kos-author a, .kos-featured a, .kos-lot a, .kos-credit a, .wp-block-button a, .wp-element-button, .wp-block-post a, .wp-block-blocksy-query a):hover {
	color: color-mix(in srgb, var(--kos-accent) 80%, #000); text-decoration-color: currentColor; text-decoration-thickness: 2px;
}
/* External: a full web address that isn't ours */
:is(body.single-post, body.page:not(.home)) .entry-content :is(p, li, td, dd) a[href^="http"]:not([href*="knowoldstuff.com"], [href*="//localhost"]):not(.kos-more a, .kos-share a, .kos-side-popular a, .kos-guide a, .kos-author a, .kos-featured a, .kos-lot a, .kos-credit a, .wp-block-button a, .wp-element-button, .wp-block-post a, .wp-block-blocksy-query a) {
	color: var(--kos-forest); text-decoration-color: color-mix(in srgb, var(--kos-forest) 45%, transparent);
}
:is(body.single-post, body.page:not(.home)) .entry-content :is(p, li, td, dd) a[href^="http"]:not([href*="knowoldstuff.com"], [href*="//localhost"]):not(.kos-more a, .kos-share a, .kos-side-popular a, .kos-guide a, .kos-author a, .kos-featured a, .kos-lot a, .kos-credit a, .wp-block-button a, .wp-element-button, .wp-block-post a, .wp-block-blocksy-query a):hover {
	color: var(--kos-forest-hover); text-decoration-color: currentColor;
}

/* Small cream tag used on guide cards ("12 finds"), the same look as the "Top sale" tags */
.kos-finds-tag { display: inline-block; padding: 3px 9px; border-radius: 6px; background: #F3E6C4; color: #3B2E12; font: 650 13px/1.4 var(--kos-sans); }

/* ---------- Newsletter sign-up (inc/newsletter.php) ----------
   "Mail from the attic": the form beside an old airmail envelope whose postage stamp is a find from the guides,
   with a postmark and cancellation waves. On the homepage it runs full width on a soft paper-to-teal background;
   at the end of posts it's a compact card with a smaller envelope. The art is all HTML/CSS, no extra image files. */
.kos-nl { font-family: var(--kos-sans); }
.kos-nl * { box-sizing: border-box; }
.kos-nl :where(h2, p) { margin: 0; padding: 0; border: 0; }
.kos-nl__inner { display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: 48px; align-items: center; }
.kos-nl h2 { color: var(--kos-heading); font: 800 clamp(30px, 3.4vw, 44px)/1.08 var(--kos-sans); font-stretch: 108%; letter-spacing: -.02em; }
.kos-nl .kos-nl__text { max-width: 40ch; margin-top: 12px; font: 19px/1.55 var(--kos-serif); color: var(--kos-ink-2); }
.kos-nl__form { margin-top: 26px; }
.kos-nl__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.kos-nl__row { display: flex; gap: 10px; max-width: 540px; }
.kos-nl .kos-nl__row :is(input[type="email"], input.kos-nl__name) { flex: 1; min-width: 0; height: 58px; margin: 0; padding: 0 18px; border: 1.5px solid #D5D9D6; border-radius: 12px; background: #fff;
	box-shadow: 0 6px 18px -12px rgba(20, 27, 28, .35); color: var(--kos-ink); font: 17px var(--kos-sans); }
.kos-nl .kos-nl__row input.kos-nl__name { flex: 0 1 34%; }
.kos-nl .kos-nl__row input::placeholder { color: #8A9496; opacity: 1; }
.kos-nl .kos-nl__row input:focus { outline: 0; border-color: var(--kos-forest); box-shadow: 0 0 0 3px rgba(29, 91, 96, .2); }
.kos-nl__row button { flex: none; height: 58px; min-height: 0; padding: 0 28px; border: 0; border-radius: 12px; background: var(--kos-accent); color: #fff; font: 700 17px var(--kos-sans); cursor: pointer; box-shadow: 0 10px 20px -12px rgba(210, 73, 47, .8); transition: background-color .15s, transform .15s; }
.kos-nl__row button:hover { background: color-mix(in srgb, var(--kos-accent) 82%, #000); transform: translateY(-1px); }
.kos-nl__row button:focus-visible { outline: 3px solid var(--kos-focus); outline-offset: 2px; }
.kos-nl__row button[disabled] { opacity: .7; cursor: wait; transform: none; }
.kos-nl .kos-nl__note { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 14.5px; color: var(--kos-muted); }
.kos-nl .kos-nl__note::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='11' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E") center / contain no-repeat; }
.kos-nl .kos-nl__msg { margin-top: 12px; font-size: 16px; font-weight: 650; }
.kos-nl__msg.is-ok { color: var(--kos-forest); }
.kos-nl__msg.is-error { color: #A8321C; }
.kos-nl__hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.kos-nl.is-done .kos-nl__row, .kos-nl.is-done .kos-nl__note { display: none; }

/* The art: a cut-out photo of an airmail letter, with a soft shadow so it lies on the background */
.kos-nl__art img { display: block; width: 100%; height: auto; transform: rotate(-3deg); filter: drop-shadow(0 22px 26px rgba(60, 40, 10, .22)) drop-shadow(0 2px 3px rgba(60, 40, 10, .12)); }

/* Homepage: full width on a light neutral grey, edged top and bottom with airmail stripes (red and blue, like the
   envelope in the photo) so it reads as its own thing between the sections around it */
.kos-nl--home { --nl-red: #D2492F; --nl-blue: #2D6CB0; position: relative; margin: 0 !important; max-width: none !important; padding: 96px 20px; overflow: hidden; background: #F8F8F8; }
.kos-nl--home::before, .kos-nl--home::after { content: ""; position: absolute; left: 0; right: 0; height: 10px;
	background: repeating-linear-gradient(-45deg, var(--nl-red) 0 16px, transparent 16px 28px, var(--nl-blue) 28px 44px, transparent 44px 56px); }
.kos-nl--home::before { top: 0; }
.kos-nl--home::after { bottom: 0; }
.kos-nl--home .kos-nl__inner { display: block; width: min(640px, 100%); margin: 0 auto; text-align: center; }
.kos-nl--home h2 { font-size: clamp(32px, 4vw, 48px); }
.kos-nl--home .kos-nl__text { max-width: 36ch; margin: 14px auto 0; font-size: 20px; }
.kos-nl--home .kos-nl__inside { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 0; margin: 22px 0 0; padding: 0; list-style: none; font: 600 15.5px var(--kos-sans); color: var(--kos-forest); }
.kos-nl--home .kos-nl__inside li { margin: 0; }
.kos-nl--home .kos-nl__inside li + li::before { content: "·"; margin: 0 12px; color: #9AA5A6; }
.kos-nl--home .kos-nl__form { margin-top: 30px; }
.kos-nl--home .kos-nl__row { max-width: 640px; margin: 0 auto; }
.kos-nl--home .kos-nl__note { justify-content: center; }

/* End of a post: a compact card with a smaller photo */
.single-post .entry-content .kos-nl--post { margin: 2.4em 0 0; }
.kos-nl--post .kos-nl__inner { grid-template-columns: minmax(0, 1fr) 210px; gap: 20px; padding: 30px 28px 30px 32px; border-radius: 18px;
	background: radial-gradient(70% 120% at 100% 50%, rgba(210, 73, 47, .10), transparent 70%), linear-gradient(100deg, #F7F2E8, #E8F0EE); }
.kos-nl--post h2 { font-size: 26px; }
.single-post .entry-content .kos-nl h2 { margin: 0; padding: 0; }
.single-post .entry-content .kos-nl p { margin-bottom: 0; }
.single-post .entry-content .kos-nl .kos-nl__note { font-size: 14.5px; line-height: 1.4; } /* not the article's text size */
.kos-nl--post .kos-nl__text { font-size: 17px; }
.kos-nl--post .kos-nl__form { margin-top: 18px; }
.kos-nl--post .kos-nl__row :is(input, button) { height: 52px; }
.kos-nl--post .kos-nl__row { flex-wrap: wrap; }
.kos-nl--post .kos-nl__row input.kos-nl__name { flex: 1 1 140px; }
.kos-nl--post .kos-nl__row input[type="email"] { flex: 2 1 200px; }
.kos-nl--post .kos-nl__row button { flex: 1 1 100%; }

@media (max-width: 960px) {
}
@media (max-width: 700px) {
	.kos-nl--post .kos-nl__inner { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
	.kos-nl--post .kos-nl__art { display: none; }
}
@media (max-width: 520px) {
	.kos-nl--home { padding: 64px 16px; }
	.kos-nl--home::before, .kos-nl--home::after { height: 8px; }
	.kos-nl--home .kos-nl__text { font-size: 18px; }
	.kos-nl--home .kos-nl__inside { flex-direction: column; gap: 6px; font-size: 15px; }
	.kos-nl--home .kos-nl__inside li + li::before { content: none; }
	.kos-nl__row { flex-direction: column; }
	.kos-nl .kos-nl__row :is(input[type="email"], input.kos-nl__name) { flex: none; } /* in a column, flex: 1 would squash its height */
	.kos-nl__row button { width: 100%; }
	.kos-nl h2, .kos-nl--post h2 { font-size: 27px; }
	.kos-nl .kos-nl__text { font-size: 17px; }
}

/* ---------- Search suggestions (assets/site.js): the dropdown under the header and homepage search boxes ---------- */
form:has(> .kos-sg) { position: relative; }
.kos-sg { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60; overflow: hidden; border: 1px solid var(--kos-line); border-radius: 14px;
	background: #fff; box-shadow: 0 24px 50px -18px rgba(17, 47, 50, .35); color: var(--kos-ink); text-align: left; font-family: var(--kos-sans); }
.kos-sg[hidden] { display: none; }
.kos-sg ul { margin: 0; padding: 8px; list-style: none; }
.kos-sg__item { display: grid; grid-template-columns: 52px 1fr auto; gap: 14px; align-items: center; margin: 0; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.kos-sg__item:hover { background: #F2F6F6; }
.kos-sg__item[aria-selected="true"] { background: var(--kos-forest-tint); box-shadow: inset 3px 0 0 var(--kos-forest); }
.kos-sg__item img, .kos-sg__noimg { display: block; width: 52px; height: 52px; border-radius: 8px; object-fit: cover; background: #EEF1F1; }
.kos-sg__item b { display: block; font-size: 16px; font-weight: 600; line-height: 1.3; }
.kos-sg__item mark { background: none; color: var(--kos-forest); font-weight: 800; }
.kos-sg__item small { display: block; margin-top: 2px; font-size: 13px; color: var(--kos-muted); }
.kos-sg__val { padding: 3px 8px; border-radius: 6px; background: #F3E6C4; color: #3B2E12; font-size: 12.5px; font-weight: 650; white-space: nowrap; }
a.kos-sg__all { display: block; padding: 12px 18px; border-top: 1px solid var(--kos-line); color: var(--kos-forest); font-size: 15px; font-weight: 650; text-decoration: none; }
a.kos-sg__all:hover { text-decoration: underline; }
.kos-sg__none { padding: 18px; font-size: 15px; color: var(--kos-muted); }
@media (max-width: 700px) {
	.kos-sg__item { grid-template-columns: 44px 1fr; gap: 12px; }
	.kos-sg__item img, .kos-sg__noimg { width: 44px; height: 44px; }
	.kos-sg__val { display: none; }
}

/* ---------- Author page header (inc/author.php) ---------- */
.kos-ah { background: var(--kos-band); border-bottom: 1px solid var(--kos-line); }
.kos-ah__inner { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 0 40px; align-items: start; max-width: 1100px; margin: 0 auto; padding: 52px 24px 48px; }
.kos-ah__photo { width: 168px; height: 168px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--kos-line); }
.kos-ah__name { margin: 4px 0 0; font: 800 clamp(30px, 4vw, 42px)/1.1 var(--kos-sans); letter-spacing: -0.01em; color: var(--kos-heading); }
.kos-ah__role { margin: 8px 0 0; font: 650 17px/1.4 var(--kos-sans); color: var(--kos-forest); }
.kos-ah__facts { display: flex; flex-wrap: wrap; margin: 10px 0 0; font: 15px/1.5 var(--kos-sans); color: var(--kos-muted); }
.kos-ah__facts span + span::before { content: "·"; margin: 0 8px; color: #A9B3AE; }
.kos-ah__bio { max-width: 68ch; margin-top: 20px; }
.kos-ah__bio p { margin: 0 0 14px; font: 18px/1.7 var(--kos-serif); color: var(--kos-ink); }
.kos-ah__cited { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 6px 0 0; padding-top: 14px; border-top: 1px solid var(--kos-line); font: 15px/1.5 var(--kos-sans); color: var(--kos-muted); }
.kos-ah__cited > span:first-child { margin-right: 4px; font-weight: 650; color: var(--kos-ink); }
.kos-ah__cited a { font-weight: 650; color: var(--kos-forest); text-decoration: none; }
.kos-ah__cited a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kos-ah__sep { color: #A9B3AE; }
.kos-ah__links { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 18px 0 0; font: 650 15.5px/1.4 var(--kos-sans); }
.kos-ah__links a { color: var(--kos-forest); text-decoration: none; }
.kos-ah__links a::after { content: " →"; }
.kos-ah__links a:hover { color: var(--kos-forest-hover); text-decoration: underline; text-underline-offset: 3px; }
.kos-ah__list { max-width: 1100px; margin: 44px auto 0; padding: 0 24px; font: 750 26px/1.2 var(--kos-sans); color: var(--kos-heading); }
@media (max-width: 699px) {
	.kos-ah__inner { grid-template-columns: 1fr; padding: 32px 16px 30px; }
	.kos-ah__photo { width: 96px; height: 96px; margin-bottom: 16px; }
	.kos-ah__bio p { font-size: 17px; }
	.kos-ah__list { margin-top: 32px; padding: 0 16px; font-size: 22px; }
}