/* =====================================================================
   TECHISH JANNAH — child stylesheet
   Loaded at priority 21 on wp_enqueue_scripts (after Jannah priority 20).
   Layers Tech-ish identity over Jannah behavior; preserves dark mode,
   image effects, parallax layouts, and Jannah's admin overrides.
   ===================================================================== */


/* =====================================================================
   PHASE 3 — TOKEN REBIND & SURFACES
   We replace Jannah's core CSS variables (--brand-color, --base-color,
   --bright-color) with Tech-ish tokens. Jannah's nav vars live inside
   .main-nav-light / .main-nav-dark scopes, not :root, so we override
   those at the matching scope.
   ===================================================================== */

/* Replace Jannah's :root brand variables. IMPORTANT: Jannah injects an
   inline `:root:root { --brand-color: ...; --bright-color: ...; --base-color: #2c2f34 }`
   block via TIELABS_STYLES::custom_theme_color() (see jannah/inc/custom-styles.php:2083),
   attached to whichever stylesheet is the latest enqueued — which is OURS
   (priority 21). That inline CSS appears AFTER child.css in the page and
   has specificity 0,2,0 vs our plain :root at 0,1,0. To win, we use
   :root:root:root (0,3,0) so our token rebinds are the source of truth. */
/* :root token defaults. IMPORTANT: --brand-color and --dark-brand-color
   are intentionally set at plain :root specificity (not :root:root:root)
   so Jannah's per-category color injection at jannah/inc/custom-styles.php:2083
   (which uses :root:root) can override them. That lets each category's
   admin-configured color flow through to elements styled with
   var(--brand-color) — e.g. the `// LEAD` label on the subtitle deck.

   Our TieLabs/default_theme_color filter (functions.php) supplies the
   #7B3F8C violet fallback when no admin color is set, so the brand
   default remains intact.

   --bright-color and --base-color stay at :root:root:root because those
   are Tech-ish core values that shouldn't shift per-category. */
:root {
	--brand-color: #7B3F8C;          /* ti-violet-500 — fallback only */
	--dark-brand-color: #5C3A6E;     /* ti-violet-600 — fallback only */
}

:root,
:root:root,
:root:root:root {
	--bright-color: #FBF7EC;         /* ti-cream-50  */
	--base-color: #1A1817;           /* ti-ink-900   */
	--tie-buttons-radius: 999px;     /* pill — global CTA shape */
}

/* Override Jannah's scoped main-nav variables. Without this our :root
   tokens wouldn't cascade because Jannah's selectors are more specific.
   IMPORTANT: scoped to html:not(.dark-skin) body — otherwise the light
   cream tokens leak into the dark mode header when the user toggles
   dark mode on, leaving a stranded-looking cream nav above dark content. */
html:not(.dark-skin) body .main-nav-light {
	--main-nav-background: rgba(244, 236, 214, 0.92);
	--main-nav-secondry-background: rgba(123, 63, 140, 0.06);
	--main-nav-primary-color: var(--ti-violet-500);
	--main-nav-contrast-primary-color: var(--ti-cream-50);
	--main-nav-text-color: var(--ti-ink-900);
	--main-nav-secondry-text-color: var(--ti-ink-600);
	--main-nav-main-border-color: var(--ti-ink-300);
	--main-nav-secondry-border-color: var(--ti-ink-200);
}

html:not(.dark-skin) body .main-nav-dark {
	--main-nav-primary-color: var(--ti-violet-300);
	--main-nav-contrast-primary-color: var(--ti-ink-900);
	--main-nav-main-border-color: rgba(177, 137, 189, 0.18);
	--main-nav-secondry-border-color: rgba(177, 137, 189, 0.10);
}

/* DARK MODE rebind: when body toggles to .dark-skin, paint the nav
   on Jannah's dark surfaces regardless of admin's main-nav-light/dark
   admin choice. Otherwise the cream nav stays stranded above dark
   content (visible bug in the user's screenshot 3). */
.dark-skin .main-nav-light,
.dark-skin .main-nav-dark {
	--main-nav-background: #1f2024;
	--main-nav-secondry-background: rgba(0, 0, 0, 0.2);
	--main-nav-primary-color: var(--ti-violet-300);
	--main-nav-contrast-primary-color: var(--ti-ink-900);
	--main-nav-text-color: var(--ti-cream-100);
	--main-nav-secondry-text-color: rgba(225, 255, 255, 0.5);
	--main-nav-main-border-color: rgba(177, 137, 189, 0.18);
	--main-nav-secondry-border-color: rgba(177, 137, 189, 0.10);
}

.dark-skin #top-nav,
.dark-skin #top-nav .topbar-wrapper {
	background: rgba(31, 32, 36, 0.92) !important;
	color: var(--ti-cream-100);
}


/* --- Page surfaces ------------------------------------------------- */
/* Cream body. Jannah's body declares `background: #F7F7F7` at base.css
   line 237 — same specificity, our stylesheet loads later, we win. */
html,
body {
	background: var(--ti-cream-100);
	color: var(--ti-ink-900);
}

/* Jannah's #tie-wrapper is white and z-indexed above body. Cream it. */
#tie-wrapper {
	background: var(--ti-cream-100);
}

/* Every card / article / widget box uses .container-wrapper. White by
   default in Jannah — we tone it to the paper-dim cream so cards read
   as warm editorial inserts on the body cream. */
.container-wrapper {
	background: var(--ti-paper-dim);
	border-color: var(--ti-ink-300);
}


/* --- Sticky header translucent cream ------------------------------- */
/* Jannah's .main-nav.fixed-nav sets background-color: rgba(255,255,255,0.95)
   at base.css line 1997. Override with cream + backdrop blur. */
@media (min-width: 992px) {
	.main-nav-light.fixed-nav,
	.main-nav-light .main-nav.fixed-nav,
	.fixed-nav.main-nav-light {
		background-color: rgba(244, 236, 214, 0.85);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		border-bottom: 1px solid var(--ti-ink-300);
	}
}

/* Sticky top-nav (above the main nav, if enabled) gets the same
   translucent cream treatment. */
.fixed-nav#top-nav,
#top-nav.fixed-nav {
	background-color: rgba(244, 236, 214, 0.85);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}


/* --- Links --------------------------------------------------------- */
/* Global link color and underline treatment. .entry-content links get
   the editorial double-stroke; chrome links inherit the blue. */
body a {
	color: var(--ti-blue-400);
	transition: color var(--ti-dur) var(--ti-ease);
}

body a:hover {
	color: var(--ti-violet-500);
}

.entry-content a,
.entry-content a:visited {
	color: var(--ti-blue-400);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
	text-decoration-color: var(--ti-violet-300);
}

.entry-content a:hover {
	color: var(--ti-violet-500);
	text-decoration-color: var(--ti-blue-400);
}


/* =====================================================================
   PHASE 3 — DARK MODE PARITY
   Tech-ish has no native dark mode in its design system, but Jannah
   ships one and we preserve it. The html.dark-skin class is added by
   Jannah's skin-switcher component. Under dark we keep Jannah's dark
   surfaces (#1f2024 / #27292d) and retune Tech-ish foreground tokens
   so the violet/cream pairing reads correctly on dark.
   ===================================================================== */

.dark-skin {
	/* Foreground swap. On dark, headlines pick up the cream that was
	   the body in light mode. Lede/standfirst goes one notch warmer. */
	--ti-fg: var(--ti-cream-100);
	--ti-fg-muted: var(--ti-ink-300);
	--ti-fg-faint: var(--ti-ink-400);
	--ti-rule: rgba(177, 137, 189, 0.18);
	--ti-accent: var(--ti-violet-300);
	--ti-accent-soft: var(--ti-violet-200);
	--ti-link: var(--ti-violet-300);
	--ti-highlight: var(--ti-coral-300);
}

/* Re-color the dark-mode equivalents of every Phase-2 element so the
   typography we just set still reads correctly. */
html.dark-skin,
.dark-skin .entry-content p,
.dark-skin .entry-content h2,
.dark-skin .entry-content h3 {
	color: var(--ti-cream-100);
}

.dark-skin .entry-header h1.entry-title,
.dark-skin .entry-header .post-title.entry-title,
html.dark-skin .post-title,
html.dark-skin .post-title a,
html.dark-skin .thumb-title,
html.dark-skin .thumb-title a,
html.dark-skin .page-title {
	color: var(--ti-cream-100);
}

html.dark-skin h1 em,
html.dark-skin h2 em,
html.dark-skin h3 em,
html.dark-skin .entry-title em,
html.dark-skin .post-title em,
html.dark-skin .post-title a em,
html.dark-skin .thumb-title em,
html.dark-skin .thumb-title a em,
html.dark-skin .page-title em {
	color: var(--ti-violet-300);
}

html.dark-skin .entry-sub-title,
html.dark-skin .post-excerpt,
html.dark-skin .thumb-desc,
html.dark-skin .taxonomy-description {
	color: var(--ti-ink-300);
}

html.dark-skin .entry-sub-title .key,
html.dark-skin .post-excerpt .key,
html.dark-skin .thumb-desc .key {
	color: var(--ti-coral-300);
}

html.dark-skin .post-meta,
html.dark-skin .post-meta .meta-item,
html.dark-skin .post-meta a,
html.dark-skin .thumb-meta,
html.dark-skin .thumb-meta .meta-item,
html.dark-skin .mag-box-title h3,
html.dark-skin .widget-title .the-subtitle,
html.dark-skin .section-title {
	color: var(--ti-violet-300);
}

html.dark-skin .breadcrumbs,
html.dark-skin .breadcrumbs a,
html.dark-skin .breadcrumbs span {
	color: var(--ti-ink-400);
}

/* Older blockquote dark-mode rules removed — the comprehensive
   blockquote / pullquote system at the bottom of this file owns
   the editorial card treatment including all dark-mode variants. */

.dark-skin .entry-content a {
	color: var(--ti-violet-300);
	text-decoration-color: rgba(177, 137, 189, 0.4);
}

.dark-skin .entry-content a:hover {
	color: var(--ti-cream-50);
	text-decoration-color: var(--ti-violet-300);
}

/* Sticky header in dark mode — translucent dark instead of cream. */
@media (min-width: 992px) {
	.dark-skin .main-nav-light.fixed-nav,
	.dark-skin .fixed-nav.main-nav-light,
	.dark-skin .main-nav-dark.fixed-nav,
	.dark-skin .fixed-nav.main-nav-dark {
		background-color: rgba(31, 32, 36, 0.85);
		border-bottom-color: rgba(177, 137, 189, 0.18);
	}
}

.dark-skin .fixed-nav#top-nav,
.dark-skin #top-nav.fixed-nav {
	background-color: rgba(31, 32, 36, 0.85);
}

/* In dark mode, Jannah's existing dark surface CSS handles container
   backgrounds — verified at jannah/assets/css/style.css:7619-7691:
     .dark-skin, html.dark-skin { background-color: #1f2024 }   (0,1,1)
     .dark-skin #tie-wrapper       { background-color: #27292d } (0,2,1)
   Both selectors have higher specificity than our cream rules
   (`body { background: cream }` = 0,0,1 ; `#tie-wrapper { background:
   cream }` = 0,1,0), so Jannah wins automatically in dark mode. We
   do not need to repaint these in the child stylesheet. */

::selection {
	background: var(--ti-violet-200);
	color: var(--ti-ink-900);
}

.dark-skin ::selection {
	background: var(--ti-violet-500);
	color: var(--ti-cream-50);
}


/* =====================================================================
   PHASE 4 — HEADER (logo lockup, main nav, components)
   - Dot-wordmark logo (rendered by techish_child_render_logo() unless
     editor uploaded a logo image).
   - Main nav: mono caps, 44px touch targets, violet underline on the
     current item, smooth hover.
   - Components: pill subscribe button, cream-rounded search.
   - All Jannah JS (sticky, mobile drawer, live search) untouched.
   ===================================================================== */

/* --- Dot-wordmark -------------------------------------------------- */
/* Rendered inside Jannah's <a class="logo"> wrapper by the
   'TieLabs/Logo/text_logo' filter (functions.php). We're a <span>, not
   an <a> — the surrounding <a> handles the link. */
.techish-wordmark,
.logo .techish-wordmark,
.logo-text .techish-wordmark,
#logo .techish-wordmark {
	display: inline-flex;
	align-items: center;
	gap: 0;
	white-space: nowrap;
	text-decoration: none;
	font-family: var(--ti-font-sans);
	font-weight: 900; /* matches the LOGO LOCKUP block at end of file */
	letter-spacing: -0.015em;
	color: #2A3C8A; /* ti-blue-400 */
	line-height: 1;
	padding: 0;
	/* font-size + responsive sizing handled by the comprehensive
	   LOGO LOCKUP block at the bottom of the file — values there take
	   precedence (clamp 32-56px desktop, 30px mobile floor) */
}

/* Make sure Jannah's wrapping anchor (#logo a / .logo a) doesn't paint
   blue-on-blue or pull weird inherited styles into our wordmark. */
#logo a:has(.techish-wordmark),
.logo a:has(.techish-wordmark) {
	text-decoration: none;
}

.techish-wordmark__dot {
	display: inline-block;
	/* Dot scales with the wordmark via em units. */
	width: 0.45em;
	height: 0.45em;
	border-radius: 50%;
	background: var(--ti-blue-400);
	margin-right: 0.55em;
	flex: 0 0 auto;
	/* Tiny optical lift so the dot reads aligned with x-height, not
	   baseline. */
	transform: translateY(-0.03em);
}

.techish-wordmark__name {
	display: inline-block;
}

.techish-wordmark__name em {
	font-family: var(--ti-font-italic);
	font-style: italic;
	font-weight: 700;
	/* The italic "-ish" takes the active category color via Jannah's
	   per-page --brand-color injection (set by tie_category_color()
	   on category archives + single posts; matches the strip that
	   colors .post-cat-wrap pills and the top-bar day name). On pages
	   without a category context (homepage, search, 404, generic
	   pages), --brand-color is unset and we fall back to ti-violet-500
	   so the wordmark always has its house italic accent.
	   smooth color transition so the wordmark's section signature
	   changes feel like a deliberate brand cue, not a flash. */
	color: var(--brand-color, var(--ti-violet-500));
	transition: color 240ms cubic-bezier(0.4, 0, 0.2, 1);
	/* Tighten the join between "tech" and "-ish". */
	margin-left: -0.02em;
}

.techish-wordmark:hover .techish-wordmark__name em {
	/* Hover deepens the category color via color-mix; gracefully
	   degrades to ti-violet-600 in browsers without color-mix(). */
	color: var(--ti-violet-600);
	color: color-mix(in srgb, var(--brand-color, var(--ti-violet-500)) 80%, black);
}

.techish-wordmark:hover .techish-wordmark__dot {
	background: var(--brand-color, var(--ti-violet-500));
}

/* Sticky mini-logo on scroll. Jannah's tie_sticky_logo() inserts an
   element with #tie-sticky-logo id; if our wordmark is used in the
   sticky slot via custom render, this variant shrinks it. */
.techish-wordmark--sticky {
	font-size: clamp(16px, 0.4vw + 14px, 20px);
}

/* Dark-mode wordmark colors. */
.dark-skin .techish-wordmark {
	color: var(--ti-cream-100);
}
.dark-skin .techish-wordmark__dot {
	background: var(--ti-cream-100);
}
.dark-skin .techish-wordmark__name em {
	/* On dark surfaces, lighten the category color so it stays
	   legible against ink-1000. color-mix lifts the brand color
	   ~35% toward white, keeping enough hue identity to read as
	   "section X" while passing 4.5:1 contrast on the dark header.
	   Fallback (no color-mix): ti-violet-300. */
	color: var(--ti-violet-300);
	color: color-mix(in srgb, var(--brand-color, var(--ti-violet-300)) 65%, white);
}
.dark-skin .techish-wordmark:hover .techish-wordmark__name em {
	color: var(--ti-violet-200);
	color: color-mix(in srgb, var(--brand-color, var(--ti-violet-300)) 50%, white);
}

/* Phone: dot proportional sizing handled via em in the dot rule above.
   Size handled in the LOGO LOCKUP block at the end of the file. */


/* --- Main nav: mono caps ------------------------------------------- */
/* DOM produced by wp_nav_menu in jannah/templates/header/nav-main.php:
   #main-nav
     .main-menu.main-menu-wrap             (outer wrapper in template)
       .main-menu.header-menu              (from wp_nav_menu container_class)
         ul#main-nav-menu.menu             (from items_wrap)
           li.menu-item > a
   We use descendant combinators between .main-menu and .menu because of
   the intermediate <div>; direct child (>) would not match. */
#main-nav .main-menu .menu > li > a {
	font-family: var(--ti-font-mono);
	font-weight: 600;
	font-size: clamp(12px, 0.2vw + 11.5px, 14px);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--main-nav-text-color);
	/* 44px+ tap target: 14px padding top + bottom + ~14px line-height
	   + 2px border = 44-46px depending on viewport. WCAG 2.5.5 ✓.
	   Horizontal padding bumped from sp-3 (12px) to sp-4 (16px) so each
	   item gets more air on either side — reads as a distinct object
	   instead of a continuous strip of caps. */
	padding: 14px var(--ti-sp-4);
	line-height: 1.15;
	transition: color var(--ti-dur) var(--ti-ease);
	position: relative;
}

#main-nav .main-menu .menu > li > a:hover,
#main-nav .main-menu .menu > li.current-menu-item > a,
#main-nav .main-menu .menu > li.current-menu-parent > a {
	color: var(--ti-violet-500);
}

/* Violet underline on the active item. Pseudo-element so it doesn't
   shift layout. left/right match the new sp-4 padding. */
#main-nav .main-menu .menu > li.current-menu-item > a::after,
#main-nav .main-menu .menu > li.current-menu-parent > a::after {
	content: "";
	position: absolute;
	left: var(--ti-sp-4);
	right: var(--ti-sp-4);
	bottom: 8px;
	height: 2px;
	background: var(--ti-violet-500);
}

/* Mega-menu chevron — Jannah's base.css:2019 adds an absolute-
   positioned chevron at right: 10px on .menu-item-has-children > a
   and .mega-menu > a. Default Jannah padding-right of 25px makes
   room for it; my Phase 4 padding override (12px) was too tight, so
   the chevron overlapped the last letter of the menu label. Restore
   the right padding for items that need it. */
#main-nav .main-menu .menu > li.menu-item-has-children > a,
#main-nav .main-menu .menu > li.mega-menu > a {
	padding-right: 28px;
}

/* The chevron pseudo-element itself — Jannah sets the icon font via
   `!important`, so font-family is safe. But we tighten color + size
   to match our system. */
#main-nav .main-menu .menu > li.menu-item-has-children > a::before,
#main-nav .main-menu .menu > li.mega-menu > a::before {
	color: currentColor;
	opacity: 0.7;
	right: 12px;
}

#main-nav .main-menu .menu > li.menu-item-has-children:hover > a::before,
#main-nav .main-menu .menu > li.mega-menu:hover > a::before {
	opacity: 1;
}

.dark-skin #main-nav .main-menu .menu > li > a:hover,
.dark-skin #main-nav .main-menu .menu > li.current-menu-item > a,
.dark-skin #main-nav .main-menu .menu > li.current-menu-parent > a {
	color: var(--ti-violet-300);
}

.dark-skin #main-nav .main-menu .menu > li.current-menu-item > a::after,
.dark-skin #main-nav .main-menu .menu > li.current-menu-parent > a::after {
	background: var(--ti-violet-300);
}


/* --- Top nav (above main nav) -------------------------------------- */
/* Jannah's CSS paints the top-nav background in TWO places depending
   on admin settings:
     1. base.css:1524 .top-nav { background-color: #ffffff }
        — applies when admin has top_nav_layout=false (NOT boxed)
     2. base.css:1639 .top-nav-boxed .topbar-wrapper { background: #fff }
        — applies when admin enabled "Top Nav Boxed Layout".
        In this case .top-nav itself becomes transparent (!important)
        and the INNER .topbar-wrapper carries the white surface.
   We must paint BOTH so the user sees cream regardless of admin choice. */
html body #top-nav,
html body.top-nav-active #top-nav,
html body.top-nav-light #top-nav,
html body.top-nav-dark #top-nav {
	background: rgba(244, 236, 214, 0.92);
	background-color: rgba(244, 236, 214, 0.92);
	border-color: var(--ti-ink-300);
	color: var(--ti-ink-900);
}

/* The INNER wrapper used when top-nav is boxed. Higher specificity
   needed because Jannah's .top-nav-boxed .topbar-wrapper rule lives
   inside a @media (min-width: 992px) block. */
html body #top-nav .topbar-wrapper,
html body.top-nav-boxed #top-nav .topbar-wrapper,
html body.top-nav-boxed .topbar-wrapper {
	background: rgba(244, 236, 214, 0.92);
	background-color: rgba(244, 236, 214, 0.92);
	border-color: var(--ti-ink-300);
}

/* In global dark mode (.dark-skin on body), the WHOLE header complex
   should switch dark to match the rest of the theme. Previously we only
   handled top-nav — the main-nav stayed cream because my Phase 4 rules
   for main-nav-light/dark were scoped to html:not(.dark-skin) body, and
   Jannah's defaults for the light-mode nav variant (var(--main-nav-
   background): #FFFFFF) don't auto-flip when global dark engages. */
html.dark-skin #top-nav,
html.dark-skin.top-nav-dark #top-nav,
html.dark-skin.top-nav-light #top-nav,
html.dark-skin #top-nav .topbar-wrapper,
html.dark-skin.top-nav-boxed .topbar-wrapper,
html.dark-skin #theme-header,
html.dark-skin .theme-header {
	background: #1f2024 !important;
	background-color: #1f2024 !important;
	border-color: rgba(177, 137, 189, 0.18);
	color: var(--ti-cream-100);
}

/* Main nav surface in global dark mode — both light and dark variants
   should appear dark (since whole page is dark). Token rebind so all
   descendants pick up correct colors. */
html.dark-skin .main-nav-light,
html.dark-skin .main-nav-dark,
html.dark-skin #theme-header.main-nav-light,
html.dark-skin #theme-header.main-nav-dark {
	--main-nav-background: #1f2024;
	--main-nav-secondry-background: rgba(255, 255, 255, 0.04);
	--main-nav-primary-color: var(--ti-violet-300);
	--main-nav-contrast-primary-color: var(--ti-ink-900);
	--main-nav-text-color: var(--ti-cream-100);
	--main-nav-secondry-text-color: var(--ti-ink-300);
	--main-nav-main-border-color: rgba(177, 137, 189, 0.18);
	--main-nav-secondry-border-color: rgba(177, 137, 189, 0.10);
}

html.dark-skin #main-nav,
html.dark-skin .main-nav-light #main-nav,
html.dark-skin .main-nav-dark #main-nav,
html.dark-skin #main-nav.fixed-nav,
html.dark-skin .main-nav-light #main-nav.fixed-nav,
html.dark-skin .main-nav-dark #main-nav.fixed-nav {
	background: #1f2024 !important;
	background-color: rgba(31, 32, 36, 0.92) !important;
	color: var(--ti-cream-100);
	border-color: rgba(177, 137, 189, 0.18);
}

/* Sticky cream-on-dark gets the backdrop blur */
html.dark-skin #main-nav.fixed-nav,
html.dark-skin #top-nav.fixed-nav {
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* Menu item colors in dark mode (both light-variant and dark-variant
   nav classes) */
html.dark-skin .main-nav-light #main-nav .main-menu .menu > li > a,
html.dark-skin .main-nav-dark #main-nav .main-menu .menu > li > a,
html.dark-skin #main-nav .main-menu .menu > li > a {
	color: var(--ti-cream-100);
}

html.dark-skin .main-nav-light #main-nav .main-menu .menu > li > a:hover,
html.dark-skin .main-nav-dark #main-nav .main-menu .menu > li > a:hover,
html.dark-skin .main-nav-light #main-nav .main-menu .menu > li.current-menu-item > a,
html.dark-skin .main-nav-dark #main-nav .main-menu .menu > li.current-menu-item > a {
	color: var(--ti-violet-300);
}

html.dark-skin .main-nav-light #main-nav .main-menu .menu > li.current-menu-item > a::after,
html.dark-skin .main-nav-dark #main-nav .main-menu .menu > li.current-menu-item > a::after {
	background: var(--ti-violet-300);
}


/* --- Header content area (logo row + everything between top-nav and
   main-nav) — force transparent so body cream shows through ----------- */
#theme-header,
#theme-header > .container,
#theme-header > .header-container,
#theme-header .header-container,
#theme-header .logo-wrapper,
#theme-header .tie-row.logo-row {
	background: transparent;
}


/* --- Main nav: force cream in light mode regardless of admin choice -- */
/* IMPORTANT: .main-nav-dark / .main-nav-light classes are added to
   #theme-header by tie_header_class() (see jannah/framework/functions/
   formatting.php:33). They are NOT on #main-nav itself. So our
   override must target descendant: `.main-nav-dark #main-nav`. */
html:not(.dark-skin) body .main-nav-dark,
html:not(.dark-skin) body .main-nav-dark #main-nav,
html:not(.dark-skin) body #theme-header.main-nav-dark,
html:not(.dark-skin) body #theme-header.main-nav-dark #main-nav {
	--main-nav-background: rgba(244, 236, 214, 0.92);
	--main-nav-secondry-background: rgba(123, 63, 140, 0.06);
	--main-nav-primary-color: var(--ti-violet-500);
	--main-nav-contrast-primary-color: var(--ti-cream-50);
	--main-nav-text-color: var(--ti-ink-900);
	--main-nav-secondry-text-color: var(--ti-ink-600);
	--main-nav-main-border-color: var(--ti-ink-300);
	--main-nav-secondry-border-color: var(--ti-ink-200);
}

html:not(.dark-skin) body .main-nav-dark #main-nav {
	background: rgba(244, 236, 214, 0.92);
	background-color: rgba(244, 236, 214, 0.92);
	color: var(--ti-ink-900);
	border-color: var(--ti-ink-300);
}

/* Sticky / fixed-nav state. When user scrolls, Jannah's JS adds
   .fixed-nav to #main-nav. Jannah's base.css:2013 then sets
   .main-nav-dark .main-nav.fixed-nav { background: rgba(31,32,36,0.95) }
   We need the cream sticky in light mode. */
html:not(.dark-skin) body .main-nav-dark #main-nav.fixed-nav,
html:not(.dark-skin) body .main-nav-dark .main-nav.fixed-nav,
html:not(.dark-skin) body #theme-header.main-nav-dark #main-nav.fixed-nav {
	background: rgba(244, 236, 214, 0.92);
	background-color: rgba(244, 236, 214, 0.92);
	color: var(--ti-ink-900);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--ti-ink-300);
}

/* Sticky cream for the LIGHT nav too (Jannah's base.css:1996 sets it
   to rgba(255,255,255,0.95) — pure white opacity. Override to cream. */
html:not(.dark-skin) body .main-nav-light #main-nav.fixed-nav,
html:not(.dark-skin) body .main-nav-light .main-nav.fixed-nav,
html:not(.dark-skin) body #theme-header.main-nav-light #main-nav.fixed-nav {
	background: rgba(244, 236, 214, 0.92);
	background-color: rgba(244, 236, 214, 0.92);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
}

/* Menu item text inside the forced-light dark nav (including sticky). */
html:not(.dark-skin) body .main-nav-dark #main-nav .main-menu .menu > li > a {
	color: var(--ti-ink-900);
}

html:not(.dark-skin) body .main-nav-dark #main-nav .main-menu .menu > li > a:hover,
html:not(.dark-skin) body .main-nav-dark #main-nav .main-menu .menu > li.current-menu-item > a,
html:not(.dark-skin) body .main-nav-dark #main-nav .main-menu .menu > li.current-menu-parent > a {
	color: var(--ti-violet-500);
}

/* Skin-switcher icon and other components inside the forced-light nav. */
html:not(.dark-skin) body .main-nav-dark #main-nav .components > li > a,
html:not(.dark-skin) body .main-nav-dark #main-nav .components .change-skin {
	color: var(--ti-ink-900);
}

html:not(.dark-skin) body .main-nav-dark #main-nav .components > li > a:hover,
html:not(.dark-skin) body .main-nav-dark #main-nav .components .change-skin:hover {
	color: var(--ti-violet-500);
}

/* Top nav menu — same intermediate-div issue as main-nav. */
#top-nav .top-menu .menu > li > a,
#top-nav .top-menu > ul > li > a {
	font-family: var(--ti-font-mono);
	font-weight: 500;
	font-size: 11px;
	letter-spacing: var(--ti-tracking-caps);
	text-transform: uppercase;
	padding: 10px var(--ti-sp-3);
	line-height: 1.2;
}


/* --- Components: subscribe button & search ------------------------- */
/* Jannah renders the custom subscribe button inside .components as
   <li class="custom-menu-button"><a class="button">…</a></li>. Force
   pill + violet without touching the template. */
#main-nav .components .custom-menu-button .button,
#top-nav  .components .custom-menu-button .button {
	display: inline-flex;
	align-items: center;
	background: var(--ti-violet-500);
	color: var(--ti-cream-50);
	font-family: var(--ti-font-sans);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
	padding: 10px var(--ti-sp-4);
	min-height: 40px;
	border-radius: 999px;
	border: 0;
	box-shadow: none;
	transition: background-color var(--ti-dur) var(--ti-ease),
	            color var(--ti-dur) var(--ti-ease);
}

#main-nav .components .custom-menu-button .button:hover,
#top-nav  .components .custom-menu-button .button:hover {
	background: var(--ti-violet-600);
	color: var(--ti-cream-50);
}

.dark-skin #main-nav .components .custom-menu-button .button,
.dark-skin #top-nav  .components .custom-menu-button .button {
	background: var(--ti-violet-300);
	color: var(--ti-ink-900);
}
.dark-skin #main-nav .components .custom-menu-button .button:hover,
.dark-skin #top-nav  .components .custom-menu-button .button:hover {
	background: var(--ti-violet-200);
	color: var(--ti-ink-900);
}

/* Search input — LOUD treatment so it's unmistakable on cream nav.
   Previously paper-dim + 1-2px violet-300 — still hard to see at a
   glance. Now: bright cream-50 surface, 2px violet-500 border (the
   primary brand color), subtle shadow for depth, min-width so it has
   real presence. The contained magnifying glass icon also gets sized
   up. */
#main-nav .components form#search,
#top-nav  .components form#search,
#main-nav .components .search-bar form#search {
	background: var(--ti-cream-50);
	background-color: var(--ti-cream-50);
	/* Double-outline pattern: 2px violet ring with a thin outer halo so
	   the input reads as a deliberate UI control on the cream surface,
	   not a flat plate. The halo is delivered via box-shadow (no extra
	   element, no layout impact). */
	border: 2px solid var(--ti-violet-500);
	border-radius: 999px;
	padding: 5px 6px 5px 16px;
	display: inline-flex;
	align-items: center;
	min-width: 220px;
	box-shadow: 0 0 0 1px rgba(123, 63, 140, 0.15),
	            0 1px 3px rgba(65, 38, 79, 0.10);
	transition: border-color var(--ti-dur) var(--ti-ease),
	            background-color var(--ti-dur) var(--ti-ease),
	            box-shadow var(--ti-dur) var(--ti-ease);
}

#main-nav .components form#search:hover,
#top-nav  .components form#search:hover {
	border-color: var(--ti-violet-600);
	box-shadow: 0 2px 8px rgba(65, 38, 79, 0.18);
}

#main-nav .components form#search:focus-within,
#top-nav  .components form#search:focus-within {
	border-color: var(--ti-violet-700);
	background: var(--ti-cream-50);
	box-shadow: 0 0 0 3px rgba(123, 63, 140, 0.20),
	            0 2px 8px rgba(65, 38, 79, 0.15);
}

/* Magnifying glass button inside the search form — make sure it's
   visible and tap-able. */
#main-nav .components form#search button#search-submit,
#top-nav  .components form#search button#search-submit {
	background: transparent;
	border: 0;
	color: var(--ti-violet-500);
	cursor: pointer;
	min-width: 32px;
	min-height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

#main-nav .components form#search button#search-submit:hover,
#top-nav  .components form#search button#search-submit:hover {
	color: var(--ti-violet-700);
}

#main-nav .components form#search .tie-search-icon,
#top-nav  .components form#search .tie-search-icon {
	font-size: 14px;
}

/* Compact search trigger (when admin chose compact layout) — pill
   button with violet accent so it stands out from generic icons. */
#main-nav .components .search-compact-icon a,
#top-nav  .components .search-compact-icon a {
	min-width: 40px;
	min-height: 40px;
	border-radius: 999px;
	background: rgba(123, 63, 140, 0.08);
	color: var(--ti-violet-500);
	border: 1px solid var(--ti-violet-300);
	transition: background-color var(--ti-dur) var(--ti-ease),
	            border-color var(--ti-dur) var(--ti-ease);
}

#main-nav .components .search-compact-icon a:hover,
#top-nav  .components .search-compact-icon a:hover {
	background: var(--ti-violet-500);
	color: var(--ti-cream-50);
	border-color: var(--ti-violet-500);
}

/* In dark mode the search keeps prominence with inverted contrast. */
.dark-skin #main-nav .components form#search,
.dark-skin #top-nav  .components form#search {
	background: rgba(255, 255, 255, 0.06);
	border-color: var(--ti-violet-300);
}

.dark-skin #main-nav .components form#search input#search-input,
.dark-skin #top-nav  .components form#search input#search-input {
	color: var(--ti-cream-100);
}

.dark-skin #main-nav .components form#search button#search-submit,
.dark-skin #top-nav  .components form#search button#search-submit {
	color: var(--ti-violet-300);
}

#main-nav .components form#search input#search-input,
#top-nav  .components form#search input#search-input {
	background: transparent;
	border: 0;
	outline: none;
	/* Use Inter (sans) for the typed query so it reads like body text,
	   not mono code. Mono made the placeholder feel like a terminal. */
	font-family: var(--ti-font-sans);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ti-ink-900);
	padding: 6px 4px;
	min-width: 160px;
}

/* Placeholder — slightly italic, ink-500 for a readable hint that still
   recedes versus a typed query in solid ink-900. */
#main-nav .components form#search input#search-input::placeholder,
#top-nav  .components form#search input#search-input::placeholder {
	color: var(--ti-ink-500);
	font-style: italic;
	font-weight: 400;
	opacity: 1; /* override UA dim */
}

.dark-skin #main-nav .components form#search,
.dark-skin #top-nav  .components form#search {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(177, 137, 189, 0.2);
}
.dark-skin #main-nav .components form#search input#search-input,
.dark-skin #top-nav  .components form#search input#search-input {
	color: var(--ti-cream-100);
}

/* Compact search toggle (the magnifying-glass icon). Keep Jannah's icon
   font glyph; just give it a tap-target. */
#main-nav .components .search-compact-icon a,
#top-nav  .components .search-compact-icon a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	border-radius: 999px;
	transition: background-color var(--ti-dur) var(--ti-ease);
}

#main-nav .components .search-compact-icon a:hover,
#top-nav  .components .search-compact-icon a:hover {
	background: var(--ti-violet-50);
	color: var(--ti-violet-500);
}

.dark-skin #main-nav .components .search-compact-icon a:hover,
.dark-skin #top-nav  .components .search-compact-icon a:hover {
	background: rgba(177, 137, 189, 0.15);
	color: var(--ti-violet-300);
}


/* --- Mobile header (viewport < 992px) ------------------------------ */
/* Jannah's mobile header switches to a compact horizontal layout under
   992px: logo on one side, .mobile-header-components on the other
   (hamburger, search, login, cart icons). The whole thing lives inside
   #theme-header. Default styling: white bg (.theme-header { background:
   #fff } at base.css:884) + dark icons. We rebrand: cream surface,
   ink-900 icons, violet-500 hover.

   We use !important on the surface paint because some Jannah admin
   themes inject inline header styles that win on plain specificity.
   This is the cleanest way to ensure the brand surface always paints. */
@media (max-width: 991px) {

	html:not(.dark-skin) body #theme-header,
	html:not(.dark-skin) body header#theme-header,
	html:not(.dark-skin) body .theme-header,
	html:not(.dark-skin) body #theme-header.main-nav-dark,
	html:not(.dark-skin) body #theme-header.top-nav-dark,
	html:not(.dark-skin) body #theme-header.main-nav-light,
	html:not(.dark-skin) body #theme-header.has-shadow {
		background: var(--ti-cream-100) !important;
		background-color: var(--ti-cream-100) !important;
		border-bottom: 1px solid var(--ti-ink-300);
		box-shadow: none;
	}

	/* Main-nav surface on mobile — same cream so the header reads as
	   one continuous editorial strip. */
	html:not(.dark-skin) body #main-nav,
	html:not(.dark-skin) body #theme-header #main-nav,
	html:not(.dark-skin) body .main-nav-light #main-nav,
	html:not(.dark-skin) body .main-nav-dark #main-nav {
		background: transparent !important;
		background-color: transparent !important;
		border: 0 !important;
	}

	html:not(.dark-skin) body #theme-header .mobile-header-components,
	html:not(.dark-skin) body .mobile-header-components,
	html:not(.dark-skin) body #theme-header .main-nav-wrapper {
		background: transparent !important;
		color: var(--ti-ink-900);
	}

	/* Mobile-header icon chip styling — chip color, hover, nav-icon
	   stroke, focus ring, and press transform are all handled by the
	   v1.0.22 unified system further down in this media query.
	   Nothing to set here. */

	/* Mobile logo */
	html:not(.dark-skin) body #theme-header #logo,
	html:not(.dark-skin) body #theme-header .header-layout-1-logo,
	html:not(.dark-skin) body #theme-header .logo-container,
	html:not(.dark-skin) body #theme-header .logo-wrapper,
	html:not(.dark-skin) body #theme-header .header-container {
		background: transparent !important;
	}

	/* =====================================================================
	   MOBILE HEADER — UNIFIED LAYOUT (v1.0.22 rebuild)
	   ---------------------------------------------------------------------
	   Goal: a single, modern, perfectly-balanced 3-column mobile header
	   that flips cleanly between light and dark mode.

	   DOM (Jannah, all inside .logo-container):
	     ┌─ #mobile-header-components-area_1 ─┐  ┌─ #logo ─┐  ┌─ #mobile-header-components-area_2 ─┐
	     │  [hamburger]                        │  │  ● tech-ish  │  │  [sun] [search]                     │
	     └─────────────────────────────────────┘  └──────────┘  └─────────────────────────────────────┘

	   Strategy:
	     1. Display the parent .logo-container as a 3-column CSS Grid
	        (1fr | auto | 1fr). The auto column hugs the wordmark; the
	        1fr columns flank it so the wordmark is dead-center
	        regardless of how many icons land on either side.
	     2. Render every icon as an identical 40×40 circular chip with
	        the SAME color, hover state, and focus ring. Three icons,
	        one visual language.
	     3. Normalize every glyph (Jannah's icon-font, nav-icon bars,
	        SVGs) so they all paint at the same optical size and never
	        offset from the chip's center.
	   ===================================================================== */

	/* ---- 3-column grid for the header row ----
	   Zero out Bootstrap-style gutter on all wrappers so the grid can
	   use the full viewport width — otherwise .container, .tie-row,
	   and .logo-wrapper each add 15px padding/margin and the wordmark
	   ends up offset from true center. */
	html body #theme-header .container,
	html body #theme-header .header-container,
	html body #theme-header .tie-row.logo-row,
	html body #theme-header .logo-wrapper {
		padding-left: 0;
		padding-right: 0;
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
		width: 100%;
	}

	html body #theme-header .logo-container,
	html body #theme-header .tie-col-md-4.logo-container {
		display: grid !important;
		grid-template-columns: 1fr auto 1fr;
		grid-template-areas: "left center right";
		align-items: center;
		gap: var(--ti-sp-3);
		width: 100%;
		max-width: 100%;
		padding: 10px var(--ti-sp-4);
		float: none;
		margin: 0;
	}

	html body #theme-header .logo-container > #mobile-header-components-area_1,
	html body #theme-header .logo-container > .mobile-header-components:first-of-type {
		grid-area: left;
		justify-self: start;
	}

	html body #theme-header .logo-container > #logo,
	html body #theme-header .logo-container > #logo.text-logo {
		grid-area: center;
		justify-self: center;
		float: none;
		margin: 0;
		padding: 0;
		text-align: center;
		width: auto;
		max-width: 100%;
		line-height: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	html body #theme-header .logo-container > #mobile-header-components-area_2 {
		grid-area: right;
		justify-self: end;
	}

	/* ---- Each .mobile-header-components is a flex row of chips ---- */
	html body .mobile-header-components {
		display: flex;
		align-items: center;
		gap: 4px;
		margin: 0;
		padding: 0;
		float: none;
	}

	html body .mobile-header-components .components {
		display: flex;
		align-items: center;
		gap: 4px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	html body .mobile-header-components .components > li {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0;
		padding: 0;
		line-height: 1;
		float: none;
		list-style: none;
		background: transparent;
	}

	html body .mobile-header-components .components > li::before {
		content: none; /* kill any inherited list bullet / em-dash */
	}

	/* ---- The chip itself: identical for every icon-bearing link ----
	   Visible at REST so the four header elements (hamburger, wordmark,
	   sun, search) read as four matched objects on a shared baseline.
	   The hamburger chip is intentionally wider (rounded rectangle,
	   16px radius) so the "menu trigger" reads as distinct from the
	   "single action" sun/search circles — same visual grammar as
	   iOS/macOS toolbars.

	   Action chips at 48×48 by default; moon/sun is the lone exception
	   (smaller chip, smaller glyph — see scoped rule below). All chips
	   align on the grid's vertical center via the parent's
	   align-items: center, so different sizes still share one baseline. */
	html body .mobile-header-components .components > li > a,
	html body .mobile-header-components #mobile-menu-icon,
	html body #mobile-menu-icon {
		box-sizing: border-box;
		width: 48px;
		height: 48px;
		min-width: 48px;
		min-height: 48px;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		padding: 0;
		margin: 0;
		border: 1px solid transparent;
		border-radius: 999px;
		line-height: 1;
		text-decoration: none;
		float: none;
		vertical-align: middle;
		transition: background-color 200ms cubic-bezier(0.2, 0, 0.2, 1),
		            color 200ms cubic-bezier(0.2, 0, 0.2, 1),
		            border-color 200ms cubic-bezier(0.2, 0, 0.2, 1),
		            transform 200ms cubic-bezier(0.2, 0, 0.2, 1);
	}

	/* Menu (hamburger) — wider AND taller rounded-rectangle chip so it
	   reads as the dominant nav trigger. Bumped from 60×48 to 64×52 per
	   editorial feedback — matches the heavier visual weight the
	   wordmark now carries on mobile. */
	html body .mobile-header-components #mobile-menu-icon,
	html body #mobile-menu-icon,
	html body .mobile-header-components .mobile-component_menu > a {
		width: 64px;
		min-width: 64px;
		height: 52px;
		min-height: 52px;
		border-radius: 16px;
	}

	/* Moon/sun (dark-mode toggle) — DELIBERATELY smaller than the
	   sibling search chip. Editorial intent: the toggle is a secondary
	   action (most readers stay on their preferred theme); making it
	   visually smaller lets the search icon read as the primary CTA on
	   the right side. 40×40 chip, 18px glyph (see Glyph normalization
	   below for the size match). */
	html body .mobile-header-components .mobile-component_dark-mode > a,
	html body .mobile-header-components .components > li.mobile-component_dark-mode > a,
	html body .mobile-header-components a.change-skin-icon,
	html body .mobile-header-components .components > li > a.change-skin-icon {
		width: 40px;
		height: 40px;
		min-width: 40px;
		min-height: 40px;
	}

	/* Press feedback (touch + mouse) — since rest-state chips are
	   transparent and hover is gated to (hover: hover), touch users
	   would otherwise get only the scale-down on press. Add a
	   subtle background flash so the tap registers visually. */
	html body .mobile-header-components .components > li > a:active,
	html body #mobile-menu-icon:active {
		transform: scale(0.94);
	}

	html:not(.dark-skin) body .mobile-header-components .components > li > a:active,
	html:not(.dark-skin) body #mobile-menu-icon:active {
		background: var(--ti-violet-100);
		border-color: var(--ti-violet-200);
	}

	html.dark-skin body .mobile-header-components .components > li > a:active,
	html.dark-skin body #mobile-menu-icon:active {
		background: rgba(177, 137, 189, 0.18);
		border-color: rgba(177, 137, 189, 0.30);
	}

	html body .mobile-header-components .components > li > a:focus-visible,
	html body #mobile-menu-icon:focus-visible {
		outline: 2px solid var(--ti-violet-500);
		outline-offset: 2px;
	}

	/* ---- Glyph normalization (icon-font, .nav-icon bars, SVG) ----
	   Most chip glyphs render at 22px (≈46% of the 48px chip). The
	   moon/sun glyph (dark-mode toggle) is intentionally smaller —
	   18px inside a 40px chip — so it reads as a secondary action next
	   to the larger search chip. */
	html body .mobile-header-components .tie-icon-search,
	html body .mobile-header-components .tie-search-icon,
	html body .mobile-header-components .tie-icon-author,
	html body .mobile-header-components [class*="tie-icon-"] {
		font-size: 22px;
		line-height: 1;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-weight: 600; /* slight optical weight bump so the glyph
		                     reads bold against the chip surface */
	}

	/* Moon/sun glyph — explicitly smaller. Overrides the [class*="tie-icon-"]
	   catch-all above for any element carrying the dark-mode change-skin
	   class, regardless of the underlying icon glyph the admin chose. */
	html body .mobile-header-components .tie-icon-moon,
	html body .mobile-header-components .change-skin-icon,
	html body .mobile-header-components .change-skin-icon [class*="tie-icon-"],
	html body .mobile-header-components .mobile-component_dark-mode [class*="tie-icon-"] {
		font-size: 18px;
		line-height: 1;
	}

	/* Hamburger as .nav-icon (3 bars) — sized to dominate visually.
	   Math: 36px wide × 4px tall bars, stacked 11px apart = 36 × 26 total
	   — that's 56% of the 64px chip width and 50% of the 52px chip
	   height. Reads as the loudest control in the header. */
	html body #mobile-menu-icon .nav-icon,
	html body .mobile-header-components #mobile-menu-icon .nav-icon {
		position: relative;
		top: 0;
		left: 0;
		right: auto;
		bottom: auto;
		margin: 0;
		width: 36px;
		height: 4px;
		border-radius: 2px;
	}

	html body #mobile-menu-icon .nav-icon::before,
	html body #mobile-menu-icon .nav-icon::after {
		border-radius: 2px;
		height: 4px;
	}

	html body #mobile-menu-icon .nav-icon::before {
		transform: translateY(-11px);
	}

	html body #mobile-menu-icon .nav-icon::after {
		transform: translateY(11px);
	}

	/* Hamburger as tie-icon-grid-9 / grid-4 — matched to the bigger
	   3-bar nav-icon. Math: 18px font × 2.0 scale = 36px effective square
	   = 56% of the 64px chip. Same optical weight as the 3-bar variant. */
	html body .mobile-header-components .tie-mobile-menu-icon.tie-icon-grid-9,
	html body .mobile-header-components .tie-mobile-menu-icon.tie-icon-grid-4,
	html body #mobile-menu-icon .tie-icon-grid-9,
	html body #mobile-menu-icon .tie-icon-grid-4 {
		font-size: 18px;
		line-height: 1;
		transform: scale(2.0);
		transform-origin: center;
		display: inline-block;
		vertical-align: middle;
	}

	/* SVG icons — uniform 24×24 box, centered. */
	html body .mobile-header-components .components > li > a svg,
	html body .mobile-header-components .components > li > a > i {
		width: 24px;
		height: 24px;
		display: block;
	}

	/* ---- Light mode — chip surface, color, hover ---- */
	/* REST state: chip is INVISIBLE — background matches the header
	   bar exactly (cream-100) and the border is transparent. The
	   "negative space" inside the chip blends into the surrounding
	   surface so the glyph reads as the only visible element. On
	   hover (mouse) and active (touch press), the chip appears with
	   a violet tint to signal interactivity. */
	html:not(.dark-skin) body .mobile-header-components .components > li > a,
	html:not(.dark-skin) body #mobile-menu-icon {
		color: var(--ti-ink-900) !important;
		background: transparent;
		border-color: transparent;
	}

	/* Light-mode hamburger bars (rest state). */
	html:not(.dark-skin) body .mobile-header-components .nav-icon,
	html:not(.dark-skin) body .mobile-header-components .nav-icon::before,
	html:not(.dark-skin) body .mobile-header-components .nav-icon::after,
	html:not(.dark-skin) body #mobile-menu-icon .nav-icon,
	html:not(.dark-skin) body #mobile-menu-icon .nav-icon::before,
	html:not(.dark-skin) body #mobile-menu-icon .nav-icon::after {
		background-color: var(--ti-ink-900) !important;
	}

	/* Hover scoped to (hover: hover) — on touch devices iOS Safari
	   leaves the last-tapped chip in a stuck hover state (the violet
	   tint persists until the user taps elsewhere). That makes one
	   chip look "selected" relative to its siblings. By gating hover
	   styles to pointers that actually hover (mice on desktop),
	   touch users get only the press feedback (`:active` scale-down)
	   and never see a stuck-hover chip. */
	@media (hover: hover) {
		html:not(.dark-skin) body .mobile-header-components .components > li > a:hover,
		html:not(.dark-skin) body #mobile-menu-icon:hover {
			background: var(--ti-violet-100);
			border-color: var(--ti-violet-300);
			color: var(--ti-violet-700) !important;
		}

		html:not(.dark-skin) body .mobile-header-components .components > li > a:hover .nav-icon,
		html:not(.dark-skin) body .mobile-header-components .components > li > a:hover .nav-icon::before,
		html:not(.dark-skin) body .mobile-header-components .components > li > a:hover .nav-icon::after,
		html:not(.dark-skin) body #mobile-menu-icon:hover .nav-icon,
		html:not(.dark-skin) body #mobile-menu-icon:hover .nav-icon::before,
		html:not(.dark-skin) body #mobile-menu-icon:hover .nav-icon::after {
			background-color: var(--ti-violet-700) !important;
		}
	}

	/* ---- Dark mode — chip surface + color + hover ----
	   Matching rest-state chip surface for parity with light mode. */
	html.dark-skin body .mobile-header-components .components > li > a,
	html.dark-skin body #mobile-menu-icon,
	html.dark-skin body .mobile-header-components .components > li > a *,
	html.dark-skin body #mobile-menu-icon * {
		color: var(--ti-cream-100) !important;
	}

	html.dark-skin body .mobile-header-components .components > li > a,
	html.dark-skin body #mobile-menu-icon {
		background: transparent;
		border-color: transparent;
	}

	@media (hover: hover) {
		html.dark-skin body .mobile-header-components .components > li > a:hover,
		html.dark-skin body #mobile-menu-icon:hover {
			background: rgba(177, 137, 189, 0.20);
			border-color: rgba(177, 137, 189, 0.45);
			color: var(--ti-violet-300) !important;
		}

		html.dark-skin body .mobile-header-components .components > li > a:hover *,
		html.dark-skin body #mobile-menu-icon:hover * {
			color: var(--ti-violet-300) !important;
		}

		html.dark-skin body #mobile-menu-icon:hover .nav-icon,
		html.dark-skin body #mobile-menu-icon:hover .nav-icon::before,
		html.dark-skin body #mobile-menu-icon:hover .nav-icon::after {
			background-color: var(--ti-violet-300) !important;
		}
	}

	html.dark-skin body .mobile-header-components .nav-icon,
	html.dark-skin body .mobile-header-components .nav-icon::before,
	html.dark-skin body .mobile-header-components .nav-icon::after,
	html.dark-skin body #mobile-menu-icon .nav-icon,
	html.dark-skin body #mobile-menu-icon .nav-icon::before,
	html.dark-skin body #mobile-menu-icon .nav-icon::after {
		background-color: var(--ti-cream-100) !important;
	}

	/* Dark-mode hover nav-icon recolor is inside the (hover: hover)
	   block above — no duplicate rule out here. */

	html.dark-skin body .mobile-header-components .components > li > a:focus-visible,
	html.dark-skin body #mobile-menu-icon:focus-visible {
		outline-color: var(--ti-violet-300);
	}

	/* ---- Logo wordmark sizing on mobile ----
	   Slightly tighter than the desktop clamp so it fits comfortably
	   between the two icon groups on a 360–430px viewport. */
	html body #theme-header .logo-text,
	html body #theme-header #logo .logo-text {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		margin: 0;
		padding: 0;
	}

	html body #theme-header .techish-wordmark {
		display: inline-flex;
		align-items: center;
		line-height: 1;
	}

	html body #theme-header .techish-wordmark__name {
		font-size: clamp(26px, 7.5vw, 34px);
		line-height: 1;
		display: inline-flex;
		align-items: center;
	}

	html body #theme-header .techish-wordmark__dot {
		width: 0.42em;
		height: 0.42em;
		min-width: 0.42em;
		min-height: 0.42em;
		margin-right: 0.42em;
		/* Push the dot up to sit at x-height optical center, matching
		   where the icon-font glyphs paint inside their chips. Without
		   this the dot reads "low" because em-units anchor to baseline,
		   not x-height. */
		transform: translateY(-0.08em);
	}

	/* The very-small viewport tightening lives in a sibling @media
	   block below — kept flat (not nested) so it works in browsers
	   that don't support nested CSS (Safari < 16.5). */

	/* Breadcrumb spacing on mobile — the thin separator line above the
	   breadcrumb was sitting too close. Add breathing room between
	   #theme-header and the first content element. */
	html body #breadcrumb,
	html body .entry-header-outer #breadcrumb {
		margin-top: var(--ti-sp-5); /* 24px */
		padding-top: var(--ti-sp-3);
	}

	/* If the page builder or category page has a banner/ad between the
	   header and breadcrumb, give it room too. */
	html body #theme-header + * {
		margin-top: var(--ti-sp-4);
	}
}


/* Small viewports — tighten the chip spacing so the 3-column grid
   doesn't wrap on 360px phones. Sibling of the main mobile @media
   above (not nested, for older-Safari compatibility). */
@media (max-width: 360px) {
	html body #theme-header .logo-container,
	html body #theme-header .tie-col-md-4.logo-container {
		padding: 8px 10px;
		gap: 6px;
	}
	html body .mobile-header-components,
	html body .mobile-header-components .components {
		gap: 2px;
	}
	html body .mobile-header-components .components > li > a,
	html body #mobile-menu-icon {
		width: 42px;
		height: 42px;
		min-width: 42px;
		min-height: 42px;
	}
	html body .mobile-header-components #mobile-menu-icon,
	html body #mobile-menu-icon,
	html body .mobile-header-components .mobile-component_menu > a {
		width: 56px;
		min-width: 56px;
		height: 46px;
		min-height: 46px;
		border-radius: 14px;
	}
	/* Moon/sun stays proportionally smaller on tiny phones too. */
	html body .mobile-header-components .mobile-component_dark-mode > a,
	html body .mobile-header-components a.change-skin-icon {
		width: 36px;
		height: 36px;
		min-width: 36px;
		min-height: 36px;
	}
}


/* --- Slide-out drawer (#mobile-menu inside .side-aside) ------------ */
/* Jannah's drawer defaults to dark (via sidebar-slide.php:25 adding
   .dark-skin and .dark-widgetized-area classes to the <aside>). For
   Tech-ish brand consistency in light mode we want the drawer to be
   CREAM with ink-900 text + violet accents. In global dark mode we
   keep Jannah's dark. */

html:not(.dark-skin) body .side-aside.normal-side,
html:not(.dark-skin) body aside.side-aside,
html:not(.dark-skin) body .side-aside.dark-skin,
html:not(.dark-skin) body .side-aside.dark-widgetized-area {
	background: var(--ti-cream-100) !important;
	background-color: var(--ti-cream-100) !important;
	color: var(--ti-ink-900);
}

html:not(.dark-skin) body .side-aside .side-aside-wrapper {
	background: transparent !important;
}

/* Inside the drawer, neutralize the .dark-skin / .dark-widgetized-area
   styles that Jannah scopes to the drawer in light mode. */
html:not(.dark-skin) body .side-aside.dark-skin *,
html:not(.dark-skin) body .side-aside.dark-widgetized-area * {
	color: inherit;
}

html:not(.dark-skin) body .side-aside #mobile-menu li a {
	color: var(--ti-ink-900) !important;
	border-bottom: 1px solid var(--ti-ink-200);
	/* Each row owns its left rail; we paint the active marker via
	   ::before so it cannot push or overlap the next row's bottom
	   border (the old `box-shadow: inset` could bleed into siblings
	   when adjacent rows were both active/current). */
	position: relative;
}

/* Active-state rail — drawn as a ::before so it stays inside the row
   and never paints over the border between rows. */
html:not(.dark-skin) body .side-aside #mobile-menu li.current-menu-item > a::before,
html:not(.dark-skin) body .side-aside #mobile-menu li.current-menu-parent > a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 3px;
	background: var(--ti-violet-500);
	border-radius: 0 2px 2px 0;
}

html:not(.dark-skin) body .side-aside #mobile-menu li a:hover,
html:not(.dark-skin) body .side-aside #mobile-menu li.current-menu-item > a,
html:not(.dark-skin) body .side-aside #mobile-menu li.current-menu-parent > a {
	color: var(--ti-violet-500) !important;
	background: rgba(123, 63, 140, 0.05);
}

/* Close button on the drawer.
   The X glyph itself is rendered by Jannah via the tiefonticon font as
   .close-side-aside::before (content "\f00d"). Default Jannah size + low
   contrast leaves it lost on the cream surface, so we:
     - Lock a 44px circular tap-target
     - Lift the glyph to 24px so it reads from a distance
     - Add a 1px ink-300 ring so the box is visible even before tap
     - Cream-100 background on the ring (so the X sits on a clear chip)
     - Violet hover state with chip fill, keeping focus visible */
html:not(.dark-skin) body .side-aside .close-side-aside,
html:not(.dark-skin) body .side-aside .remove {
	color: var(--ti-ink-900) !important;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: var(--ti-cream-50);
	border: 1px solid var(--ti-ink-300);
	border-radius: 999px;
	font-size: 22px;
	line-height: 1;
	transition: background-color var(--ti-dur) var(--ti-ease),
	            color var(--ti-dur) var(--ti-ease),
	            border-color var(--ti-dur) var(--ti-ease),
	            transform var(--ti-dur) var(--ti-ease);
}

html:not(.dark-skin) body .side-aside .close-side-aside::before,
html:not(.dark-skin) body .side-aside .remove::before {
	font-size: 22px;
	line-height: 1;
}

html:not(.dark-skin) body .side-aside .close-side-aside:hover {
	color: var(--ti-cream-100) !important;
	background: var(--ti-violet-500);
	border-color: var(--ti-violet-500);
	transform: scale(1.04);
}

html:not(.dark-skin) body .side-aside .close-side-aside:focus-visible {
	outline: 2px solid var(--ti-violet-500);
	outline-offset: 2px;
}

/* Mobile search inside the drawer (#mobile-search). */
html:not(.dark-skin) body .side-aside #mobile-search input,
html:not(.dark-skin) body .side-aside #mobile-search form {
	background: var(--ti-cream-50) !important;
	border: 2px solid var(--ti-violet-500) !important;
	border-radius: 999px;
	color: var(--ti-ink-900);
}

/* Sub-menu inside drawer. */
html:not(.dark-skin) body .side-aside #mobile-menu ul.sub-menu {
	background: rgba(123, 63, 140, 0.04);
}

html:not(.dark-skin) body .side-aside #mobile-menu ul.sub-menu li a {
	color: var(--ti-ink-800) !important;
	padding-left: var(--ti-sp-6);
}


/* --- Mobile menu drawer (slide-out) -------------------------------- */
/* Jannah's mobile drawer (#mobile-menu inside .side-aside) inherits
   body fonts. Make sure touch targets are tall enough and typography
   matches our system. */
#mobile-menu li a {
	min-height: 48px;
	display: flex;
	align-items: center;
	padding: 12px var(--ti-sp-4);
	font-family: var(--ti-font-sans);
	font-size: 16px; /* Mobile menu items NOT mono — readability first. */
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ti-ink-900);
}

.dark-skin #mobile-menu li a,
.side-aside.dark-skin #mobile-menu li a {
	color: var(--ti-cream-100);
}

#mobile-menu li a {
	position: relative; /* anchor for ::before active-rail */
}

#mobile-menu li.current-menu-item > a,
#mobile-menu li.current-menu-parent > a {
	color: var(--ti-violet-500);
	/* No box-shadow: inset — that paints OVER the bottom border of the
	   row above, creating a visible 1px notch that reads as overlap.
	   The active rail is drawn via the light-mode rule earlier; in dark
	   mode below we mirror it with a violet-300 rail. */
}

.dark-skin #mobile-menu li.current-menu-item > a,
.dark-skin #mobile-menu li.current-menu-parent > a,
.side-aside.dark-skin #mobile-menu li.current-menu-item > a,
.side-aside.dark-skin #mobile-menu li.current-menu-parent > a {
	color: var(--ti-violet-300);
}

.dark-skin #mobile-menu li.current-menu-item > a::before,
.dark-skin #mobile-menu li.current-menu-parent > a::before,
.side-aside.dark-skin #mobile-menu li.current-menu-item > a::before,
.side-aside.dark-skin #mobile-menu li.current-menu-parent > a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 3px;
	background: var(--ti-violet-300);
	border-radius: 0 2px 2px 0;
}

/* The slide drawer's close button + branding header.
   Base (light) — bigger, ringed, chip-style. Dark variants override
   color + chip surface so the X stays legible on the dark drawer. */
.side-aside .close-side-aside {
	color: var(--ti-ink-900);
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--ti-cream-50);
	border: 1px solid var(--ti-ink-300);
	border-radius: 999px;
	font-size: 22px;
	line-height: 1;
}

.side-aside.dark-skin .close-side-aside,
.side-aside.dark-widgetized-area .close-side-aside,
html.dark-skin .side-aside .close-side-aside {
	color: var(--ti-cream-100);
	background: rgba(251, 247, 236, 0.08);
	border-color: rgba(251, 247, 236, 0.20);
}

.side-aside.dark-skin .close-side-aside:hover,
.side-aside.dark-widgetized-area .close-side-aside:hover,
html.dark-skin .side-aside .close-side-aside:hover {
	color: var(--ti-violet-300);
	background: rgba(177, 137, 189, 0.18);
	border-color: var(--ti-violet-300);
}

/* Mobile menu toggle button — touch target. */
.mobile-icons-menu .button-mobile-menu,
.mobile-icons-menu a {
	min-width: 44px;
	min-height: 44px;
}


/* =====================================================================
   DARK-MODE MOBILE DRAWER
   ---------------------------------------------------------------------
   Two problems we're solving here:

   1. Jannah injects an inline <style> via wp_add_inline_style targeting
      `.side-aside.normal-side` with the admin's chosen mobile-menu
      background (color / gradient / image — see jannah/inc/custom-
      styles.php:1574-1615). Because Jannah's
      TIELABS_STYLES::latest_enqueued_file() walks the queue in reverse,
      that inline block is attached to OUR `techish-child` handle and
      therefore renders AFTER our external CSS. In light mode our
      `html:not(.dark-skin) body .side-aside.normal-side !important`
      rule (specificity 0,0,3,2) still beats Jannah's `.side-aside
      .normal-side` (0,0,2,0) — but in dark mode that rule is gated
      OUT, so the gradient wins by default. Result: the user opens the
      hamburger on a dark page and sees a violet→pink gradient drawer
      with no contrast, illegible.

   2. The drawer in dark mode should be the same dark surface as the
      rest of the dark UI, not Jannah's white default + admin gradient.

   Fix: mirror our light-mode rules under `html.dark-skin` with the
   same specificity + !important so we win against the inline gradient
   regardless of which admin background type is set. The override is
   ADDITIVE (we never touch admin's choice for light-mode users who
   wanted a custom gradient — but in dark mode, brand consistency wins
   because the gradient is unreadable on a dark page anyway).
   ===================================================================== */
html.dark-skin body .side-aside.normal-side,
html.dark-skin body aside.side-aside,
html.dark-skin body .side-aside.dark-skin,
html.dark-skin body .side-aside.dark-widgetized-area,
html.dark-skin body .side-aside.normal-side.dark-skin {
	background: #1f2024 !important;
	background-color: #1f2024 !important;
	background-image: none !important;
	color: var(--ti-cream-100) !important;
}

html.dark-skin body .side-aside .side-aside-wrapper {
	background: transparent !important;
	background-image: none !important;
}

/* Menu rows on dark drawer */
html.dark-skin body .side-aside #mobile-menu li a {
	color: var(--ti-cream-100) !important;
	border-bottom: 1px solid rgba(177, 137, 189, 0.12);
	position: relative;
}

html.dark-skin body .side-aside #mobile-menu li a:hover,
html.dark-skin body .side-aside #mobile-menu li.current-menu-item > a,
html.dark-skin body .side-aside #mobile-menu li.current-menu-parent > a {
	color: var(--ti-violet-300) !important;
	background: rgba(177, 137, 189, 0.08);
}

html.dark-skin body .side-aside #mobile-menu li.current-menu-item > a::before,
html.dark-skin body .side-aside #mobile-menu li.current-menu-parent > a::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 3px;
	background: var(--ti-violet-300);
	border-radius: 0 2px 2px 0;
}

/* Sub-menu nesting in dark drawer */
html.dark-skin body .side-aside #mobile-menu ul.sub-menu {
	background: rgba(255, 255, 255, 0.03);
}

html.dark-skin body .side-aside #mobile-menu ul.sub-menu li a {
	color: var(--ti-cream-100) !important;
	padding-left: var(--ti-sp-6);
}

/* Mobile drawer search field in dark mode */
html.dark-skin body .side-aside #mobile-search input,
html.dark-skin body .side-aside #mobile-search form {
	background: rgba(255, 255, 255, 0.04) !important;
	border: 2px solid var(--ti-violet-300) !important;
	border-radius: 999px;
	color: var(--ti-cream-100);
}

/* Social-icons row on dark drawer */
html.dark-skin body #mobile-social-icons .social-icons-item a {
	color: var(--ti-cream-100);
}

html.dark-skin body #mobile-social-icons .social-icons-item a:hover {
	color: var(--ti-violet-300);
}

/* Same beat-the-inline-gradient guarantee in LIGHT mode — we already
   had this, but be explicit that background-image is reset to none so
   admin's gradient image cannot leak through our cream fill. */
html:not(.dark-skin) body .side-aside.normal-side,
html:not(.dark-skin) body aside.side-aside {
	background-image: none !important;
}


/* =====================================================================
   PHASE 5 — ARCHIVE CARDS / LOOPS
   CSS-only. We don't override templates/loops/* — every Jannah layout
   variant (default, overlay, big-thumb, full-thumb, timeline, masonry,
   first-big, classic-small, etc.) keeps its markup and JS hooks. We
   layer Tech-ish chrome on top:
   - Cream paper-dim card surfaces with 1px violet-tinted border
   - Mono em-dash prefix on category labels
   - Hover: subtle lift + violet accent border
   - Empty-image fallback: brand violet→blue gradient
   - Editorial balance: text-wrap on titles already in Phase 2
   ===================================================================== */

/* --- Mag-box container: holds groups of cards in archives & blocks - */
/* Scope to .mag-box > posts-items > li so we don't card-ify mega-menu
   columns, widget lists, or related-posts lists (those have their own
   surfaces). The .mag-box wrapper itself stays transparent so the body
   cream shows through; the cards themselves take paper-dim. */
.mag-box.wide-post-box .posts-items > li,
.mag-box.small-wide-post-box .posts-items > li,
.mag-box.full-width-img-news-box .posts-items > li,
.mag-box.miscellaneous-box.has-first-big-post .posts-items > li:not(:first-child),
.mag-box.top-news-box .posts-items > li {
	background: var(--ti-paper-dim);
	border: 1px solid var(--ti-ink-300);
	border-radius: var(--ti-radius-md);
	padding: var(--ti-sp-4);
	transition: transform var(--ti-dur) var(--ti-ease),
	            border-color var(--ti-dur) var(--ti-ease);
}

.mag-box.wide-post-box .posts-items > li:hover,
.mag-box.small-wide-post-box .posts-items > li:hover,
.mag-box.full-width-img-news-box .posts-items > li:hover,
.mag-box.miscellaneous-box.has-first-big-post .posts-items > li:not(:first-child):hover,
.mag-box.top-news-box .posts-items > li:hover {
	border-color: var(--ti-violet-300);
	transform: translateY(-2px);
}

/* Honor reduced motion (full Phase 9 block lands later, but cards
   move when others don't, so suppress translation here right away). */
@media (prefers-reduced-motion: reduce) {
	.mag-box .posts-items > li:hover {
		transform: none;
	}
}

/* Dark-mode card surface — Jannah's dark-skin .container-wrapper is
   #27292d. Match it so cards inside .mag-box pick up the same surface. */
.dark-skin .mag-box.wide-post-box .posts-items > li,
.dark-skin .mag-box.small-wide-post-box .posts-items > li,
.dark-skin .mag-box.full-width-img-news-box .posts-items > li,
.dark-skin .mag-box.miscellaneous-box.has-first-big-post .posts-items > li:not(:first-child),
.dark-skin .mag-box.top-news-box .posts-items > li {
	background: #27292d;
	border-color: rgba(177, 137, 189, 0.18);
}

.dark-skin .mag-box.wide-post-box .posts-items > li:hover,
.dark-skin .mag-box.small-wide-post-box .posts-items > li:hover,
.dark-skin .mag-box.full-width-img-news-box .posts-items > li:hover,
.dark-skin .mag-box.miscellaneous-box.has-first-big-post .posts-items > li:not(:first-child):hover,
.dark-skin .mag-box.top-news-box .posts-items > li:hover {
	border-color: var(--ti-violet-300);
}


/* --- Dark blocks (in either light OR dark page) — typography tiers ---
   Jannah's admin can mark any mag-box "dark" (renders with .dark-skin
   on the .mag-box, even on a light page). Default cascade leaves the
   title/meta/excerpt all at the same near-cream tone, which kills the
   visual hierarchy. We layer three distinct typographic systems:

     1) Title (.post-title)    Inter 700 / cream-100 / tight, news-paper headline
     2) Meta  (.post-meta)     IBM Plex Mono / natural case / ink-300
     3) Excerpt (.post-excerpt) Inter Italic 400 / ink-300 / loose

   The three different colors (cream-100 vs violet-300 vs ink-300) give
   the eye a clear reading order even on dark fills, which avoids the
   "wall of cream text" problem the user flagged.

   Scope: matches blocks where the .dark-skin class is on the .mag-box
   itself (admin "dark" toggle) — NOT just inherited from a global
   dark page. This way the rules ALSO apply when the page is light. */

.mag-box.dark-skin .post-title,
.mag-box.dark-skin .post-title a,
.mag-box.dark-skin .thumb-title,
.mag-box.dark-skin .thumb-title a {
	font-family: var(--ti-font-sans);
	font-weight: 700;
	color: var(--ti-cream-100) !important;
	letter-spacing: -0.012em;
	line-height: 1.25;
}

.mag-box.dark-skin .post-title a:hover,
.mag-box.dark-skin .thumb-title a:hover {
	color: var(--ti-violet-300) !important;
}

/* Meta strip — mono, ink-300. We keep the IBM Plex Mono "// THE WRITER"
   font vocabulary but NOT a forced caps treatment, so the byline reads
   in the author's natural casing (e.g. "The Analyst", not "THE ANALYST").
   The pill labels elsewhere are hardcoded uppercase strings — those keep
   their look; this rule only owns dynamic byline content. */
.mag-box.dark-skin .post-meta,
.mag-box.dark-skin .post-meta *,
.mag-box.dark-skin .post-meta a,
.mag-box.dark-skin .post-meta .meta-item {
	font-family: var(--ti-font-mono) !important;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none !important;
	color: var(--ti-ink-300) !important;
}

.mag-box.dark-skin .post-meta a:hover {
	color: var(--ti-violet-300) !important;
}

/* LIGHT-MODE meta strip — adopts the IBM Plex Mono font from the
   "// THE WRITER" pill so the byline visually belongs to the same
   editorial system, but stays in NATURAL CASE. The pill itself
   ("// THE WRITER") is a hardcoded uppercase label; the byline is
   dynamic author content and must preserve the source casing
   ("The Analyst", "Dickson Otieno") — never force-uppercase it.
   Ink-600 base for the date, violet-500 for the author name. */
.mag-box:not(.dark-skin) .post-meta,
.mag-box:not(.dark-skin) .post-meta *,
.mag-box:not(.dark-skin) .post-meta a,
.mag-box:not(.dark-skin) .post-meta .meta-item {
	font-family: var(--ti-font-mono) !important;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none !important;
	color: var(--ti-ink-600) !important;
}

.mag-box:not(.dark-skin) .post-meta .meta-author a,
.mag-box:not(.dark-skin) .post-meta .meta-author,
.mag-box:not(.dark-skin) .post-meta .author-name,
.mag-box:not(.dark-skin) .post-meta .author-name a {
	color: var(--ti-violet-500) !important;
	font-weight: 600;
}

.mag-box:not(.dark-skin) .post-meta a:hover {
	color: var(--ti-violet-700) !important;
}

/* Globally dark page (html.dark-skin) — even when the mag-box itself is
   light, its meta needs to read on the dark surface. Mirror dark-skin
   palette: ink-300 base, violet-300 author. */
html.dark-skin .mag-box:not(.dark-skin) .post-meta,
html.dark-skin .mag-box:not(.dark-skin) .post-meta *,
html.dark-skin .mag-box:not(.dark-skin) .post-meta a,
html.dark-skin .mag-box:not(.dark-skin) .post-meta .meta-item {
	color: var(--ti-ink-300) !important;
}

html.dark-skin .mag-box:not(.dark-skin) .post-meta .meta-author a,
html.dark-skin .mag-box:not(.dark-skin) .post-meta .author-name,
html.dark-skin .mag-box:not(.dark-skin) .post-meta .author-name a {
	color: var(--ti-violet-300) !important;
}

/* Excerpt — Inter Italic 400, ink-300, generous line-height. The
   italic gives the eye a third visual texture distinct from the
   bold sans title and mono caps meta. */
.mag-box.dark-skin .post-excerpt,
.mag-box.dark-skin .post-excerpt p {
	font-family: var(--ti-font-sans);
	font-style: italic;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.55;
	color: var(--ti-ink-300) !important;
}

/* Inside dark blocks, the category chip should pop with violet-300 */
.mag-box.dark-skin .post-cat-wrap a:not([style]):not([class*="tie-cat-"]),
.mag-box.dark-skin .post-cat-wrap .post-cat:not([style]):not([class*="tie-cat-"]) {
	background: rgba(177, 137, 189, 0.18);
	color: var(--ti-violet-300);
}

.mag-box.dark-skin .post-cat-wrap::before {
	color: var(--ti-violet-300);
}


/* --- Mag-box internal spacing -------------------------------------- */
/* Jannah's .post-details has padding-left:125px on non-first items
   for the side-by-side thumb layout. Keep that — we add internal
   gap between thumb and details via gap on flex if needed. Adjust
   the small thumb margin so it doesn't collide with our card padding. */
.mag-box li:not(:first-child) .post-thumb {
	margin-top: 4px; /* visual anchor with the meta strip */
}

/* Within cards, the post-meta strip needs breathing room from the
   category label and headline. */
.mag-box .post-item .post-cat-wrap {
	display: inline-block;
	margin-bottom: var(--ti-sp-2);
}

.mag-box .post-item .post-title {
	margin-top: var(--ti-sp-1);
	margin-bottom: var(--ti-sp-2);
}

.mag-box .post-item .post-excerpt {
	margin-top: var(--ti-sp-2);
}

.mag-box .post-item .post-meta {
	margin-top: var(--ti-sp-2);
}


/* --- Category em-dash prefix --------------------------------------- */
/* Tech-ish editorial signature: "— Telecom" rather than "Telecom".
   Applied to the .post-cat-wrap so the dash sits before the first <a>.
   Skips if the category is wrapped in a more structured component
   (single post header has its own treatment in Phase 6). */
.mag-box .post-cat-wrap::before,
.posts-items .post-cat-wrap::before,
.thumb-overlay .post-cat-wrap::before {
	content: "— ";
	color: var(--ti-violet-500);
	font-family: var(--ti-font-mono);
	font-weight: 500;
	margin-right: 2px;
}

.dark-skin .mag-box .post-cat-wrap::before,
.dark-skin .posts-items .post-cat-wrap::before,
.dark-skin .thumb-overlay .post-cat-wrap::before {
	color: var(--ti-violet-300);
}


/* --- Category pill colors (when no per-category color set) --------- */
/* Default Tech-ish category chip: violet-100 bg, violet-700 text,
   mono caps. Jannah's per-category custom-color injection still wins
   if the editor has set one (preserves Jannah's behavior). */
.post-cat-wrap .post-cat:not([style]):not([class*="tie-cat-"]),
.mag-box .post-cat-wrap a:not([style]):not([class*="tie-cat-"]) {
	background: var(--ti-violet-100);
	color: var(--ti-violet-700);
	padding: 3px 8px;
	border-radius: var(--ti-radius-xs);
}

.dark-skin .post-cat-wrap .post-cat:not([style]):not([class*="tie-cat-"]),
.dark-skin .mag-box .post-cat-wrap a:not([style]):not([class*="tie-cat-"]) {
	background: rgba(177, 137, 189, 0.18);
	color: var(--ti-violet-300);
}


/* --- Empty-thumbnail fallback -------------------------------------- */
/* When a post has no featured image, Jannah's media-functions inserts
   a placeholder image. We additionally background the .post-thumb
   container with the brand gradient so the card never reads as broken.
   Behind the placeholder image, this gradient peeks through. */
.posts-items .post-thumb:not(:has(img[src*="/uploads/"])),
.posts-items .post-thumb.no-thumb,
.posts-items li.no-post-thumb .post-thumb,
.overlay .slide:not([style*="url"]):not([data-lazy-bg]) {
	background: linear-gradient(135deg, var(--ti-violet-500) 0%, var(--ti-blue-400) 100%);
	min-height: 120px;
}


/* --- Overlay loops (loop-overlay.php + featured slider tiles) ------- */
/* Overlay cards put text on top of the article's featured image. The
   image varies from bright to dark — without a strong overlay the
   text legibility is unpredictable. We:
   1) Strengthen the gradient overlay so the bottom-text area is reliably dark
   2) Apply backdrop-filter blur on the inner .thumb-content so the
      image behind text is frosted — like the macOS / iOS effect.
      Significantly improves legibility on busy or bright images.
   3) Brighten the date / meta to fully opaque cream-100
   4) Add a subtle text-shadow for crisp text on any image */

.overlay .container-wrapper,
.overlay-spaces .container-wrapper,
.media-page-layout .container-wrapper {
	border-radius: var(--ti-radius-md);
	overflow: hidden;
}

/* We don't add another gradient on top of Jannah's existing
   .thumb-overlay::after (style.css:4014, linear-gradient bottom-up with
   max 75% opacity). Doubling the gradient would over-darken titles.
   Instead, we use a per-element frosted-pill backdrop on the date /
   meta strip (defined below), which surgically improves legibility
   exactly where it's needed without touching the rest of the card. */

/* Text-shadow on titles, meta, and excerpts so they crisp on ANY image
   (the backdrop-filter blur in the slide ::before doesn't apply per-
   element — these shadows are the bulletproof fallback). We can't add
   backdrop-filter to .thumb-content itself without breaking Jannah's
   `position: absolute; bottom: 0` layout; instead we put the blur on
   the gradient pseudo (already done) and use text-shadow for crispness.

   IMPORTANT: Jannah uses `color: #ffffff !important` on .thumb-overlay
   .post-meta and .thumb-title a (style.css:3948-3951). We can't change
   the color without !important, but white-with-shadow already reads
   well on the strengthened gradient. We only bump SIZE + WEIGHT + add
   shadow for the meta strip. */

/* Date / meta frosted pill — SCOPED to true image-overlay layouts ONLY.
   Jannah uses .thumb-overlay in some non-image contexts (mega-menu
   thumbs, widget thumbs sometimes), where a frosted pill would be
   visual noise. We restrict to:
     - .overlay archive layout (loop-overlay.php cards)
     - .overlay-spaces archive layout
     - .media-page-layout (masonry archive)
     - .tie-main-slider (homepage sliders)
     - .full-width-img-news-box .full-overlay-title (Jannah overlay-title
       layout variant)
   In all of those, text DEFINITELY sits on top of an image. */
.overlay .container-wrapper .thumb-overlay .thumb-meta,
.overlay .container-wrapper .thumb-overlay .post-meta,
.overlay-spaces .container-wrapper .thumb-overlay .thumb-meta,
.overlay-spaces .container-wrapper .thumb-overlay .post-meta,
.media-page-layout .post-element .thumb-overlay .thumb-meta,
.media-page-layout .post-element .thumb-overlay .post-meta,
.full-overlay-title .thumb-overlay .thumb-meta,
.full-overlay-title .thumb-overlay .post-meta,
.tie-main-slider .thumb-overlay .thumb-meta,
.tie-main-slider .thumb-overlay .post-meta {
	display: inline-flex;
	align-items: center;
	gap: var(--ti-sp-2);
	background: rgba(26, 24, 23, 0.42);
	-webkit-backdrop-filter: blur(6px) saturate(1.1);
	backdrop-filter: blur(6px) saturate(1.1);
	padding: 3px 9px;
	border-radius: 999px;
	margin: 0 0 var(--ti-sp-2);
	max-width: max-content;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.20);
}

.overlay .container-wrapper .thumb-overlay .thumb-meta .meta-item,
.overlay-spaces .container-wrapper .thumb-overlay .thumb-meta .meta-item,
.media-page-layout .post-element .thumb-overlay .thumb-meta .meta-item,
.full-overlay-title .thumb-overlay .thumb-meta .meta-item,
.tie-main-slider .thumb-overlay .thumb-meta .meta-item,
.overlay .container-wrapper .thumb-overlay .post-meta .meta-item,
.overlay-spaces .container-wrapper .thumb-overlay .post-meta .meta-item,
.media-page-layout .post-element .thumb-overlay .post-meta .meta-item,
.full-overlay-title .thumb-overlay .post-meta .meta-item,
.tie-main-slider .thumb-overlay .post-meta .meta-item {
	font-size: clamp(11px, 0.15vw + 10.5px, 12px);
	font-weight: 500;
	letter-spacing: var(--ti-tracking-caps);
	color: rgba(251, 247, 236, 0.96) !important; /* overrides Jannah's
	    .thumb-overlay .post-meta { color: #fff !important } at style.css:3950 */
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.30);
}

/* Graceful fallback for browsers without backdrop-filter. Same scope. */
@supports not ((backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px))) {
	.overlay .container-wrapper .thumb-overlay .thumb-meta,
	.overlay .container-wrapper .thumb-overlay .post-meta,
	.overlay-spaces .container-wrapper .thumb-overlay .thumb-meta,
	.overlay-spaces .container-wrapper .thumb-overlay .post-meta,
	.media-page-layout .post-element .thumb-overlay .thumb-meta,
	.media-page-layout .post-element .thumb-overlay .post-meta,
	.full-overlay-title .thumb-overlay .thumb-meta,
	.full-overlay-title .thumb-overlay .post-meta,
	.tie-main-slider .thumb-overlay .thumb-meta,
	.tie-main-slider .thumb-overlay .post-meta {
		background: rgba(26, 24, 23, 0.65);
	}
}

/* Titles inside overlay cards. */
.thumb-overlay .thumb-title,
.thumb-overlay .thumb-title a,
.tie-main-slider .thumb-overlay .thumb-title,
.tie-main-slider .thumb-overlay .thumb-title a {
	text-shadow: 0 2px 6px rgba(0, 0, 0, 0.60),
	             0 1px 2px rgba(0, 0, 0, 0.40);
}

/* Excerpt inside overlay cards. */
.thumb-overlay .thumb-desc,
.tie-main-slider .thumb-overlay .thumb-desc {
	color: rgba(251, 247, 236, 0.92) !important;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.50);
}

/* Category chip inside overlays — keep the cream pill from before
   but make sure it's positioned above the gradient. */
.thumb-overlay .post-cat-wrap {
	position: relative;
	z-index: 2;
}

.thumb-overlay .post-cat-wrap a {
	background: rgba(251, 247, 236, 0.95);
	color: var(--ti-violet-700);
	border-radius: var(--ti-radius-xs);
	padding: 3px 8px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* The em-dash before category was set in Phase 5 to violet-500; on a
   dark overlay we need it brighter. */
.thumb-overlay .post-cat-wrap::before {
	color: rgba(251, 247, 236, 0.85);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}


/* --- Mag-box section headings ("LATEST", "MOST READ") --------------- */
/* Jannah's block-head-1..11 admin "blocks_style" option produces
   different background pseudo-elements on .mag-box-title h3::before
   (block-head-4 puts a full-width violet bg behind the title; the text
   color sits on top via var(--bright-color)). We do NOT add our own
   ::before — that would clobber Jannah's bg pseudo and leave white
   text on cream. Block titles inherit Jannah's chosen block-head-X
   treatment; we only restyled the inner text typography in Phase 2.
   If the editor wants the Tech-ish "leading violet bar" look, they
   should pick block-head-1 (blocks_style: 1) in Theme Options. */


/* --- Mag-box slider arrow-nav (prev/next chips, top-right of block) -- */
/* Jannah default is 22×22 with a 1px border, but other rules in the
   cascade (admin custom CSS, block-head variants) were inflating these
   to ~50–60px circular pills that read as oversized for what they do.
   Pin them explicitly: compact 30×30 chip, hairline border, mono chevron,
   violet hover. Same in light + dark mode via separate color scopes. */
.mag-box .mag-box-options .slider-arrow-nav,
.mag-box-options .slider-arrow-nav {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: 0;
	flex: 0 0 auto;
}

.mag-box .mag-box-options .slider-arrow-nav li,
.mag-box-options .slider-arrow-nav li {
	display: inline-flex;
	margin: 0;
	padding: 0;
	float: none;
	list-style: none;
	background: transparent;
}

.mag-box .mag-box-options .slider-arrow-nav li::before,
.mag-box-options .slider-arrow-nav li::before {
	content: none; /* kill any inherited bullet from list resets */
}

.mag-box .mag-box-options .slider-arrow-nav a,
.mag-box-options .slider-arrow-nav a {
	box-sizing: border-box;
	width: 30px;
	height: 30px;
	min-width: 30px;
	min-height: 30px;
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ti-font-mono);
	font-size: 11px;
	line-height: 1;
	border: 1px solid var(--ti-ink-300);
	border-radius: 999px;
	color: var(--ti-ink-700);
	background: transparent;
	text-decoration: none;
	transition: background-color var(--ti-dur) var(--ti-ease),
	            color var(--ti-dur) var(--ti-ease),
	            border-color var(--ti-dur) var(--ti-ease);
}

.mag-box .mag-box-options .slider-arrow-nav a:not(.pagination-disabled):hover,
.mag-box-options .slider-arrow-nav a:not(.pagination-disabled):hover {
	background: var(--ti-violet-500);
	border-color: var(--ti-violet-500);
	color: var(--ti-cream-50);
}

.mag-box .mag-box-options .slider-arrow-nav a.pagination-disabled,
.mag-box-options .slider-arrow-nav a.pagination-disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

/* Dark surfaces (global dark mode AND admin-set "dark" mag-box) */
html.dark-skin .mag-box .mag-box-options .slider-arrow-nav a,
html.dark-skin .mag-box-options .slider-arrow-nav a,
.mag-box.dark-skin .mag-box-options .slider-arrow-nav a,
.box-dark-skin .mag-box-options .slider-arrow-nav a {
	border-color: rgba(177, 137, 189, 0.30);
	color: var(--ti-cream-100);
	background: transparent;
}

html.dark-skin .mag-box .mag-box-options .slider-arrow-nav a:not(.pagination-disabled):hover,
html.dark-skin .mag-box-options .slider-arrow-nav a:not(.pagination-disabled):hover,
.mag-box.dark-skin .mag-box-options .slider-arrow-nav a:not(.pagination-disabled):hover,
.box-dark-skin .mag-box-options .slider-arrow-nav a:not(.pagination-disabled):hover {
	background: var(--ti-violet-300);
	border-color: var(--ti-violet-300);
	color: var(--ti-ink-900);
}


/* --- Grid responsiveness ------------------------------------------- */
/* Jannah collapses to 1-col at <=670px. We mirror at 480px breakpoint
   to keep cards comfortable on tablet portrait (768) where the
   side-by-side layout works fine. No change to Jannah's behavior
   above 670px. */
@media (max-width: 480px) {
	.mag-box .posts-items > li {
		padding: var(--ti-sp-3);
	}
	.mag-box li:not(:first-child) .post-details {
		/* On the narrowest screens, Jannah's 125px padding-left for the
		   side-by-side small-thumb layout collides with our card padding.
		   Pull it back. */
		padding-left: 100px;
	}
}


/* =====================================================================
   PHASE 6 — SINGLE POST
   No template override — Jannah's single-post/head.php and content.php
   already produce the markup we need. Hooks (TieLabs/before_post_head,
   TieLabs/post_components, etc.) keep firing untouched. We layer:
   - Em-dash on the single-post category
   - Hairline byline strip
   - Trending pill
   - Tag chips at the foot of the article
   - About-author + related-items component polish
   Drop-cap + pull-quote already styled in Phase 2.
   ===================================================================== */

/* --- Single post header chrome ------------------------------------- */
/* Em-dash before the category on single posts. Scoped tightly so it
   doesn't compound with the archive em-dash rule. */
.entry-header .post-cat-wrap::before,
.fullwidth-entry-title .post-cat-wrap::before {
	content: "— ";
	color: var(--ti-violet-500);
	font-family: var(--ti-font-mono);
	font-weight: 500;
	margin-right: 2px;
}

.dark-skin .entry-header .post-cat-wrap::before,
.dark-skin .fullwidth-entry-title .post-cat-wrap::before {
	color: var(--ti-violet-300);
}

/* Headroom around the title block. Jannah's defaults are tight; we
   give the editorial title more space to breathe. */
.entry-header .post-cat-wrap {
	display: inline-block;
	margin-bottom: var(--ti-sp-4);
}

.entry-header h1.entry-title,
.entry-header .post-title.entry-title {
	margin: 0 0 var(--ti-sp-4);
}

/* .entry-header .entry-sub-title — margin/max-width handled by the
   comprehensive EDITORIAL DECK block at the bottom of the file. */


/* --- Byline strip --------------------------------------------------- */
/* Jannah outputs .post-meta inside .entry-header for the byline.
   We wrap it with hairline rules top/bottom for the editorial bar. */
.entry-header .post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ti-sp-3);
	padding: var(--ti-sp-3) 0;
	border-top: 1px solid var(--ti-ink-300);
	border-bottom: 1px solid var(--ti-ink-300);
	margin: var(--ti-sp-4) 0;
}

.dark-skin .entry-header .post-meta {
	border-color: rgba(177, 137, 189, 0.2);
}

/* Highlight the author name in the byline to match the Tech-ish kit. */
.entry-header .post-meta .meta-author a,
.entry-header .post-meta .author-name {
	color: var(--ti-blue-400);
	font-weight: 600;
}

.dark-skin .entry-header .post-meta .meta-author a,
.dark-skin .entry-header .post-meta .author-name {
	color: var(--ti-violet-300);
}


/* --- Trending pill ------------------------------------------------- */
.entry-header .post-is-trending {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--ti-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--ti-tracking-caps);
	text-transform: uppercase;
	background: var(--ti-coral-300);
	color: var(--ti-coral-500);
	padding: 3px 10px;
	border-radius: var(--ti-radius-pill);
	margin-left: var(--ti-sp-2);
	vertical-align: middle;
}

.dark-skin .entry-header .post-is-trending {
	background: rgba(201, 118, 112, 0.18);
	color: var(--ti-coral-300);
}


/* --- Post bottom meta (tags, source/via, edit, shortlink) ---------- */
.post-bottom-meta {
	margin: var(--ti-sp-5) 0;
	padding: var(--ti-sp-3) 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ti-sp-3);
}

.post-bottom-meta-title {
	font-family: var(--ti-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--ti-tracking-caps);
	text-transform: uppercase;
	color: var(--ti-violet-500);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.dark-skin .post-bottom-meta-title {
	color: var(--ti-violet-300);
}

/* Tag chips */
.post-bottom-tags .tagcloud a {
	display: inline-block;
	font-family: var(--ti-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: var(--ti-tracking-caps);
	text-transform: uppercase;
	padding: 4px 10px;
	margin: 0 4px 4px 0;
	background: var(--ti-violet-100);
	color: var(--ti-violet-700);
	border-radius: var(--ti-radius-xs);
	text-decoration: none;
	transition: background-color var(--ti-dur) var(--ti-ease),
	            color var(--ti-dur) var(--ti-ease);
}

.post-bottom-tags .tagcloud a:hover {
	background: var(--ti-violet-200);
	color: var(--ti-violet-700);
}

.dark-skin .post-bottom-tags .tagcloud a {
	background: rgba(177, 137, 189, 0.18);
	color: var(--ti-violet-300);
}

.dark-skin .post-bottom-tags .tagcloud a:hover {
	background: rgba(177, 137, 189, 0.3);
	color: var(--ti-cream-100);
}


/* --- About-author component ---------------------------------------- */
/* .about-author already gets .container-wrapper styling from Phase 3.
   We add type rhythm: name in Inter 700, bio in Playfair Italic for
   the "by the writer" voice that matches Tech-ish editorial. */
.about-author .author-titles .author-name a,
.about-author .author-name {
	font-family: var(--ti-font-sans);
	font-weight: 700;
	color: var(--ti-ink-900);
}

.dark-skin .about-author .author-titles .author-name a,
.dark-skin .about-author .author-name {
	color: var(--ti-cream-100);
}

/* =====================================================================
   AUTHOR BIO CARD — prominent editorial treatment
   Switched from Playfair Italic to clean Inter regular (no italic).
   Built as a violet-tinted card with a "// ABOUT THE WRITER" mono
   eyebrow, prominent ringed avatar, bold sans name, regular sans bio,
   social pills. Inspired by the TAGS pill chip vocabulary.
   ===================================================================== */

/* Card surface — PROMINENT writer's-business-card treatment.
   Uses cream-50 (one shade brighter than the body cream-100) so the
   card visibly separates from the surrounding article surface.
   Wrapped with a tab-style "// THE WRITER" mono pill on the top edge,
   matching the pull-quote and TAGS pill vocabulary. */
.about-author,
.about-author.container-wrapper,
html body .about-author,
html body .about-author.container-wrapper {
	background: var(--ti-cream-50) !important;
	border: 2px solid var(--ti-violet-300);
	border-radius: var(--ti-radius-lg);
	padding: clamp(28px, 2.5vw + 16px, 40px) clamp(20px, 2vw + 12px, 32px) clamp(24px, 2vw + 12px, 32px);
	margin: var(--ti-sp-8) 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--ti-sp-5);
	align-items: start;
	box-shadow: 0 6px 24px rgba(123, 63, 140, 0.12);
	position: relative;
}

/* The "// THE WRITER" tab pill anchored to the top edge of the card,
   overlapping like a folder tab. Same vocabulary as the .wp-block-pullquote
   eyebrow and the TAGS label pill from the design system. */
.about-author::before {
	content: "// THE WRITER";
	position: absolute;
	top: -14px;
	left: var(--ti-sp-6);
	font-family: var(--ti-font-mono);
	font-style: normal;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ti-cream-50);
	background: var(--ti-ink-900);
	padding: 6px 14px;
	border-radius: 999px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	white-space: nowrap;
	z-index: 2;
}

/* On the author archive (the dedicated author page), promote the
   eyebrow text to "// AUTHOR PROFILE" for context. */
body.author .about-author::before {
	content: "// AUTHOR PROFILE";
}

@media (max-width: 600px) {
	.about-author,
	.about-author.container-wrapper,
	html body .about-author,
	html body .about-author.container-wrapper {
		grid-template-columns: 1fr;
		gap: var(--ti-sp-4);
		text-align: center;
		padding: var(--ti-sp-6) var(--ti-sp-4) var(--ti-sp-5);
	}
	.about-author::before {
		left: 50%;
		transform: translateX(-50%);
	}
}

/* Avatar — bigger circle, violet ring */
.about-author .author-avatar {
	flex-shrink: 0;
}

.about-author .author-avatar a,
.about-author .author-avatar img,
.about-author .author-avatar .avatar {
	display: block;
	width: clamp(80px, 8vw + 50px, 120px);
	height: clamp(80px, 8vw + 50px, 120px);
	border-radius: 50%;
	border: 3px solid var(--ti-violet-300);
	box-shadow: 0 2px 8px rgba(123, 63, 140, 0.12);
	overflow: hidden;
}

.about-author .author-avatar img,
.about-author .author-avatar .avatar {
	border: 0;
	object-fit: cover;
	box-shadow: none;
}

.about-author .author-avatar a {
	padding: 0;
}

@media (max-width: 600px) {
	.about-author .author-avatar {
		margin: 0 auto;
	}
}

/* Author-info column */
.about-author .author-info {
	display: flex;
	flex-direction: column;
	gap: var(--ti-sp-2);
	min-width: 0; /* allows long bios to wrap */
}

/* The inline eyebrow was replaced by the tab-pill .about-author::before
   above — it overlaps the card's top edge instead of sitting inline.
   This stub is left as documentation. */

/* Author name — bold Inter, NO italic */
.about-author .author-name,
.about-author h1.author-name,
.about-author h3.author-name,
.about-author .author-name a {
	font-family: var(--ti-font-sans);
	font-style: normal;
	font-weight: 700;
	font-size: clamp(20px, 1vw + 16px, 26px);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ti-ink-900);
	margin: 0 0 var(--ti-sp-2);
	text-decoration: none;
}

.about-author .author-name a:hover {
	color: var(--ti-violet-500);
}

/* Bio — clean Inter regular, NOT italic. Specificity bumped with
   html body prefix AND !important on font-style/family because some
   Jannah inline injection was still applying Playfair italic. */
.about-author .author-bio,
.about-author .author-bio p,
html body .about-author .author-bio,
html body .about-author .author-bio p,
html body .post-components .about-author .author-bio,
html body .post-components .about-author .author-bio p {
	font-family: var(--ti-font-sans) !important;
	font-style: normal !important;
	font-weight: 400;
	font-size: clamp(15px, 0.3vw + 14.5px, 17px);
	line-height: 1.65;
	letter-spacing: 0;
	color: #2B2826 !important; /* ti-ink-800 */
	margin: 0 0 var(--ti-sp-2);
	font-feature-settings: "kern" 1, "liga" 1;
}

.about-author .author-bio a {
	color: var(--ti-violet-500);
	text-decoration: underline;
	text-decoration-color: var(--ti-violet-300);
	text-underline-offset: 2px;
}

.about-author .author-bio a:hover {
	color: var(--ti-violet-700);
}

/* Social icons row — small violet pill buttons */
.about-author .social-icons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ti-sp-2);
	list-style: none;
	padding: 0;
	margin: var(--ti-sp-3) 0 0;
}

@media (max-width: 600px) {
	.about-author .social-icons {
		justify-content: center;
	}
}

.about-author .social-icons-item {
	margin: 0;
	padding: 0;
}

.about-author .social-icons-item a.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 999px;
	background: var(--ti-cream-50);
	color: var(--ti-ink-900);
	border: 1px solid var(--ti-violet-200);
	transition: background-color var(--ti-dur) var(--ti-ease),
	            color var(--ti-dur) var(--ti-ease),
	            border-color var(--ti-dur) var(--ti-ease),
	            transform var(--ti-dur) var(--ti-ease);
	text-decoration: none;
}

.about-author .social-icons-item a.social-link:hover {
	background: var(--ti-violet-500);
	color: var(--ti-cream-50);
	border-color: var(--ti-violet-500);
	transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
	.about-author .social-icons-item a.social-link:hover {
		transform: none;
	}
}

.about-author .social-icons-item a.social-link span[class^="tie-icon-"],
.about-author .social-icons-item a.social-link span[class*=" tie-icon-"] {
	font-size: 14px;
}

/* =====================================================================
   DARK MODE — author bio card
   The light-mode rule above uses `!important` on background to beat
   Jannah's .container-wrapper. To override in dark mode we must ALSO
   use !important AND match-or-exceed specificity. Specificity here:
   `html.dark-skin .about-author.container-wrapper` = 0,0,3,1 vs
   light-mode `html body .about-author.container-wrapper` = 0,0,2,2.
   Same effective tier — !important state breaks the tie in dark's
   favor since both use !important now and dark loads later.
   ===================================================================== */
html.dark-skin .about-author,
html.dark-skin .about-author.container-wrapper,
html.dark-skin body .about-author,
html.dark-skin body .about-author.container-wrapper {
	background: rgba(123, 63, 140, 0.12) !important;
	background-color: rgba(123, 63, 140, 0.12) !important;
	border-color: rgba(177, 137, 189, 0.30) !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30) !important;
}

/* Tab pill on dark — violet bg with ink-900 text for contrast */
html.dark-skin .about-author::before {
	background: var(--ti-violet-300) !important;
	color: var(--ti-ink-900) !important;
}

/* Author name in dark — violet-300 pops against the dark surface */
html.dark-skin .about-author .author-name,
html.dark-skin .about-author .author-name a,
html.dark-skin .about-author h1.author-name,
html.dark-skin .about-author h1.author-name a,
html.dark-skin .about-author h3.author-name,
html.dark-skin .about-author h3.author-name a,
html.dark-skin body .about-author .author-name,
html.dark-skin body .about-author .author-name a {
	color: var(--ti-violet-300) !important;
}

html.dark-skin .about-author .author-name a:hover {
	color: var(--ti-cream-100) !important;
}

/* Bio text in dark — ink-300 (light warm grey) reads cleanly on the
   violet-tinted dark surface. !important to beat the light-mode bio
   rule which also uses !important. */
html.dark-skin .about-author .author-bio,
html.dark-skin .about-author .author-bio p,
html.dark-skin body .about-author .author-bio,
html.dark-skin body .about-author .author-bio p,
html.dark-skin .post-components .about-author .author-bio,
html.dark-skin .post-components .about-author .author-bio p {
	color: #D6CFB9 !important; /* ti-ink-300 */
	font-family: var(--ti-font-sans) !important;
	font-style: normal !important;
}

html.dark-skin .about-author .author-bio a {
	color: var(--ti-violet-300) !important;
}

html.dark-skin .about-author .author-bio a:hover {
	color: var(--ti-cream-100) !important;
}

/* Avatar ring in dark — violet-300 ring on dark surface */
html.dark-skin .about-author .author-avatar img,
html.dark-skin .about-author .author-avatar .avatar,
html.dark-skin .about-author > a img {
	border-color: var(--ti-violet-300) !important;
}

/* Social icon row in dark mode */
html.dark-skin .about-author .social-icons li a,
html.dark-skin .about-author ul.social-icons li a,
html.dark-skin .about-author .social-icons-item a.social-link {
	color: var(--ti-ink-300) !important;
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(177, 137, 189, 0.25);
}

html.dark-skin .about-author .social-icons li a:hover,
html.dark-skin .about-author .social-icons-item a.social-link:hover {
	color: var(--ti-cream-50) !important;
	background: var(--ti-violet-500);
	border-color: var(--ti-violet-300);
}


/* --- Related posts ------------------------------------------------- */
/* Jannah outputs .related-item inside #related-posts.container-wrapper
   using its own flex/float layout (see jannah/assets/css/single.css).
   We do NOT add a `display: grid` override — that conflicts with
   Jannah's column math and breaks the section. We only restyle the
   inner card chrome (hover lift + subtle violet border). The
   container-wrapper already gets paper-dim from Phase 3. */
#related-posts .related-item {
	transition: transform var(--ti-dur) var(--ti-ease);
	border-radius: var(--ti-radius-sm);
}

#related-posts .related-item:hover {
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	#related-posts .related-item:hover {
		transform: none;
	}
}

/* Related-posts titles read as a tertiary list — they should feel
   smaller than the article's own H2s and lighter than card titles in
   .mag-box loops. Drop a weight class and switch to Inter regular so
   the section feels like a quiet footer recommendation, not another
   editorial block. */
#related-posts .related-item .post-title,
#related-posts .related-item .post-title a {
	font-family: var(--ti-font-sans);
	font-size: clamp(13px, 0.25vw + 12px, 15px);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: -0.005em;
	margin: var(--ti-sp-2) 0 0;
	text-transform: none;
}

/* Meta strip below related-title — even quieter, mono caps. */
#related-posts .related-item .post-meta,
#related-posts .related-item .post-meta * {
	font-family: var(--ti-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Explicit dark mode titles for related-posts — the global
   html.dark-skin .post-title rule should win, but if a hosting/
   plugin combination injects a card surface that breaks inheritance,
   these explicit rules guarantee legibility. */
html.dark-skin #related-posts .related-item,
html.dark-skin #related-posts .related-item .post-title,
html.dark-skin #related-posts .related-item .post-title a {
	color: var(--ti-cream-100) !important;
}

html.dark-skin #related-posts .related-item .post-title a:hover {
	color: var(--ti-violet-300) !important;
}

html.dark-skin #related-posts .related-item .post-meta,
html.dark-skin #related-posts .related-item .post-meta * {
	color: var(--ti-violet-300);
}


/* --- Newsletter component inside post components -------------------- */
/* The .post-bottom-newsletter renders inline; style the form to match
   the sidebar newsletter visual (Phase 7 covers the sidebar widget). */
.post-bottom-newsletter input[type="email"] {
	font-family: var(--ti-font-sans);
	padding: 11px 14px;
	border-radius: var(--ti-radius-sm);
	border: 1px solid var(--ti-ink-300);
	background: var(--ti-cream-50);
	font-size: 14px;
	transition: border-color var(--ti-dur) var(--ti-ease),
	            box-shadow var(--ti-dur) var(--ti-ease);
}

.post-bottom-newsletter input[type="email"]:focus {
	border-color: var(--ti-violet-400);
	box-shadow: 0 0 0 3px var(--ti-violet-100);
	outline: none;
}

.post-bottom-newsletter button,
.post-bottom-newsletter input[type="submit"] {
	background: var(--ti-violet-500);
	color: var(--ti-cream-50);
	font-weight: 600;
	padding: 11px var(--ti-sp-4);
	border-radius: 999px;
	border: 0;
}

.post-bottom-newsletter button:hover,
.post-bottom-newsletter input[type="submit"]:hover {
	background: var(--ti-violet-600);
}


/* --- Parallax / full-width title layouts (post_layout 4/5/8 only) --- */
/* IMPORTANT: layouts 3 and 7 ALSO use .fullwidth-entry-title but they
   render the title inside a regular .container-wrapper with NO dark
   background — so cream text on those would be invisible. Scope
   strictly to body.post-layout-4 / 5 / 8 which are the only ones with
   the dark featured-image overlay. */
body.post-layout-4 .fullwidth-entry-title .entry-header .post-cat-wrap::before,
body.post-layout-5 .fullwidth-entry-title .entry-header .post-cat-wrap::before,
body.post-layout-8 .fullwidth-entry-title .entry-header .post-cat-wrap::before {
	color: rgba(251, 247, 236, 0.85);
}

body.post-layout-4 .fullwidth-entry-title .entry-header h1.entry-title,
body.post-layout-5 .fullwidth-entry-title .entry-header h1.entry-title,
body.post-layout-8 .fullwidth-entry-title .entry-header h1.entry-title,
body.post-layout-4 .fullwidth-entry-title .entry-header .post-title.entry-title,
body.post-layout-5 .fullwidth-entry-title .entry-header .post-title.entry-title,
body.post-layout-8 .fullwidth-entry-title .entry-header .post-title.entry-title {
	color: var(--ti-cream-50);
}

body.post-layout-4 .fullwidth-entry-title .entry-header h1.entry-title em,
body.post-layout-5 .fullwidth-entry-title .entry-header h1.entry-title em,
body.post-layout-8 .fullwidth-entry-title .entry-header h1.entry-title em,
body.post-layout-4 .fullwidth-entry-title .entry-header .post-title.entry-title em,
body.post-layout-5 .fullwidth-entry-title .entry-header .post-title.entry-title em,
body.post-layout-8 .fullwidth-entry-title .entry-header .post-title.entry-title em {
	color: var(--ti-violet-200);
}

body.post-layout-4 .fullwidth-entry-title .entry-header .entry-sub-title,
body.post-layout-5 .fullwidth-entry-title .entry-header .entry-sub-title,
body.post-layout-8 .fullwidth-entry-title .entry-header .entry-sub-title {
	color: rgba(251, 247, 236, 0.85);
}

body.post-layout-4 .fullwidth-entry-title .entry-header .post-meta,
body.post-layout-5 .fullwidth-entry-title .entry-header .post-meta,
body.post-layout-8 .fullwidth-entry-title .entry-header .post-meta {
	border-color: rgba(251, 247, 236, 0.2);
	color: rgba(251, 247, 236, 0.85);
}

body.post-layout-4 .fullwidth-entry-title .entry-header .post-meta .meta-author a,
body.post-layout-5 .fullwidth-entry-title .entry-header .post-meta .meta-author a,
body.post-layout-8 .fullwidth-entry-title .entry-header .post-meta .meta-author a,
body.post-layout-4 .fullwidth-entry-title .entry-header .post-meta .author-name,
body.post-layout-5 .fullwidth-entry-title .entry-header .post-meta .author-name,
body.post-layout-8 .fullwidth-entry-title .entry-header .post-meta .author-name {
	color: var(--ti-violet-200);
}


/* =====================================================================
   PHASE 7 — WIDGETS / SIDEBAR / TELEGRAM CTA
   - Newsletter widget restyle (cream input, violet focus, pill submit)
   - Posts widget "counter" layout: replace Jannah's tiny circular
     badge with the editorial Playfair italic number
   - Generic widget title gets "// " mono prefix via ::before
   - Telegram CTA widget custom styling (gradient block)
   ===================================================================== */

/* Generic widget title — add the "// " mono prefix. Use ::before to
   avoid messing with translation strings. Scoped to .sidebar / footer
   / slide-sidebar so it doesn't add prefixes to admin-side widgets. */
.sidebar .widget-title .the-subtitle::before,
.side-aside .widget-title .the-subtitle::before,
#footer-widgets-container .widget-title .the-subtitle::before {
	content: "// ";
	color: var(--ti-violet-500);
	font-weight: 400;
}

.dark-skin .sidebar .widget-title .the-subtitle::before,
.dark-skin .side-aside .widget-title .the-subtitle::before,
#footer-widgets-container .widget-title .the-subtitle::before {
	color: var(--ti-violet-300);
}


/* --- Newsletter widget --------------------------------------------- */
/* Markup from jannah/framework/widgets/newsletter.php:
   .widget-inner-wrap > .subscribe-widget-content > .subscribe-form
   .subscribe-input (email), .subscribe-submit (button).            */
.subscribe-widget-content {
	font-family: var(--ti-font-italic);
	font-style: italic;
	color: var(--ti-ink-700);
}

.subscribe-widget-content h3,
.subscribe-widget-content .subscribe-title {
	font-family: var(--ti-font-sans);
	font-style: normal;
	font-weight: 700;
	font-size: clamp(17px, 0.4vw + 16px, 19px);
	color: var(--ti-ink-900);
	margin: 0 0 var(--ti-sp-2);
}

.subscribe-widget-content .subscribe-subtitle {
	font-family: var(--ti-font-italic);
	font-style: italic;
	font-size: 15px;
	color: var(--ti-ink-700);
	display: block;
	margin-top: var(--ti-sp-2);
}

.subscribe-form .subscribe-input,
.subscribe-form input[type="email"] {
	font-family: var(--ti-font-sans);
	font-size: 14px;
	padding: 11px 14px;
	border-radius: var(--ti-radius-sm);
	border: 1px solid var(--ti-ink-300);
	background: var(--ti-cream-50);
	color: var(--ti-ink-900);
	width: 100%;
	box-sizing: border-box;
	transition: border-color var(--ti-dur) var(--ti-ease),
	            box-shadow var(--ti-dur) var(--ti-ease);
}

.subscribe-form .subscribe-input:focus {
	outline: none;
	border-color: var(--ti-violet-400);
	box-shadow: 0 0 0 3px var(--ti-violet-100);
}

.subscribe-form .subscribe-submit,
.subscribe-form input[type="submit"].button {
	font-family: var(--ti-font-sans);
	font-weight: 600;
	font-size: 14px;
	background: var(--ti-violet-500);
	color: var(--ti-cream-50);
	padding: 11px var(--ti-sp-4);
	border-radius: 999px;
	border: 0;
	width: 100%;
	margin-top: var(--ti-sp-2);
	cursor: pointer;
	transition: background-color var(--ti-dur) var(--ti-ease);
}

.subscribe-form .subscribe-submit:hover,
.subscribe-form input[type="submit"].button:hover {
	background: var(--ti-violet-600);
}

.dark-skin .subscribe-form .subscribe-input {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(177, 137, 189, 0.2);
	color: var(--ti-cream-100);
}

.dark-skin .subscribe-form .subscribe-submit {
	background: var(--ti-violet-300);
	color: var(--ti-ink-900);
}


/* --- Posts widget: counter style ----------------------------------- */
/* Jannah's .posts-list-counter li::before is a 30px circle badge with
   var(--brand-color) bg. Override to the editorial big italic number.
   Specificity: Jannah is .posts-list-counter li.widget-post-list:before
   = 0,2,1. Mine .sidebar .posts-list-counter li.widget-post-list::before
   = 0,3,1. Mine wins. */
.sidebar .posts-list-counter li.widget-post-list::before,
.side-aside .posts-list-counter li.widget-post-list::before {
	width: auto;
	height: auto;
	border: 0;
	background: transparent;
	color: var(--ti-violet-300);
	font-family: var(--ti-font-italic);
	font-style: italic;
	font-weight: 700;
	font-size: 28px;
	line-height: 1;
	left: -10px;
	top: 0;
	border-radius: 0;
}

.dark-skin .sidebar .posts-list-counter li.widget-post-list::before,
.dark-skin .side-aside .posts-list-counter li.widget-post-list::before {
	color: var(--ti-violet-300);
}

/* Tighten the spacing between counter and post info. */
.sidebar .posts-list-counter li.widget-post-list,
.side-aside .posts-list-counter li.widget-post-list {
	padding-left: 36px;
	padding-bottom: var(--ti-sp-3);
	border-bottom: 1px solid var(--ti-ink-300);
}

.sidebar .posts-list-counter li.widget-post-list:last-child,
.side-aside .posts-list-counter li.widget-post-list:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.dark-skin .sidebar .posts-list-counter li.widget-post-list,
.dark-skin .side-aside .posts-list-counter li.widget-post-list {
	border-bottom-color: rgba(177, 137, 189, 0.18);
}


/* --- Sidebar spacing ----------------------------------------------- */
.sidebar .container-wrapper.widget {
	padding: var(--ti-sp-4);
}

.sidebar .widget + .widget,
.sidebar .container-wrapper + .container-wrapper {
	margin-top: var(--ti-sp-5);
}


/* =====================================================================
   TECHISH SOCIALS WIDGET
   Multi-platform "Follow Us" card. Each row is an <a> with a brand-
   colored stripe + icon + label/handle + chevron arrow. Pure CSS
   hover/focus — no JS for the main interaction.
   ===================================================================== */

/* Card surface — overrides Jannah's .container-wrapper chrome for THIS
   widget so we can put a tab-pill at the top edge. */
.container-wrapper.techish-socials-widget,
.techish-socials-widget.container-wrapper {
	background: var(--ti-cream-50) !important;
	border: 2px solid var(--ti-violet-300);
	border-radius: var(--ti-radius-lg); /* 20px */
	padding: var(--ti-sp-5) var(--ti-sp-4) var(--ti-sp-4);
	position: relative;
	box-shadow: 0 4px 16px rgba(123, 63, 140, 0.10);
}

/* "// FOLLOW" tab pill anchored to the top-left edge — matches the
   author bio + pull quote chip vocabulary. */
.techish-socials-widget::before {
	content: "// FOLLOW";
	position: absolute;
	top: -14px;
	left: var(--ti-sp-5);
	font-family: var(--ti-font-mono);
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ti-cream-50);
	background: var(--ti-ink-900);
	padding: 6px 14px;
	border-radius: 999px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	white-space: nowrap;
	z-index: 2;
}

/* Hide the default widget-title — the tab pill replaces it. */
.techish-socials-widget > .widget-title {
	display: none;
}

/* Optional intro line above the list */
.techish-socials__intro {
	font-family: var(--ti-font-sans);
	font-style: italic;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ti-ink-700);
	margin: 0 0 var(--ti-sp-3);
	padding: 0 var(--ti-sp-2);
}

/* List wrapper */
.techish-socials__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.techish-socials__item {
	margin: 0;
}

/* The row link — grid layout: stripe | icon | text | arrow */
.techish-socials__row {
	display: grid;
	grid-template-columns: 4px auto 1fr auto;
	gap: var(--ti-sp-3);
	align-items: center;
	padding: 10px var(--ti-sp-3);
	border-radius: var(--ti-radius-sm);
	color: inherit;
	text-decoration: none;
	min-height: 44px; /* WCAG touch target */
	transition: background-color 0.18s ease,
	            transform 0.18s ease;
}

.techish-socials__row:hover,
.techish-socials__row:focus-visible {
	background: rgba(123, 63, 140, 0.06);
	transform: translateX(2px);
	text-decoration: none;
	outline: none;
}

.techish-socials__row:focus-visible {
	box-shadow: 0 0 0 2px var(--ti-violet-300);
}

/* Brand-color stripe on the left edge — grows on hover */
.techish-socials__stripe {
	width: 4px;
	height: 24px;
	border-radius: 2px;
	background: var(--platform-color, var(--ti-violet-500));
	transition: height 0.18s ease;
}

.techish-socials__row:hover .techish-socials__stripe,
.techish-socials__row:focus-visible .techish-socials__stripe {
	height: 32px;
}

/* Icon in platform color */
.techish-socials__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--platform-color, var(--ti-violet-500));
	flex-shrink: 0;
	transition: transform 0.18s ease;
}

.techish-socials__icon svg {
	width: 20px;
	height: 20px;
	display: block;
}

.techish-socials__row:hover .techish-socials__icon {
	transform: scale(1.08);
}

/* Text column */
.techish-socials__text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.techish-socials__label {
	font-family: var(--ti-font-sans);
	font-weight: 600;
	font-size: 14px;
	line-height: 1.2;
	color: var(--ti-ink-900);
	letter-spacing: -0.005em;
}

.techish-socials__handle {
	font-family: var(--ti-font-mono);
	font-weight: 400;
	font-size: 10px;
	line-height: 1.2;
	color: var(--ti-ink-600);
	letter-spacing: 0.04em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Chevron arrow on the right — slides on hover */
.techish-socials__arrow {
	width: 7px;
	height: 7px;
	border-right: 1.5px solid var(--ti-ink-500);
	border-bottom: 1.5px solid var(--ti-ink-500);
	transform: rotate(-45deg);
	transition: transform 0.18s ease, border-color 0.18s ease;
	margin-right: var(--ti-sp-2);
	flex-shrink: 0;
}

.techish-socials__row:hover .techish-socials__arrow,
.techish-socials__row:focus-visible .techish-socials__arrow {
	transform: rotate(-45deg) translate(3px, 3px);
	border-color: var(--platform-color, var(--ti-violet-500));
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.techish-socials__row,
	.techish-socials__stripe,
	.techish-socials__icon,
	.techish-socials__arrow {
		transition: none;
	}
	.techish-socials__row:hover {
		transform: none;
	}
	.techish-socials__row:hover .techish-socials__icon {
		transform: none;
	}
	.techish-socials__row:hover .techish-socials__stripe {
		height: 24px;
	}
}

/* Mobile padding refinement */
@media (max-width: 480px) {
	.container-wrapper.techish-socials-widget,
	.techish-socials-widget.container-wrapper {
		padding: var(--ti-sp-4) var(--ti-sp-3) var(--ti-sp-3);
	}
	.techish-socials-widget::before {
		left: var(--ti-sp-4);
	}
	.techish-socials__intro {
		padding: 0;
	}
	.techish-socials__row {
		padding: 10px var(--ti-sp-2);
		gap: var(--ti-sp-2);
	}
	.techish-socials__label {
		font-size: 13px;
	}
	.techish-socials__handle {
		font-size: 9.5px;
	}
}

/* Dark mode — surface flips to violet-tinted dark, but platform colors
   keep their brand identity (red YouTube stays red, blue Facebook stays
   blue, etc.) — that's the whole point of the colored stripes. */
html.dark-skin .container-wrapper.techish-socials-widget,
html.dark-skin .techish-socials-widget.container-wrapper {
	background: rgba(123, 63, 140, 0.10) !important;
	border-color: rgba(177, 137, 189, 0.30);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30);
}

html.dark-skin .techish-socials-widget::before {
	background: var(--ti-violet-300);
	color: var(--ti-ink-900);
}

html.dark-skin .techish-socials__intro {
	color: var(--ti-ink-300);
}

html.dark-skin .techish-socials__label {
	color: var(--ti-cream-100);
}

html.dark-skin .techish-socials__handle {
	color: var(--ti-ink-400);
}

html.dark-skin .techish-socials__arrow {
	border-color: var(--ti-ink-400);
}

html.dark-skin .techish-socials__row:hover,
html.dark-skin .techish-socials__row:focus-visible {
	background: rgba(177, 137, 189, 0.12);
}

/* Platform-specific tone fixes for dark mode — pure black icons
   (TikTok, X) need a touch of brightness to read on dark surfaces. */
html.dark-skin .techish-socials__icon[style*="#000000"],
html.dark-skin .techish-socials__row[style*="--platform-color: #000000"] .techish-socials__icon,
html.dark-skin .techish-socials__row[style*="--platform-color:#000000"] .techish-socials__icon {
	color: var(--ti-cream-100);
}

html.dark-skin .techish-socials__row[style*="--platform-color: #000000"] .techish-socials__stripe,
html.dark-skin .techish-socials__row[style*="--platform-color:#000000"] .techish-socials__stripe {
	background: var(--ti-cream-100);
}


/* --- Sidebar sticky behavior preservation -------------------------- */
/* Jannah's .is-sticky sidebar uses Theia Sticky Sidebar JS. Our card
   restyle (Phase 3 paper-dim) doesn't disturb it; this rule just
   ensures the sticky sidebar columns stay visually anchored when the
   sticky engine is off. */
.sidebar.is-sticky .theiaStickySidebar {
	padding-top: var(--ti-sp-2);
}


/* =====================================================================
   PHASE 8 — FOOTER & GLOBAL POLISH
   - Dark editorial footer with violet-300 widget titles
   - Copyright strip with mono caps + "// Made in Nairobi" hint
   - Pill buttons enforced globally
   - Mono-caps category badges
   - Focus rings (also referenced in Phase 9)
   - Reduced-motion respect (also Phase 9)
   ===================================================================== */

/* --- Footer band --------------------------------------------------- */
/* Jannah's <footer id="footer" class="site-footer dark-skin dark-widgetized-area">
   already inherits our .dark-skin token retunes from Phase 3. We bind
   the footer surface to ink-900 (slightly darker than Jannah's #1f2024)
   to match the Tech-ish kit's editorial dark band. */
#footer.site-footer {
	background: var(--ti-ink-900);
	color: var(--ti-cream-100);
	margin-top: var(--ti-sp-8);
}

/* Footer widgets container */
#footer-widgets-container {
	padding: var(--ti-sp-7) 0;
}

#footer-widgets-container .container-wrapper {
	background: transparent;
	border: 0;
	padding: 0;
}

/* Footer widget titles in violet-300 mono caps with "// " prefix. */
#footer-widgets-container .widget-title .the-subtitle {
	color: var(--ti-violet-300);
	font-family: var(--ti-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: var(--ti-tracking-caps);
	text-transform: uppercase;
}

/* Footer widget list items + links */
#footer-widgets-container .widget,
#footer-widgets-container .widget p,
#footer-widgets-container .widget li {
	color: rgba(251, 247, 236, 0.78);
}

#footer-widgets-container .widget a {
	color: rgba(251, 247, 236, 0.85);
	text-decoration: none;
	transition: color var(--ti-dur) var(--ti-ease);
}

#footer-widgets-container .widget a:hover {
	color: var(--ti-cream-50);
}

#footer-widgets-container .widget ul,
#footer-widgets-container .widget ol {
	list-style: none;
	padding: 0;
	margin: 0;
}

#footer-widgets-container .widget li {
	padding: 6px 0;
	border-bottom: 1px solid rgba(251, 247, 236, 0.08);
}

#footer-widgets-container .widget li:last-child {
	border-bottom: 0;
}


/* --- Site info / copyright ----------------------------------------- */
#site-info {
	border-top: 1px solid rgba(251, 247, 236, 0.12);
	padding: var(--ti-sp-4) 0;
	font-family: var(--ti-font-mono);
	font-size: 11px;
	letter-spacing: var(--ti-tracking-caps);
	text-transform: uppercase;
	color: rgba(251, 247, 236, 0.55);
}

#site-info .copyright-text {
	color: rgba(251, 247, 236, 0.55);
}

#site-info .copyright-text a {
	color: var(--ti-violet-300);
	text-decoration: none;
}

#site-info .copyright-text a:hover {
	color: var(--ti-cream-50);
}

/* Two-column site info layout: first text left, second text right. */
#site-info.site-info-layout-2 .tie-col-md-12 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: var(--ti-sp-3);
}

#site-info .footer-menu ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ti-sp-3);
	list-style: none;
	padding: 0;
	margin: 0;
}

#site-info .footer-menu a {
	color: rgba(251, 247, 236, 0.65);
	text-decoration: none;
	font-family: var(--ti-font-mono);
	font-size: 11px;
	letter-spacing: var(--ti-tracking-caps);
	text-transform: uppercase;
}

#site-info .footer-menu a:hover {
	color: var(--ti-cream-50);
}


/* --- Logo lockup in footer ---------------------------------------- */
/* When the editor places .techish-wordmark in a footer widget (via a
   custom HTML widget), the cream-on-dark variant is the dark-skin one
   already from Phase 4. No additional rules needed; this stub
   documents the contract. */


/* --- Go-to-top button ---------------------------------------------- */
#go-to-top {
	background: var(--ti-violet-500);
	color: var(--ti-cream-50);
	border-radius: 999px;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--ti-shadow-2);
	transition: background-color var(--ti-dur) var(--ti-ease);
}

#go-to-top:hover {
	background: var(--ti-violet-600);
	color: var(--ti-cream-50);
}


/* --- Global button polish ------------------------------------------ */
/* Jannah's .button rule (style.css:593) already inherits violet pill
   from our Phase 3 token rebind (--tie-buttons-radius: 999px). We add:
   - smooth transitions matching --ti-ease
   - 44px minimum height for touch reachability
   - cream-50 text on hover (Jannah doesn't always set it) */
.button,
[type="submit"],
.generic-button a,
.generic-button button {
	transition: background-color var(--ti-dur) var(--ti-ease),
	            color var(--ti-dur) var(--ti-ease),
	            transform var(--ti-dur) var(--ti-ease);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ti-sp-2);
}


/* --- Category badges global ---------------------------------------- */
/* Where the editor hasn't set a per-category color, we apply the
   Tech-ish violet chip. Per-category overrides (.tie-cat-N with inline
   style) still win — preserves Jannah's color admin. */
.post-cat-wrap .post-cat,
.cat-labels a {
	border-radius: var(--ti-radius-xs);
	padding: 3px 8px;
	display: inline-block;
	transition: background-color var(--ti-dur) var(--ti-ease);
}


/* --- Pagination chrome --------------------------------------------- */
/* Jannah's TIELABS_PAGINATION outputs .pages-nav with .pages-numbers /
   .next / .prev. Style as mono caps pills. */
.pages-nav a,
.pages-nav span.current {
	font-family: var(--ti-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--ti-tracking-caps);
	text-transform: uppercase;
	padding: 8px var(--ti-sp-3);
	border-radius: 999px;
	min-height: 40px;
	min-width: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 4px;
	transition: background-color var(--ti-dur) var(--ti-ease),
	            color var(--ti-dur) var(--ti-ease);
}

.pages-nav a {
	background: var(--ti-paper-dim);
	border: 1px solid var(--ti-ink-300);
	color: var(--ti-ink-900);
	text-decoration: none;
}

.pages-nav a:hover {
	background: var(--ti-violet-100);
	color: var(--ti-violet-700);
	border-color: var(--ti-violet-300);
}

.pages-nav span.current {
	background: var(--ti-violet-500);
	color: var(--ti-cream-50);
}

.dark-skin .pages-nav a {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(177, 137, 189, 0.18);
	color: var(--ti-cream-100);
}

.dark-skin .pages-nav a:hover {
	background: rgba(177, 137, 189, 0.18);
	color: var(--ti-cream-50);
	border-color: var(--ti-violet-300);
}


/* --- Block pagination (Show More / Load More / Next-Prev) ----------- */
/* Issue #4 — the homepage block footer rendered as an unstyled,
   undecorated wide white strip (the .block-pagination anchor inherits
   default <a> styling, which leaves a thin underlined text link in the
   middle of a tall transparent strip). That reads as a broken gap
   between blocks. We give it a real button surface, edge-to-edge bar
   when there's no other content, and matching dark-mode treatment.

   Also fix the surrounding container: when a block has pagination but
   nothing else in its container-wrapper footer, there's a 20-40px void
   from .container-wrapper bottom padding. Normalize. */
.block-pagination,
a.block-pagination,
.mag-box a.show-more-button,
.mag-box a.load-more-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--ti-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--ti-tracking-caps);
	text-transform: uppercase;
	color: var(--ti-ink-900);
	background: var(--ti-cream-50);
	border: 1px solid var(--ti-ink-300);
	border-radius: 999px;
	padding: 10px var(--ti-sp-5);
	min-height: 40px;
	text-decoration: none;
	margin: var(--ti-sp-4) auto 0;
	transition: background-color var(--ti-dur) var(--ti-ease),
	            color var(--ti-dur) var(--ti-ease),
	            border-color var(--ti-dur) var(--ti-ease),
	            transform var(--ti-dur) var(--ti-ease);
}

.block-pagination:hover,
a.block-pagination:hover,
.mag-box a.show-more-button:hover,
.mag-box a.load-more-button:hover {
	background: var(--ti-violet-500);
	color: var(--ti-cream-50);
	border-color: var(--ti-violet-500);
	transform: translateY(-1px);
}

.block-pagination:focus-visible {
	outline: 2px solid var(--ti-violet-500);
	outline-offset: 2px;
}

/* When the pagination is rendered as <a>, it's an inline element. We
   want it centered in its block. Wrap it in a flex container via the
   parent .container-wrapper — but only when its direct parent flex
   doesn't already center. Since Jannah just emits the <a> as a direct
   child of .container-wrapper, we use the simpler trick: align the
   <a> itself via auto margins (already set above) and ensure the
   container-wrapper has a flex/center-text fallback. */
.mag-box .container-wrapper > .block-pagination,
.mag-box .container-wrapper > a.block-pagination {
	display: flex;
	width: max-content;
}

/* Next-Prev pages-nav variant — same pill ladder, centered. */
.pages-nav,
.mag-box .pages-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: var(--ti-sp-4) 0 0;
	padding: 0;
}

.pages-nav .first-last-pages {
	display: inline-flex;
}

.pages-nav .pagination-icon {
	width: 8px;
	height: 8px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
}

.pages-nav .prev-posts .pagination-icon {
	transform: rotate(-135deg);
	margin-right: 2px;
}

.pages-nav .next-posts .pagination-icon {
	transform: rotate(45deg);
	margin-left: 2px;
}

.pages-nav .pagination-disabled {
	opacity: 0.4;
	pointer-events: none;
}

/* Tighten the gap between the block's last card row and the
   pagination — Jannah's default leaves ~36px of empty space because
   each row of cards already carries bottom-margin AND the
   .container-wrapper has bottom padding. */
.mag-box .container-wrapper {
	padding-bottom: var(--ti-sp-4);
}

.mag-box .posts-items + .block-pagination,
.mag-box .posts-items + a.block-pagination,
.mag-box .posts-items + .pages-nav {
	margin-top: var(--ti-sp-3);
}

/* Dark-mode block pagination */
.dark-skin .block-pagination,
.dark-skin a.block-pagination,
.dark-skin .mag-box a.show-more-button,
.dark-skin .mag-box a.load-more-button {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(177, 137, 189, 0.18);
	color: var(--ti-cream-100);
}

.dark-skin .block-pagination:hover,
.dark-skin a.block-pagination:hover {
	background: var(--ti-violet-500);
	color: var(--ti-cream-50);
	border-color: var(--ti-violet-500);
}


/* --- Comments form ------------------------------------------------- */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	font-family: var(--ti-font-sans);
	font-size: 15px;
	padding: 11px 14px;
	border-radius: var(--ti-radius-sm);
	border: 1px solid var(--ti-ink-300);
	background: var(--ti-cream-50);
	width: 100%;
	box-sizing: border-box;
	transition: border-color var(--ti-dur) var(--ti-ease),
	            box-shadow var(--ti-dur) var(--ti-ease);
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
	outline: none;
	border-color: var(--ti-violet-400);
	box-shadow: 0 0 0 3px var(--ti-violet-100);
}

.dark-skin .comment-form input[type="text"],
.dark-skin .comment-form input[type="email"],
.dark-skin .comment-form input[type="url"],
.dark-skin .comment-form textarea {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(177, 137, 189, 0.2);
	color: var(--ti-cream-100);
}


/* --- Focus rings (also Phase 9) ------------------------------------ */
/* Visible focus ring for all interactive elements. WCAG: violet-500
   on cream = 6.08:1 (passes UI contrast 3:1). Excluded: form inputs
   and pill buttons, which carry their own focus ring above. */
:focus-visible {
	outline: 2px solid var(--ti-violet-500);
	outline-offset: 2px;
}

input:focus-visible,
textarea:focus-visible,
select:focus-visible,
button.button:focus-visible,
.button:focus-visible {
	outline-offset: 3px;
}

.dark-skin :focus-visible {
	outline-color: var(--ti-violet-300);
}


/* --- Reduced motion (lands in Phase 9 fully) ----------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	/* Keep color/background transitions discoverable; only suppress
	   motion. The wildcard above is aggressive but the typical UX
	   guidance is to flatten timing for users who request it. */
}


/* =====================================================================
   PHASE 9 — A11Y, MOTION, PERFORMANCE
   Most of the work lives inside earlier phases (focus rings in Phase 8,
   reduced-motion in Phase 5/6/8). This block adds the skip link and
   the .screen-reader-text fallback.
   ===================================================================== */

/* --- Skip link ----------------------------------------------------- */
/* Injected on wp_body_open priority 1 in functions.php. Visible only
   on keyboard focus, sits above everything (z-index over sticky nav). */
.techish-skip-link {
	position: absolute;
	top: -100px;
	left: var(--ti-sp-4);
	z-index: 100000;
	padding: var(--ti-sp-3) var(--ti-sp-4);
	background: var(--ti-violet-500);
	color: var(--ti-cream-50);
	font-family: var(--ti-font-mono);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: var(--ti-tracking-caps);
	text-transform: uppercase;
	text-decoration: none;
	border-radius: var(--ti-radius-sm);
	box-shadow: var(--ti-shadow-3);
	transition: top var(--ti-dur-fast) var(--ti-ease);
}

.techish-skip-link:focus,
.techish-skip-link:focus-visible {
	top: var(--ti-sp-3);
	outline: 2px solid var(--ti-cream-50);
	outline-offset: 2px;
	color: var(--ti-cream-50);
}

/* When the skip link is in the .screen-reader-text state it should
   still be reachable via Tab — that's the point. The class is added
   for fallback if visibility breaks, but our absolute positioning
   above keeps it discoverable. */
.techish-skip-link.screen-reader-text {
	clip: auto !important;
	clip-path: none !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	white-space: normal !important;
}


/* --- Screen-reader text fallback ----------------------------------- */
/* Jannah ships its own .screen-reader-text; this is a defensive
   fallback in case our cascade order strips it. The "modern" definition. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	-webkit-clip-path: inset(50%);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: var(--ti-violet-500);
	clip: auto !important;
	clip-path: none !important;
	color: var(--ti-cream-50);
	display: block;
	font-size: 13px;
	font-weight: 600;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 12px 20px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}


/* =====================================================================
   PHASE 2 — TYPOGRAPHY
   Fluid sizes via clamp() so headlines flex between mobile and desktop
   without media-query jumps. Body never below 16px. Italic Playfair
   never below 17px (readability cliff). Mono caps stay legible at
   small sizes by holding tracking at 0.14em.
   ===================================================================== */

/* Body. Jannah declares font-family on body and on many elements
   individually; we override at the html/body root and rely on inherit
   for descendants. Where Jannah re-declares (.post-title etc.) we
   override explicitly below. */
html,
body,
body.home,
body.single,
body.archive,
body.page {
	font-family: var(--ti-font-sans);
	/* 16px floor on mobile, 17px ceiling on desktop. The viewport term
	   adds a gentle 1vw slope so 768px lands at ~16.5px. */
	font-size: clamp(16px, 0.5vw + 14.5px, 17px);
	line-height: var(--ti-lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* --- Headlines ----------------------------------------------------- */
/* Article hero / page title — the largest type on any page. Hex
   literal on color (instead of var) so the cascade can't lose it
   if a plugin or admin override redefines tokens. */
html body .entry-header h1.entry-title,
html body .entry-header .post-title.entry-title,
html body .fullwidth-entry-title h1.entry-title,
html body .fullwidth-entry-title .post-title.entry-title,
html body .archive-title-wrapper h1.page-title,
html body .page-title {
	font-family: var(--ti-font-sans);
	font-weight: 800;
	font-size: clamp(32px, 3.4vw + 18px, 56px);
	line-height: 1.04;
	letter-spacing: -0.02em;
	text-wrap: balance;
	color: #1A1817; /* ti-ink-900 — parallax layouts 4/5/8 override this
	                   to cream-50 via body.post-layout-X selectors below */
}

/* Card / loop titles. The workhorse — appears 12+ times per archive.
   We force specificity higher than Jannah's `a { color: var(--base-color) }`
   (0,0,1) which targets every anchor, by including the `a` variants
   explicitly and prefixing with `html body` (0,0,2). Color is set with
   a hex literal so it isn't lost if a downstream theme/plugin
   redefines --ti-ink-900 or --base-color. */
html body .post-title,
html body .post-title a,
html body .post-title a:visited,
html body .mag-box .post-title,
html body .mag-box .post-title a,
html body .posts-items .post-title,
html body .posts-items .post-title a {
	font-family: var(--ti-font-sans);
	font-weight: 700;
	font-size: clamp(17px, 0.4vw + 16px, 19px);
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-wrap: balance;
	color: #1A1817; /* ti-ink-900 — hex so cascade can't lose it */
}

html body .post-title a:hover,
html body .mag-box .post-title a:hover,
html body .posts-items .post-title a:hover {
	color: #7B3F8C; /* ti-violet-500 */
}

/* DARK MODE titles — must match the light-mode specificity (0,0,2,2)
   AND load after to win the cascade tie. Earlier dark-mode rules using
   only `html.dark-skin .post-title` had the same specificity as
   `html body .mag-box .post-title` but appeared earlier in the file,
   so they lost. This block (with !important + comprehensive selector
   list including .related-item and .widget-post-list) is the
   authoritative dark-mode title color. */
html.dark-skin .post-title,
html.dark-skin .post-title a,
html.dark-skin .post-title a:visited,
html.dark-skin .mag-box .post-title,
html.dark-skin .mag-box .post-title a,
html.dark-skin .posts-items .post-title,
html.dark-skin .posts-items .post-title a,
html.dark-skin .related-item .post-title,
html.dark-skin .related-item .post-title a,
html.dark-skin .widget-post-list .post-title,
html.dark-skin .widget-post-list .post-title a,
html.dark-skin .post-widget-body .post-title,
html.dark-skin .post-widget-body .post-title a,
html.dark-skin .thumb-title,
html.dark-skin .thumb-title a,
html.dark-skin .entry-title {
	color: #F4ECD6 !important; /* ti-cream-100 */
}

html.dark-skin .post-title a:hover,
html.dark-skin .mag-box .post-title a:hover,
html.dark-skin .posts-items .post-title a:hover,
html.dark-skin .related-item .post-title a:hover,
html.dark-skin .widget-post-list .post-title a:hover,
html.dark-skin .post-widget-body .post-title a:hover {
	color: #B189BD !important; /* ti-violet-300 */
}


/* --- Text inversion inside editor-customized DARK BLOCKS ----------- */
/* Jannah lets the editor turn a single block dark via the Box Dark
   Skin / Dark Widgetized Area option. That puts .box-dark-skin or
   .dark-widgetized-area on the block wrapper. Inside those, text
   needs to be LIGHT (cream) regardless of global light/dark mode. Our
   default `html body .post-title { color: #1A1817 }` is too aggressive
   and makes titles invisible in those blocks. These overrides invert
   colors for everything readable inside a dark block. Specificity:
   `html body .box-dark-skin .post-title` = 0,0,3,2 vs default 0,0,1,2
   — clean win. */

html body .box-dark-skin .post-title,
html body .box-dark-skin .post-title a,
html body .box-dark-skin .post-title a:visited,
html body .box-dark-skin .entry-title,
html body .box-dark-skin h1,
html body .box-dark-skin h2,
html body .box-dark-skin h3,
html body .box-dark-skin h4,
html body .dark-widgetized-area .post-title,
html body .dark-widgetized-area .post-title a,
html body .dark-widgetized-area .post-title a:visited,
html body .dark-widgetized-area .entry-title,
html body .dark-widgetized-area h1,
html body .dark-widgetized-area h2,
html body .dark-widgetized-area h3,
html body .dark-widgetized-area h4 {
	color: #F4ECD6; /* ti-cream-100 */
}

html body .box-dark-skin .post-title a:hover,
html body .dark-widgetized-area .post-title a:hover {
	color: #B189BD; /* ti-violet-300 — accent in dark contexts */
}

html body .box-dark-skin .post-title em,
html body .box-dark-skin .entry-title em,
html body .dark-widgetized-area .post-title em,
html body .dark-widgetized-area .entry-title em {
	color: #B189BD; /* ti-violet-300 */
}

/* Standfirst / excerpt / lede inside dark blocks */
html body .box-dark-skin .post-excerpt,
html body .box-dark-skin .thumb-desc,
html body .box-dark-skin .entry-sub-title,
html body .dark-widgetized-area .post-excerpt,
html body .dark-widgetized-area .thumb-desc,
html body .dark-widgetized-area .entry-sub-title {
	color: #D6CFB9; /* ti-ink-300 — light warm grey on dark */
}

/* Post meta strip (date, author, comments) inside dark blocks */
html body .box-dark-skin .post-meta,
html body .box-dark-skin .post-meta .meta-item,
html body .box-dark-skin .post-meta a,
html body .box-dark-skin .post-meta .date,
html body .box-dark-skin .post-meta .meta-author,
html body .box-dark-skin .post-meta .meta-author a,
html body .box-dark-skin .thumb-meta,
html body .box-dark-skin .thumb-meta .meta-item,
html body .dark-widgetized-area .post-meta,
html body .dark-widgetized-area .post-meta .meta-item,
html body .dark-widgetized-area .post-meta a,
html body .dark-widgetized-area .post-meta .date,
html body .dark-widgetized-area .post-meta .meta-author,
html body .dark-widgetized-area .post-meta .meta-author a,
html body .dark-widgetized-area .thumb-meta,
html body .dark-widgetized-area .thumb-meta .meta-item {
	color: #B189BD; /* ti-violet-300 */
}

/* Mag-box section title / widget title inside dark blocks */
html body .box-dark-skin .mag-box-title h3,
html body .box-dark-skin .mag-box-title .the-global-title,
html body .box-dark-skin .widget-title .the-subtitle,
html body .dark-widgetized-area .mag-box-title h3,
html body .dark-widgetized-area .mag-box-title .the-global-title,
html body .dark-widgetized-area .widget-title .the-subtitle {
	color: #B189BD; /* ti-violet-300 */
}

/* Breadcrumbs / generic body links inside dark blocks */
html body .box-dark-skin a:not(.button):not(.post-cat),
html body .dark-widgetized-area a:not(.button):not(.post-cat) {
	color: #B189BD; /* ti-violet-300 */
}

html body .box-dark-skin a:not(.button):not(.post-cat):hover,
html body .dark-widgetized-area a:not(.button):not(.post-cat):hover {
	color: #F4ECD6; /* ti-cream-100 */
}

/* Card background inside .mag-box that lives inside a .box-dark-skin
   should stay transparent so the dark block's own background shows. */
html body .box-dark-skin .mag-box.wide-post-box .posts-items > li,
html body .box-dark-skin .mag-box.small-wide-post-box .posts-items > li,
html body .box-dark-skin .mag-box.full-width-img-news-box .posts-items > li,
html body .box-dark-skin .mag-box.top-news-box .posts-items > li,
html body .dark-widgetized-area .mag-box.wide-post-box .posts-items > li,
html body .dark-widgetized-area .mag-box.small-wide-post-box .posts-items > li,
html body .dark-widgetized-area .mag-box.full-width-img-news-box .posts-items > li,
html body .dark-widgetized-area .mag-box.top-news-box .posts-items > li {
	background: transparent;
	border-color: rgba(177, 137, 189, 0.18);
}

/* Em-dash before category inside dark blocks (Phase 5 sets it violet-500
   — too dark on a dark surface). */
html body .box-dark-skin .mag-box .post-cat-wrap::before,
html body .box-dark-skin .posts-items .post-cat-wrap::before,
html body .box-dark-skin .thumb-overlay .post-cat-wrap::before,
html body .dark-widgetized-area .mag-box .post-cat-wrap::before,
html body .dark-widgetized-area .posts-items .post-cat-wrap::before,
html body .dark-widgetized-area .thumb-overlay .post-cat-wrap::before {
	color: #B189BD; /* ti-violet-300 */
}

/* Overlay / featured slide titles — bigger than card titles. */
body .thumb-title,
body .thumb-title a {
	font-family: var(--ti-font-sans);
	font-weight: 700;
	font-size: clamp(18px, 1.1vw + 14px, 26px);
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-wrap: balance;
}

/* Block / mag-box section heads ("STARTUPS", "LATEST", "MOST READ" etc.)
   Bumped up so blocks read as proper section heads, not whispers.
   Weight 600 for stronger optical presence at the larger size. */
body .mag-box-title h3,
body .mag-box-title .the-global-title,
body .section-title,
body .breaking-title {
	font-family: var(--ti-font-mono);
	font-weight: 600;
	font-size: clamp(14px, 0.35vw + 12.5px, 17px);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ti-violet-500);
}

/* Widget titles in light mode. Dark surfaces (footer, dark-skin) get
   their own override later. Slightly smaller than block heads so the
   sidebar/footer hierarchy stays below the mag-box hierarchy. */
body .widget-title .the-subtitle {
	font-family: var(--ti-font-mono);
	font-weight: 600;
	font-size: clamp(13px, 0.25vw + 12px, 15px);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ti-violet-500);
}

/* --- Italic accent inside any title -------------------------------- */
/* The signature Tech-ish move: one word in Playfair Italic violet
   inside an otherwise grotesk headline. Editors mark it with <em>. */
body h1 em,
body h2 em,
body h3 em,
body .entry-title em,
body .post-title em,
body .post-title a em,
body .thumb-title em,
body .thumb-title a em,
body .page-title em {
	font-family: var(--ti-font-italic);
	font-style: italic;
	font-weight: 700;
	color: var(--ti-violet-500);
}

/* --- Standfirst / subtitle / lede ---------------------------------- */
/* Italic body text — TWO font roles within the design system:
   1. SMALL contexts (card excerpts, author bio, related-post snippets,
      caption, thumb-desc): Inter Italic. Sans serif italic is far more
      legible than Playfair at body sizes — designed for screen reading.
      Tech-ish stays editorial because the WEIGHT is still italic.
   2. LARGE display contexts (single-post hero subtitle ≥22px,
      pull-quotes, drop-cap, lede inside .ti-lede): Playfair Display
      Italic. The high-contrast serif italic shines at display sizes.

   Color: ink-800 (#2B2826, 11.21:1 on cream — well above WCAG AA).
   font-feature-settings: better letter shapes across browsers. */

/* SMALL italic body — Inter Italic */
body .post-excerpt,
body .thumb-desc,
body .taxonomy-description,
html body .post-excerpt,
html body .thumb-desc {
	font-family: var(--ti-font-sans); /* Inter */
	font-style: italic;
	font-weight: 400; /* regular weight italic, strokes hold up at 16-17px */
	font-size: clamp(15px, 0.3vw + 14px, 17px);
	line-height: 1.55;
	color: #2B2826; /* ti-ink-800 */
	letter-spacing: 0;
	text-wrap: pretty;
	font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
	-webkit-font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* =====================================================================
   EDITORIAL DECK — subtitle / standfirst
   This is the "lead" that sits between the title and the byline.
   Design rationale (see commit msg for full critique):
   - Soft violet-tinted backdrop (alpha 0.06) anchors the text visually
     — it stops "hanging in white space" without becoming a heavy card
   - 4px violet-500 left rule = editorial mark, same vocabulary as our
     blockquote and pull-quote treatments
   - "// LEAD" mono micro-label at top — uses the same chip language as
     "// THE WRITER", "// PULL QUOTE", "// ON TELEGRAM" — but inline
     (not a tab pill, because the subtitle ISN'T a self-contained
     editorial unit like the pull-quote; it flows from the title above)
   - max-width 720px caps reading at ~65-70 characters — the sweet
     spot from typographic research, prevents the long-line "scan back
     across" fatigue
   - text-align: left — fixes screenshot 1's centered version that made
     uneven wrap line endings ("actually costs.") look orphaned
   - text-wrap: pretty tells the browser to optimize line endings,
     pushing widow words up to make the last line look intentional
   - Playfair Italic at 20-26px — large enough that Playfair's high
     contrast reads cleanly; the italic carries the editorial voice
   - Container provides "deliberate placement" so any remaining uneven
     line endings feel framed instead of orphaned
   ===================================================================== */

body .entry-sub-title,
html body .entry-sub-title,
.entry-header .entry-sub-title,
html body .entry-header .entry-sub-title {
	/* Frame — soft tint + left rule. The left rule uses var(--brand-color)
	   so it dynamically takes the category color too (matching the // LEAD
	   pill). The tint stays subtle violet because varying it per-category
	   would create visual noise across an archive page.

	   WIDTH NOTE: previously capped at 720px for "ideal 65-70 char
	   reading line". That created a visual mismatch with the title
	   above (which fills the column) — readers saw it as the subtitle
	   being a smaller, separate element. For editorial ledes (1-3
	   short sentences), the long-line readability rule that applies
	   to paragraph-length prose doesn't bite. Now we let the deck
	   fill the article column. A 1000px ceiling stays only as a
	   safety net for ultra-wide displays where lines would otherwise
	   exceed ~100 characters even on short ledes. */
	position: relative;
	background: rgba(123, 63, 140, 0.06);
	border-left: 4px solid var(--brand-color);
	border-radius: 0 var(--ti-radius-sm) var(--ti-radius-sm) 0;
	padding: var(--ti-sp-4) var(--ti-sp-5);
	margin: var(--ti-sp-4) 0 var(--ti-sp-5);
	/* No max-width — fill the article column edge-to-edge so the deck
	   visually anchors to the same edges as the title above. Editorial
	   discipline keeps ledes short. */
	width: auto;

	/* Type — INTER ITALIC at weight 500 (was Playfair Italic). Inter's
	   geometric italic reads cleanly across all screen sizes and ages,
	   while still carrying the editorial italic voice. The framing
	   above (left rule + LEAD pill) handles the "this is the lede"
	   signaling, so the font doesn't need ornament. */
	font-family: var(--ti-font-sans);   /* Inter */
	font-style: italic;
	font-weight: 500;
	font-size: clamp(17px, 0.5vw + 15px, 21px);
	line-height: 1.55;
	color: #2B2826; /* ti-ink-800 */
	text-align: left;
	text-wrap: pretty;
	letter-spacing: 0;
	font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* "// LEAD" micro-label — TINY mono-caps pill that takes the post's
   category color via var(--brand-color). On a NEWS post it goes blue;
   on a BUSINESS post it goes orange; on default it stays violet (via
   our TieLabs/default_theme_color filter fallback). */
body .entry-sub-title::before,
.entry-header .entry-sub-title::before {
	content: "// LEAD";
	display: block;
	font-family: var(--ti-font-mono);
	font-style: normal;
	font-weight: 600;
	font-size: 9px;                  /* tinier per user feedback */
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brand-color);       /* dynamic — picks up category color */
	margin-bottom: var(--ti-sp-2);
	line-height: 1;
	opacity: 0.85;                   /* whisper-quiet, not shouty */
}

/* Coral .key accent (when editor wraps a word in <span class="key">) */
body .entry-sub-title .key,
html body .entry-sub-title .key {
	color: var(--ti-coral-500);
	font-weight: 700;
}

/* DARK MODE — slightly stronger backdrop, ink-200 text. The left rule
   and LEAD pill still take var(--brand-color), so per-category color
   continues to flow through in dark mode. We don't force them to a
   fixed violet because that would lose the editorial nuance. */
html.dark-skin .entry-sub-title,
html.dark-skin .entry-header .entry-sub-title,
html.dark-skin body .entry-sub-title {
	background: rgba(177, 137, 189, 0.12) !important;
	color: #E5DFCC !important; /* ti-ink-200 — light warm grey on dark */
}

/* If the post has no category color set, the brand-color fallback
   would still resolve to the violet from our TieLabs filter — fine on
   dark. But for legibility we also bump opacity on the LEAD pill so
   the category color reads crisply on dark backgrounds. */
html.dark-skin .entry-sub-title::before,
html.dark-skin .entry-header .entry-sub-title::before {
	opacity: 1;
	filter: brightness(1.4); /* lighten any category color for dark legibility */
}

html.dark-skin .entry-sub-title .key {
	color: var(--ti-coral-300) !important;
}

/* Parallax post layouts (4/5/8) — title block overlays a dark image.
   The frame still applies but tint goes translucent-light so it
   reads on the image overlay. */
body.post-layout-4 .fullwidth-entry-title .entry-header .entry-sub-title,
body.post-layout-5 .fullwidth-entry-title .entry-header .entry-sub-title,
body.post-layout-8 .fullwidth-entry-title .entry-header .entry-sub-title {
	background: rgba(251, 247, 236, 0.12);
	border-left-color: rgba(251, 247, 236, 0.85);
	color: rgba(251, 247, 236, 0.92);
}

body.post-layout-4 .fullwidth-entry-title .entry-header .entry-sub-title::before,
body.post-layout-5 .fullwidth-entry-title .entry-header .entry-sub-title::before,
body.post-layout-8 .fullwidth-entry-title .entry-header .entry-sub-title::before {
	color: rgba(251, 247, 236, 0.85);
}

/* Mobile padding refinement */
@media (max-width: 480px) {
	body .entry-sub-title,
	.entry-header .entry-sub-title {
		padding: var(--ti-sp-3) var(--ti-sp-4);
		margin: var(--ti-sp-3) 0 var(--ti-sp-4);
		font-size: clamp(17px, 0.4vw + 15px, 20px);
	}
}

/* Even tighter italic for related-post / sidebar widget excerpts. */
body .related-item .post-excerpt,
body .post-widget-body .post-excerpt {
	font-family: var(--ti-font-sans);
	font-size: clamp(14px, 0.2vw + 13.5px, 15px);
	line-height: 1.5;
	color: #4A4642; /* ti-ink-700 */
}

/* Inline coral key word inside a lede / standfirst. coral-500 +
   bold pushes it into the WCAG "large text" threshold (3:1). */
body .entry-sub-title .key,
body .post-excerpt .key,
body .thumb-desc .key {
	color: var(--ti-coral-500);
	font-weight: 700;
}

/* --- Mono chrome --------------------------------------------------- */
/* Post meta strip — date, author, comments, views, reading time.
   Mono caps in IBM Plex Mono. Slightly smaller than before per
   user feedback (10-11px range). Letter-spacing 0.14em keeps each
   character legible even at the 10px floor. Color tightened to
   ink-700 for better contrast against cream surfaces. */
body .post-meta,
body .post-meta .meta-item,
body .post-meta .date,
body .post-meta .meta-author,
body .post-meta .meta-author a,
body .post-meta .meta-comment,
body .post-meta .meta-comment a,
body .post-meta .meta-reading-time,
body .thumb-meta,
body .thumb-meta .meta-item {
	font-family: var(--ti-font-mono);
	font-weight: 500;
	font-size: clamp(10px, 0.1vw + 9.5px, 11px);
	letter-spacing: var(--ti-tracking-caps);
	text-transform: uppercase;
	color: #4A4642; /* ti-ink-700 — was ink-600 (4.82:1), now 7.93:1 */
}

/* Category labels in cards + on single posts. Mono caps with the
   Tech-ish em-dash prefix appended via ::before. */
body .post-cat-wrap,
body .post-cat-wrap .post-cat,
body .post-cat-wrap a,
body .cat-labels,
body .cat-labels a {
	font-family: var(--ti-font-mono);
	font-weight: 500;
	font-size: clamp(10px, 0.15vw + 9.5px, 12px);
	letter-spacing: var(--ti-tracking-caps);
	text-transform: uppercase;
}

/* Top-bar date — mono caps */
body .topbar-today-date,
body #top-nav .topbar-today-date {
	font-family: var(--ti-font-mono);
	font-weight: 400;
	font-size: clamp(11px, 0.15vw + 10.5px, 12px);
	letter-spacing: var(--ti-tracking-caps);
	text-transform: uppercase;
}

/* Breadcrumbs — Jannah uses `<nav id="breadcrumb">` (singular, ID),
   NOT `.breadcrumbs`. My earlier selector never matched. Use the
   actual ID and a class fallback. Mono font for family coherence with
   the top-bar date, BUT mixed case (no text-transform: uppercase) —
   breadcrumbs often include article titles which would be shouty if
   uppercased. Smaller than the date so it sits quietly beneath
   the title without competing. */
body #breadcrumb,
body #breadcrumb a,
body #breadcrumb span,
body .breadcrumbs,
body .breadcrumbs a,
body .breadcrumbs span {
	font-family: var(--ti-font-mono);
	font-weight: 400;
	font-size: clamp(10px, 0.1vw + 9.5px, 11px);
	letter-spacing: 0.02em; /* subtle tracking, not full caps tracking */
	text-transform: none;
	color: var(--ti-ink-600);
}

body #breadcrumb a,
body .breadcrumbs a {
	color: var(--ti-ink-700);
}

body #breadcrumb a:hover,
body .breadcrumbs a:hover {
	color: var(--brand-color);
}

html.dark-skin #breadcrumb,
html.dark-skin #breadcrumb a,
html.dark-skin #breadcrumb span,
html.dark-skin .breadcrumbs,
html.dark-skin .breadcrumbs a,
html.dark-skin .breadcrumbs span {
	color: var(--ti-ink-400);
}

html.dark-skin #breadcrumb a,
html.dark-skin .breadcrumbs a {
	color: var(--ti-ink-300);
}


/* =====================================================================
   TOP-BAR DATE — first word (day name) in category color
   The day name is the first alphabetic token in the rendered date
   string. We can't target "the first word" in pure CSS, so a tiny JS
   snippet (in functions.php → techish_child_inline_scripts) wraps the
   first word in <span class="techish-day">. We style that here.
   ===================================================================== */
.topbar-today-date .techish-day,
#top-nav .topbar-today-date .techish-day {
	color: var(--brand-color);
	font-weight: 500;
}

/* Dark mode — brand-color may be too dark on dark surfaces. We brighten
   slightly with a filter so the day name reads crisp regardless of
   which category-specific color is in play. */
html.dark-skin .topbar-today-date .techish-day,
html.dark-skin #top-nav .topbar-today-date .techish-day {
	filter: brightness(1.3);
}

/* --- Body prose: drop-cap + paragraph rhythm ----------------------- */
.entry-content p {
	font-family: var(--ti-font-sans);
	font-size: clamp(16px, 0.4vw + 15px, 18px);
	line-height: 1.65;
	color: var(--ti-ink-900);
}

/* Drop-cap on the first paragraph of a single article. Hidden under
   480px — at that width it competes for too much line space. */
@media (min-width: 480px) {
	.single-post .entry-content > p:first-of-type::first-letter,
	.page .entry-content > p:first-of-type::first-letter {
		font-family: var(--ti-font-italic);
		font-style: italic;
		font-weight: 700;
		font-size: clamp(48px, 4vw + 32px, 70px);
		line-height: 0.85;
		float: left;
		margin: 6px 10px 0 0;
		color: var(--ti-violet-500);
	}
}

/* If a featured image / video / gallery floats into the first
   paragraph (Jannah's WP-CONTENT layouts do this), suppress the
   drop-cap so it doesn't collide. */
.single-post .entry-content > p:first-of-type:has(> img:first-child)::first-letter,
.single-post .entry-content > p:first-of-type:has(> .wp-block-image:first-child)::first-letter,
.page .entry-content > p:first-of-type:has(> img:first-child)::first-letter,
.page .entry-content > p:first-of-type:has(> .wp-block-image:first-child)::first-letter {
	all: unset;
}

/* =====================================================================
   ARTICLE PROSE — LISTS, BLOCKQUOTES, PULL QUOTES
   Lists were inheriting browser defaults (wrong size, weird spacing).
   Quotes get the Tech-ish editorial card treatment inspired by the
   TAGS pill chip system — soft violet surface, rounded corners,
   editorial typography.
   ===================================================================== */

/* --- Lists in article body ---------------------------------------- */
/* Match paragraph rhythm exactly so reading flow doesn't break.
   Markers (bullets / numbers) get the editorial violet color. */
.entry-content ul,
.entry-content ol {
	font-family: var(--ti-font-sans);
	font-size: clamp(16px, 0.4vw + 15px, 18px);
	line-height: 1.65;
	color: #1A1817; /* ti-ink-900 */
	margin: 0 0 1.5em;
	padding-left: 1.6em;
}

.entry-content li {
	margin-bottom: 0.5em;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

.entry-content li:last-child {
	margin-bottom: 0;
}

/* List markers (bullets / numbers) in brand violet. */
.entry-content ul > li::marker,
.entry-content ol > li::marker {
	color: var(--ti-violet-500);
	font-weight: 600;
}

/* Nested lists — tighter spacing inside. */
.entry-content ul ul,
.entry-content ol ol,
.entry-content ul ol,
.entry-content ol ul {
	margin: 0.5em 0 0.5em;
}

/* Dark-mode list color */
.dark-skin .entry-content ul,
.dark-skin .entry-content ol {
	color: var(--ti-cream-100);
}

.dark-skin .entry-content ul > li::marker,
.dark-skin .entry-content ol > li::marker {
	color: var(--ti-violet-300);
}


/* --- Blockquote: editorial violet card -----------------------------
   Inspired by the TAGS pill chip in the design system:
     - soft violet-100 surface (echoes the tag chip background)
     - 14px rounded corners (var(--ti-radius-md))
     - 4px violet-500 left rule (the editorial "this is a quote" mark)
     - decorative Playfair " mark in violet-300
     - Playfair italic body text in ink-800
     - mono caps attribution with em-dash if cite element present */
.entry-content blockquote {
	background: var(--ti-violet-50);
	border: 1px solid var(--ti-violet-200);
	border-left: 4px solid var(--ti-violet-500);
	border-radius: var(--ti-radius-md);
	padding: var(--ti-sp-5) var(--ti-sp-6) var(--ti-sp-5) var(--ti-sp-7);
	margin: var(--ti-sp-7) 0;
	position: relative;
	box-shadow: 0 1px 4px rgba(123, 63, 140, 0.06);

	font-family: var(--ti-font-italic);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(19px, 0.8vw + 16px, 24px);
	line-height: 1.45;
	color: #2B2826; /* ti-ink-800 */
	text-wrap: balance;
}

/* Decorative Playfair " mark, positioned in the top-left, semi-
   transparent so it reads as ornament not noise. */
.entry-content blockquote::before {
	content: "\201C";
	position: absolute;
	top: -0.15em;
	left: 0.15em;
	font-family: var(--ti-font-italic);
	font-style: italic;
	font-weight: 700;
	font-size: clamp(56px, 4vw + 32px, 88px);
	line-height: 1;
	color: var(--ti-violet-300);
	opacity: 0.55;
	pointer-events: none;
	user-select: none;
}

.entry-content blockquote p {
	margin: 0 0 0.5em;
	position: relative;
	z-index: 1;
}

.entry-content blockquote p:last-of-type {
	margin-bottom: 0;
}

/* Citation / attribution at the foot of the quote */
.entry-content blockquote cite,
.entry-content blockquote footer {
	display: block;
	margin-top: var(--ti-sp-3);
	font-family: var(--ti-font-mono);
	font-style: normal;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: var(--ti-tracking-caps);
	text-transform: uppercase;
	color: #4A4642; /* ti-ink-700 */
}

.entry-content blockquote cite::before,
.entry-content blockquote footer::before {
	content: "— ";
	color: var(--ti-violet-500);
}


/* --- Pull-quote (.wp-block-pullquote + similar) -------------------- */
/* For the WordPress Gutenberg pullquote block (or any blockquote with
   a "pullquote" class), use the dramatic centered treatment with a
   small "// PULL QUOTE" mono pill at top — mirrors the TAGS label pill
   from the design system. No giant " mark here — the pill IS the
   indicator. */
.entry-content .wp-block-pullquote,
.entry-content blockquote.is-pullquote,
.entry-content .pullquote {
	background: var(--ti-violet-50);
	border: 1px solid var(--ti-violet-200);
	border-left: 0; /* no left rule, this one is centered */
	border-radius: var(--ti-radius-lg); /* 20px — slightly larger */
	padding: var(--ti-sp-8) var(--ti-sp-6) var(--ti-sp-6);
	margin: var(--ti-sp-8) 0;
	text-align: center;
	position: relative;
	box-shadow: 0 4px 12px rgba(123, 63, 140, 0.08);
}

/* The "// PULL QUOTE" mono pill, positioned at top-center — overlapping
   the card's top border like a tab. */
.entry-content .wp-block-pullquote::before,
.entry-content blockquote.is-pullquote::before,
.entry-content .pullquote::before {
	content: "// PULL QUOTE";
	position: absolute;
	top: -14px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--ti-font-mono);
	font-style: normal;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: var(--ti-tracking-caps);
	text-transform: uppercase;
	color: var(--ti-cream-50);
	background: var(--ti-ink-900);
	padding: 6px 14px;
	border-radius: 999px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	white-space: nowrap;
	letter-spacing: 0.18em;
}

.entry-content .wp-block-pullquote blockquote,
.entry-content .wp-block-pullquote p,
.entry-content blockquote.is-pullquote p,
.entry-content .pullquote p {
	font-family: var(--ti-font-italic);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(22px, 1.2vw + 18px, 32px);
	line-height: 1.35;
	color: #2B2826;
	text-wrap: balance;
	margin: 0 0 var(--ti-sp-3);
	background: transparent;
	border: 0;
}

.entry-content .wp-block-pullquote cite,
.entry-content blockquote.is-pullquote cite,
.entry-content .pullquote cite {
	display: block;
	font-family: var(--ti-font-mono);
	font-style: normal;
	font-weight: 500;
	font-size: 11px;
	letter-spacing: var(--ti-tracking-caps);
	text-transform: uppercase;
	color: #4A4642;
	margin-top: var(--ti-sp-3);
}

.entry-content .wp-block-pullquote cite::before,
.entry-content blockquote.is-pullquote cite::before,
.entry-content .pullquote cite::before {
	content: "— ";
	color: var(--ti-violet-500);
}


/* --- Dark mode for both blockquote variants ------------------------ */
.dark-skin .entry-content blockquote {
	background: rgba(123, 63, 140, 0.08);
	border-color: rgba(177, 137, 189, 0.18);
	border-left-color: var(--ti-violet-300);
	color: var(--ti-cream-100);
}

.dark-skin .entry-content blockquote::before {
	color: var(--ti-violet-300);
	opacity: 0.40;
}

.dark-skin .entry-content blockquote cite,
.dark-skin .entry-content blockquote footer {
	color: var(--ti-ink-300);
}

.dark-skin .entry-content .wp-block-pullquote,
.dark-skin .entry-content blockquote.is-pullquote,
.dark-skin .entry-content .pullquote {
	background: rgba(123, 63, 140, 0.08);
	border-color: rgba(177, 137, 189, 0.18);
}

.dark-skin .entry-content .wp-block-pullquote::before,
.dark-skin .entry-content blockquote.is-pullquote::before,
.dark-skin .entry-content .pullquote::before {
	color: var(--ti-ink-900);
	background: var(--ti-violet-300);
}

.dark-skin .entry-content .wp-block-pullquote p,
.dark-skin .entry-content blockquote.is-pullquote p,
.dark-skin .entry-content .pullquote p {
	color: var(--ti-cream-100);
}

.dark-skin .entry-content .wp-block-pullquote cite,
.dark-skin .entry-content blockquote.is-pullquote cite,
.dark-skin .entry-content .pullquote cite {
	color: var(--ti-ink-300);
}


/* --- Inline <q> (short inline quotes) and <cite> outside quotes ---- */
.entry-content q {
	font-family: var(--ti-font-italic);
	font-style: italic;
	color: var(--ti-violet-700);
	quotes: "\201C" "\201D" "\2018" "\2019";
}

.entry-content q::before {
	content: open-quote;
}

.entry-content q::after {
	content: close-quote;
}

/* Mobile padding refinement for both quote types */
@media (max-width: 480px) {
	.entry-content blockquote {
		padding: var(--ti-sp-4) var(--ti-sp-4) var(--ti-sp-4) var(--ti-sp-5);
		margin: var(--ti-sp-5) 0;
	}
	.entry-content blockquote::before {
		font-size: 48px;
	}
	.entry-content .wp-block-pullquote,
	.entry-content blockquote.is-pullquote,
	.entry-content .pullquote {
		padding: var(--ti-sp-6) var(--ti-sp-4) var(--ti-sp-4);
		margin: var(--ti-sp-6) 0;
	}
}

/* H2 / H3 inside long-form prose. Inter, tight, balanced. */
.entry-content h2 {
	font-family: var(--ti-font-sans);
	font-weight: 800;
	font-size: clamp(22px, 1.4vw + 16px, 30px);
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin: var(--ti-sp-7) 0 var(--ti-sp-3);
	color: var(--ti-ink-900);
	text-wrap: balance;
}

.entry-content h3 {
	font-family: var(--ti-font-sans);
	font-weight: 700;
	font-size: clamp(19px, 0.9vw + 15px, 24px);
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: var(--ti-sp-6) 0 var(--ti-sp-3);
	color: var(--ti-ink-900);
}

/* Inline code and <kbd> get the mono treatment for free since they
   inherit nothing from Jannah's body font — but make sure size is in
   range. */
.entry-content code,
.entry-content kbd,
.entry-content pre {
	font-family: var(--ti-font-mono);
	font-size: 0.92em;
}

/* --- Selection + focus visual tone --------------------------------- */
::selection {
	background: var(--ti-violet-200);
	color: var(--ti-ink-900);
}


/* =====================================================================
   MOBILE HEADER — fully OPAQUE in sticky/fixed state
   THE PROBLEM (took two rounds to find):
     - Jannah's base.css:2312 has `#tie-wrapper header#theme-header
       { background: transparent !important }` on mobile (2 IDs + 1
       type + !important = specificity 0,2,0,1).
     - My earlier override `html:not(.dark-skin) body #theme-header`
       was only 0,1,1,2 — Jannah's 2 IDs WIN the specificity contest
       even with both using !important.
     - Separately, Jannah's `.theme-header .fixed-nav .container
       { opacity: 0.95 }` makes the sticky element semi-transparent
       through the OPACITY channel, which `background` overrides
       cannot defeat.
   THE FIX:
     - Use `#tie-wrapper #theme-header` (2 IDs) — matches Jannah's
       specificity, and loading later breaks the !important tie in
       our favor.
     - Force `opacity: 1 !important` on every sticky descendant to
       defeat the opacity-based transparency.
     - Apply to every element that can become sticky on mobile per
       Jannah's scripts.min.js: `.logo-container` (non-layout-1),
       `#main-nav` (layout-1), and their `.fixed-nav` states.
   ===================================================================== */
@media (max-width: 991px) {
	html:not(.dark-skin) body #tie-wrapper #theme-header,
	html:not(.dark-skin) body #tie-wrapper header#theme-header,
	html:not(.dark-skin) body #tie-wrapper #top-nav,
	html:not(.dark-skin) body #tie-wrapper #main-nav,
	html:not(.dark-skin) body #tie-wrapper #theme-header .logo-container,
	html:not(.dark-skin) body #tie-wrapper #theme-header .main-nav-wrapper,
	html:not(.dark-skin) body #tie-wrapper #theme-header .topbar-wrapper,
	html:not(.dark-skin) body #tie-wrapper .fixed-nav,
	html:not(.dark-skin) body #tie-wrapper .logo-container.fixed-nav,
	html:not(.dark-skin) body #tie-wrapper #main-nav.fixed-nav,
	html:not(.dark-skin) body #tie-wrapper .theme-header .fixed-nav .container {
		background: var(--ti-cream-100) !important;
		background-color: var(--ti-cream-100) !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		opacity: 1 !important;
	}

	/* Specifically kill the opacity-based transparency on the inner
	   .container of the sticky element (Jannah's base.css:2269 sets
	   .theme-header .fixed-nav .container { opacity: 0.95 }). */
	html body #tie-wrapper .theme-header .fixed-nav .container,
	html body #tie-wrapper .fixed-nav .container,
	html body #tie-wrapper .fixed-nav > .container {
		opacity: 1 !important;
	}

	/* Dark mode mobile — same idea, fully opaque dark surface. */
	html.dark-skin #tie-wrapper #theme-header,
	html.dark-skin #tie-wrapper header#theme-header,
	html.dark-skin #tie-wrapper #top-nav,
	html.dark-skin #tie-wrapper #main-nav,
	html.dark-skin #tie-wrapper #theme-header .logo-container,
	html.dark-skin #tie-wrapper #theme-header .main-nav-wrapper,
	html.dark-skin #tie-wrapper #theme-header .topbar-wrapper,
	html.dark-skin #tie-wrapper .fixed-nav,
	html.dark-skin #tie-wrapper .logo-container.fixed-nav,
	html.dark-skin #tie-wrapper #main-nav.fixed-nav,
	html.dark-skin #tie-wrapper .theme-header .fixed-nav .container {
		background: #1f2024 !important;
		background-color: #1f2024 !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		opacity: 1 !important;
	}

	/* (Mobile icon dark-mode color rules moved to the v1.0.22 unified
	   mobile-header block above — those rules cover chip color, hover,
	   nav-icon bars, focus ring, and chip lift in both light and dark
	   mode in one cohesive system.) */

	/* Logo wordmark in dark mode — cream tones for "tech", category
	   color (via color-mix lift) for "-ish". The em color resolves
	   to the same color-mix used in the global rule above, but this
	   higher-specificity selector (`html.dark-skin body #theme-header`
	   vs `.dark-skin`) needs to repeat it explicitly so the brand-
	   color injection still flows through on the mobile header. */
	html.dark-skin body #theme-header .techish-wordmark__name {
		color: var(--ti-cream-100);
	}
	html.dark-skin body #theme-header .techish-wordmark__name em {
		color: var(--ti-violet-300);
		color: color-mix(in srgb, var(--brand-color, var(--ti-violet-300)) 65%, white);
	}
}


/* =====================================================================
   LEAD DECK — "scroll down" arrow visual cue
   Anchored at bottom-right of the deck. CSS-drawn chevron (no icon
   font dependency, no unicode font fallback variation), colored
   `var(--brand-color)` so it picks up the post's category color, with
   a slow 3-step bob animation. Respects prefers-reduced-motion. Hidden
   in print. Small + low-opacity so it's a quiet cue, not visual
   noise after the reader has registered it.
   ===================================================================== */
body .entry-sub-title::after,
.entry-header .entry-sub-title::after {
	content: "";
	position: absolute;
	bottom: var(--ti-sp-3);
	right: var(--ti-sp-4);
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--brand-color);
	border-bottom: 2px solid var(--brand-color);
	transform: rotate(45deg);
	transform-origin: center;
	opacity: 0.55;
	animation: techish-deck-bob 2.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	pointer-events: none;
}

@keyframes techish-deck-bob {
	0%, 100% {
		transform: rotate(45deg) translate3d(0, 0, 0);
		opacity: 0.50;
	}
	50% {
		transform: rotate(45deg) translate3d(2px, 2px, 0);
		opacity: 0.85;
	}
}

/* Hover (e.g. cursor near the deck) — boost arrow visibility */
body .entry-sub-title:hover::after,
.entry-header .entry-sub-title:hover::after {
	opacity: 0.95;
}

/* Reduced motion / print — static, no animation */
@media (prefers-reduced-motion: reduce) {
	body .entry-sub-title::after,
	.entry-header .entry-sub-title::after {
		animation: none;
		opacity: 0.7;
	}
}

@media print {
	body .entry-sub-title::after,
	.entry-header .entry-sub-title::after {
		display: none;
	}
}

/* Dark mode — boost the arrow brightness so it reads on the dark
   surface, matching the LEAD pill treatment. */
html.dark-skin .entry-sub-title::after,
html.dark-skin .entry-header .entry-sub-title::after {
	filter: brightness(1.3);
}

/* Parallax post layouts — arrow in cream */
body.post-layout-4 .fullwidth-entry-title .entry-header .entry-sub-title::after,
body.post-layout-5 .fullwidth-entry-title .entry-header .entry-sub-title::after,
body.post-layout-8 .fullwidth-entry-title .entry-header .entry-sub-title::after {
	border-right-color: rgba(251, 247, 236, 0.85);
	border-bottom-color: rgba(251, 247, 236, 0.85);
}


/* =====================================================================
   MENU DROPDOWN CHEVRON
   Jannah uses its tiefonticon character "\f079" positioned absolutely
   on .menu-item-has-children > a::before. The icon font sometimes
   renders as an asterisk-like glyph in unexpected positions on certain
   user environments (font load failures, OS font fallback). We hide
   Jannah's pseudo and draw a clean CSS-only down-chevron instead.
   Pure CSS borders — no icon-font dependency. Reliable on every device.
   ===================================================================== */
@media (min-width: 992px) {
	/* Hide Jannah's icon-font chevron */
	#main-nav header .menu-item-has-children > a::before,
	#main-nav .mega-menu > a::before,
	header .menu-item-has-children > a::before,
	.mega-menu > a::before {
		content: none !important;
		display: none !important;
	}

	/* Make room for chevron via padding-right ONLY — do NOT change
	   `display` on items-with-children. Changing display:inline-flex
	   pushed REVIEWS off the baseline relative to HOME/NEWS siblings. */
	#main-nav .main-menu .menu > li.menu-item-has-children > a,
	#main-nav .main-menu .menu > li.mega-menu > a {
		padding-right: 28px;
		/* position: relative already set in Phase 4 link rule */
	}

	/* Chevron — absolute positioned so it sits OUTSIDE the link's flow.
	   The link's text baseline stays identical to non-children siblings. */
	#main-nav .main-menu .menu > li.menu-item-has-children > a::after,
	#main-nav .main-menu .menu > li.mega-menu > a::after {
		content: "";
		position: absolute;
		right: 12px;
		top: 50%;
		width: 6px;
		height: 6px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		transform: translateY(-75%) rotate(45deg); /* -75% so the diamond
		    visually centers on the text baseline, not its bounding box. */
		opacity: 0.6;
		transition: transform var(--ti-dur) var(--ti-ease),
		            opacity var(--ti-dur) var(--ti-ease);
	}

	#main-nav .main-menu .menu > li.menu-item-has-children > a:hover::after,
	#main-nav .main-menu .menu > li.mega-menu > a:hover::after,
	#main-nav .main-menu .menu > li.menu-item-has-children:hover > a::after,
	#main-nav .main-menu .menu > li.mega-menu:hover > a::after {
		opacity: 1;
		transform: translateY(-55%) rotate(45deg);
	}
}


/* =====================================================================
   DARK MODE — single-post meta strip (byline)
   The .entry-header .post-meta in single posts wasn't inverting in
   dark mode because earlier dark-mode rules used `body.dark-skin .X`
   selectors that didn't match (Jannah puts .dark-skin on <html>, not
   <body>). Now that selectors are fixed (`html.dark-skin .X`), we add
   an explicit override for the single-post byline strip in dark mode.
   ===================================================================== */
html.dark-skin .entry-header .post-meta,
html.dark-skin .entry-header .post-meta .meta-item,
html.dark-skin .entry-header .post-meta .meta-item span,
html.dark-skin .entry-header .post-meta a,
html.dark-skin .entry-header .post-meta .date,
html.dark-skin .entry-header .post-meta time,
html.dark-skin .entry-header .post-meta .meta-comment,
html.dark-skin .entry-header .post-meta .meta-reading-time {
	color: #D6CFB9 !important; /* ti-ink-300 — light warm grey on dark */
}

html.dark-skin .entry-header .post-meta .meta-author a,
html.dark-skin .entry-header .post-meta .meta-author .author-name,
html.dark-skin .entry-header .post-meta .author-name {
	color: #B189BD !important; /* ti-violet-300 — author name pops */
}

html.dark-skin .entry-header .post-meta {
	border-top-color: rgba(177, 137, 189, 0.20) !important;
	border-bottom-color: rgba(177, 137, 189, 0.20) !important;
}


/* =====================================================================
   AUTHOR BIO TAB-PILL — top clipping fix
   The "// THE WRITER" pill sits at `top: -14px` overlapping the card's
   top edge. If a parent has `overflow: hidden`, the pill gets clipped.
   Force the parent containers to overflow: visible AND add extra top
   margin so the pill always has air above it.
   ===================================================================== */
.post-components,
.post-components .about-author,
.post-components > .about-author {
	overflow: visible !important;
}

.about-author,
.about-author.container-wrapper,
html body .about-author,
html body .about-author.container-wrapper {
	margin-top: var(--ti-sp-8) !important; /* ≈64px — generous breathing room */
	overflow: visible !important;
}


/* =====================================================================
   LOGO LOCKUP — significantly bigger / more present
   v1.0.9: bumped from clamp(22-34) to clamp(32-56), with a 30px floor
   even on the tiniest phones. The wordmark is the brand signature; it
   should read clearly across the room as well as on a phone. Jannah's
   default .logo-text declares font-size: 50px (base.css:990) — we now
   beat that ceiling at desktop sizes. Line-height tightened to 1 so
   the wordmark sits compactly without bloating the header height.
   ===================================================================== */
.techish-wordmark,
.logo .techish-wordmark,
.logo-text .techish-wordmark,
#logo .techish-wordmark,
#logo.text-logo .logo-text .techish-wordmark {
	font-size: clamp(32px, 2.2vw + 22px, 56px) !important;
	line-height: 1 !important;
	font-weight: 900 !important;       /* fattest Inter — more visual weight */
	letter-spacing: -0.015em;
}

/* Ensure Jannah's wrapping <div class="logo-text"> doesn't constrain
   the bigger wordmark. Jannah sets it to font-size: 50px / line-height: 50px
   (base.css:989) — without these resets, taller wordmarks can clip. */
#logo .logo-text,
#logo.text-logo .logo-text {
	font-size: inherit !important;
	line-height: 1 !important;
	display: inline-flex;
	align-items: center;
}

/* The dot grows proportionally via em units (already 0.45em), but we
   also widen the gap between dot and "tech" so the larger lockup
   breathes. */
.techish-wordmark__dot {
	width: 0.40em;
	height: 0.40em;
	margin-right: 0.40em;
}

/* Mobile-specific overrides — keep the lockup bold and legible on
   small phones. 30px is the floor so even iPhone SE (320px) gets a
   clearly readable brand. */
@media (max-width: 480px) {
	.techish-wordmark,
	.logo .techish-wordmark,
	#logo .techish-wordmark,
	#logo.text-logo .logo-text .techish-wordmark {
		font-size: 30px !important;
		font-weight: 900 !important;
	}
}

/* Tablet 481-991px: ~38-44px */
@media (min-width: 481px) and (max-width: 991px) {
	.techish-wordmark,
	.logo .techish-wordmark,
	#logo .techish-wordmark,
	#logo.text-logo .logo-text .techish-wordmark {
		font-size: clamp(34px, 1.5vw + 24px, 44px) !important;
	}
}

/* Logo container — give it room so the bigger wordmark doesn't crowd
   the header. On DESKTOP we use asymmetric top/bottom padding for
   OPTICAL centering: because Inter's line-height: 1 caps the box at
   the cap-height with no extra space above for ascenders, the
   wordmark always appears optically pulled UP. Extra top padding
   compensates so it looks visually centered in its band.

   Mobile padding deliberately left at 4px (user is happy with how
   the mobile logo currently sits). */
#logo,
#logo.text-logo,
#theme-header #logo {
	padding: 8px 0;
}

@media (min-width: 992px) {
	#logo,
	#logo.text-logo,
	#theme-header #logo {
		/* extra top padding for optical centering — eye reads center,
		   not geometric mid. ~2x bottom is the sweet spot for Inter 900 */
		padding-top: 28px;
		padding-bottom: 14px;
	}
}

/* Override any inline margin-top/bottom Jannah injects from the
   admin's "Logo Margin" option, so our optical centering wins. */
@media (min-width: 992px) {
	#theme-header #logo[style*="margin"] {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}
}

@media (max-width: 991px) {
	#logo,
	#logo.text-logo,
	#theme-header #logo {
		padding: 4px 0;
	}
}


/* =====================================================================
   ARCHIVE HEADER — category / tag / author / date pages
   ---------------------------------------------------------------------
   Jannah renders the archive header as:
     <header id="{type}-title-section"
             class="entry-header-outer container-wrapper archive-title-wrapper">
       <h1 class="page-title">{name}</h1>
       <div class="taxonomy-description entry">{description}</div>
     </header>

   Where {type} is one of: category | tag | author | archive (date).

   Problems we're fixing (the user flagged these in dark mode):
   1. `.page-title` color was being pinned to ink-900 by the global
      `html body .archive-title-wrapper h1.page-title` rule
      (specificity 0,0,2,3) which beat our generic dark-mode
      override (`html.dark-skin .page-title` = 0,0,2,1). Result:
      near-black title on a near-black dark surface — invisible.
   2. Description was readable but had no card surface, so the
      whole header read as "unstyled dump" compared to the
      sidebar's clear card chrome.
   3. No editorial signal that this is a section header — just
      a floating headline.

   Light mode is left alone per the user's direction; the eyebrow
   pill works in both modes (it's the same vocabulary as the
   "// THE WRITER" pill on the author-bio card).
   ===================================================================== */

/* Editorial eyebrow pill — adapts per archive type via the section
   ID. Anchored to the top edge of the wrapper, overlapping like a
   folder tab — same vocabulary as `.about-author::before`. */
body .archive-title-wrapper {
	position: relative;
	margin-top: var(--ti-sp-7);
}

body .archive-title-wrapper::before {
	content: "// SECTION";
	position: absolute;
	top: -14px;
	left: var(--ti-sp-6);
	font-family: var(--ti-font-mono);
	font-style: normal;
	font-weight: 500;
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ti-cream-50);
	background: var(--ti-ink-900);
	padding: 6px 14px;
	border-radius: 999px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
	white-space: nowrap;
	z-index: 2;
}

body #category-title-section::before { content: "// CATEGORY"; }
body #tag-title-section::before      { content: "// TAG"; }
body #author-title-section::before   { content: "// AUTHOR"; }
body #archive-title-section::before  { content: "// ARCHIVE"; }

/* Eyebrow takes the category color when --brand-color is set
   (matches the wordmark italic behavior in v1.0.27). */
body .archive-title-wrapper::before {
	background: var(--brand-color, var(--ti-ink-900));
}

/* DARK MODE — card treatment with proper contrast.
   Specificity goal: beat `html body .archive-title-wrapper
   h1.page-title` (0,0,2,3). We use `html.dark-skin body
   .archive-title-wrapper h1.page-title` = 0,0,3,3 — wins on
   class count. */
html.dark-skin body .archive-title-wrapper,
html.dark-skin body .entry-header-outer.archive-title-wrapper {
	background: #27292d;
	border: 1px solid rgba(177, 137, 189, 0.18);
	border-radius: var(--ti-radius-lg);
	padding: clamp(28px, 2.5vw + 16px, 44px) clamp(20px, 2vw + 14px, 36px) clamp(24px, 2vw + 14px, 36px);
	margin: var(--ti-sp-7) 0 var(--ti-sp-6);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
}

/* Force the title cream-100 in dark mode — high specificity to
   beat the global archive-title-wrapper color rule. */
html.dark-skin body .archive-title-wrapper h1.page-title,
html.dark-skin body .archive-title-wrapper .page-title,
html.dark-skin body #category-title-section .page-title,
html.dark-skin body #tag-title-section .page-title,
html.dark-skin body #author-title-section .page-title,
html.dark-skin body #archive-title-section .page-title {
	color: var(--ti-cream-100) !important;
	font-family: var(--ti-font-sans);
	font-weight: 800;
	font-size: clamp(34px, 4vw + 18px, 60px);
	line-height: 1.04;
	letter-spacing: -0.022em;
	text-wrap: balance;
	margin: 0 0 var(--ti-sp-3);
}

/* Description — italic Inter, ink-200 (legibly bright on the dark
   card), max-width so the line length stays readable. */
html.dark-skin body .archive-title-wrapper .taxonomy-description,
html.dark-skin body .archive-title-wrapper .taxonomy-description p {
	font-family: var(--ti-font-sans);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(15px, 0.4vw + 13px, 18px);
	line-height: 1.6;
	color: rgba(251, 247, 236, 0.86); /* cream-100 @ 86% — high
	                                    contrast on dark card */
	max-width: 64ch;
	margin: 0;
	letter-spacing: 0;
}

/* The italic em / strong inside the description gets the brand
   color in dark mode too. */
html.dark-skin body .archive-title-wrapper .taxonomy-description em,
html.dark-skin body .archive-title-wrapper .taxonomy-description strong {
	color: color-mix(in srgb, var(--brand-color, var(--ti-violet-300)) 65%, white);
	font-style: italic;
}

/* Eyebrow pill in dark mode — cream text on dark-ink pill or
   brand-color pill if set. */
html.dark-skin body .archive-title-wrapper::before {
	color: var(--ti-ink-900);
	background: color-mix(in srgb, var(--brand-color, var(--ti-violet-300)) 80%, white);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}


/* =====================================================================
   MAGAZINE FOLIO CAPTION — featured image + inline figcaption
   ---------------------------------------------------------------------
   Replaces Jannah's default treatment for featured-image and inline
   image captions. Jannah ships them as `position: absolute` overlays
   pinned to the bottom-left of the image (`.single-caption-text { bg:
   rgba(0,0,0,0.6); color: #fff; padding: 5px 10px }` — see
   jannah/assets/css/single.css:642). That covers part of the photo
   and reads as "system chrome" rather than editorial design.

   We extract the caption to flow BELOW the image, then style it as a
   magazine folio block:

     ┌── 1px ink-300 hairline ──────────────────────────────
     │ "// PICTURED"  ← mono-caps pill (brand-color fill)
     │
     ║ Italic Inter caption text with a 2px brand-color
     ║ left rule. text-wrap: pretty for nice line breaks.
     │
     └────────────────────────────────────────────────────

   Components reused from the design system:
   - Eyebrow pill (matches .about-author::before "// THE WRITER"
     and .archive-title-wrapper::before "// CATEGORY")
   - Left vertical rule (Tufte-style margin-note treatment)
   - --brand-color flow (matches the wordmark italic and archive
     header eyebrow — caption tints to the page's section color)

   Scopes:
     - Featured image: .single-featured-image .single-caption-text
     - Classic editor inline: figure.wp-caption .wp-caption-text
     - Gutenberg image block: figure.wp-block-image > figcaption
   Skipped intentionally:
     - Gallery captions (.wp-block-gallery — too short per-tile)
     - Pullquote figcaptions (own treatment in the pullquote block)
     - Embed figcaptions (video/audio — let Jannah's defaults stand)
   ===================================================================== */

/* Step 1 — extract the featured caption from its overlay positioning.
   `overflow: visible !important` so the eyebrow pill (which sits 11px
   above the figcaption's top edge, i.e. bleeding into the image's
   bottom area) is never clipped. Also applied to every other figure
   container we caption-style. */
body .single-featured-image,
body .entry-content figure.wp-caption,
body .entry-content figure.wp-block-image,
body .entry-content > figure {
	position: relative;
	overflow: visible !important;
	line-height: normal !important; /* Jannah sets line-height: 0 to
	                                   suppress the inline-block gap
	                                   under the img; we restore it
	                                   so the figcaption block flows. */
}

body .single-featured-image {
	margin: 0 0 var(--ti-sp-6);
}

/* Step 2 — outer caption block. `position: relative !important` does
   double duty here: it overrides Jannah's `position: absolute` (which
   pinned the caption as a bottom-left overlay) AND establishes the
   positioning context for the ::before eyebrow pill. Earlier we had
   `position: static !important` plus `position: relative` declared
   after it — `!important` won and the ::before pill ended up
   positioned against the wrong ancestor (the article column), so
   the pill appeared floating at the top of the article instead of
   overlapping the figcaption's top edge. */
body .single-featured-image .single-caption-text,
body .entry-content figure.wp-caption .wp-caption-text,
body .entry-content figure.wp-block-image > figcaption,
body .entry-content > figure > figcaption {
	/* Strip Jannah's overlay + dark-pill */
	position: relative !important;
	background: transparent !important;
	color: var(--ti-ink-700);

	/* Magazine folio block */
	display: block;
	padding: var(--ti-sp-4) 0 var(--ti-sp-2) var(--ti-sp-4) !important;
	margin: var(--ti-sp-4) 0 var(--ti-sp-5) !important;
	max-width: 64ch; /* editorial measure — caption never out-runs
	                    the body line length, regardless of image width */
	overflow: visible !important; /* defend against parent overflow:hidden
	                                  that would clip the pill */

	/* Top hairline + left vertical rule */
	border-top: 1px solid var(--ti-ink-300);
	border-left: 2px solid var(--brand-color, var(--ti-violet-300));

	/* Italic Inter — the caption is a piece of writing, not chrome. */
	font-family: var(--ti-font-sans);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(14px, 0.3vw + 13px, 16px);
	line-height: 1.55;
	letter-spacing: 0;
	text-align: left;
	text-wrap: pretty;
}

/* Step 3 — folder-tab eyebrow pill "// PICTURED" overlapping the
   top hairline. Brand-color fill so it tints per section. */
body .single-featured-image .single-caption-text::before,
body .entry-content figure.wp-caption .wp-caption-text::before,
body .entry-content figure.wp-block-image > figcaption::before,
body .entry-content > figure > figcaption::before {
	content: "// PICTURED";
	position: absolute;
	top: -11px;
	left: var(--ti-sp-3);
	font-family: var(--ti-font-mono);
	font-style: normal;
	font-weight: 500;
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ti-cream-50);
	background: var(--brand-color, var(--ti-violet-500));
	padding: 4px 10px;
	border-radius: 999px;
	line-height: 1;
	z-index: 2;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	white-space: nowrap;
}

/* Step 4 — hide Jannah's inline camera icon inside the caption.
   The "// PICTURED" eyebrow already carries that semantic. */
body .single-featured-image .single-caption-text .tie-icon-camera,
body .single-featured-image .single-caption-text .tie-icon-camera::before {
	display: none !important;
}

/* Step 5 — inline links inside the caption (e.g. photographer
   credit linked to portfolio): mono caps, brand-color underline
   on hover. */
body .single-featured-image .single-caption-text a,
body .entry-content figure.wp-caption .wp-caption-text a,
body .entry-content figure.wp-block-image > figcaption a {
	color: var(--ti-ink-900);
	background: transparent !important;
	text-decoration: underline;
	text-decoration-color: var(--brand-color, var(--ti-violet-300));
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	font-style: normal;
	transition: text-decoration-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

body .single-featured-image .single-caption-text a:hover,
body .entry-content figure.wp-caption .wp-caption-text a:hover,
body .entry-content figure.wp-block-image > figcaption a:hover {
	text-decoration-color: var(--ti-violet-700);
	opacity: 1 !important;
}

/* ---- Dark mode ---- */
html.dark-skin body .single-featured-image .single-caption-text,
html.dark-skin body .entry-content figure.wp-caption .wp-caption-text,
html.dark-skin body .entry-content figure.wp-block-image > figcaption,
html.dark-skin body .entry-content > figure > figcaption {
	color: rgba(251, 247, 236, 0.82); /* cream-100 @ 82% on dark */
	border-top-color: rgba(177, 137, 189, 0.20);
	border-left-color: color-mix(in srgb, var(--brand-color, var(--ti-violet-300)) 70%, white);
}

html.dark-skin body .single-featured-image .single-caption-text::before,
html.dark-skin body .entry-content figure.wp-caption .wp-caption-text::before,
html.dark-skin body .entry-content figure.wp-block-image > figcaption::before,
html.dark-skin body .entry-content > figure > figcaption::before {
	color: var(--ti-ink-900);
	background: color-mix(in srgb, var(--brand-color, var(--ti-violet-300)) 80%, white);
}

html.dark-skin body .single-featured-image .single-caption-text a,
html.dark-skin body .entry-content figure.wp-caption .wp-caption-text a,
html.dark-skin body .entry-content figure.wp-block-image > figcaption a {
	color: var(--ti-cream-100);
	text-decoration-color: color-mix(in srgb, var(--brand-color, var(--ti-violet-300)) 70%, white);
}

/* ---- Mobile tightening ---- */
@media (max-width: 600px) {
	body .single-featured-image .single-caption-text,
	body .entry-content figure.wp-caption .wp-caption-text,
	body .entry-content figure.wp-block-image > figcaption,
	body .entry-content > figure > figcaption {
		padding: var(--ti-sp-3) 0 var(--ti-sp-2) var(--ti-sp-3) !important;
		margin: var(--ti-sp-3) 0 var(--ti-sp-4) !important;
		font-size: clamp(13px, 0.25vw + 12px, 15px);
	}

	body .single-featured-image .single-caption-text::before,
	body .entry-content figure.wp-caption .wp-caption-text::before,
	body .entry-content figure.wp-block-image > figcaption::before,
	body .entry-content > figure > figcaption::before {
		top: -10px;
		left: var(--ti-sp-2);
		font-size: 8.5px;
		padding: 3px 8px;
	}
}

/* ---- Print: strip the chrome, keep the text ---- */
@media print {
	body .single-featured-image .single-caption-text,
	body .entry-content figure.wp-caption .wp-caption-text,
	body .entry-content figure.wp-block-image > figcaption,
	body .entry-content > figure > figcaption {
		border: 0 !important;
		padding: 4pt 0 0 !important;
		color: #333 !important;
		font-size: 9pt;
	}
	body .single-featured-image .single-caption-text::before,
	body .entry-content figure.wp-caption .wp-caption-text::before,
	body .entry-content figure.wp-block-image > figcaption::before,
	body .entry-content > figure > figcaption::before {
		display: none;
	}
}


/* =====================================================================
   MOBILE BREADCRUMB SPACING
   The breadcrumb (.breadcrumbs) sits right under the page header on
   single posts and category pages. On mobile, the gap between the
   header (and any ad slot above it) is too tight. Add comfortable
   breathing room.
   ===================================================================== */
@media (max-width: 991px) {
	#breadcrumb,
	.breadcrumbs,
	.archive-title-wrapper,
	.entry-header-outer,
	.fullwidth-entry-title-wrapper {
		margin-top: var(--ti-sp-5) !important;
	}

	/* Specifically when there's an ad above the breadcrumb (common
	   layout on Techish), ensure the gap is comfortable. */
	.tie-row .tie-col-md-12 #breadcrumb,
	.entry-header-outer > #breadcrumb {
		padding-top: var(--ti-sp-4);
		padding-bottom: var(--ti-sp-2);
	}
}