/*
Theme Name:   Kendra News (Kadence)
Theme URI:    https://kendranewsaustralia.com.au
Description:  Kendra News Australia's own look, built on Kadence, by PonteWise. Kadence itself is installed and updated
              from WordPress admin; only these changes live in Git (github.com/treetechsuman/kendranewsaustralia).
Author:       PonteWise
Author URI:   https://pontewise.com.au
Template:     kadence
Version:      0.9.10
Requires PHP: 7.4
Text Domain:  kendranews
*/

/* ---------- Colours (from the logo) and type ----------
   Text colours pass WCAG AA (4.5:1) on the backgrounds they sit on. The logo's own red (#df3c2c) is 4.4:1 on
   white, so it is used for accents only; text and buttons use a darker shade of it. */

:root {
	--kn-red: #df3c2c;        /* logo red: accents, lines */
	--kn-red-strong: #c4301f; /* buttons, red text (5.5:1 on white) */
	--kn-red-dark: #b02a1c;   /* hover */
	--kn-red-light: #ff7a6b;  /* on the dark bar (7:1) */
	--kn-blue: #155f99;       /* links (6.7:1 on white); the logo's blue is #1875bb */
	--kn-orange: #ff914d;     /* the logo's underline: decoration only */
	--kn-ink: #14171c;        /* headings, dark bar */
	--kn-text: #2b3038;       /* body text */
	--kn-muted: #5e6673;      /* dates, small print (5.8:1) */
	--kn-line: #e3e6ea;
	--kn-soft: #f4f5f7;       /* section bands */

	/* Kadence's palette, so its own buttons, links and menus use the same colours. */
	--global-palette1: var(--kn-red-strong);
	--global-palette2: var(--kn-red-dark);
	--global-palette3: var(--kn-ink);
	--global-palette4: var(--kn-text);
	--global-palette5: var(--kn-muted);
	--global-palette6: #8b93a0;
	--global-palette7: #edeff2;
	--global-palette8: var(--kn-soft);
	--global-palette9: #ffffff;
	--global-palette-highlight: var(--kn-blue);
	--global-palette-highlight-alt: var(--kn-red-strong);
	--global-palette-btn-bg: var(--kn-red-strong);
	--global-palette-btn-bg-hover: var(--kn-red-dark);
	--global-palette-btn: #ffffff;
	--global-palette-btn-hover: #ffffff;

	--kn-radius: 10px;
	--kn-gap: 1.5rem;
}

/* Mukta covers Nepali (Devanagari) and English in one family, so mixed headlines match. */
body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6,
.site-title,
.main-navigation {
	font-family: "Mukta", "Noto Sans Devanagari", system-ui, sans-serif;
}

body {
	font-size: 1.0625rem; /* 17px: Devanagari's small marks need a little more size than English */
	line-height: 1.75;
	color: var(--kn-text);
	background: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--kn-ink);
	font-weight: 700;
	line-height: 1.35;
}

h1 { font-size: 2.25rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.375rem; }

/* ---------- Header ---------- */

.site-branding a.brand img {
	max-width: 260px;
}

.kn-today {
	font-size: 0.95rem;
	font-weight: 500;
	color: var(--kn-muted);
}

/* The dark menu bar, with the logo's orange as a thin line on top. */
.site-bottom-header-wrap .site-header-row-container-inner {
	background: var(--kn-ink);
	border-top: 3px solid var(--kn-orange);
}

.site-bottom-header-wrap .main-navigation .primary-menu-container > ul > li.menu-item > a {
	color: #ffffff;
	font-weight: 600;
	font-size: 0.98rem;
	padding-left: 0.6em;
	padding-right: 0.6em;
}

.site-bottom-header-wrap .main-navigation .primary-menu-container > ul > li.menu-item > a:hover,
.site-bottom-header-wrap .main-navigation .primary-menu-container > ul > li.current-menu-item > a {
	color: var(--kn-red-light);
}

.site-bottom-header-wrap .search-toggle-open,
.site-bottom-header-wrap .search-toggle-open .kadence-svg-iconset {
	color: #ffffff;
}

.site-bottom-header-wrap .header-button {
	border-radius: 999px;
	padding: 0.4em 1.2em;
	font-weight: 700;
}

/* ---------- News lists (category pages, page 2 onwards) ---------- */

.loop-entry .entry-title {
	font-size: 1.25rem;
	line-height: 1.45;
}

.loop-entry .entry-taxonomies a {
	color: var(--kn-red-strong);
}

/* Category pages: Kadence's big title banner is turned off (functions.php); the title sits above the list,
   styled like the home page's section headings. */
body.archive .content-area {
	margin-top: 2rem;
}

.post-archive-title {
	margin-bottom: 1.5rem;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--kn-line);
}

.post-archive-title .archive-title {
	margin: 0;
	padding-left: 0.75rem;
	border-left: 5px solid var(--kn-red);
	font-size: 1.6rem;
	line-height: 1.25;
}

.post-archive-title .archive-description {
	margin-top: 0.5rem;
	color: var(--kn-muted);
}

/* ---------- Donation button (PressPatron widget) ----------
   The widget sets its colours inline, so these need !important: logo red like the other buttons, no black
   border round the circle or the heart. */
#support-heart {
	background-color: var(--kn-red-strong) !important;
	border: 0 !important;
	box-shadow: 0 4px 12px rgba(20, 23, 28, 0.25) !important;
}

#support-heart:hover {
	background-color: var(--kn-red-dark) !important;
}

#support-heart path[stroke] {
	stroke: none;
}

#pp-support-text {
	border: 0 !important;
	border-radius: 8px;
	font-family: inherit;
	color: var(--kn-text) !important;
}

/* ---------- Front page (templates/news-front.php) ---------- */

/* Kadence leaves 5rem above content; the front page starts straight under the menu bar. */
.content-area.kn-front-area {
	margin-top: 1.75rem;
}

.kn-front {
	padding: 0 0 3rem;
}

.kn-front a {
	text-decoration: none;
}

.kn-block {
	margin-bottom: 3rem;
}

/* Section heading: red marker, title, thin rule, "All" link. */
.kn-head {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.kn-head h2 {
	margin: 0;
	padding-left: 0.75rem;
	border-left: 5px solid var(--kn-red);
	font-size: 1.5rem;
	line-height: 1.2;
}

.kn-head::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--kn-line);
	order: 1;
}

.kn-all {
	order: 2;
	padding: 0.25rem 0.9rem;
	border: 1px solid var(--kn-line);
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--kn-blue);
	background: #ffffff;
}

.kn-all:hover {
	border-color: var(--kn-blue);
}

/* Stories */
.kn-link {
	display: block;
	height: 100%;
	color: var(--kn-ink);
}

.kn-image {
	display: block;
	overflow: hidden;
	border-radius: var(--kn-radius);
	background: var(--kn-soft);
}

.kn-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease;
}

.kn-link:hover .kn-image img {
	transform: scale(1.03);
}

.kn-link:hover .kn-title {
	color: var(--kn-red-strong);
}

.kn-link:focus-visible {
	outline: 3px solid var(--kn-blue);
	outline-offset: 3px;
	border-radius: var(--kn-radius);
}

.kn-title {
	display: block;
	font-weight: 600;
	line-height: 1.45;
	transition: color 0.15s ease;
}

.kn-date {
	display: block;
	margin-top: 0.3rem;
	font-size: 0.85rem;
	color: var(--kn-muted);
}

/* Card: picture above the headline. */
.kn-card .kn-image {
	aspect-ratio: 16 / 10;
}

.kn-card .kn-title {
	margin-top: 0.7rem;
	font-size: 1.125rem;
}

/* Big story ("overlay" in the code): the whole picture, then a large headline below it. Until 10 October 2026 the
   headline sat on the picture, but many of the site's pictures carry their own text, and the two clashed. */
.kn-overlay .kn-image {
	aspect-ratio: 16 / 10; /* the site's pictures are mostly 900 x 550 */
}

.kn-overlay .kn-title {
	margin-top: 0.8rem;
	color: var(--kn-ink);
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Feature: picture beside a large headline. */
.kn-feature .kn-link {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: var(--kn-gap);
	margin-bottom: var(--kn-gap);
	padding: 1rem;
	border-radius: var(--kn-radius);
	background: #ffffff;
}

.kn-feature .kn-image {
	aspect-ratio: 1;
}

.kn-feature .kn-title {
	font-size: 1.6rem;
	line-height: 1.35;
}

/* Row: small picture beside the headline. */
.kn-row .kn-link {
	display: grid;
	grid-template-columns: 112px 1fr;
	gap: 0.9rem;
	align-items: start;
}

.kn-row .kn-image {
	aspect-ratio: 4 / 3;
	border-radius: 8px;
}

.kn-row .kn-title {
	font-size: 1rem;
	font-weight: 500;
}

.kn-row.kn-no-image .kn-link {
	grid-template-columns: 1fr;
}

/* Layouts */
.kn-top,
.kn-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--kn-gap);
}

.kn-top {
	margin-bottom: 3rem;
}

.kn-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--kn-gap);
	margin-bottom: var(--kn-gap);
}

.kn-grid-2 .kn-title {
	font-size: 1.6rem;
}

.kn-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--kn-gap);
}

.kn-list {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.kn-list-2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.25rem var(--kn-gap);
	align-content: start;
}

.kn-lead-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

.kn-lead-list > .kn-overlay .kn-title {
	font-size: 1.6rem;
}

/* Full-width grey band behind Community Events and Culture. */
.kn-band {
	margin-bottom: 3rem;
	padding: 2.5rem 0 0.5rem;
	background: var(--kn-soft);
	box-shadow: 0 0 0 100vmax var(--kn-soft);
	clip-path: inset(0 -100vmax);
}

.kn-two {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 2.5rem;
}

.kn-culture .kn-card {
	margin-bottom: 1.25rem;
}

.kn-two-even {
	grid-template-columns: 1fr 1fr;
}

.kn-after-card {
	margin-top: 1.25rem;
}

.kn-banner {
	margin: 0 0 3rem;
}

.kn-banner img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--kn-radius);
}

/* ---------- Ads (Google AdSense; see functions.php) ----------
   Space is kept for each ad so the page doesn't jump when it loads. A place Google leaves empty closes up. */

.kn-ad {
	margin: 0 auto 3rem;
	text-align: center;
}

.kn-ad-label {
	display: block;
	margin-bottom: 0.35rem;
	color: var(--kn-muted);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kn-ad .adsbygoogle,
.kn-ad-box {
	min-height: 100px;
}

.kn-ad-article-middle .adsbygoogle,
.kn-ad-article-end .adsbygoogle,
.kn-ad-article-middle .kn-ad-box,
.kn-ad-article-end .kn-ad-box {
	min-height: 250px;
}

.kn-ad:has(.adsbygoogle[data-ad-status="unfilled"]) {
	display: none;
}

/* Full width: Kadence's #wrapper is a flex column, where auto margins would shrink the wrapper to its label and
   leave Google a 97px space with no ad that fits. */
.kn-ad-wrap {
	width: 100%;
}

.kn-ad-wrap .kn-ad {
	margin: 1.5rem auto;
}

.kn-ad-article-middle,
.kn-ad-article-end {
	margin: 2rem auto;
	clear: both;
}

.kn-ad-box {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	border: 2px dashed var(--kn-line);
	border-radius: var(--kn-radius);
	background: var(--kn-soft);
	color: var(--kn-muted);
	font-size: 0.9rem;
}

/* ---------- Share buttons (articles) ---------- */

.kn-share {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin: 0 0 1.5rem;
}

.kn-share-bottom {
	margin: 2rem 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--kn-line);
}

.kn-share-head {
	flex-basis: 100%;
	margin: 0 0 0.25rem;
	color: var(--kn-ink);
	font-weight: 700;
}

.entry-content .kn-share-btn,
.kn-share-btn {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0.4rem 0.9rem;
	border: 0;
	border-radius: 999px;
	background: var(--kn-ink);
	color: #fff;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.entry-content .kn-share-btn:hover,
.entry-content .kn-share-btn:focus-visible,
.kn-share-btn:hover,
.kn-share-btn:focus-visible {
	color: #fff;
	filter: brightness(1.15);
	text-decoration: none;
}

/* Brand colours, darkened where needed so white text passes 4.5:1. */
.kn-share-whatsapp { background: #128047; }
.kn-share-facebook { background: #1565c0; }
.kn-share-x { background: #000; }
.kn-share-linkedin { background: #0a66c2; }
.kn-share-email { background: var(--kn-muted); }
.kn-share-native { background: var(--kn-red-strong); }

.entry-content .kn-share-copy,
.kn-share-copy {
	border: 1px solid var(--kn-line);
	background: #fff;
	color: var(--kn-ink);
}

.entry-content .kn-share-copy:hover,
.kn-share-copy:hover {
	color: var(--kn-ink);
	background: var(--kn-soft);
}

/* ---------- Page numbers under lists ---------- */

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.25rem;
	text-align: center;
}

.kn-more {
	text-align: center;
}

.kn-button {
	display: inline-block;
	padding: 0.7em 1.8em;
	border-radius: 999px;
	font-weight: 700;
	color: #ffffff;
	background: var(--kn-red-strong);
}

.kn-front a.kn-button:hover {
	color: #ffffff;
	background: var(--kn-red-dark);
}

/* ---------- Footer ---------- */

.kn-footer {
	padding: 3rem 0 2rem;
	color: #d5d9df;
	background: var(--kn-ink);
	border-top: 4px solid var(--kn-red);
}

.kn-footer-inner {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1.4fr;
	gap: 2.5rem;
}

.kn-footer h2 {
	margin: 0 0 0.8rem;
	font-size: 1.1rem;
	color: #ffffff;
}

.kn-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kn-footer li {
	margin-bottom: 0.4rem;
}

.kn-footer a {
	color: #d5d9df;
	text-decoration: none;
}

.kn-footer a:hover {
	color: var(--kn-red-light);
}

.kn-footer-brand img {
	width: 180px;
	height: auto;
	margin-bottom: 0.8rem;
}

.kn-footer-brand p {
	margin: 0 0 1rem;
	max-width: 34ch;
}

.kn-contact li {
	display: flex;
	gap: 0.6rem;
}

.kn-contact span {
	color: var(--kn-red-light);
}

/* Contact page ([kendranews_contact]) */
.kn-contact-details {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.5rem 1.5rem;
	margin: 1.5rem 0;
}

.kn-contact-details dt {
	color: var(--kn-ink);
	font-weight: 700;
}

.kn-contact-details dd {
	margin: 0;
}

.kn-footer-brand .kn-business {
	margin: 1rem 0 0;
	font-size: 0.875rem;
	line-height: 1.6;
}

/* Newsletter form (Email Subscribers plugin, form 1). The plugin styles it by element ID (teal, Georgia), so
   these rules include an ID too, to win without !important. Its own heading is hidden: ours says the same. */
#kn-subscribe .es-form-field-container[id] {
	width: auto;
	max-width: 400px;
	padding: 0;
	border: 0;
	color: inherit;
}

#kn-subscribe .es-form-field-container p[id] {
	display: none;
}

#kn-subscribe .gjs-cell {
	margin: 0 0 0.6rem;
}

#kn-subscribe input.es-name[id],
#kn-subscribe input.es-email[id] {
	width: 100%;
	padding: 0.6rem 0.8rem;
	border: 1px solid #3a4049;
	border-radius: 6px;
	color: var(--kn-ink);
	background: #ffffff;
	font: inherit;
}

#kn-subscribe label.es-field-label[id] {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	font-family: inherit;
	font-size: 0.9rem;
	color: #d5d9df;
}

#kn-subscribe .es_gdpr a[id],
#kn-subscribe .es_gdpr a font {
	color: var(--kn-red-light);
}

#kn-subscribe input[type="submit"][id] {
	margin-top: 0.4rem;
	padding: 0.6rem 1.6rem;
	border: 0;
	border-radius: 999px;
	color: #ffffff;
	background: var(--kn-red-strong);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}

#kn-subscribe input[type="submit"][id]:hover {
	background: var(--kn-red-dark);
}

.site-footer .site-bottom-footer-wrap {
	color: #aab1bb;
	background: #0d0f13;
}

.site-footer .footer-html {
	font-size: 0.9rem;
}

/* ---------- Smaller screens ---------- */

@media (max-width: 1024px) {
	.kn-two,
	.kn-lead-list {
		grid-template-columns: 1fr;
	}

	.kn-grid-4 {
		grid-template-columns: repeat(2, 1fr);
	}

	.kn-footer-inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 767px) {
	.site-branding a.brand img {
		max-width: 190px;
	}

	.kn-top,
	.kn-grid-2,
	.kn-grid-3,
	.kn-grid-4,
	.kn-list-2,
	.kn-footer-inner {
		grid-template-columns: 1fr;
	}

	.kn-overlay .kn-title,
	.kn-grid-2 .kn-title,
	.kn-lead-list > .kn-overlay .kn-title,
	.kn-feature .kn-title {
		font-size: 1.25rem;
	}

	.kn-feature .kn-link {
		grid-template-columns: 1fr;
	}

	.kn-head h2 {
		font-size: 1.3rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kn-image img,
	.kn-title {
		transition: none;
	}
}

/* ---------- Article picture (Kadence's featured image behind the headline box) ----------
   Kadence puts it in a fixed 2:1 box and crops the rest, so the tops of the client's 16:10 pictures (often text) were
   cut off. The box now takes each picture's own shape; very tall pictures are capped and keep their top. On phones the
   headline box overlaps less, or it would hide a third of the picture. */
.single-post .article-post-thumbnail.kadence-thumbnail-position-behind {
	height: auto !important; /* Kadence sets height 0 and the shape as padding. */
	padding-bottom: 0 !important;
}

.single-post .article-post-thumbnail.kadence-thumbnail-position-behind .post-thumbnail-inner {
	position: static;
}

.single-post .article-post-thumbnail.kadence-thumbnail-position-behind img {
	display: block;
	width: 100%;
	height: auto;
	max-height: min(85vh, 1000px);
	object-fit: cover;
	object-position: top center;
}

@media (max-width: 767px) {
	.single-post .article-post-thumbnail.kadence-thumbnail-position-behind {
		margin-bottom: -1.5rem;
	}
}

/* ---------- Writers, count, "Read more", "Most read" (inc/writers.php, inc/views.php) ---------- */

/* Our byline replaces Kadence's "By <WordPress user>" (often just "admin"). */
.single-post .entry-header .posted-by {
	display: none;
}

.kn-byline {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
}

.kn-byline-photo {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	object-fit: cover;
}

.kn-byline-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.kn-byline-name {
	color: var(--kn-ink);
	font-weight: 700;
}

.kn-byline-role {
	color: var(--kn-muted);
	font-size: 0.875rem;
}

.kn-count {
	margin-right: 0.5rem;
	color: var(--kn-muted);
	font-size: 0.9rem;
}

.kn-count strong {
	color: var(--kn-ink);
	font-size: 1.1rem;
}

.kn-read-more,
.kn-writer-box,
.kn-most-read-block {
	margin: 2rem 0;
}

.kn-read-more {
	padding: 1rem 1.25rem;
	border-left: 5px solid var(--kn-red);
	background: var(--kn-soft);
	border-radius: 0 var(--kn-radius) var(--kn-radius) 0;
}

.kn-read-more-label,
.kn-writer-box-label {
	margin: 0 0 0.5rem;
	color: var(--kn-red-strong);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.entry-content .kn-read-more ul,
.entry-content .kn-most-read {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kn-read-more li + li {
	margin-top: 0.6rem;
}

.kn-read-more a,
.kn-most-read a {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--kn-ink);
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
}

.kn-read-more a:hover,
.kn-most-read a:hover {
	color: var(--kn-red-strong);
}

.kn-read-more-image img,
.kn-most-read-image img {
	display: block;
	width: 72px;
	height: 54px;
	object-fit: cover;
	border-radius: 6px;
}

.kn-writer-box {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	padding: 1.25rem;
	border: 1px solid var(--kn-line);
	border-radius: var(--kn-radius);
}

.kn-writer-box img {
	flex: none;
	width: 88px;
	height: 88px;
	border-radius: 50%;
	object-fit: cover;
}

.kn-writer-box p {
	margin: 0 0 0.5rem;
}

.kn-writer-box-name a {
	color: var(--kn-ink);
	font-size: 1.15rem;
	font-weight: 700;
	text-decoration: none;
}

.kn-writer-box-name span {
	color: var(--kn-muted);
	font-size: 0.9rem;
}

/* "Most read": numbered, two columns on wide screens. */
.kn-most-read {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 0.75rem 2rem;
	counter-reset: kn-most-read;
}

.kn-most-read li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	counter-increment: kn-most-read;
}

.kn-most-read li::before {
	content: counter(kn-most-read);
	flex: none;
	width: 1.6em;
	color: var(--kn-red);
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1;
}

.kn-most-read-head {
	margin: 0 0 1rem;
	padding-left: 0.75rem;
	border-left: 5px solid var(--kn-red);
	font-size: 1.4rem;
}

/* Writer profile and list of writers */
.kn-writer-page {
	padding: 2rem 0;
}

.kn-writer-head {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	align-items: center;
	margin-bottom: 1.5rem;
}

.kn-writer-head h1 {
	margin: 0;
}

.kn-writer-photo {
	width: 140px;
	height: 140px;
	border-radius: 50%;
	object-fit: cover;
}

.kn-writer-role {
	margin: 0.25rem 0 0.5rem;
	color: var(--kn-muted);
	font-size: 1.05rem;
}

.kn-writer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.kn-writer-bio {
	max-width: 70ch;
	margin-bottom: 2rem;
}

.kn-writers {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 1.5rem;
	margin: 1.5rem 0 0;
	padding: 0;
	list-style: none;
}

.kn-writers a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
	text-align: center;
	color: var(--kn-ink);
	text-decoration: none;
}

.kn-writers .kn-writer-photo {
	width: 120px;
	height: 120px;
}

.kn-writer-initial {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--kn-soft);
	color: var(--kn-muted);
	font-size: 2.5rem;
	font-weight: 700;
}

.kn-writers-name {
	font-weight: 700;
}

.kn-writers-role {
	color: var(--kn-muted);
	font-size: 0.875rem;
}

@media (max-width: 600px) {
	.kn-writer-box {
		flex-direction: column;
	}

	.kn-writer-photo {
		width: 110px;
		height: 110px;
	}
}