/* ==========================================================================
   SFcrowsnest — ColorMag Pro child redesign
   File: assets/css/sfcrowsnest-redesign.css
   --------------------------------------------------------------------------
   This stylesheet ONLY adds an editorial layer on top of ColorMag Pro.
   It never replaces the parent's base CSS. It targets ColorMag's real,
   stable class names (#cm-header-1, #cm-primary-menu, #cm-secondary, etc.)
   and leans on low-specificity selectors so future ColorMag updates are
   unlikely to break it.

   Everything is driven from the CSS custom properties in section 0, so the
   whole palette / rhythm can be retuned from one place.

   SECTIONS
     0.  Design tokens (colours, type, spacing)
     1.  Base typography & links
     2.  Layout container & vertical rhythm
     3.  Top utility strip
     4.  Masthead / site branding (the big confident wordmark)
     5.  Primary navigation bar
     6.  Dropdown sub-menus
     7.  Mobile menu / toggles
     8.  Article & content typography
     9.  Post meta & category labels
     10. Sidebar widgets ("recent stories")
     11. "Browse by" grouped blocks (custom component)
     12. Footer light touch-ups
     13. Accessibility (focus states)
     14. Responsive (tablet / mobile)
   ========================================================================== */


/* ==========================================================================
   0. DESIGN TOKENS
   ========================================================================== */
:root {
	/* Brand colours, sampled from the SFcrowsnest masthead */
	--sfc-oxblood:       #9c2b1b;   /* primary accent — the wordmark red      */
	--sfc-oxblood-deep:  #7d2014;   /* hover / pressed                         */
	--sfc-indigo:        #37287a;   /* the navy ribbon — used sparingly        */

	/* Editorial neutrals (warm ink on warm paper) */
	--sfc-ink:           #1c1b18;   /* primary text & dark nav bar             */
	--sfc-ink-soft:      #3a3833;   /* secondary text                          */
	--sfc-muted:         #6f685c;   /* meta, captions                          */
	--sfc-paper:         #fbf8f3;   /* masthead / page warmth                  */
	--sfc-paper-2:       #f3efe6;   /* hover wash, nav link on ink             */
	--sfc-rule:          #e4ddd0;   /* hairlines                               */
	--sfc-rule-2:        #d6cdba;   /* stronger hairlines                      */
	--sfc-white:         #ffffff;

	/* Type — system stacks only, no web fonts.
	   Serif for headings/masthead (classic magazine), sans for body. */
	--sfc-serif: "Iowan Old Style", "Palatino Linotype", "Book Antiqua",
	             Palatino, Georgia, "Times New Roman", serif;
	--sfc-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI",
	             "Helvetica Neue", Arial, sans-serif;

	/* Rhythm */
	--sfc-container: 1200px;
	--sfc-gap:       40px;
	--sfc-radius:    3px;   /* restrained — this is a magazine, not an app */
	--sfc-shadow:    0 14px 34px rgba(28, 27, 24, 0.14);
}


/* ==========================================================================
   1. BASE TYPOGRAPHY & LINKS
   ========================================================================== */
body {
	font-family: var(--sfc-sans);
	color: var(--sfc-ink-soft);
	background: var(--sfc-white);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.cm-site-title {
	font-family: var(--sfc-serif);
	color: var(--sfc-ink);
	letter-spacing: -0.01em;
	text-wrap: balance;
}

a {
	color: var(--sfc-oxblood);
	text-decoration: none;
	transition: color 0.15s ease;
}
a:hover,
a:focus {
	color: var(--sfc-oxblood-deep);
}

::selection {
	background: var(--sfc-oxblood);
	color: #fff;
}


/* ==========================================================================
   2. LAYOUT CONTAINER & VERTICAL RHYTHM
   ColorMag uses .cm-container for max width; we just widen breathing room.
   ========================================================================== */
.cm-container {
	max-width: var(--sfc-container);
}

/* A touch more air between the main column and the sidebar */
#cm-content .inner-wrap {
	gap: var(--sfc-gap);
}


/* ==========================================================================
   3. TOP UTILITY STRIP
   Styles ColorMag's top bar (#cm-header-top / .cm-header-top) if present,
   and our own .sfc-utility strip used in the example markup.
   ========================================================================== */
.sfc-utility {
	background: var(--sfc-ink);
	color: var(--sfc-paper-2);
	font-family: var(--sfc-sans);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.sfc-utility .cm-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 38px;
	gap: 16px;
}
.sfc-utility a { color: var(--sfc-paper-2); }
.sfc-utility a:hover { color: #fff; }
.sfc-utility__tagline {
	color: #cfc7b8;
	font-style: normal;
}


/* ==========================================================================
   4. MASTHEAD / SITE BRANDING
   Goal: a big, confident, centred wordmark on warm paper with a thin
   oxblood rule beneath — an established-magazine front page.
   ========================================================================== */
#cm-header-1 {
	background: var(--sfc-paper);
	border-bottom: 3px solid var(--sfc-oxblood);
	padding: 26px 0 22px;
}

/* Centre the branding block */
#cm-header-1 .cm-row {
	justify-content: center;
}
#cm-header-1 .cm-header-col-1 {
	flex: 1 1 100%;
	text-align: center;
}

/* The logo image — make it prominent but never overflow */
#cm-site-branding {
	margin: 0 auto;
}
#cm-site-branding img,
#cm-site-branding .custom-logo {
	display: inline-block;
	width: auto;
	max-width: min(760px, 94%);
	height: auto;
}

/* Text wordmark fallback (if no image logo is set in Customizer).
   Tip: in Appearance → Customize → Site Identity, upload the logo and
   turn OFF "Display Site Title" + "Display Tagline" to avoid duplication. */
.cm-site-title {
	font-size: clamp(38px, 6vw, 64px);
	font-weight: 700;
	line-height: 1.02;
	margin: 0;
}
.cm-site-title a { color: var(--sfc-oxblood); }
.cm-site-description {
	font-family: var(--sfc-serif);
	font-style: italic;
	font-size: clamp(15px, 2vw, 20px);
	color: var(--sfc-indigo);
	margin-top: 6px;
}

/* Optional dateline kicker used in the example markup */
.sfc-dateline {
	margin: 14px auto 0;
	font-family: var(--sfc-sans);
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfc-muted);
}
.sfc-dateline span { color: var(--sfc-oxblood); }


/* ==========================================================================
   5. PRIMARY NAVIGATION BAR
   A dark ink bar carrying the editorial sections — strong contrast against
   the light masthead, white uppercase labels, oxblood active/hover.
   ========================================================================== */
#cm-header-2 {
	background: var(--sfc-ink);
	border-bottom: 1px solid #000;
	position: relative;
	z-index: 50;
}
#cm-primary-nav .cm-container {
	position: relative;
}

/* The menu row */
ul#cm-primary-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}
ul#cm-primary-menu > li {
	position: relative;
	margin: 0;
}
ul#cm-primary-menu > li > a {
	display: block;
	padding: 15px 18px;
	color: var(--sfc-paper-2);
	font-family: var(--sfc-sans);
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	border-bottom: 3px solid transparent;
}
ul#cm-primary-menu > li > a:hover,
ul#cm-primary-menu > li:hover > a,
ul#cm-primary-menu > li.focus > a {
	color: #fff;
	background: rgba(255, 255, 255, 0.05);
	border-bottom-color: var(--sfc-oxblood);
}
/* Current section */
ul#cm-primary-menu > li.current-menu-item > a,
ul#cm-primary-menu > li.current-menu-parent > a,
ul#cm-primary-menu > li.current_page_item > a {
	color: #fff;
	border-bottom-color: var(--sfc-oxblood);
}

/* Caret hint on parents that have a dropdown */
ul#cm-primary-menu > li.menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	opacity: 0.7;
}


/* ==========================================================================
   6. DROPDOWN SUB-MENUS
   Clean white panels, ink text, oxblood accents, hairline + soft shadow.
   ColorMag outputs standard WordPress ".sub-menu" lists.
   ========================================================================== */
#cm-primary-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 230px;
	margin: 0;
	padding: 6px 0;
	list-style: none;
	background: var(--sfc-white);
	border: 1px solid var(--sfc-rule-2);
	border-top: 3px solid var(--sfc-oxblood);
	box-shadow: var(--sfc-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
	z-index: 60;
}
/* Reveal on hover/focus (desktop). ColorMag's JS also toggles for touch. */
#cm-primary-menu > li:hover > .sub-menu,
#cm-primary-menu > li.focus > .sub-menu,
#cm-primary-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
#cm-primary-menu .sub-menu li {
	margin: 0;
}
#cm-primary-menu .sub-menu a {
	display: block;
	padding: 9px 18px;
	color: var(--sfc-ink);
	font-family: var(--sfc-sans);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-transform: none;
	line-height: 1.3;
	border-left: 3px solid transparent;
}
#cm-primary-menu .sub-menu a:hover,
#cm-primary-menu .sub-menu a:focus {
	background: var(--sfc-paper-2);
	color: var(--sfc-oxblood-deep);
	border-left-color: var(--sfc-oxblood);
}

/* Right-edge dropdowns flip so they don't run off-screen */
#cm-primary-menu > li:last-child .sub-menu,
#cm-primary-menu > li.sfc-align-right .sub-menu {
	left: auto;
	right: 0;
}


/* ==========================================================================
   7. MOBILE MENU / TOGGLES
   ColorMag supplies .cm-menu-toggle and the JS. We only restyle.
   ========================================================================== */
.cm-menu-toggle,
#cm-primary-nav .cm-menu-toggle {
	background: var(--sfc-oxblood);
	color: #fff;
	border: 0;
	border-radius: var(--sfc-radius);
}
.cm-menu-toggle:hover { background: var(--sfc-oxblood-deep); }
.cm-submenu-toggle .cm-icon { color: currentColor; }


/* ==========================================================================
   8. ARTICLE & CONTENT TYPOGRAPHY
   Readability first: comfortable measure, strong contrast, serif headlines.
   ========================================================================== */
.entry-title {
	font-size: clamp(24px, 3vw, 34px);
	font-weight: 700;
	line-height: 1.18;
	margin: 0 0 0.4em;
}
.entry-title a {
	color: var(--sfc-ink);
}
.entry-title a:hover {
	color: var(--sfc-oxblood);
}

.entry-content,
.entry-summary {
	color: var(--sfc-ink-soft);
	font-size: 17.5px;
	line-height: 1.72;
}
.entry-content p { margin: 0 0 1.15em; }
.entry-content a {
	text-decoration: underline;
	text-decoration-color: rgba(156, 43, 27, 0.35);
	text-underline-offset: 2px;
}
.entry-content a:hover {
	text-decoration-color: var(--sfc-oxblood);
}

.entry-content h2,
.entry-content h3 {
	margin-top: 1.6em;
	line-height: 1.25;
}

/* Pull-quotes / blockquotes get an editorial bar */
.entry-content blockquote {
	border-left: 3px solid var(--sfc-oxblood);
	margin: 1.4em 0;
	padding: 4px 0 4px 22px;
	font-family: var(--sfc-serif);
	font-size: 1.18em;
	font-style: italic;
	color: var(--sfc-ink);
}

/* Featured images: subtle warm frame */
.post-thumbnail img,
.cm-featured-image img {
	border-radius: var(--sfc-radius);
}


/* ==========================================================================
   9. POST META & CATEGORY LABELS
   Small, uppercase, oxblood — the magazine "kicker" voice.
   ========================================================================== */
.cat-links,
.cat-links a,
.above-entry-meta .cat-links a {
	font-family: var(--sfc-sans);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sfc-oxblood);
}

.entry-meta,
.below-entry-meta,
.cm-posted-on,
.byline {
	font-family: var(--sfc-sans);
	font-size: 12.5px;
	letter-spacing: 0.03em;
	color: var(--sfc-muted);
}
.entry-meta a { color: var(--sfc-muted); }
.entry-meta a:hover { color: var(--sfc-oxblood); }


/* ==========================================================================
   9b. ARCHIVE / PAGE HEADERS  (category, tag, author, search, static page)
   Turns the bare "Category: Horror" line into an intentional masthead.
   ========================================================================== */
.cm-page-header,
.page-header,
.cm-archive-header {
	margin: 0 0 32px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--sfc-rule);
}
.cm-page-title,
.page-title,
.archive-title,
.cm-archive-title {
	margin: 0;
	font-family: var(--sfc-serif);
	font-size: clamp(28px, 4.2vw, 44px);
	font-weight: 700;
	line-height: 1.08;
	color: var(--sfc-ink);
}
/* The taxonomy label ColorMag prints before the term ("Category:") reads as
   a kicker. Our example markup uses .sfc-kicker; we also catch the theme's
   own .taxonomy-type / .cm-page-header span. */
.sfc-kicker,
.cm-page-header .taxonomy-type,
.page-header .taxonomy-type {
	display: block;
	margin-bottom: 10px;
	font-family: var(--sfc-sans);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sfc-oxblood);
}
.cm-page-header .archive-description,
.cm-page-header .taxonomy-description,
.page-header .archive-description,
.archive-description {
	margin-top: 12px;
	max-width: 66ch;
	color: var(--sfc-muted);
	font-size: 16px;
	line-height: 1.6;
}


/* ==========================================================================
   9c. POST SEPARATORS — blog / archive / search list flow
   A quiet hairline between stories so the column reads as a column.
   Scoped to list contexts so the front-page builder modules are untouched.
   ========================================================================== */
.archive #cm-primary article.post,
.blog #cm-primary article.post,
.search #cm-primary article.post,
.archive #cm-primary article.page,
.search #cm-primary article.type-post {
	margin-bottom: 34px;
	padding-bottom: 30px;
	border-bottom: 1px solid var(--sfc-rule);
}
.archive #cm-primary article.post:last-child,
.blog #cm-primary article.post:last-child,
.search #cm-primary article.post:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}
.cm-featured-image {
	margin-bottom: 16px;
}
.cm-featured-image img {
	width: 100%;
	border-radius: var(--sfc-radius);
}
/* Archive titles sit at h2 scale, a touch tighter than single */
.archive .entry-title,
.blog .entry-title,
.search .entry-title {
	font-size: clamp(21px, 2.6vw, 28px);
}


/* ==========================================================================
   9d. PAGINATION — archive / blog / search
   ========================================================================== */
.navigation .nav-links,
.cm-pagination .page-numbers,
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 34px;
}
.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	font-family: var(--sfc-sans);
	font-size: 14px;
	font-weight: 600;
	color: var(--sfc-ink);
	background: var(--sfc-white);
	border: 1px solid var(--sfc-rule-2);
	border-radius: var(--sfc-radius);
}
a.page-numbers:hover {
	border-color: var(--sfc-oxblood);
	color: var(--sfc-oxblood);
}
.page-numbers.current {
	background: var(--sfc-oxblood);
	border-color: var(--sfc-oxblood);
	color: #fff;
}


/* ==========================================================================
   8b. SINGLE ARTICLE FURNITURE
   Generous headline, a clean byline rule, tag chips, light author box.
   ========================================================================== */
.single .entry-title {
	font-size: clamp(30px, 4.4vw, 46px);
	line-height: 1.12;
}
.single .cm-featured-image {
	margin: 8px 0 28px;
}
/* Byline row under the title */
.sfc-byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
	margin: 0 0 24px;
	padding: 12px 0;
	border-top: 1px solid var(--sfc-rule);
	border-bottom: 1px solid var(--sfc-rule);
	font-family: var(--sfc-sans);
	font-size: 13px;
	letter-spacing: 0.03em;
	color: var(--sfc-muted);
}
.sfc-byline strong { color: var(--sfc-ink); font-weight: 600; }
.sfc-byline .sfc-dot { color: var(--sfc-rule-2); }

/* Tag chips (reuses the Browse-by chip language) */
.tagcloud a,
.cm-tags a,
.tags-links a,
.entry-footer .tags-links a {
	display: inline-block;
	margin: 0 6px 8px 0;
	padding: 5px 11px;
	font-family: var(--sfc-sans);
	font-size: 13px !important;
	font-weight: 500;
	color: var(--sfc-ink);
	background: var(--sfc-paper);
	border: 1px solid var(--sfc-rule-2);
	border-radius: 999px;
	line-height: 1.25;
}
.tagcloud a:hover,
.cm-tags a:hover,
.tags-links a:hover {
	background: var(--sfc-oxblood);
	border-color: var(--sfc-oxblood);
	color: #fff;
}

/* Author box (ColorMag .cm-author-box / generic .author-info) */
.cm-author-box,
.author-info,
.sfc-author-box {
	display: flex;
	gap: 16px;
	align-items: flex-start;
	margin: 34px 0;
	padding: 22px;
	background: var(--sfc-paper);
	border: 1px solid var(--sfc-rule);
	border-left: 3px solid var(--sfc-oxblood);
	border-radius: var(--sfc-radius);
}
.sfc-author-box .sfc-author-name {
	font-family: var(--sfc-serif);
	font-size: 18px;
	font-weight: 700;
	color: var(--sfc-ink);
	margin: 0 0 4px;
}
.sfc-author-box p { margin: 0; color: var(--sfc-muted); font-size: 14.5px; line-height: 1.55; }

/* Related posts heading inherits the widget-title kicker */
.cm-related-posts .cm-related-title,
.sfc-related h3 {
	margin: 0 0 18px;
	padding: 0 0 10px;
	font-family: var(--sfc-sans);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sfc-ink);
	border-bottom: 1px solid var(--sfc-rule);
	position: relative;
}
.sfc-related h3::after {
	content: "";
	position: absolute;
	left: 0; bottom: -1px;
	width: 46px; height: 3px;
	background: var(--sfc-oxblood);
}


/* ==========================================================================
   10. SIDEBAR WIDGETS — the "recent stories" column
   Tidier headings, smaller-but-readable titles, deliberate spacing,
   hairline separators instead of clutter.
   ========================================================================== */
#cm-secondary .widget {
	margin-bottom: 34px;
	padding: 0;
	background: transparent;
	border: 0;
}

/* Widget heading: kicker style with an oxblood tick.
   ColorMag wraps the title text in <span> inside h3.cm-widget-title. */
#cm-secondary .cm-widget-title,
#cm-secondary .widget-title {
	position: relative;
	margin: 0 0 16px;
	padding: 0 0 10px;
	font-family: var(--sfc-sans);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sfc-ink);
	border-bottom: 1px solid var(--sfc-rule);
}
#cm-secondary .cm-widget-title span,
#cm-secondary .widget-title span {
	background: none;
	padding: 0;
}
/* The short oxblood underline accent */
#cm-secondary .cm-widget-title::after,
#cm-secondary .widget-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 46px;
	height: 3px;
	background: var(--sfc-oxblood);
}

/* Recent / list-style widgets */
#cm-secondary .widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
#cm-secondary .widget ul li {
	margin: 0;
	padding: 11px 0;
	border-bottom: 1px solid var(--sfc-rule);
	line-height: 1.35;
}
#cm-secondary .widget ul li:last-child {
	border-bottom: 0;
}
#cm-secondary .widget ul li a {
	font-family: var(--sfc-serif);
	font-size: 15.5px;
	font-weight: 600;
	color: var(--sfc-ink);
	line-height: 1.35;
}
#cm-secondary .widget ul li a:hover {
	color: var(--sfc-oxblood);
}
/* Post date / meta under each story */
#cm-secondary .widget ul li .post-date,
#cm-secondary .widget ul li .rss-date,
#cm-secondary .widget .cm-entry-meta {
	display: block;
	margin-top: 3px;
	font-family: var(--sfc-sans);
	font-size: 11.5px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--sfc-muted);
}

/* Thumbnailed recent-post widgets (ColorMag highlighted/featured widgets) */
#cm-secondary .widget .cm-article,
#cm-secondary .widget li.cm-has-thumb {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
#cm-secondary .widget .cm-article img,
#cm-secondary .widget li.cm-has-thumb img {
	flex: 0 0 78px;
	width: 78px;
	height: 58px;
	object-fit: cover;
	border-radius: var(--sfc-radius);
}


/* ==========================================================================
   11. "BROWSE BY" GROUPED BLOCKS  (custom component)
   Drop the example markup (inc/example-markup/) into a Custom HTML widget.
   Designed to read as three deliberate groups: By Genre / By Media / FANatics.
   ========================================================================== */
.sfc-browseby {
	margin: 0;
}
.sfc-browseby__group {
	margin-bottom: 22px;
}
.sfc-browseby__group:last-child {
	margin-bottom: 0;
}
.sfc-browseby__title {
	margin: 0 0 12px;
	font-family: var(--sfc-sans);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sfc-oxblood);
}
.sfc-browseby__title .sfc-browseby__lead {
	color: var(--sfc-muted);
	margin-right: 6px;
}
.sfc-browseby__list {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sfc-browseby__list li { margin: 0; }
.sfc-browseby__list a {
	display: inline-block;
	padding: 5px 11px;
	font-family: var(--sfc-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--sfc-ink);
	background: var(--sfc-paper);
	border: 1px solid var(--sfc-rule-2);
	border-radius: 999px;
	line-height: 1.25;
	transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.sfc-browseby__list a:hover,
.sfc-browseby__list a:focus {
	background: var(--sfc-oxblood);
	border-color: var(--sfc-oxblood);
	color: #fff;
}
/* FANatics group gets the indigo ribbon accent to set it apart */
.sfc-browseby__group--fanatics .sfc-browseby__title { color: var(--sfc-indigo); }
.sfc-browseby__group--fanatics .sfc-browseby__list a:hover {
	background: var(--sfc-indigo);
	border-color: var(--sfc-indigo);
}


/* ==========================================================================
   11b. ADVERTISING — tidies ColorMag Pro's NATIVE ad positions
   You keep using the theme's built-in Advertisement options (Customizer
   "Single Post" ad, header ad, above-footer ad) and the ad widgets, with
   your JPG linking to stephenhunt.net. This just makes those containers
   sit neatly: centred, responsive image, a restrained "Advertisement"
   label, deliberate spacing. No markup changes needed on your side.
   ========================================================================== */
.single_ad_728x90,
.single_ad_300x250,
.cm-single_ad_125x125,
.advertisement_728x90,
.advertisement_300x250,
.cm-advertisement_125x125,
.advertisement_above_footer {
	margin: 0 auto 26px;
	text-align: center;
}
/* The little "Advertisement" caption ColorMag prints above the creative */
.cm-advertisement-title {
	margin: 0 0 8px;
	font-family: var(--sfc-sans);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sfc-muted);
}
.cm-advertisement-content { line-height: 0; }
.cm-advertisement-content img,
.single_ad_728x90 img,
.single_ad_300x250 img,
.cm-single_ad_125x125 img,
.advertisement_728x90 img,
.advertisement_300x250 img,
.cm-advertisement_125x125 img {
	max-width: 100%;
	height: auto;
	border-radius: var(--sfc-radius);
}
/* The in-article (Single Post) banner gets quiet hairline brackets so it
   separates cleanly from the story below the breadcrumb. */
.single_ad_728x90,
.single_ad_300x250 {
	padding: 16px 0;
	border-top: 1px solid var(--sfc-rule);
	border-bottom: 1px solid var(--sfc-rule);
}

/* Optional hand-placed helper (used by the example markup, e.g. if you ever
   want a sidebar promo or a manually-wrapped banner). Safe to ignore. */
.sfc-ad { margin: 0 0 26px; text-align: center; }
.sfc-ad__label {
	display: block; margin-bottom: 8px;
	font-family: var(--sfc-sans); font-size: 10.5px; font-weight: 600;
	letter-spacing: 0.18em; text-transform: uppercase; color: var(--sfc-muted);
}
.sfc-ad img { max-width: 100%; height: auto; border-radius: var(--sfc-radius); }
.sfc-ad--inline {
	margin: 4px 0 28px; padding: 16px 0;
	border-top: 1px solid var(--sfc-rule); border-bottom: 1px solid var(--sfc-rule);
}
#cm-secondary .sfc-ad--sidebar { margin-bottom: 34px; }


/* ==========================================================================
   11c. NEWSLETTER SIGN-UP  (sidebar, above "Recent Stories")
   Self-contained card — drop the markup into a Custom HTML widget.
   ========================================================================== */
.sfc-newsletter {
	padding: 20px;
	background: var(--sfc-paper);
	border: 1px solid var(--sfc-rule);
	border-top: 3px solid var(--sfc-oxblood);
	border-radius: var(--sfc-radius);
}
.sfc-newsletter__title {
	margin: 0 0 6px;
	font-family: var(--sfc-serif);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.15;
	color: var(--sfc-ink);
}
.sfc-newsletter__text {
	margin: 0 0 14px;
	font-family: var(--sfc-sans);
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--sfc-muted);
}
.sfc-newsletter__form {
	display: flex;
	flex-direction: column;
	gap: 9px;
}
.sfc-newsletter__input {
	width: 100%;
	padding: 11px 12px;
	font-family: var(--sfc-sans);
	font-size: 14px;
	color: var(--sfc-ink);
	background: #fff;
	border: 1px solid var(--sfc-rule-2);
	border-radius: var(--sfc-radius);
}
.sfc-newsletter__input:focus {
	outline: 2px solid var(--sfc-oxblood);
	outline-offset: 1px;
	border-color: var(--sfc-oxblood);
}
.sfc-newsletter__btn {
	display: inline-block;
	padding: 11px 16px;
	font-family: var(--sfc-sans);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #fff;
	background: var(--sfc-oxblood);
	border: 0;
	border-radius: var(--sfc-radius);
	cursor: pointer;
}
.sfc-newsletter__btn:hover { background: var(--sfc-oxblood-deep); }


/* ==========================================================================
   11d. INDEXES WIDGET  (sidebar, below "Browse by")
   A reference-style link list, deliberately distinct from the Browse-by
   chips. Use a normal Custom HTML widget titled "Indexes" + this list.
   ========================================================================== */
.sfc-indexes {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sfc-indexes li {
	margin: 0;
	border-bottom: 1px solid var(--sfc-rule);
}
.sfc-indexes li:last-child { border-bottom: 0; }
.sfc-indexes a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 0;
	font-family: var(--sfc-sans);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--sfc-ink);
}
.sfc-indexes a:hover { color: var(--sfc-oxblood); }
.sfc-indexes a::after {
	content: "\2192";
	color: var(--sfc-oxblood);
	font-size: 15px;
	opacity: 0.6;
	transition: transform 0.15s ease, opacity 0.15s ease;
}
.sfc-indexes a:hover::after {
	transform: translateX(3px);
	opacity: 1;
}


/* ==========================================================================
   12. FOOTER — light touch-ups only
   ========================================================================== */
#colophon .cm-widget-title,
#colophon .widget-title {
	font-family: var(--sfc-sans);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}


/* ==========================================================================
   13. ACCESSIBILITY — visible focus everywhere
   ========================================================================== */
a:focus-visible,
button:focus-visible,
.sfc-browseby__list a:focus-visible,
#cm-primary-menu a:focus-visible {
	outline: 2px solid var(--sfc-oxblood);
	outline-offset: 2px;
}
/* On the dark nav bar, use a light focus ring */
#cm-header-2 a:focus-visible {
	outline-color: #fff;
}


/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */

/* Tablet */
@media (max-width: 1024px) {
	#cm-content .inner-wrap { gap: 28px; }
	ul#cm-primary-menu > li > a { padding: 13px 13px; font-size: 12.5px; }
}

/* Below ColorMag's mobile-nav breakpoint: stack & calm everything down.
   ColorMag swaps to .cm-menu-toggle + off-canvas/accordion automatically;
   we just make sure the masthead and submenu panels behave. */
@media (max-width: 768px) {
	#cm-header-1 { padding: 20px 0 16px; }
	#cm-site-branding img,
	#cm-site-branding .custom-logo { max-width: 100%; }

	/* Mobile dropdowns become inline accordions, not floating panels */
	#cm-primary-menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: 0;
		border-top: 1px solid rgba(255,255,255,0.12);
		min-width: 0;
		padding: 0;
		background: transparent;
	}
	#cm-primary-menu .sub-menu a {
		color: var(--sfc-paper-2);
		padding-left: 32px;
	}
	#cm-primary-menu .sub-menu a:hover {
		background: rgba(255,255,255,0.06);
		color: #fff;
		border-left-color: var(--sfc-oxblood);
	}
	ul#cm-primary-menu { justify-content: flex-start; }
	ul#cm-primary-menu > li { width: 100%; }
	ul#cm-primary-menu > li > a { border-bottom: 1px solid rgba(255,255,255,0.1); }

	/* Sidebar drops below content (default), give it a top rule */
	#cm-secondary {
		margin-top: 36px;
		padding-top: 28px;
		border-top: 3px solid var(--sfc-oxblood);
	}

	.entry-content,
	.entry-summary { font-size: 16.5px; }
}

@media (max-width: 480px) {
	.sfc-utility .cm-container { justify-content: center; }
	.sfc-utility__right { display: none; }
}