/*
Theme Name: Silegan
Theme URI: https://themeson.com/silegan/
Author: Themeson
Author URI: https://themeson.com/
Description: A fast, straightforward editorial WordPress theme for news sites, magazines and publishers. Classic (non-block) architecture, no framework and no build step: one stylesheet, one small script. Left content with a right sidebar, a magazine front page, and every colour, font and layout option exposed in the Customizer.
Version: 4.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: silegan
Tags: news, blog, editorial, magazine, two-columns, right-sidebar, custom-colors, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, block-styles, wide-blocks

Silegan is distributed under the GPL. Bundled icon paths are derived from
Tabler Icons (MIT) and Simple Icons (CC0). See readme.txt for credits.

--------------------------------------------------------------------------
  TABLE OF CONTENTS
--------------------------------------------------------------------------
   1. Design tokens
   2. Reset and base
   3. Typography
   4. Links, buttons, forms
   5. Layout shell
   6. Accessibility helpers
   7. Top bar
   8. Masthead
   9. Primary navigation
  10. Mobile navigation and search
  11. Promo / ad slots
  12. Section headings
  13. Front page: lead block
  14. Front page: trending strip
  15. Post feed (list rows)
  16. Post cards (archive grid)
  17. Pagination
  18. Sidebar and widgets
  19. Single post
  20. Comments
  21. Pages, archive headers, search, 404
  22. Footer
  23. Back to top
  24. Editor / block content
  25. Responsive
  26. Reduced motion and print
--------------------------------------------------------------------------
*/

/* ==========================================================================
   1. Design tokens
   Every value below can be overridden by the Customizer, which prints a
   scoped :root block after this stylesheet (see inc/customizer-output.php).
   ========================================================================== */

:root {
	/* Colour: one ink scale, one hairline scale, one accent. */
	--sl-ink: #17171b;
	--sl-ink-soft: #3c3c44;
	--sl-text: #33333a;
	--sl-muted: #6b6b76;
	--sl-line: #e4e4e7;
	--sl-line-soft: #efeff1;
	--sl-bg: #ffffff;
	--sl-surface: #f6f6f7;
	--sl-surface-2: #eeeef0;
	--sl-accent: #c2352b;
	--sl-accent-dark: #9d2a22;
	--sl-accent-wash: #fdf3f2;
	--sl-footer-bg: #f6f6f7;
	--sl-footer-text: #33333a;

	/* Type */
	--sl-font-display: "Newsreader", "Iowan Old Style", "Source Serif 4", Georgia, "Times New Roman", serif;
	--sl-font-body: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--sl-font-read: var(--sl-font-display);
	--sl-base: 17px;
	--sl-scale: 1;
	--sl-lh: 1.65;

	/* Metrics */
	--sl-width: 1200px;
	--sl-sidebar: 320px;
	--sl-gap: clamp(2rem, 3.4vw, 3.5rem);
	--sl-pad: clamp(1rem, 4vw, 2rem);
	--sl-block: clamp(2.75rem, 5vw, 4.25rem);
	--sl-radius: 2px;

	/* One shadow, tinted to the page ground, never pure black. */
	--sl-shadow: 0 1px 2px rgba(23, 23, 27, .05), 0 8px 24px -14px rgba(23, 23, 27, .22);
	--sl-ring: 0 0 0 3px rgba(194, 53, 43, .28);
	--sl-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ==========================================================================
   2. Reset and base
   ========================================================================== */

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

html {
	font-size: var(--sl-base);
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: 6rem;
}

body {
	margin: 0;
	background: var(--sl-bg);
	color: var(--sl-text);
	font-family: var(--sl-font-body);
	font-size: 1rem;
	line-height: var(--sl-lh);
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img, svg, video, iframe, embed, object {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

img { border: 0; }

figure { margin: 0; }

hr {
	border: 0;
	border-top: 1px solid var(--sl-line);
	margin: 2.5rem 0;
}

::selection {
	background: var(--sl-ink);
	color: #fff;
}

/* ==========================================================================
   3. Typography
   Display face carries every headline. Body face carries UI, meta and
   navigation. The article body follows --sl-font-read so a publisher can
   swap long-form reading between serif and sans from the Customizer.
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	margin: 0 0 .6em;
	font-family: var(--sl-font-display);
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -.015em;
	color: var(--sl-ink);
	text-wrap: balance;
}

h1 { font-size: calc(2.35rem * var(--sl-scale)); line-height: 1.1; letter-spacing: -.022em; }
h2 { font-size: calc(1.8rem  * var(--sl-scale)); }
h3 { font-size: calc(1.4rem  * var(--sl-scale)); }
h4 { font-size: calc(1.15rem * var(--sl-scale)); }
h5 { font-size: calc(1rem    * var(--sl-scale)); }
h6 { font-size: calc(.9rem   * var(--sl-scale)); }

p { margin: 0 0 1.35em; }
p:last-child { margin-bottom: 0; }

small { font-size: .8125rem; }

blockquote {
	margin: 2rem 0;
	padding: .25rem 0 .25rem 1.5rem;
	border-left: 3px solid var(--sl-accent);
	font-family: var(--sl-font-display);
	font-size: 1.2em;
	line-height: 1.5;
	color: var(--sl-ink);
}

blockquote cite {
	display: block;
	margin-top: .75rem;
	font-family: var(--sl-font-body);
	font-size: .8125rem;
	font-style: normal;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sl-muted);
}

code, kbd, pre, samp {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: .9em;
}

code {
	padding: .12em .38em;
	background: var(--sl-surface);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
}

pre {
	overflow-x: auto;
	padding: 1.15rem 1.25rem;
	background: var(--sl-surface);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	line-height: 1.6;
}

pre code { padding: 0; background: none; border: 0; }

/* Small caps label used for taxonomy chips and meta rails. */
.sl-label {
	display: inline-block;
	font-family: var(--sl-font-body);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--sl-accent);
}

a.sl-label:hover, a.sl-label:focus-visible { color: var(--sl-accent-dark); }

.sl-meta {
	font-size: .8125rem;
	color: var(--sl-muted);
}

.sl-meta a { color: inherit; border: 0; }
.sl-meta a:hover { color: var(--sl-ink); }

.sl-meta-sep { padding: 0 .5rem; opacity: .5; }

/* ==========================================================================
   4. Links, buttons, forms
   ========================================================================== */

a {
	color: var(--sl-ink);
	text-decoration: none;
	transition: color .18s var(--sl-ease);
}

a:hover { color: var(--sl-accent); }

:where(.entry-content, .comment-content, .textwidget, .widget_text .widget-content) a {
	color: var(--sl-accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	text-decoration-color: rgba(194, 53, 43, .38);
}

:where(.entry-content, .comment-content, .textwidget, .widget_text .widget-content) a:hover {
	color: var(--sl-accent-dark);
	text-decoration-color: currentColor;
}

:focus-visible {
	outline: 2px solid var(--sl-accent);
	outline-offset: 2px;
	border-radius: var(--sl-radius);
}

.sl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .7rem 1.35rem;
	border: 1px solid var(--sl-ink);
	border-radius: var(--sl-radius);
	background: var(--sl-ink);
	color: #fff;
	font-family: var(--sl-font-body);
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .01em;
	white-space: nowrap;
	cursor: pointer;
	transition: background .18s var(--sl-ease), border-color .18s var(--sl-ease), color .18s var(--sl-ease), transform .18s var(--sl-ease);
}

.sl-btn:hover { background: var(--sl-accent); border-color: var(--sl-accent); color: #fff; }
.sl-btn:active { transform: translateY(1px); }

.sl-btn--accent { background: var(--sl-accent); border-color: var(--sl-accent); color: #fff; }
.sl-btn--accent:hover { background: var(--sl-accent-dark); border-color: var(--sl-accent-dark); }

.sl-btn--ghost { background: transparent; color: var(--sl-ink); }
.sl-btn--ghost:hover { background: var(--sl-ink); color: #fff; }

.sl-btn--sm { padding: .5rem 1rem; font-size: .8125rem; }

input[type="text"], input[type="email"], input[type="url"], input[type="password"],
input[type="search"], input[type="number"], input[type="tel"], input[type="date"],
textarea, select {
	width: 100%;
	padding: .68rem .85rem;
	background: var(--sl-bg);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	color: var(--sl-text);
	font-family: inherit;
	font-size: .9375rem;
	line-height: 1.5;
	transition: border-color .18s var(--sl-ease), box-shadow .18s var(--sl-ease);
}

input:focus, textarea:focus, select:focus {
	border-color: var(--sl-accent);
	box-shadow: var(--sl-ring);
	outline: none;
}

/* Placeholders stay above 4.5:1 against white so the field still reads. */
::placeholder { color: #75757f; opacity: 1; }

textarea { min-height: 10rem; resize: vertical; }

label {
	display: block;
	margin-bottom: .4rem;
	font-size: .8125rem;
	font-weight: 600;
	color: var(--sl-ink);
}

.sl-field { margin-bottom: 1.1rem; }
.sl-field .sl-help { margin-top: .35rem; font-size: .75rem; color: var(--sl-muted); }

/* Search form */
.sl-search { position: relative; display: flex; }
.sl-search input[type="search"] { padding-right: 3rem; }

.sl-search button {
	position: absolute;
	inset-inline-end: 0;
	top: 0;
	height: 100%;
	width: 2.9rem;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	color: var(--sl-muted);
	cursor: pointer;
	transition: color .18s var(--sl-ease);
}

.sl-search button:hover { color: var(--sl-accent); }

/* ==========================================================================
   5. Layout shell
   ========================================================================== */

.sl-container {
	width: 100%;
	max-width: var(--sl-width);
	margin-inline: auto;
	padding-inline: var(--sl-pad);
}

.sl-container--narrow { max-width: 820px; }

.site-content { padding-block: var(--sl-block); }

/* Content left, sidebar right. The Customizer can flip or drop the rail. */
.sl-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--sl-sidebar);
	gap: var(--sl-gap);
	align-items: start;
}

.sidebar-left .sl-shell { grid-template-columns: var(--sl-sidebar) minmax(0, 1fr); }
.sidebar-left .sl-sidebar { order: -1; }
.sidebar-none .sl-shell { grid-template-columns: minmax(0, 1fr); }

.sl-main { min-width: 0; }

.sl-block { margin-bottom: var(--sl-block); }
.sl-block:last-child { margin-bottom: 0; }

/* ==========================================================================
   6. Accessibility helpers
   ========================================================================== */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 200;
	padding: .75rem 1.15rem;
	background: var(--sl-ink);
	color: #fff;
	font-size: .875rem;
	font-weight: 600;
	border-radius: var(--sl-radius);
}

.skip-link:focus {
	top: 1rem;
	color: #fff;
}

/* ==========================================================================
   7. Top bar
   ========================================================================== */

.sl-topbar {
	background: var(--sl-ink);
	color: rgba(255, 255, 255, .74);
	font-size: .8125rem;
}

.sl-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 38px;
}

.sl-topbar a { color: rgba(255, 255, 255, .74); }
.sl-topbar a:hover { color: #fff; }

.sl-topbar__menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl-social {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl-social a {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: var(--sl-radius);
	transition: background .18s var(--sl-ease), color .18s var(--sl-ease);
}

.sl-topbar .sl-social a:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* ==========================================================================
   8. Masthead
   ========================================================================== */

.site-header {
	position: relative;
	z-index: 40;
	background: var(--sl-bg);
	border-bottom: 1px solid var(--sl-line);
}

.site-header.is-sticky {
	position: sticky;
	top: 0;
}

.site-header.is-stuck {
	box-shadow: var(--sl-shadow);
}

.sl-masthead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
	min-height: 72px;
}

.sl-brand { display: flex; align-items: center; gap: .85rem; min-width: 0; }

.sl-brand__logo img {
	display: block;
	max-height: 46px;
	width: auto;
}

.sl-brand__title {
	margin: 0;
	font-family: var(--sl-font-display);
	font-size: 1.65rem;
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -.025em;
	color: var(--sl-ink);
}

.sl-brand__title a { color: inherit; }
.sl-brand__title a:hover { color: var(--sl-accent); }

.sl-brand__tagline {
	margin: .15rem 0 0;
	font-size: .75rem;
	letter-spacing: .04em;
	color: var(--sl-muted);
}

.sl-masthead__actions {
	display: flex;
	align-items: center;
	gap: .35rem;
	margin-inline-start: auto;
}

.sl-iconbtn {
	display: grid;
	place-items: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--sl-radius);
	color: var(--sl-ink);
	cursor: pointer;
	transition: background .18s var(--sl-ease), color .18s var(--sl-ease);
}

.sl-iconbtn:hover { background: var(--sl-surface); color: var(--sl-accent); }

/* ==========================================================================
   9. Primary navigation
   ========================================================================== */

.sl-nav { display: flex; }

.sl-nav ul {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl-nav li { position: relative; }

.sl-nav a {
	display: block;
	padding: .6rem .85rem;
	font-size: .875rem;
	font-weight: 600;
	letter-spacing: .005em;
	color: var(--sl-ink);
}

.nav-uppercase .sl-nav > ul > li > a {
	font-size: .78rem;
	letter-spacing: .085em;
	text-transform: uppercase;
}

.sl-nav > ul > li > a { position: relative; }

.sl-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: .85rem;
	right: .85rem;
	bottom: .15rem;
	height: 2px;
	background: var(--sl-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .22s var(--sl-ease);
}

.sl-nav > ul > li:hover > a::after,
.sl-nav > ul > li:focus-within > a::after,
.sl-nav > ul > li.current-menu-item > a::after,
.sl-nav > ul > li.current-menu-ancestor > a::after { transform: scaleX(1); }

.sl-nav > ul > li.current-menu-item > a,
.sl-nav > ul > li.current-menu-ancestor > a { color: var(--sl-accent); }

/* Dropdowns */
.sl-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 50;
	display: block;
	min-width: 14rem;
	padding: .4rem 0;
	background: var(--sl-bg);
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	box-shadow: var(--sl-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity .18s var(--sl-ease), transform .18s var(--sl-ease), visibility .18s;
}

.sl-nav li:hover > .sub-menu,
.sl-nav li:focus-within > .sub-menu,
.sl-nav li.is-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sl-nav .sub-menu li { display: block; }

.sl-nav .sub-menu a {
	padding: .55rem 1.1rem;
	font-size: .875rem;
	font-weight: 500;
	text-transform: none;
	letter-spacing: 0;
}

.sl-nav .sub-menu a:hover { background: var(--sl-surface); color: var(--sl-accent); }

.sl-nav .sub-menu .sub-menu { top: -.4rem; left: 100%; }

.sl-nav .sl-submenu-toggle {
	display: none;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.sl-nav .menu-item-has-children > a > .sl-caret { margin-inline-start: .3rem; opacity: .6; }

/* ==========================================================================
   10. Mobile navigation and search
   ========================================================================== */

.sl-nav-toggle { display: none; }

.sl-mobile-nav {
	display: none;
	border-top: 1px solid var(--sl-line);
	background: var(--sl-bg);
	max-height: min(70vh, 32rem);
	overflow-y: auto;
}

.sl-mobile-nav.is-open { display: block; }

.sl-mobile-nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl-mobile-nav li { border-bottom: 1px solid var(--sl-line-soft); }
.sl-mobile-nav li:last-child { border-bottom: 0; }

.sl-mobile-nav a {
	display: block;
	padding: .85rem 0;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--sl-ink);
}

.sl-mobile-nav .sub-menu { padding-inline-start: 1rem; }
.sl-mobile-nav .sub-menu a { font-weight: 500; color: var(--sl-text); }

.sl-searchbar {
	display: none;
	padding-block: 1rem;
	border-top: 1px solid var(--sl-line);
	background: var(--sl-surface);
}

.sl-searchbar.is-open { display: block; }

/* ==========================================================================
   11. Promo / ad slots
   ========================================================================== */

.sl-promo {
	display: flex;
	justify-content: center;
	padding-block: 1.25rem;
}

.sl-promo--header { border-bottom: 1px solid var(--sl-line); background: var(--sl-surface); }
.sl-promo--inline { margin-block: 2.25rem; }
.sl-promo .widget { margin: 0; }
.sl-promo .widget-title { display: none; }

/* ==========================================================================
   12. Section headings
   ========================================================================== */

.sl-section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1.5rem;
	margin-bottom: 1.6rem;
	padding-bottom: .7rem;
	border-bottom: 2px solid var(--sl-ink);
}

.sl-section-head h2 {
	margin: 0;
	font-size: calc(1.35rem * var(--sl-scale));
	letter-spacing: -.01em;
}

.sl-section-head .sl-section-link {
	font-family: var(--sl-font-body);
	font-size: .8125rem;
	font-weight: 600;
	color: var(--sl-muted);
	white-space: nowrap;
}

.sl-section-head .sl-section-link:hover { color: var(--sl-accent); }

/* ==========================================================================
   13. Front page: lead block
   One dominant story, two supporting stories stacked beside it.
   ========================================================================== */

.sl-lead {
	display: grid;
	grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
	gap: var(--sl-gap);
	align-items: start;
}

.sl-lead__side {
	display: grid;
	gap: 1.35rem;
	align-content: start;
}

.sl-lead__side .sl-story + .sl-story {
	padding-top: 1.35rem;
	border-top: 1px solid var(--sl-line);
}

/* Story: the shared editorial unit. No card chrome, spacing does the work. */
.sl-story__media {
	display: block;
	overflow: hidden;
	margin-bottom: .95rem;
	background: var(--sl-surface);
	border-radius: var(--sl-radius);
	aspect-ratio: 16 / 10;
}

.sl-story__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--sl-ease);
}

.sl-story__media:hover img { transform: scale(1.03); }

.sl-story__title {
	margin: .5rem 0 .5rem;
	font-size: calc(1.3rem * var(--sl-scale));
	line-height: 1.2;
}

.sl-story__excerpt {
	margin: 0 0 .7rem;
	font-size: .9375rem;
	color: var(--sl-ink-soft);
}

.sl-lead__feature .sl-story__media { aspect-ratio: 16 / 9; margin-bottom: 1.25rem; }

.sl-lead__feature .sl-story__title {
	font-size: calc(2.4rem * var(--sl-scale));
	line-height: 1.08;
	letter-spacing: -.024em;
}

.sl-lead__feature .sl-story__excerpt {
	font-size: 1.0625rem;
	max-width: 60ch;
}

.sl-lead__side .sl-story__media { aspect-ratio: 16 / 9; margin-bottom: .8rem; }
.sl-lead__side .sl-story__title { font-size: calc(1.15rem * var(--sl-scale)); }

/* ==========================================================================
   14. Front page: trending strip
   ========================================================================== */

.sl-trending {
	padding: 1.5rem 0 0;
	border-top: 2px solid var(--sl-ink);
}

.sl-trending__head {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: 1.1rem;
}

.sl-trending__head h2 {
	margin: 0;
	font-family: var(--sl-font-body);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sl-ink);
}

.sl-trending__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: sl-rank;
}

.sl-trending__list li {
	display: flex;
	flex-direction: column;
	counter-increment: sl-rank;
	padding-inline: 1.25rem;
	border-inline-start: 1px solid var(--sl-line);
}

.sl-trending__list li:first-child { padding-inline-start: 0; border-inline-start: 0; }
.sl-trending__list li:last-child { padding-inline-end: 0; }

.sl-trending__list li::before {
	content: counter(sl-rank);
	display: block;
	margin-bottom: .35rem;
	font-family: var(--sl-font-display);
	font-size: 1.6rem;
	font-weight: 600;
	line-height: 1;
	color: var(--sl-accent);
}

.sl-trending__list a {
	font-family: var(--sl-font-display);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.28;
	color: var(--sl-ink);
}

.sl-trending__list a:hover { color: var(--sl-accent); }

/* margin-top:auto lands every date on one line across ragged headlines. */
.sl-trending__list .sl-meta { margin-top: auto; padding-top: .5rem; font-size: .75rem; }

/* ==========================================================================
   15. Post feed (list rows)
   ========================================================================== */

.sl-feed { display: grid; gap: 1.9rem; }

.sl-feed .sl-row {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	gap: 1.5rem;
	padding-bottom: 1.9rem;
	border-bottom: 1px solid var(--sl-line);
}

.sl-feed .sl-row:last-child { padding-bottom: 0; border-bottom: 0; }
.sl-feed .sl-row.no-thumb { grid-template-columns: minmax(0, 1fr); }

.sl-row__media {
	display: block;
	overflow: hidden;
	background: var(--sl-surface);
	border-radius: var(--sl-radius);
	aspect-ratio: 4 / 3;
}

.sl-row__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--sl-ease);
}

.sl-row__media:hover img { transform: scale(1.03); }

.sl-row__body { min-width: 0; }

.sl-row__title {
	margin: .45rem 0 .55rem;
	font-size: calc(1.35rem * var(--sl-scale));
	line-height: 1.2;
}

.sl-row__excerpt {
	margin: 0 0 .7rem;
	font-size: .9375rem;
	color: var(--sl-ink-soft);
}

.sl-sticky-flag {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	margin-inline-start: .5rem;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sl-muted);
}

/* ==========================================================================
   16. Post cards (archive grid)
   ========================================================================== */

.sl-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
	gap: var(--sl-gap) 1.75rem;
}

.sl-card__media {
	display: block;
	overflow: hidden;
	margin-bottom: .9rem;
	background: var(--sl-surface);
	border-radius: var(--sl-radius);
	aspect-ratio: 3 / 2;
}

.sl-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s var(--sl-ease);
}

.sl-card__media:hover img { transform: scale(1.03); }

.sl-card__title {
	margin: .45rem 0 .5rem;
	font-size: calc(1.15rem * var(--sl-scale));
	line-height: 1.24;
}

.sl-card__excerpt { margin: 0; font-size: .875rem; color: var(--sl-ink-soft); }

/* ==========================================================================
   17. Pagination
   ========================================================================== */

.sl-pagination {
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--sl-line);
}

.sl-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
}

.sl-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding-inline: .6rem;
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	font-size: .875rem;
	font-weight: 600;
	color: var(--sl-ink);
	transition: background .18s var(--sl-ease), border-color .18s var(--sl-ease), color .18s var(--sl-ease);
}

.sl-pagination .page-numbers:hover { border-color: var(--sl-ink); }

.sl-pagination .page-numbers.current {
	background: var(--sl-ink);
	border-color: var(--sl-ink);
	color: #fff;
}

.sl-pagination .page-numbers.dots { border-color: transparent; }

.sl-post-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
	margin-top: 2.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--sl-line);
}

.sl-post-nav__item .sl-label { display: block; margin-bottom: .4rem; color: var(--sl-muted); }
.sl-post-nav__item--next { text-align: end; }

.sl-post-nav__title {
	font-family: var(--sl-font-display);
	font-size: 1.05rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--sl-ink);
}

.sl-post-nav__item a:hover .sl-post-nav__title { color: var(--sl-accent); }

/* ==========================================================================
   18. Sidebar and widgets
   ========================================================================== */

.sl-sidebar { min-width: 0; }
.sl-sidebar.is-sticky { position: sticky; top: 6rem; }

.widget {
	margin-bottom: 2.25rem;
	font-size: .9375rem;
}

.widget:last-child { margin-bottom: 0; }

.widget-title {
	margin: 0 0 1rem;
	padding-bottom: .55rem;
	border-bottom: 2px solid var(--sl-ink);
	font-family: var(--sl-font-body);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sl-ink);
}

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

.widget ul li {
	padding: .55rem 0;
	border-bottom: 1px solid var(--sl-line-soft);
}

.widget ul li:last-child { border-bottom: 0; }

.widget ul .children,
.widget ul .sub-menu {
	margin-top: .55rem;
	padding-inline-start: .9rem;
	border-inline-start: 1px solid var(--sl-line);
}

.widget ul li a { color: var(--sl-ink-soft); font-weight: 500; }
.widget ul li a:hover { color: var(--sl-accent); }

.widget_categories li,
.widget_archive li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.widget select { font-size: .875rem; }

.widget_tag_cloud .tagcloud {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
}

.widget_tag_cloud a {
	display: inline-block;
	padding: .3rem .65rem;
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	font-size: .75rem !important;
	font-weight: 600;
	color: var(--sl-ink-soft);
}

.widget_tag_cloud a:hover { border-color: var(--sl-ink); color: var(--sl-ink); }

/* Bundled recent-posts widget */
.sl-postlist { display: grid; gap: 1rem; }

.sl-postlist__item {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr);
	gap: .85rem;
	padding: 0 0 1rem;
	border-bottom: 1px solid var(--sl-line-soft);
}

.sl-postlist__item:last-child { padding-bottom: 0; border-bottom: 0; }
.sl-postlist__item.no-thumb { grid-template-columns: minmax(0, 1fr); }

.sl-postlist__media {
	overflow: hidden;
	background: var(--sl-surface);
	border-radius: var(--sl-radius);
	aspect-ratio: 1 / 1;
}

.sl-postlist__media img { width: 100%; height: 100%; object-fit: cover; }

.sl-postlist__title {
	display: block;
	font-family: var(--sl-font-display);
	font-size: .975rem;
	font-weight: 600;
	line-height: 1.28;
	color: var(--sl-ink);
}

.sl-postlist__title:hover { color: var(--sl-accent); }
.sl-postlist__item .sl-meta { margin-top: .25rem; font-size: .75rem; }

/* ==========================================================================
   19. Single post
   ========================================================================== */

.sl-entry-header { margin-bottom: 1.75rem; }

.sl-entry-header h1 {
	margin: .6rem 0 .8rem;
	font-size: calc(2.6rem * var(--sl-scale));
	line-height: 1.06;
	letter-spacing: -.026em;
}

.sl-entry-lead {
	margin: 0 0 1.15rem;
	font-family: var(--sl-font-read);
	font-size: 1.2rem;
	line-height: 1.55;
	color: var(--sl-ink-soft);
	max-width: 62ch;
}

.sl-entry-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
	padding-block: .9rem;
	border-top: 1px solid var(--sl-line);
	border-bottom: 1px solid var(--sl-line);
	font-size: .8125rem;
	color: var(--sl-muted);
}

.sl-entry-byline img {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
}

.sl-entry-byline strong { color: var(--sl-ink); font-weight: 600; }

.sl-featured {
	margin: 1.75rem 0;
	border-radius: var(--sl-radius);
	overflow: hidden;
	background: var(--sl-surface);
}

.sl-featured img { width: 100%; display: block; }

.sl-featured figcaption {
	padding: .6rem .1rem 0;
	font-size: .75rem;
	color: var(--sl-muted);
}

.entry-content {
	font-family: var(--sl-font-read);
	font-size: 1.125rem;
	line-height: 1.75;
	color: var(--sl-text);
}

.entry-content > * { max-width: 68ch; }
.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > figure,
.entry-content > .wp-block-image,
.entry-content > .wp-block-gallery,
.entry-content > .wp-block-embed,
.entry-content > table,
.entry-content > pre { max-width: 100%; }

.entry-content h2 {
	margin-top: 2.4rem;
	font-size: calc(1.65rem * var(--sl-scale));
}

.entry-content h3 {
	margin-top: 2rem;
	font-size: calc(1.3rem * var(--sl-scale));
}

.entry-content ul, .entry-content ol { margin: 0 0 1.35em; padding-inline-start: 1.4em; }
.entry-content li { margin-bottom: .5em; }
.entry-content li::marker { color: var(--sl-accent); }

.entry-content img { border-radius: var(--sl-radius); }

.entry-content figcaption {
	margin-top: .55rem;
	font-family: var(--sl-font-body);
	font-size: .8125rem;
	color: var(--sl-muted);
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-family: var(--sl-font-body);
	font-size: .9375rem;
}

.entry-content th, .entry-content td {
	padding: .7rem .85rem;
	border-bottom: 1px solid var(--sl-line);
	text-align: start;
}

.entry-content th { font-weight: 600; color: var(--sl-ink); }

.sl-entry-footer {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--sl-line);
}

.sl-tags { display: flex; flex-wrap: wrap; gap: .4rem; }

.sl-tags a {
	display: inline-block;
	padding: .32rem .7rem;
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	font-size: .75rem;
	font-weight: 600;
	color: var(--sl-ink-soft);
}

.sl-tags a:hover { border-color: var(--sl-ink); color: var(--sl-ink); }

.sl-share {
	display: flex;
	align-items: center;
	gap: .5rem;
	margin-top: 1.25rem;
}

.sl-share a {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 1px solid var(--sl-line);
	border-radius: var(--sl-radius);
	color: var(--sl-ink-soft);
	transition: background .18s var(--sl-ease), border-color .18s var(--sl-ease), color .18s var(--sl-ease);
}

.sl-share a:hover { background: var(--sl-ink); border-color: var(--sl-ink); color: #fff; }

.sl-author {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 1.25rem;
	margin-top: 2.5rem;
	padding: 1.5rem;
	background: var(--sl-surface);
	border-radius: var(--sl-radius);
}

.sl-author img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.sl-author h3 { margin: 0 0 .35rem; font-size: 1.1rem; }
.sl-author p { margin: 0; font-size: .9375rem; color: var(--sl-ink-soft); }

.sl-related { margin-top: 3rem; }
.sl-related .sl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ==========================================================================
   20. Comments
   ========================================================================== */

.comments-area { margin-top: 3rem; }

.comment-list {
	margin: 0 0 2.5rem;
	padding: 0;
	list-style: none;
}

.comment-list .children {
	margin: 1.5rem 0 0;
	padding-inline-start: clamp(1rem, 4vw, 2.75rem);
	list-style: none;
	border-inline-start: 1px solid var(--sl-line);
}

.comment-body {
	padding-bottom: 1.5rem;
	margin-bottom: 1.5rem;
	border-bottom: 1px solid var(--sl-line-soft);
}

.comment-meta {
	display: flex;
	align-items: center;
	gap: .7rem;
	margin-bottom: .7rem;
}

.comment-author img { border-radius: 50%; }
.comment-author .fn { font-style: normal; font-weight: 600; color: var(--sl-ink); }

.comment-metadata { font-size: .75rem; color: var(--sl-muted); }
.comment-content { font-size: .9375rem; }
.comment-content p:last-child { margin-bottom: 0; }

.reply {
	margin-top: .6rem;
	font-size: .8125rem;
	font-weight: 600;
}

.comment-respond { margin-top: 2rem; }

.comment-reply-title {
	margin-bottom: 1.1rem;
	font-size: 1.35rem;
}

.comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	font-size: .8125rem;
}

.comment-form-cookies-consent label { margin: 0; font-weight: 400; color: var(--sl-muted); }
.comment-form-cookies-consent input { width: auto; }

.comment-form .sl-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

/* ==========================================================================
   21. Pages, archive headers, search, 404
   ========================================================================== */

.sl-page-header {
	margin-bottom: 2.25rem;
	padding-bottom: 1.25rem;
	border-bottom: 2px solid var(--sl-ink);
}

.sl-page-header h1 {
	margin: 0;
	font-size: calc(2.15rem * var(--sl-scale));
}

.sl-page-header .sl-archive-desc {
	margin: .7rem 0 0;
	font-size: 1rem;
	color: var(--sl-muted);
	max-width: 62ch;
}

.sl-breadcrumb {
	margin-bottom: .9rem;
	font-size: .75rem;
	color: var(--sl-muted);
}

.sl-breadcrumb a { color: var(--sl-muted); }
.sl-breadcrumb a:hover { color: var(--sl-accent); }
.sl-breadcrumb span[aria-current] { color: var(--sl-ink); }

.sl-empty {
	padding: 3rem 0;
	max-width: 52ch;
}

.sl-empty h2 { font-size: 1.6rem; }
.sl-empty p { color: var(--sl-muted); }
.sl-empty .sl-search { margin-top: 1.25rem; max-width: 24rem; }

.sl-404 {
	padding-block: clamp(3rem, 8vw, 6rem);
	text-align: start;
}

.sl-404__code {
	font-family: var(--sl-font-display);
	font-size: clamp(4rem, 14vw, 8rem);
	font-weight: 600;
	line-height: .9;
	letter-spacing: -.04em;
	color: var(--sl-accent);
}

.sl-404 h1 { margin-top: 1rem; font-size: calc(2rem * var(--sl-scale)); }
.sl-404 p { max-width: 50ch; color: var(--sl-muted); }

/* ==========================================================================
   22. Footer
   ========================================================================== */

.site-footer {
	margin-top: var(--sl-block);
	background: var(--sl-footer-bg);
	color: var(--sl-footer-text);
	border-top: 2px solid var(--sl-ink);
}

.sl-footer-widgets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: var(--sl-gap);
	padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.site-footer .widget-title { border-bottom-color: currentColor; }
.site-footer .widget ul li { border-bottom-color: rgba(23, 23, 27, .08); }

.sl-footer-brand__title {
	margin: 0 0 .6rem;
	font-family: var(--sl-font-display);
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: -.02em;
}

.sl-footer-brand p {
	font-size: .9375rem;
	color: var(--sl-muted);
	max-width: 34ch;
}

.sl-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.25rem;
	border-top: 1px solid var(--sl-line);
	font-size: .8125rem;
	color: var(--sl-muted);
}

.sl-footer-bottom p { margin: 0; }

.sl-footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl-footer-menu a { color: var(--sl-muted); font-weight: 500; }
.sl-footer-menu a:hover { color: var(--sl-accent); }

/* ==========================================================================
   23. Back to top
   ========================================================================== */

.sl-totop {
	position: fixed;
	inset-block-end: 1.5rem;
	inset-inline-end: 1.5rem;
	z-index: 60;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--sl-ink);
	border: 0;
	border-radius: var(--sl-radius);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .22s var(--sl-ease), transform .22s var(--sl-ease), visibility .22s, background .18s var(--sl-ease);
}

.sl-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.sl-totop:hover { background: var(--sl-accent); }

/* ==========================================================================
   24. Editor / block content
   ========================================================================== */

.alignleft { float: left; margin: .35rem 1.75rem 1.25rem 0; }
.alignright { float: right; margin: .35rem 0 1.25rem 1.75rem; }
.aligncenter { display: block; margin-inline: auto; }

.entry-content .alignwide { width: min(100%, 1000px); }

.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: .8125rem; color: var(--sl-muted); }
.sticky .sl-row__title::after { content: ""; }
.bypostauthor > .comment-body .fn::after {
	content: "Author";
	margin-inline-start: .45rem;
	padding: .1rem .4rem;
	background: var(--sl-accent-wash);
	border-radius: var(--sl-radius);
	font-size: .625rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sl-accent-dark);
}

.wp-block-button__link { border-radius: var(--sl-radius); }
.wp-block-separator { border-top: 1px solid var(--sl-line); }
.wp-block-pullquote { border-top: 2px solid var(--sl-ink); border-bottom: 2px solid var(--sl-ink); }

/* ==========================================================================
   24b. Runtime helpers
   ========================================================================== */

/* A one-pixel marker the script observes instead of listening to scroll. */
.sl-sentinel {
	position: absolute;
	top: 0;
	left: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

.sl-icon { flex: none; }
.sl-caret { vertical-align: -2px; }
.sl-404 .sl-search { max-width: 24rem; }
.sl-footer-col { min-width: 0; }

/* Menu items rendered by the page fallback before a menu is assigned. */
.sl-nav .page_item_has_children > a::after { content: none; }

/* ==========================================================================
   25. Responsive
   Every multi-column layout collapses explicitly. Nothing is left to chance.
   ========================================================================== */

@media (max-width: 1024px) {
	.sl-shell,
	.sidebar-left .sl-shell { grid-template-columns: minmax(0, 1fr); }
	.sl-sidebar.is-sticky { position: static; }
	.sidebar-left .sl-sidebar { order: 0; }
	.sl-sidebar { padding-top: var(--sl-block); border-top: 2px solid var(--sl-ink); }

	.sl-trending__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.35rem; }
	.sl-trending__list li:nth-child(3n + 1) { padding-inline-start: 0; border-inline-start: 0; }
}

@media (max-width: 860px) {
	.sl-nav, .sl-masthead__actions .sl-search-desktop { display: none; }
	.sl-nav-toggle { display: grid; }
	.sl-lead { grid-template-columns: minmax(0, 1fr); }
	.sl-lead__side {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding-top: 1.5rem;
		border-top: 1px solid var(--sl-line);
	}
	.sl-lead__side .sl-story + .sl-story { padding-top: 0; border-top: 0; }
	.sl-post-nav { grid-template-columns: minmax(0, 1fr); }
	.sl-post-nav__item--next { text-align: start; }
	.sl-related .sl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	:root { --sl-base: 16px; }
	.sl-masthead { min-height: 62px; }
	.sl-brand__title { font-size: 1.35rem; }
	.sl-lead__feature .sl-story__title { font-size: calc(1.8rem * var(--sl-scale)); }
	.sl-entry-header h1 { font-size: calc(1.9rem * var(--sl-scale)); }
	.sl-lead__side { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
	.sl-lead__side .sl-story + .sl-story { padding-top: 1.25rem; border-top: 1px solid var(--sl-line); }
	.sl-trending__list { grid-template-columns: minmax(0, 1fr); }
	.sl-trending__list li { padding-inline: 0; border-inline-start: 0; }
	.sl-feed .sl-row { grid-template-columns: 116px minmax(0, 1fr); gap: 1rem; }
	.sl-feed .sl-row .sl-row__excerpt { display: none; }
	.sl-feed .sl-row__title { font-size: calc(1.075rem * var(--sl-scale)); }
	.entry-content { font-size: 1.0625rem; }
	.sl-related .sl-grid { grid-template-columns: minmax(0, 1fr); }
	.sl-author { grid-template-columns: minmax(0, 1fr); }
	.comment-form .sl-grid-2 { grid-template-columns: minmax(0, 1fr); }
	.alignleft, .alignright { float: none; margin: 1.25rem 0; }
}

/* ==========================================================================
   26. Reduced motion and print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.sl-story__media:hover img,
	.sl-row__media:hover img,
	.sl-card__media:hover img { transform: none; }
}

@media print {
	.site-header, .site-footer, .sl-sidebar, .sl-totop, .sl-promo, .comments-area, .sl-post-nav { display: none !important; }
	body { font-size: 12pt; }
	.entry-content { font-size: 12pt; }
	a { text-decoration: underline; }
}