/* =====================================================================
   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") --------------- */
/* SUPERSEDED in v1.1.0 by PHASE 12 (end of file). This note used to
   say "do NOT add our own ::before — pick block-head-1 in Theme
   Options" because Jannah's block-head-1..11 styles decorate
   .mag-box-title h3 via :before/:after pseudos we couldn't safely
   clobber at low specificity. Phase 12 now takes FULL ownership of the
   block head (the "//" pill): every rule is prefixed
   html body[class*="block-head"], which out-specifies all eleven
   parent variants and explicitly resets both pseudos. The admin
   blocks_style option no longer changes the block-head look. */


/* --- 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 -------------------------------------------------
   The anonymous-first comment system (v2.0.0) owns all comment styling in
   assets/css/comments.css and renders no email/url fields, so the legacy
   .comment-form input rules that used to live here were removed as dead
   code. Kept only a textarea fallback for any non-singular / legacy
   comment_form() render path Jannah may still emit. */
.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 textarea:focus {
	outline: none;
	border-color: var(--ti-violet-400);
	box-shadow: 0 0 0 3px var(--ti-violet-100);
}

.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.

   WRAP NOTE (v1.1.0): was text-wrap: balance — balance equalizes line
   lengths, so a 2-line headline stopped well short of the column edge
   ("MacBook Neo price in / Kenya drops to KES 90,000") and read as a
   width bug. Same family of problem as the v-earlier subtitle 720px
   cap. pretty fills each line to the column and still prevents
   single-word orphans on the last line. */
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: pretty;
	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 — OPT-IN ONLY (1.1.8). Applies solely to paragraphs where the
   editor flipped the Gutenberg paragraph-block "Drop cap" switch, which
   adds class `has-drop-cap` to that <p>. It is NOT applied automatically
   to the first paragraph — so a standfirst, sponsor line, or editor's note
   that happens to lead an article is never wrongly stylised; the editor
   places the cap on the true opening paragraph.

   This restyles WordPress core's default has-drop-cap (from wp-block-library)
   with the Tech-ish Playfair cap. Our selector (0,2,2) out-ranks core's
   `.has-drop-cap:not(:focus)::first-letter` (0,2,1); the rule is also fully
   self-contained, so the cap renders correctly even if core's CSS is absent.
   Core's own `.has-drop-cap::after{clear:both}` still contains the float. */
.entry-content p.has-drop-cap::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);
	text-transform: none;
}

/* =====================================================================
   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 */
	/* No measure cap — description flows to the full card width,
	   responsively (same family as the caption/subtitle fixes). */
	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;
	/* No measure cap — the caption flows to the full content column,
	   responsively, matching the title and subtitle (which had their
	   720px/1000px caps removed in v1.0.14/v1.0.27). A 64ch cap here
	   left the caption as a narrow strip beside the full-width image. */
	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);
	}
}


/* =====================================================================
   PHASE 12 (v1.1.0, revised v1.1.2) — "//" PILL SYSTEM, TWO TIERS
   Formalizes the mono pill as the single label vocabulary, in two
   deliberate weights so the vocabulary keeps its meaning:

   TIER 1 — GHOST pill (transparent fill, hairline capsule).
     Recurring STRUCTURAL labels: block / mag-box heads ("// LATEST",
     "// STARTUPS", the single-post "// RELATED ARTICLES"), page-builder
     section titles, and the share-bar "// SHARE" label.

     COLOR FLOW (v1.1.2): ghost pills color from var(--brand-color),
     NOT a fixed violet. Jannah scopes that variable per block — a
     block with a custom color in the Home Builder gets
     `#tie-{boxid} { --brand-color: <color> }` (inc/custom-styles.php
     jannah_block_custom_color), and single posts get their category
     color the same way. So every block head keeps the color styling
     the editor planned in Jannah, exactly like the "// LEAD" pill
     does. Fallback chain: var(--brand-color, #7B3F8C) — brand violet
     when no block/category color is set. Translucent steps (border,
     "// " prefix) derive via color-mix(); each has a violet literal
     fallback declared FIRST for the rare engine without color-mix.

   TIER 2 — FILLED pill (ink-900 fill, cream text — the original
     .about-author::before recipe). Reserved for EDITORIAL MARKERS:
     "// THE WRITER", "// LEAD", "// FOLLOW", "// PICTURED" (own
     phases) and, here, the homepage "// PINNED" head + per-card chips.

   SPECIFICITY ARCHITECTURE — read before editing.
   Jannah's admin "blocks style" option (Theme Options → Styling) puts
   block-head-1…11 on <body> (formatting.php tie_body_class, line 209 —
   unconditional, default 1) and decorates titles per style:
     - styles 4/5 paint a bg bar via .mag-box-title h3:before
     - styles 6/10/11 underline via .mag-box-title h3:after
     - styles 1/3 draw rules via .mag-box div.mag-box-title:before/:after
       (that container combo = specificity (0,3,1))
     - dark variants reach (0,3,0) (.dark-skin .block-head-N .the-global-title:after)
   Every rule below is prefixed `html body[class*="block-head"]` — the
   attribute selector always matches (body always carries block-head-N)
   and lifts us to (0,2,3)+; rules that must beat the (0,3,x) parent
   combos repeat `.mag-box` / `.dark-skin` to reach (0,3,3). The pill
   STRUCTURE is deterministic across all eleven admin styles; only the
   COLOR flows from Jannah's per-block/per-category settings.
   ===================================================================== */

/* --- A1. Block head container — neutralize every block-head-1..11
   decoration (bg bars, brand-color rules, underlines) and replace with
   one quiet hairline the pill sits on. Layout (flex, h3 left, options
   right) is parent-owned and untouched. */
html body[class*="block-head"] .mag-box-title,
html body[class*="block-head"] .mag-box div.mag-box-title {
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(26, 24, 23, 0.12);
	box-shadow: none;
	padding: 0 0 10px;
	margin-bottom: 16px;
}

/* Kill the parent's decorative pseudos on the container. The container
   is display:flex (parent base, style.css:2641) so no clearfix pseudo
   is being sacrificed here. `.mag-box` and `.dark-skin` variants are
   listed separately to out-rank the (0,3,x) parent combos. */
html body[class*="block-head"] .mag-box-title::before,
html body[class*="block-head"] .mag-box-title::after,
html body[class*="block-head"] .mag-box div.mag-box-title::before,
html body[class*="block-head"] .mag-box div.mag-box-title::after,
html body[class*="block-head"] .dark-skin .mag-box-title::before,
html body[class*="block-head"] .dark-skin .mag-box-title::after,
html body[class*="block-head"] .dark-skin div.the-global-title::before,
html body[class*="block-head"] .dark-skin div.the-global-title::after,
html.dark-skin body[class*="block-head"] .mag-box-title::before,
html.dark-skin body[class*="block-head"] .mag-box-title::after,
html.dark-skin body[class*="block-head"] div.the-global-title::before,
html.dark-skin body[class*="block-head"] div.the-global-title::after {
	content: none;
}

/* Dark-mode / dark-section hairline. */
html.dark-skin body[class*="block-head"] .mag-box-title,
html.dark-skin body[class*="block-head"] .mag-box div.mag-box-title,
html body[class*="block-head"] .dark-skin .mag-box-title,
html body[class*="block-head"] .dark-skin div.the-global-title,
html body[class*="block-head"] .box-dark-skin .mag-box-title,
html body[class*="block-head"] .dark-widgetized-area .mag-box-title {
	border-bottom-color: rgba(244, 236, 214, 0.16);
}

/* --- A2. Block head → TIER-1 GHOST pill (h3 inside .mag-box-title).
   Label + capsule take the block's own color via var(--brand-color);
   blocks without a custom color fall back to brand violet. */
html body[class*="block-head"] .mag-box-title h3 {
	display: inline-flex;
	align-items: center;
	margin: 0 20px 0 0;
	padding: 6px 14px;
	background: transparent;
	border: 1px solid rgba(123, 63, 140, 0.30);  /* fallback: violet-500 @ 30% */
	border-color: color-mix(in srgb, var(--brand-color, #7B3F8C) 32%, transparent);
	border-radius: 999px;
	box-shadow: none;
	color: #7B3F8C;                              /* fallback: ti-violet-500 */
	color: var(--brand-color, #7B3F8C);
	font-family: var(--ti-font-mono);
	font-weight: 600;
	font-size: clamp(11px, 0.2vw + 10px, 13px);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
	text-shadow: none;
}

/* "// " prefix. Parent styles 4/5 abuse h3:before as a full-width bg
   bar — every box-model property is explicitly reset here so the
   pseudo collapses back to inline text regardless of block style.
   Prefix = the label color at ~60% — one optical step lighter. */
html body[class*="block-head"] .mag-box-title h3::before,
html body[class*="block-head"] .mag-box div.mag-box-title h3::before {
	content: "// ";
	position: static;
	display: inline;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: #B189BD;                              /* fallback: ti-violet-300 */
	color: color-mix(in srgb, var(--brand-color, #7B3F8C) 60%, transparent);
	white-space: pre;
}

/* Styles 6/10/11 underline via h3:after — gone. */
html body[class*="block-head"] .mag-box-title h3::after,
html body[class*="block-head"] .mag-box div.mag-box-title h3::after {
	content: none;
}

/* Linked block titles (block has a URL) + the italic accent word. */
html body[class*="block-head"] .mag-box-title h3 a {
	color: inherit;
}
html body[class*="block-head"] .mag-box-title h3 a:hover {
	color: #41264F;                              /* fallback: ti-violet-700 */
	color: var(--dark-brand-color, #41264F);
}
html body[class*="block-head"] .mag-box-title h3 em {
	color: inherit;
}

/* Ghost pill — dark mode / dark blocks. The block's brand color is
   lifted toward cream via color-mix so even a dark custom color stays
   AA-readable on the dark surface (same technique as the v1.0.29
   caption folio). */
html.dark-skin body[class*="block-head"] .mag-box-title h3,
html body[class*="block-head"] .dark-skin .mag-box-title h3,
html body[class*="block-head"] .box-dark-skin .mag-box-title h3,
html body[class*="block-head"] .dark-widgetized-area .mag-box-title h3 {
	background: transparent;
	border-color: rgba(177, 137, 189, 0.40);     /* fallback: violet-300 @ 40% */
	border-color: color-mix(in srgb, color-mix(in srgb, var(--brand-color, #B189BD) 55%, #F4ECD6) 45%, transparent);
	color: #B189BD;                              /* fallback: ti-violet-300 */
	color: color-mix(in srgb, var(--brand-color, #B189BD) 55%, #F4ECD6);
	box-shadow: none;
}
html.dark-skin body[class*="block-head"] .mag-box-title h3::before,
html body[class*="block-head"] .dark-skin .mag-box-title h3::before,
html body[class*="block-head"] .box-dark-skin .mag-box-title h3::before,
html body[class*="block-head"] .dark-widgetized-area .mag-box-title h3::before {
	color: rgba(177, 137, 189, 0.65);
	color: color-mix(in srgb, color-mix(in srgb, var(--brand-color, #B189BD) 55%, #F4ECD6) 65%, transparent);
}
html.dark-skin body[class*="block-head"] .mag-box-title h3 a,
html body[class*="block-head"] .dark-skin .mag-box-title h3 a {
	color: inherit;
}
html.dark-skin body[class*="block-head"] .mag-box-title h3 a:hover,
html body[class*="block-head"] .dark-skin .mag-box-title h3 a:hover {
	color: #F4ECD6;                              /* ti-cream-100 — brighten on hover */
}

/* --- B. Page-builder section titles — TIER-1 GHOST (h2.section-title,
   all section-title-X admin variants + the .the-global-title default).
   Same brand-color flow as block heads. The .breaking-title is
   deliberately NOT a pill — it sits inline with the ticker marquee and
   pill chrome would break that layout (its colors stay fully governed
   by Jannah's per-block custom color CSS). */
html body[class*="block-head"] .section-title {
	display: inline-flex;
	align-items: center;
	margin: 0 0 16px;
	padding: 6px 14px;
	background: transparent;
	border: 1px solid rgba(123, 63, 140, 0.30);
	border-color: color-mix(in srgb, var(--brand-color, #7B3F8C) 32%, transparent);
	border-radius: 999px;
	box-shadow: none;
	color: #7B3F8C;
	color: var(--brand-color, #7B3F8C);
	font-family: var(--ti-font-mono);
	font-weight: 600;
	font-size: clamp(11px, 0.2vw + 10px, 13px);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
	text-shadow: none;
}

html body[class*="block-head"] .section-title::before,
html body[class*="block-head"] .dark-skin .section-title::before,
html.dark-skin body[class*="block-head"] .section-title::before {
	content: "// ";
	position: static;
	display: inline;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	color: #B189BD;
	color: color-mix(in srgb, var(--brand-color, #7B3F8C) 60%, transparent);
	white-space: pre;
}

html body[class*="block-head"] .section-title::after,
html body[class*="block-head"] .dark-skin .section-title::after,
html.dark-skin body[class*="block-head"] .section-title::after {
	content: none;
}

/* Inner span/link carry no chrome of their own. */
html body[class*="block-head"] .section-title .the-section-title {
	background: transparent;
	padding: 0;
	color: inherit;
}
html body[class*="block-head"] .section-title a {
	color: inherit;
}
html body[class*="block-head"] .section-title a:hover {
	color: #41264F;
	color: var(--dark-brand-color, #41264F);
}

/* Section title — dark variants (ghost, brand color lifted to cream). */
html.dark-skin body[class*="block-head"] .section-title,
html body[class*="block-head"] .dark-skin .section-title {
	background: transparent;
	border-color: rgba(177, 137, 189, 0.40);
	border-color: color-mix(in srgb, color-mix(in srgb, var(--brand-color, #B189BD) 55%, #F4ECD6) 45%, transparent);
	color: #B189BD;
	color: color-mix(in srgb, var(--brand-color, #B189BD) 55%, #F4ECD6);
	box-shadow: none;
}
html.dark-skin body[class*="block-head"] .section-title a:hover,
html body[class*="block-head"] .dark-skin .section-title a:hover {
	color: #F4ECD6;
}

/* --- C. Share bar label → "// SHARE" TIER-1 GHOST pill -------------- */
/* Jannah markup (templates/single-post/share.php): div.share-title with
   an icon span + "Share" text, floated left of the buttons (parent base
   single.css:969 — float:left, line-height 40px). Renders only when the
   admin enables "Share buttons title" for that position in Theme
   Options. The pill replaces the icon; uppercase transform turns the
   translated "Share" string into the pill label without touching the
   translation itself. On single posts var(--brand-color) is the
   category color, so "// SHARE" matches the post's "// LEAD" pill.
   Buttons rows run ~40px tall; 4px vertical margin centers the ~29px
   capsule on that line. */
html body .share-buttons .share-title {
	display: inline-flex;
	align-items: center;
	float: left;
	margin: 4px 12px 4px 0;
	padding: 6px 14px;
	background: transparent;
	border: 1px solid rgba(123, 63, 140, 0.30);
	border-color: color-mix(in srgb, var(--brand-color, #7B3F8C) 32%, transparent);
	border-radius: 999px;
	box-shadow: none;
	color: #7B3F8C;
	color: var(--brand-color, #7B3F8C);
	font-family: var(--ti-font-mono);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.4;
}

html body .share-buttons .share-title::before {
	content: "// ";
	color: #B189BD;
	color: color-mix(in srgb, var(--brand-color, #7B3F8C) 60%, transparent);
	white-space: pre;
}

html body .share-buttons .share-title .tie-icon-share {
	display: none;
}

html.dark-skin body .share-buttons .share-title {
	background: transparent;
	border-color: rgba(177, 137, 189, 0.40);
	border-color: color-mix(in srgb, color-mix(in srgb, var(--brand-color, #B189BD) 55%, #F4ECD6) 45%, transparent);
	color: #B189BD;
	color: color-mix(in srgb, var(--brand-color, #B189BD) 55%, #F4ECD6);
}
html.dark-skin body .share-buttons .share-title::before {
	color: rgba(177, 137, 189, 0.65);
	color: color-mix(in srgb, color-mix(in srgb, var(--brand-color, #B189BD) 55%, #F4ECD6) 65%, transparent);
}

/* --- D. Homepage PINNED section — TIER-2 FILLED + CARD GRID --------- */
/* Markup injected by inc/homepage-pinned.php: a normal Jannah builder
   section (custom_class techish-pinned-section) holding one
   classic-small block titled "Pinned". v1.1.2 upgrades the strip from
   Jannah's compact list rows to PROPER CARDS in a responsive grid —
   the strip must be unmissable on both desktop and mobile.

   Source markup per item (templates/loops/loop-default.php):
     li.post-item > a.post-thumb > img  +  div.post-details > meta/title
   Parent layout being overridden (style.css:5999-6051):
     .wide-post-box .posts-items li { display:flex!important }  (kept —
       we only rotate it to column)
     .post-thumb { flex:0 0 30%; width:50%; max-width:420px }   (full
       width instead)
     .post-details { padding:0 !important }                     (only
       !important here is forced by the parent's !important) */

/* Head pill — FILLED tier (editorial marker). Out-ranks the Tier-1
   ghost rule by repeating .techish-pinned-section ((0,3,3) > (0,2,3);
   dark (0,4,3) > (0,3,3)). */
html body[class*="block-head"] .techish-pinned-section .mag-box-title h3 {
	background: #1A1817;            /* ti-ink-900 */
	border: 0;
	padding: 7px 16px;
	color: #FBF7EC;                 /* ti-cream-50 */
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
html body[class*="block-head"] .techish-pinned-section .mag-box-title h3::before {
	color: #B189BD;
}
html.dark-skin body[class*="block-head"] .techish-pinned-section .mag-box-title h3 {
	background: #F4ECD6;            /* ti-cream-100 — inverted on dark */
	color: #1A1817;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
html.dark-skin body[class*="block-head"] .techish-pinned-section .mag-box-title h3::before {
	color: #7B3F8C;
}

/* Tinted band behind the whole strip — same visual vocabulary as the
   "// LEAD" deck (violet @ low alpha). Anchors the section to the hero
   above and makes it read as ONE deliberate object. */
html body .techish-pinned-section .section-item {
	background: rgba(123, 63, 140, 0.05);
	border-radius: var(--ti-radius-lg, 20px);
	padding: 16px 16px 2px;
}
html.dark-skin body .techish-pinned-section .section-item {
	background: rgba(177, 137, 189, 0.07);
}
.techish-pinned-section {
	margin-top: 0;
}

/* The block's own .container-wrapper card chrome is redundant inside
   the band — the cards below carry the chrome instead. */
html body .techish-pinned-section .container-wrapper {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}
html body .techish-pinned-section .mag-box {
	margin-bottom: 12px;
}

/* Card grid. auto-fit collapses to one column on phones with no media
   query; 2-4 columns on tablet/desktop depending on pin count. A lone
   pinned post stretches full width and reads as featured. */
html body .techish-pinned-section .posts-items {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
}

/* The card. Parent forces display:flex !important on the li — we keep
   the flex and rotate it to a column. Border shorthand also wipes the
   parent's row-separator border-bottom. */
html body .techish-pinned-section .posts-items li.post-item {
	flex-direction: column;
	width: auto;
	margin: 0;
	padding: 0;
	background: var(--ti-cream-50, #FBF7EC);
	border: 2px solid var(--ti-violet-300, #B189BD);
	border-radius: var(--ti-radius-md, 14px);
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(123, 63, 140, 0.10);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
html body .techish-pinned-section .posts-items li.post-item:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 28px rgba(123, 63, 140, 0.20);
}
@media (prefers-reduced-motion: reduce) {
	html body .techish-pinned-section .posts-items li.post-item,
	html body .techish-pinned-section .posts-items li.post-item:hover {
		transition: none;
		transform: none;
	}
}
html.dark-skin body .techish-pinned-section .posts-items li.post-item {
	background: rgba(244, 236, 214, 0.05);
	border-color: rgba(177, 137, 189, 0.45);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}

/* Full-bleed thumbnail on top of the card. Overrides the parent's
   side-thumb sizing (flex:0 0 30% / width:50% / max-width:420px) and
   its mobile variants — same specificity class count, more elements,
   later in cascade.

   height:auto is THE LOAD-BEARING LINE (v1.1.3 bug fix). Jannah's base
   sets `.post-thumb { height: 100% }` (style.css base block). Inside
   the column card that percentage resolved against the li, the anchor
   swallowed the full card height, .post-details was pushed below the
   grid track, and overflow:hidden clipped it — cards rendered
   image-only with no title/date on the live homepage. Root-caused via
   computed styles in a live-markup browser reproduction. */
html body .techish-pinned-section .posts-items li .post-thumb {
	flex: 0 0 auto;
	float: none;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	display: block;
}
html body .techish-pinned-section .posts-items li .post-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Category marker — top-right corner OVER the image (Jannah default
   anchors it bottom of the thumb). .post-thumb is position:relative
   from the parent base, so the pill tracks the image area exactly.
   The Phase-5 em-dash ::before is list-context chrome — dropped
   inside cards. Pill colors stay Jannah's per-category (.tie-cat-N). */
html body .techish-pinned-section .post-thumb .post-cat-wrap {
	top: 10px;
	right: 10px;
	bottom: auto;
	left: auto;
	margin: 0;
}
html body .techish-pinned-section .post-cat-wrap::before {
	content: none;
}

/* Card body. The !important matches the parent's
   `.wide-post-box .posts-items li .post-details { padding:0 !important }`. */
html body .techish-pinned-section .posts-items li .post-details {
	flex: 1 1 auto;
	padding: 12px 14px 14px !important;
}
html body .techish-pinned-section .posts-items li .post-title {
	font-weight: 700;
	font-size: clamp(16px, 0.3vw + 15px, 18px);
	line-height: 1.3;
	margin: 0;
}

/* Card title links: quiet at rest, underline only on hover — the card
   chrome already signals clickability. */
html body .techish-pinned-section .posts-items li .post-title a {
	text-decoration: none;
}
html body .techish-pinned-section .posts-items li .post-title a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

html body .techish-pinned-section .posts-items li .post-meta {
	margin-top: 8px;
	font-size: 11px;
}

/* Author + date tell the story; the right-aligned comments counter is
   noise at card size. */
html body .techish-pinned-section .posts-items li .post-meta .tie-alignright {
	display: none;
}

/* Per-card chip — the explicit per-article marker. In-flow at the top
   of the card body, so it works with AND without a thumbnail, with no
   absolute positioning to fight. */
.techish-pinned-section .post-item .post-details::before {
	content: "// PINNED";
	display: inline-block;
	margin: 0 0 6px;
	padding: 3px 10px;
	background: #1A1817;
	border-radius: 999px;
	color: #FBF7EC;
	font-family: var(--ti-font-mono);
	font-weight: 600;
	font-size: 9px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.5;
	white-space: nowrap;
}
html.dark-skin .techish-pinned-section .post-item .post-details::before {
	background: #F4ECD6;
	color: #1A1817;
}

/* Mobile: the strip becomes a real SWIPE carousel — flex row with
   scroll-snap, each card 80% wide so the next card peeks in from the
   right edge (the universal "swipe me" affordance). Scrollbar hidden
   on both engines; momentum scrolling on iOS. Grid (and its track
   math) only exists above this breakpoint. */
@media (max-width: 767px) {
	html body .techish-pinned-section .posts-items {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding-bottom: 6px;
		scrollbar-width: none;
	}
	html body .techish-pinned-section .posts-items::-webkit-scrollbar {
		display: none;
	}
	html body .techish-pinned-section .posts-items li.post-item {
		flex: 0 0 80%;
		max-width: 320px;
		scroll-snap-align: start;
	}
}

@media (max-width: 480px) {
	html body[class*="block-head"] .mag-box-title h3,
	html body[class*="block-head"] .section-title,
	html body .share-buttons .share-title {
		padding: 5px 11px;
	}
	html body[class*="block-head"] .techish-pinned-section .mag-box-title h3 {
		padding: 6px 13px;
	}
	html body .techish-pinned-section .section-item {
		padding: 12px 12px 2px;
	}
	html body .techish-pinned-section .posts-items {
		gap: 12px;
	}
	.techish-pinned-section .post-item .post-details::before {
		font-size: 8.5px;
		padding: 3px 8px;
	}
}


/* =====================================================================
   PHASE 13 — STORY HIGHLIGHTS aside + SOURCE / VIA attribution
   -------------------------------------------------------------------
   Story Highlights (#story-highlights) is rendered by the parent's
   tie_story_highlights() on TieLabs/before_post_content — it lives as
   the FIRST child of .entry-content, ahead of the_content(). We turn it
   into a floating editorial aside: on >=768px it floats left and body
   text wraps around it (no pushing-down); under 768px it becomes a
   full-width card with the article flowing beneath (the only legible
   option on a phone). .entry-content already carries Jannah's
   `clearfix`, so the float is contained and cannot bleed into the
   author bio / related section that follow in .post-components.

   Source / Via (.post-bottom-source / .post-bottom-via) render on
   TieLabs/after_post_content as .post-bottom-meta rows. We give the
   out-links clean rounded chips with an inline-SVG external-link arrow
   drawn via CSS mask (currentColor) — NOT the tiefonticon glyph, which
   misfired cross-engine on the chevron (see 1.0.7). No pills here.
   ===================================================================== */

/* --- Story Highlights: the card ----------------------------------- */
#story-highlights {
	box-sizing: border-box;
	max-width: 100%;
	background: var(--ti-cream-50);
	border: 1.5px solid var(--ti-violet-200);
	border-radius: var(--ti-radius-md);
	padding: var(--ti-sp-4);
	margin: 0 0 var(--ti-sp-5);
	box-shadow: var(--ti-shadow-2);
}

/* Float the card into the text column from tablet up; text wraps right.
   SPECIFICITY: `html body #id` (1,0,2) deliberately out-ranks Jannah's
   single.min.css, which ALSO floats #story-highlights at equal specificity
   (#story-highlights{float:left;width:48%;max-width:450px}). At equal
   specificity the winner is decided by load order — and LiteSpeed's
   CSS-combine can reorder our file relative to single.min.css, so the
   rendered width was non-deterministic. Boosting specificity makes OUR
   geometry authoritative regardless of load order. Values mirror the
   parent's design intent (keeps the approved on-screen look) but add a
   min so the card never collapses on the narrower sidebar layout. */
@media (min-width: 768px) {
	html body #story-highlights {
		float: left;
		clear: left;
		width: clamp(300px, 47%, 450px);
		margin: 4px 4% var(--ti-sp-4) 0;
	}
}

/* Below the float breakpoint, deterministically own the full-width stack
   too (don't rely on the parent's max-width:767px rule winning the race). */
@media (max-width: 767px) {
	html body #story-highlights {
		float: none;
		clear: both;
		width: auto;
		max-width: 100%;
		margin: 0 0 var(--ti-sp-5);
	}
}

/* Reset Jannah's widget-title chrome — we only want the pill. */
#story-highlights .widget-title {
	margin: 0 0 var(--ti-sp-3);
	padding: 0;
	background: none;
	border: 0;
}

/* "// STORY HIGHLIGHTS" filled pill (mono caps, inverts in dark mode). */
#story-highlights .the-subtitle {
	display: inline-block;
	font-family: var(--ti-font-mono);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--ti-cream-50);
	background: var(--ti-ink-900);
	padding: 5px 10px;
	border-radius: 7px;
}

#story-highlights .the-subtitle::before {
	content: "// ";
}

/* List — override .entry-content ul/li defaults (ID wins on specificity)
   so we get the editorial violet dot bullet, not browser/marker chrome. */
#story-highlights ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#story-highlights li {
	position: relative;
	margin: 0;
	padding: 0 0 var(--ti-sp-2) 18px;
	font-family: var(--ti-font-sans);
	font-size: 14px;
	line-height: 1.5;
	color: var(--ti-ink-800);
	/* A long word or pasted URL can never punch out of the narrow card. */
	overflow-wrap: break-word;
	word-break: break-word;
}

#story-highlights li:last-child {
	padding-bottom: 0;
}

#story-highlights li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--ti-violet-500);
}

/* NOTE: the drop-cap is opt-in (1.1.8) — it only renders on paragraphs the
   editor tags with the block "Drop cap" toggle (.has-drop-cap), so there is
   nothing to suppress here. When highlights are present the card is re-hooked
   (functions.php) to render after the above-content ad, so an opted-in first
   paragraph wraps to the card's right and the cap reads as the body start. */

/* Dark mode — translucent surface, lifted border, pill inverts. */
html.dark-skin #story-highlights {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(177, 137, 189, 0.4);
	box-shadow: none;
}

html.dark-skin #story-highlights li {
	color: var(--ti-cream-100);
	/* Jannah's parent separator (border-bottom: rgba(0,0,0,.1)) is
	   near-black — invisible on this dark card, so the bullets run
	   together. Restore a faint violet hairline. We only override the
	   COLOR; the parent's 1px solid stays, so light mode is untouched.
	   Specificity html.dark-skin #id li (1,1,2) > parent #id li (1,0,1). */
	border-bottom-color: rgba(177, 137, 189, 0.22);
}

html.dark-skin #story-highlights .the-subtitle {
	background: var(--ti-cream-100);
	color: var(--ti-ink-900);
}


/* --- Float guards: nothing inside the article may wedge beside or
   overlap a tall Story Highlights card on a short article. Source/Via,
   tags, and Jannah's in-article ad slots all start on their own line. */
.entry-content .post-bottom-meta,
.entry-content .stream-item-above-post-content,
.entry-content .stream-item-below-post-content {
	clear: both;
}


/* --- Source / Via attribution ------------------------------------- */

/* Drop the unreliable tiefonticon glyph; the link arrow carries the
   "opens externally" affordance instead. */
.post-bottom-source .post-bottom-meta-title [class^="tie-icon"],
.post-bottom-via .post-bottom-meta-title [class^="tie-icon"] {
	display: none;
}

.post-bottom-source .tagcloud,
.post-bottom-via .tagcloud {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Out-link chips — sentence case (publication names), rounded pill,
   hairline border, violet ink. Distinct from the uppercase tag chips. */
.post-bottom-source .tagcloud a,
.post-bottom-via .tagcloud a {
	display: inline-flex;
	align-items: center;
	font-family: var(--ti-font-sans);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	padding: 5px 12px;
	background: var(--ti-cream-50);
	color: var(--ti-violet-600);
	border: 1px solid var(--ti-ink-300);
	border-radius: var(--ti-radius-pill);
	text-decoration: none;
	transition: border-color var(--ti-dur) var(--ti-ease),
	            color var(--ti-dur) var(--ti-ease),
	            background-color var(--ti-dur) var(--ti-ease);
}

.post-bottom-source .tagcloud a:hover,
.post-bottom-via .tagcloud a:hover {
	background: var(--ti-violet-50);
	border-color: var(--ti-violet-400);
	color: var(--ti-violet-700);
}

/* External-link arrow via CSS mask — color follows currentColor, so it
   adapts to light/dark automatically. -webkit- prefix for Safari. */
.post-bottom-source .tagcloud a::after,
.post-bottom-via .tagcloud a::after {
	content: "";
	display: inline-block;
	width: 11px;
	height: 11px;
	margin-left: 6px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6'/%3E%3Cpath d='M11 13 21 3'/%3E%3Cpath d='M15 3h6v6'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-6'/%3E%3Cpath d='M11 13 21 3'/%3E%3Cpath d='M15 3h6v6'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: no-preference) {
	.post-bottom-source .tagcloud a:hover::after,
	.post-bottom-via .tagcloud a:hover::after {
		transform: translate(2px, -2px);
		transition: transform var(--ti-dur) var(--ti-ease);
	}
}

/* Dark mode — translucent violet chips. */
html.dark-skin .post-bottom-source .tagcloud a,
html.dark-skin .post-bottom-via .tagcloud a {
	background: rgba(177, 137, 189, 0.12);
	border-color: rgba(177, 137, 189, 0.32);
	color: var(--ti-violet-300);
}

html.dark-skin .post-bottom-source .tagcloud a:hover,
html.dark-skin .post-bottom-via .tagcloud a:hover {
	background: rgba(177, 137, 189, 0.22);
	border-color: rgba(177, 137, 189, 0.5);
	color: var(--ti-cream-100);
}


/* =====================================================================
   PHASE 14 — In-page jumps
   Two "drop me there" affordances wired up in functions.php
   (techish_child_linkify_comment_count + techish_child_nav_jumps):
     1. the single-post meta comment count → the comment section
     2. the lede "scroll down" chevron → the start of the article body
   ===================================================================== */

/* 1 — meta comment count is now an <a href="#comments">. Inherit the meta
   look; only add the affordance + a category-colour hover. */
.techish-meta-comments-link {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition: color var(--ti-dur) var(--ti-ease);
}
.techish-meta-comments-link:hover,
.techish-meta-comments-link:focus-visible {
	color: var(--brand-color);
}

/* Sticky-header offset so an in-page jump lands below the fixed nav, not
   underneath it. ~90px clears Jannah's sticky header; tune if the header
   height changes. */
#comments,
.entry-content {
	scroll-margin-top: 90px;
}

/* 2 — the decorative lede ::after chevron stays as the visual cue
   (pointer-events:none); this transparent button is laid over the
   bottom-right corner where it bobs, turning it into a real tap target. */
.entry-sub-title .techish-lede-jump {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	border-radius: 0 0 var(--ti-radius-sm) 0;
}
.entry-sub-title .techish-lede-jump:focus-visible {
	outline: 2px solid var(--brand-color);
	outline-offset: -3px;
}


/* =====================================================================
   PHASE 15 — Content & comment link decoration
   Internal (.ti-ilink) and external (.ti-xlink) links inside article bodies
   and comments, tagged by techish_child_decorate_links() in functions.php.
   SCOPED STRICTLY to .entry-content and .techish-cmt__body — nav, widgets,
   related cards, titles, buttons and the logo are never touched. Any link the
   tagger skips falls back to the existing baseline link styling above.
   ===================================================================== */

/* INTERNAL — clean brand gradient underline at rest; a soft brand marker
   swipes up on hover, on pointer devices only (touch never sticks). The
   solid underline is layer 1; the translucent marker is layer 2 (rgba, so
   no color-mix() fallback needed). box-decoration-break keeps wraps clean. */
.entry-content .ti-ilink,
.techish-cmt__body .ti-ilink {
	color: var(--ti-ink-900);
	font-weight: 500;
	text-decoration: none;
	overflow-wrap: anywhere;
	-webkit-box-decoration-break: clone;
	        box-decoration-break: clone;
	background-image:
		linear-gradient(90deg, var(--ti-violet-500), var(--ti-blue-400)),
		linear-gradient(90deg, rgba(123, 63, 140, 0.20), rgba(42, 60, 138, 0.20));
	background-repeat: no-repeat, no-repeat;
	background-position: 0 100%, 0 100%;
	background-size: 100% 2px, 100% 0%;
}
@media (hover: hover) {
	.entry-content .ti-ilink,
	.techish-cmt__body .ti-ilink {
		transition: background-size 0.2s var(--ti-ease, ease);
	}
	.entry-content .ti-ilink:hover,
	.techish-cmt__body .ti-ilink:hover {
		background-size: 100% 2px, 100% 0.82em;
	}
}
html.dark-skin .entry-content .ti-ilink,
html.dark-skin .techish-cmt__body .ti-ilink {
	color: var(--ti-cream-100);
	background-image:
		linear-gradient(90deg, var(--ti-violet-300), var(--ti-blue-200)),
		linear-gradient(90deg, rgba(177, 137, 189, 0.24), rgba(140, 156, 211, 0.24));
}

/* EXTERNAL — neutral but clearly visible: a touch of weight + a 2px
   underline in a mid-tone ink, with a small outbound ↗ mark. Stays
   neutral (no brand colour) so it reads as a link without competing
   with the colourful internal links. */
.entry-content .ti-xlink,
.techish-cmt__body .ti-xlink {
	color: var(--ti-ink-900);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	text-decoration-color: var(--ti-ink-500);
	overflow-wrap: anywhere;
}
.entry-content .ti-xlink:hover,
.techish-cmt__body .ti-xlink:hover {
	text-decoration-color: var(--ti-ink-700);
}
.entry-content .ti-xlink::after,
.techish-cmt__body .ti-xlink::after {
	content: "\2197";
	font-size: 0.78em;
	margin-left: 1px;
	color: var(--ti-ink-600);
	vertical-align: 1px;
}
html.dark-skin .entry-content .ti-xlink,
html.dark-skin .techish-cmt__body .ti-xlink {
	color: var(--ti-cream-100);
	text-decoration-color: var(--ti-ink-400);
}
html.dark-skin .entry-content .ti-xlink::after,
html.dark-skin .techish-cmt__body .ti-xlink::after {
	color: var(--ti-ink-400);
}


/* ============================================================
   CONTACT PAGE  —  "Contact Us" template (template-contact.php)
   ------------------------------------------------------------
   Split editorial layout: an editorial aside (left) beside a
   white form card (right) that wraps the page's Jetpack form.

   SCOPING: every form rule below is prefixed with
   .techish-contact, so a Jetpack form dropped into any article,
   page or widget elsewhere keeps Jetpack's default styling —
   only this template is reskinned.

   DARK MODE: the section paints its own cream surface (--ti-bg,
   which stays cream in dark-skin since the brand tokens are
   fixed), so the dark-ink aside text is always readable whether
   the visitor is in light or dark mode.
   ============================================================ */

.techish-contact {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	max-width: 1080px;
	margin: clamp(1.25rem, 5vw, 3.5rem) auto;
	padding: clamp(1.6rem, 4vw, 3.25rem);
	background: var(--ti-bg);
	border: 1px solid var(--ti-ink-200);
	border-radius: var(--ti-radius-lg);
	box-shadow: 0 30px 80px -50px rgba(26, 24, 23, 0.45);
}

/* --- Aside (editorial column) ------------------------------ */
.techish-contact__aside {
	align-self: center;
}
.techish-contact__kicker {
	font-family: var(--ti-font-mono);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ti-blue-400);
	margin: 0 0 0.75rem;
}
.techish-contact__title {
	font-family: var(--ti-font-sans);
	font-weight: 800;
	font-size: clamp(2rem, 5vw, 3.1rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--ti-ink-900);
	margin: 0 0 0.85rem;
}
.techish-contact__standfirst {
	font-family: var(--ti-font-italic);
	font-style: italic;
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	line-height: 1.5;
	color: var(--ti-ink-700);
	max-width: 32ch;
	margin: 0 0 1.6rem;
}

/* Reasons to reach out — leading gradient marker, no icon dep */
.techish-contact__reasons {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	gap: 0.6rem;
}
.techish-contact__reasons li {
	position: relative;
	padding-left: 1.4rem;
	font-size: 0.98rem;
	color: var(--ti-ink-800);
}
.techish-contact__reasons li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.75rem;
	height: 0.16rem;
	border-radius: 2px;
	background: var(--ti-gradient);
}

/* Response-time reassurance pill */
.techish-contact__promise {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: var(--ti-font-mono);
	font-size: 0.82rem;
	color: var(--ti-success);
	background: rgba(63, 138, 91, 0.10);
	border-radius: var(--ti-radius-pill);
	padding: 0.45rem 0.9rem;
	margin: 0 0 1.8rem;
}
.techish-contact__promise-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--ti-success);
	flex: 0 0 auto;
}

/* Find us — social icons pulled from the shared registry */
.techish-contact__find-label {
	font-family: var(--ti-font-mono);
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ti-ink-500);
	margin: 0 0 0.6rem;
}
.techish-contact__socials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}
.techish-contact__social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--ti-radius-sm);
	background: var(--ti-paper);
	border: 1px solid var(--ti-ink-300);
	/* Brand color AT REST (matches the Socials widget) so each icon is
	   visible and colorful immediately — not muted until hover. */
	color: var(--platform-color, var(--ti-accent));
	transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.techish-contact__social svg {
	width: 1.15rem;
	height: 1.15rem;
	display: block;
}
.techish-contact__social:hover,
.techish-contact__social:focus-visible {
	border-color: var(--platform-color, var(--ti-accent));
	transform: translateY(-2px);
	box-shadow: 0 6px 16px -8px rgba(26, 24, 23, 0.35);
	outline: none;
}

/* --- Panel (white form card) ------------------------------- */
.techish-contact__panel {
	background: var(--ti-paper);
	border: 1px solid var(--ti-ink-200);
	border-radius: var(--ti-radius-md);
	padding: clamp(1.4rem, 3vw, 2.4rem);
	box-shadow: 0 18px 50px -28px rgba(26, 24, 23, 0.40);
}

/* --- Jetpack form fields — SCOPED to the contact page ------ *
 * Covers both the modern block markup (.jetpack-field*) and the
 * legacy Grunion markup (.grunion-field*), so it holds across
 * Jetpack versions.                                            */
.techish-contact__form .grunion-field-label,
.techish-contact__form .jetpack-field-label,
.techish-contact__form label {
	display: block;
	font-family: var(--ti-font-sans);
	font-weight: 600;
	font-size: 0.82rem;
	color: var(--ti-ink-700);
	margin-bottom: 0.35rem;
}
.techish-contact__form input[type="text"],
.techish-contact__form input[type="email"],
.techish-contact__form input[type="url"],
.techish-contact__form input[type="tel"],
.techish-contact__form input[type="number"],
.techish-contact__form input[type="date"],
.techish-contact__form select,
.techish-contact__form textarea,
.techish-contact__form .jetpack-field__input {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--ti-font-sans);
	font-size: 1rem;
	color: var(--ti-ink-900);
	background: var(--ti-cream-50);
	border: 1px solid var(--ti-ink-300);
	border-radius: var(--ti-radius-sm);
	padding: 0.8rem 0.95rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.techish-contact__form textarea {
	min-height: 8.5rem;
	resize: vertical;
}
.techish-contact__form input:focus,
.techish-contact__form select:focus,
.techish-contact__form textarea:focus,
.techish-contact__form .jetpack-field__input:focus {
	outline: none;
	background: var(--ti-paper);
	border-color: var(--ti-accent);
	box-shadow: 0 0 0 3px var(--ti-violet-100);
}
.techish-contact__form input::placeholder,
.techish-contact__form textarea::placeholder {
	color: var(--ti-ink-500);
}
.techish-contact__form .jetpack-field,
.techish-contact__form .grunion-field-wrap {
	margin-bottom: 1rem;
}

/* Submit button — full-width brand gradient, animated on hover */
.techish-contact__form .wp-block-button__link,
.techish-contact__form button[type="submit"],
.techish-contact__form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	font-family: var(--ti-font-sans);
	font-weight: 700;
	font-size: 1rem;
	color: #fff;
	background-color: var(--ti-accent);
	background-image: var(--ti-gradient);
	background-size: 200% 100%;
	background-position: 0 0;
	border: 0;
	border-radius: var(--ti-radius-sm);
	padding: 0.9rem 1.2rem;
	cursor: pointer;
	transition: background-position 0.45s ease, transform 0.12s ease, box-shadow 0.2s ease;
	box-shadow: 0 12px 30px -14px rgba(123, 63, 140, 0.7);
}
.techish-contact__form .wp-block-button__link:hover,
.techish-contact__form button[type="submit"]:hover,
.techish-contact__form input[type="submit"]:hover {
	background-position: 100% 0;
	transform: translateY(-1px);
	color: #fff;
}
.techish-contact__form .wp-block-button__link:active,
.techish-contact__form button[type="submit"]:active,
.techish-contact__form input[type="submit"]:active {
	transform: translateY(0);
}

/* Jetpack's post-submit "thank you" message */
.techish-contact__form .contact-form-submission {
	background: var(--ti-cream-50);
	border: 1px solid var(--ti-ink-200);
	border-radius: var(--ti-radius-md);
	padding: 1.2rem 1.4rem;
}

/* --- Responsive: stack on narrow screens ------------------- */
@media (max-width: 880px) {
	.techish-contact {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}
}

/* --- Dark mode --------------------------------------------- *
 * Mirrors the theme's html.dark-skin pattern: the section drops
 * its cream surface for a subtle violet-tinted dark panel, text
 * swaps to cream/warm-grey, the form card + inputs darken, and
 * the brand-coloured social icons keep their colour — except the
 * pure-black brand (X), lifted to cream so it doesn't vanish
 * (same trick the Socials widget uses).                         */
html.dark-skin .techish-contact {
	background: rgba(123, 63, 140, 0.08);
	border-color: rgba(177, 137, 189, 0.22);
	box-shadow: 0 30px 80px -50px rgba(0, 0, 0, 0.6);
}
html.dark-skin .techish-contact__kicker {
	color: var(--ti-blue-200);
}
html.dark-skin .techish-contact__title {
	color: var(--ti-cream-100);
}
html.dark-skin .techish-contact__standfirst {
	color: var(--ti-ink-300);
}
html.dark-skin .techish-contact__reasons li {
	color: var(--ti-cream-100);
}
html.dark-skin .techish-contact__find-label {
	color: var(--ti-ink-400);
}

/* Form card + fields on dark */
html.dark-skin .techish-contact__panel {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(177, 137, 189, 0.20);
	box-shadow: 0 18px 50px -28px rgba(0, 0, 0, 0.55);
}
html.dark-skin .techish-contact__form .grunion-field-label,
html.dark-skin .techish-contact__form .jetpack-field-label,
html.dark-skin .techish-contact__form label {
	color: var(--ti-ink-300);
}
html.dark-skin .techish-contact__form input[type="text"],
html.dark-skin .techish-contact__form input[type="email"],
html.dark-skin .techish-contact__form input[type="url"],
html.dark-skin .techish-contact__form input[type="tel"],
html.dark-skin .techish-contact__form input[type="number"],
html.dark-skin .techish-contact__form input[type="date"],
html.dark-skin .techish-contact__form select,
html.dark-skin .techish-contact__form textarea,
html.dark-skin .techish-contact__form .jetpack-field__input {
	background: rgba(0, 0, 0, 0.25);
	border-color: rgba(177, 137, 189, 0.22);
	color: var(--ti-cream-100);
}
html.dark-skin .techish-contact__form input::placeholder,
html.dark-skin .techish-contact__form textarea::placeholder {
	color: var(--ti-ink-400);
}
html.dark-skin .techish-contact__form input:focus,
html.dark-skin .techish-contact__form select:focus,
html.dark-skin .techish-contact__form textarea:focus,
html.dark-skin .techish-contact__form .jetpack-field__input:focus {
	background: rgba(0, 0, 0, 0.35);
	border-color: var(--ti-violet-300);
	box-shadow: 0 0 0 3px rgba(177, 137, 189, 0.25);
}
html.dark-skin .techish-contact__form .contact-form-submission {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(177, 137, 189, 0.20);
}

/* Social icon chips on dark */
html.dark-skin .techish-contact__social {
	background: rgba(255, 255, 255, 0.04);
	border-color: rgba(177, 137, 189, 0.20);
}
/* Pure-black brand (X) would vanish on a dark chip — lift to cream */
html.dark-skin .techish-contact__social[style*="#000000"] {
	color: var(--ti-cream-100);
}


/* ==========================================================================
   PHASE 16 (v2.5.0) — THE DESK  (/desk/ hub page, template-desk.php)

   Automation-first curated hub, plan v4. Everything here is scoped under
   .techish-desk, so it is inert on every other view. Design sources:
   the v4 mockup + the house component vocabulary (Phase 12 "//" pills,
   the pinned-card recipe, the pinned mobile swipe carousel).

   CONTRAST NOTES (deliberate deviations from the prototype):
   - deks / editor notes use ink-600 (#6B6660), not #948E84 (2.76:1 fail)
   - rank numerals use violet-400 (#9A6FAA ≥3:1 large-text), not violet-300
   - Radar kind colors are the light tints (violet-200 / blue-200 /
     coral-300 / mint #7FBF8F) — all ≥4.5:1 on the violet-700 panel
   ========================================================================== */

/* ---- Masthead: stable H1 + standfirst ---------------------------------- */
body .techish-desk {
	--desk-gap: 26px;
	padding-top: var(--ti-sp-2);
}
html body .techish-desk__title {
	font-family: var(--ti-font-display);
	font-size: clamp(26px, 3.5vw, 34px);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.05;
	color: var(--ti-ink-900);
	margin: 0 0 var(--ti-sp-2);
	text-wrap: balance;
}
body .techish-desk__standfirst {
	font-family: var(--ti-font-italic);
	font-style: italic;
	font-size: 17px;
	line-height: 1.45;
	color: var(--ti-ink-600); /* contrast fix vs prototype ink-500 */
	max-width: 62ch;
	margin: 0;
	text-wrap: pretty;
}
body .techish-desk__masthead {
	border-bottom: 1px solid var(--ti-rule);
	padding-bottom: var(--ti-sp-4);
	margin-bottom: var(--ti-sp-5);
}

/* ---- Section eyebrow: mono label + hairline ---------------------------- */
body .techish-desk__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 var(--ti-sp-4);
}
body .techish-desk__eyebrow span {
	font-family: var(--ti-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--ti-violet-500);
	white-space: nowrap;
}
body .techish-desk__eyebrow::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--ti-rule);
}

/* ---- The Lead ----------------------------------------------------------- */
body .techish-desk__lead {
	display: grid;
	grid-template-columns: 1.55fr 1fr;
	gap: 34px;
	align-items: start;
	margin-bottom: var(--ti-sp-6);
}
body .techish-desk__kicker {
	margin: 0 0 var(--ti-sp-2);
}
html body .techish-desk__kicker a {
	font-family: var(--ti-font-mono);
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ti-violet-500);
	text-decoration: none;
}
html body .techish-desk__lead-title {
	font-family: var(--ti-font-display);
	font-size: clamp(28px, 4vw, 44px);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0 0 var(--ti-sp-3);
	text-wrap: balance;
}
html body .techish-desk__lead-title a {
	color: var(--ti-ink-900);
	text-decoration: none;
	transition: color var(--ti-dur) var(--ti-ease);
}
html body .techish-desk__lead-title a:hover {
	color: var(--ti-violet-500);
}
body .techish-desk__lead-dek {
	font-family: var(--ti-font-italic);
	font-style: italic;
	font-size: 18px;
	line-height: 1.4;
	color: var(--ti-ink-600); /* contrast fix */
	margin: 0 0 var(--ti-sp-3);
	text-wrap: pretty;
}
body .techish-desk__meta {
	font-family: var(--ti-font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ti-ink-500);
	margin: 0;
}
body .techish-desk__meta b {
	color: var(--ti-blue-400);
	font-weight: 600;
}
body .techish-desk__lead-media {
	display: block;
	position: relative;
	border-radius: var(--ti-radius-md);
	overflow: hidden;
}
body .techish-desk__lead-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--ti-radius-md);
}
/* (No category chip on the lead image — the category appears exactly
   once, as the violet kicker above the headline. Changed in 2.5.1.) */

/* ---- Bento rows --------------------------------------------------------- */
body .techish-desk__row1 {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: var(--desk-gap);
	margin-bottom: calc(var(--desk-gap) + 8px); /* room for the next row's tab pills */
	align-items: start;
}
body .techish-desk__row2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--desk-gap);
	margin-bottom: var(--ti-sp-6);
	align-items: start;
}
body .techish-desk__row1--solo,
body .techish-desk__row2--solo {
	grid-template-columns: 1fr;
}

/* ---- Card chrome: the house recipe (see Phase 7 / Phase 12) ------------- */
body .techish-desk__card {
	background: var(--ti-cream-50);
	border: 2px solid var(--ti-violet-300);
	border-radius: var(--ti-radius-lg);
	padding: var(--ti-sp-5) var(--ti-sp-4) var(--ti-sp-3);
	position: relative;
	box-shadow: 0 4px 16px rgba(123, 63, 140, 0.10);
}
body .techish-desk__tab {
	position: absolute;
	top: -14px;
	left: var(--ti-sp-4);
	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;
}
body .techish-desk__cardtag {
	position: absolute;
	top: var(--ti-sp-3);
	right: var(--ti-sp-4);
	font-family: var(--ti-font-mono);
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ti-ink-500);
}

/* Shared row reset — Jannah's global list styles must not leak in. */
body .techish-desk__reads,
body .techish-desk__picks,
body .techish-desk__sections,
body .techish-desk__radar-list,
body .techish-desk__shelf-grid {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- Top Reads ---------------------------------------------------------- */
body .techish-desk__read {
	display: grid;
	grid-template-columns: 30px 1fr;
	gap: 12px;
	align-items: baseline;
	padding: 11px 8px;
	margin: 0 -8px;
	border-radius: var(--ti-radius-sm);
	border-bottom: 1px solid var(--ti-cream-200);
	transition: background var(--ti-dur-fast) var(--ti-ease);
}
body .techish-desk__read:last-child {
	border-bottom: none;
}
body .techish-desk__rank {
	font-family: var(--ti-font-italic);
	font-style: italic;
	font-weight: 700;
	font-size: 24px;
	line-height: 1;
	color: var(--ti-violet-400); /* contrast fix vs prototype violet-300 */
}
body .techish-desk__read-body {
	display: block;
	min-width: 0;
}
html body .techish-desk__read-title {
	display: block;
	font-family: var(--ti-font-sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -0.01em;
	color: var(--ti-ink-900);
	text-decoration: none;
}
html body .techish-desk__read-title:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
body .techish-desk__sub {
	display: block;
	font-family: var(--ti-font-mono);
	font-size: 9px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--ti-ink-500);
	margin-top: 3px;
}

/* ---- Desk Picks (2.5.2: featured-image thumbs so the card carries the
   same visual weight as Top Reads beside it) ------------------------------- */
body .techish-desk__pick {
	padding: 11px 8px;
	margin: 0 -8px;
	border-radius: var(--ti-radius-sm);
	border-bottom: 1px solid var(--ti-cream-200);
	transition: background var(--ti-dur-fast) var(--ti-ease);
}
body .techish-desk__pick--media {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 12px;
	align-items: start;
}
body .techish-desk__pick-thumb {
	display: block;
	border-radius: var(--ti-radius-sm);
	overflow: hidden;
}
body .techish-desk__pick-thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--ti-radius-sm);
}
body .techish-desk__pick-body {
	display: block;
	min-width: 0;
}
body .techish-desk__pick:last-child {
	border-bottom: none;
}
body .techish-desk__pick-kicker {
	display: block;
	font-family: var(--ti-font-mono);
	font-size: 9px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ti-violet-500);
}
html body .techish-desk__pick-title {
	display: block;
	font-family: var(--ti-font-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ti-ink-900);
	text-decoration: none;
	margin: 3px 0;
}
html body .techish-desk__pick-title:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
body .techish-desk__pick-note {
	display: block;
	font-family: var(--ti-font-italic);
	font-style: italic;
	font-size: 13px;
	line-height: 1.4;
	color: var(--ti-ink-600); /* contrast fix */
}
body .techish-desk__pick-by {
	display: block;
	font-family: var(--ti-font-mono);
	font-size: 9px;
	letter-spacing: 0.1em;
	color: var(--ti-blue-400);
	margin-top: 3px;
}

/* ---- On the Radar (the violet panel — identical on both skins) ---------- */
body .techish-desk__radar {
	background: var(--ti-violet-700);
	border: 2px solid var(--ti-violet-700); /* height-aligns with sibling card borders */
	border-radius: var(--ti-radius-lg);
	padding: var(--ti-sp-5) var(--ti-sp-4) var(--ti-sp-3);
	position: relative;
	color: var(--ti-cream-100);
	box-shadow: 0 4px 16px rgba(123, 63, 140, 0.10);
}
body .techish-desk__tab--radar {
	color: var(--ti-violet-700);
	background: var(--ti-cream-100);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
body .techish-desk__radar-item {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 14px;
	padding: 10px 0;
	border-bottom: 1px solid rgba(244, 236, 214, 0.12);
}
body .techish-desk__radar-item:last-child {
	border-bottom: none;
}
/* Kind → accent color. Light tints only: every one ≥4.5:1 on violet-700. */
body .techish-desk__radar-item--launch  { --kc: var(--ti-violet-200); }
body .techish-desk__radar-item--review  { --kc: var(--ti-blue-200); }
body .techish-desk__radar-item--event   { --kc: var(--ti-coral-300); }
body .techish-desk__radar-item--results { --kc: #7FBF8F; }
body .techish-desk__radar-item--wire    { --kc: var(--ti-cream-300); }
body .techish-desk__radar-date {
	font-family: var(--ti-font-mono);
	font-size: 14px;
	font-weight: 600;
	color: var(--ti-cream-100);
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}
body .techish-desk__radar-body {
	display: block;
	border-left: 2px solid var(--kc, var(--ti-violet-200));
	padding-left: 12px;
	min-width: 0;
}
body .techish-desk__radar-kind {
	display: block;
	font-family: var(--ti-font-mono);
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kc, var(--ti-violet-200));
}
html body .techish-desk__radar-title {
	display: block;
	font-family: var(--ti-font-sans);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ti-cream-100);
	text-decoration: none;
	margin: 2px 0;
}
html body a.techish-desk__radar-title:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}
body .techish-desk__radar-note {
	display: block;
	font-size: 12px;
	line-height: 1.4;
	color: rgba(244, 236, 214, 0.65);
}

/* ---- The Sections: big category pill + latest story per row (2.5.1) ----- */
body .techish-desk__section {
	display: grid;
	grid-template-columns: 118px 1fr;
	gap: 14px;
	align-items: center;
	padding: 9px 8px;
	margin: 0 -8px;
	border-radius: var(--ti-radius-sm);
	border-bottom: 1px solid var(--ti-cream-200);
	transition: background var(--ti-dur-fast) var(--ti-ease);
}
body .techish-desk__section:last-child {
	border-bottom: none;
}
/* The pill IS the category link — big, tappable, and it pops. */
html body .techish-desk__section-pill {
	display: block;
	text-align: center;
	font-family: var(--ti-font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--ti-violet-500);
	background: var(--ti-violet-50);
	border: 1.5px solid var(--ti-violet-300);
	border-radius: 999px;
	padding: 9px 10px;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: background var(--ti-dur-fast) var(--ti-ease), color var(--ti-dur-fast) var(--ti-ease), border-color var(--ti-dur-fast) var(--ti-ease);
}
html body .techish-desk__section-pill:hover,
html body .techish-desk__section-pill:focus-visible {
	background: var(--ti-violet-500);
	border-color: var(--ti-violet-500);
	color: var(--ti-cream-50);
	text-decoration: none;
}
html body .techish-desk__section-title {
	display: block;
	min-width: 0;
	font-family: var(--ti-font-sans);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ti-ink-900);
	text-decoration: none;
}
html body .techish-desk__section-title:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- The Essentials shelf (pinned-strip vocabulary) --------------------- */
body .techish-desk__shelf {
	background: rgba(123, 63, 140, 0.05);
	border-radius: var(--ti-radius-lg);
	padding: var(--ti-sp-4) var(--ti-sp-4) var(--ti-sp-1);
	margin-bottom: var(--ti-sp-6);
}
body .techish-desk__shelf-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	margin-bottom: var(--ti-sp-3);
}
body .techish-desk__ess {
	background: var(--ti-cream-50);
	border: 2px solid var(--ti-violet-300);
	border-radius: var(--ti-radius-md);
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(123, 63, 140, 0.10);
	transition: transform 0.18s ease, box-shadow 0.18s ease;
}
html body .techish-desk__ess-link {
	display: block;
	text-decoration: none;
	color: inherit;
}
body .techish-desk__ess-media {
	display: block;
}
body .techish-desk__ess-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
body .techish-desk__ess-body {
	display: block;
	padding: 10px 12px 12px;
}
body .techish-desk__ess-title {
	display: block;
	font-family: var(--ti-font-sans);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ti-ink-900);
}
html body .techish-desk__ess-link:hover .techish-desk__ess-title {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Follow strip ------------------------------------------------------- */
body .techish-desk__follow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-bottom: var(--ti-sp-5);
}
body .techish-desk__follow-label {
	font-family: var(--ti-font-mono);
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ti-ink-500);
	margin-right: 6px;
}
html body .techish-desk__fpill {
	font-family: var(--ti-font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--ti-ink-700);
	background: var(--ti-cream-50);
	border: 1px solid var(--ti-rule);
	border-radius: 999px;
	padding: 6px 14px;
	text-decoration: none;
	transition: color var(--ti-dur-fast) var(--ti-ease), border-color var(--ti-dur-fast) var(--ti-ease);
}
html body .techish-desk__fpill:hover {
	color: var(--ti-violet-500);
	border-color: var(--ti-violet-300);
	text-decoration: none;
}

/* ---- Content slots (ads / editor blocks between the rails) -------------- */
body .techish-desk__slot {
	margin: 0 0 var(--ti-sp-6);
	text-align: center; /* ad units center; iframes/ins are block-level */
	overflow-x: hidden; /* a too-wide ad unit must never break the page */
}
body .techish-desk__slot > * {
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
}

/* ---- Hover: color-only on rows, lift on shelf cards (house rules) ------- */
@media (hover: hover) {
	body .techish-desk__read:hover,
	body .techish-desk__pick:hover,
	body .techish-desk__section:hover {
		background: var(--ti-cream-100);
	}
	body .techish-desk__ess:hover {
		transform: translateY(-3px);
		box-shadow: 0 10px 28px rgba(123, 63, 140, 0.20);
	}
}
@media (prefers-reduced-motion: reduce) {
	body .techish-desk__ess,
	body .techish-desk__ess:hover {
		transform: none;
		transition: none;
	}
}

/* ---- Responsive: house breakpoints (991 / 600 / 767 carousel) ----------- */
@media (max-width: 991px) {
	/* Jannah's full-width column nets to ZERO horizontal padding on
	   fluid viewports (container +15 / row −15 / col 0) — the same
	   reason template-contact carries its own padding. Give the Desk
	   its breathing room below the container's max-width range. */
	body .techish-desk {
		padding-left: 16px;
		padding-right: 16px;
	}
	body .techish-desk__lead {
		grid-template-columns: 1.5fr 1fr;
		gap: 26px;
	}
	body .techish-desk__row1,
	body .techish-desk__row2 {
		grid-template-columns: 1fr;
	}
	body .techish-desk__row1 {
		gap: 34px; /* stacked cards need room for the lower card's tab pill */
	}
	body .techish-desk__row2 {
		gap: 34px;
	}
}
@media (max-width: 767px) {
	/* Essentials → the pinned-strip swipe carousel */
	body .techish-desk__shelf-grid {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		gap: 12px;
	}
	body .techish-desk__shelf-grid::-webkit-scrollbar {
		display: none;
	}
	body .techish-desk__ess {
		flex: 0 0 78%;
		scroll-snap-align: start;
	}
}
@media (max-width: 600px) {
	body .techish-desk__lead {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	html body .techish-desk__lead-title {
		font-size: 28px;
	}
	body .techish-desk__lead-dek {
		font-size: 16px;
	}
	body .techish-desk__radar-item {
		grid-template-columns: 46px 1fr;
		gap: 12px;
	}
}

/* ---- Dark mode (.dark-skin) — full parity, house recipe ------------------ */
html.dark-skin body .techish-desk__title {
	color: var(--ti-cream-100);
}
html.dark-skin body .techish-desk__standfirst {
	color: var(--ti-ink-400);
}
html.dark-skin body .techish-desk__masthead {
	border-bottom-color: rgba(244, 236, 214, 0.18);
}
html.dark-skin body .techish-desk__eyebrow span {
	color: var(--ti-violet-300);
}
html.dark-skin body .techish-desk__eyebrow::after {
	background: rgba(244, 236, 214, 0.18);
}
html.dark-skin body .techish-desk__kicker a {
	color: var(--ti-violet-300);
}
html.dark-skin body .techish-desk__lead-title a {
	color: var(--ti-cream-100);
}
html.dark-skin body .techish-desk__lead-title a:hover {
	color: var(--ti-violet-300);
}
html.dark-skin body .techish-desk__lead-dek,
html.dark-skin body .techish-desk__pick-note {
	color: var(--ti-ink-400);
}
html.dark-skin body .techish-desk__meta,
html.dark-skin body .techish-desk__sub,
html.dark-skin body .techish-desk__cardtag,
html.dark-skin body .techish-desk__follow-label {
	color: var(--ti-ink-400);
}
html.dark-skin body .techish-desk__meta b,
html.dark-skin body .techish-desk__pick-by {
	color: var(--ti-blue-200);
}
html.dark-skin body .techish-desk__card,
html.dark-skin body .techish-desk__ess {
	background: rgba(244, 236, 214, 0.05);
	border-color: rgba(177, 137, 189, 0.45);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
/* Tab pills invert on dark (house pattern, see the pinned strip). */
html.dark-skin body .techish-desk__tab {
	color: var(--ti-ink-900);
	background: var(--ti-cream-100);
}
html.dark-skin body .techish-desk__tab--radar {
	color: var(--ti-violet-700);
	background: var(--ti-cream-100);
}
html.dark-skin body .techish-desk__read,
html.dark-skin body .techish-desk__pick,
html.dark-skin body .techish-desk__section {
	border-bottom-color: rgba(244, 236, 214, 0.10);
}
html.dark-skin body .techish-desk__rank {
	color: var(--ti-violet-300);
}
html.dark-skin body .techish-desk__read-title,
html.dark-skin body .techish-desk__pick-title,
html.dark-skin body .techish-desk__section-title,
html.dark-skin body .techish-desk__ess-title {
	color: var(--ti-cream-100);
}
html.dark-skin body .techish-desk__pick-kicker {
	color: var(--ti-violet-300);
}
html.dark-skin body .techish-desk__section-pill {
	color: var(--ti-violet-300);
	background: rgba(177, 137, 189, 0.12);
	border-color: rgba(177, 137, 189, 0.45);
}
html.dark-skin body .techish-desk__section-pill:hover,
html.dark-skin body .techish-desk__section-pill:focus-visible {
	background: var(--ti-violet-300);
	border-color: var(--ti-violet-300);
	color: var(--ti-ink-900);
}
html.dark-skin body .techish-desk__shelf {
	background: rgba(177, 137, 189, 0.08);
}
html.dark-skin body .techish-desk__fpill {
	color: var(--ti-cream-200);
	background: rgba(244, 236, 214, 0.05);
	border-color: rgba(177, 137, 189, 0.30);
}
html.dark-skin body .techish-desk__fpill:hover {
	color: var(--ti-violet-300);
	border-color: var(--ti-violet-300);
}
@media (hover: hover) {
	html.dark-skin body .techish-desk__read:hover,
	html.dark-skin body .techish-desk__pick:hover,
	html.dark-skin body .techish-desk__section:hover {
		background: rgba(244, 236, 214, 0.06);
	}
}
/* The Radar panel needs NO dark overrides — violet-700 + cream reads
   identically on both skins. That's why it's the visual anchor. */

/* =====================================================================
   PHASE 17 (v2.6.0) — GOOGLE "PREFERRED SOURCES" BUTTON SLOT
   Rendered by inc/techish-preferred-source.php on single posts only, at
   TieLabs/before_post_content priority 5: top share bar → THIS → the
   above-content ad (10) → Story Highlights (11).

   The button itself is Google's iframe (auto-styled, auto-localized,
   themes itself from the data-theme attribute the module sets) — we style
   ONLY the wrapper:
   - min-height 44px reserves the slot so the async iframe causes ZERO
     layout shift at the top of the article (the LCP-critical zone).
     Trade-off, accepted: with the script blocked (ad blockers), the
     reservation collapses to a quiet 44px gap — invisible chrome, no
     broken UI.
   - clear: both keeps the slot out of the Story Highlights float
     wrap-zone (same guard family as Phase 13).
   - No dark-mode rules needed here: the module's inline script flips
     data-theme from html.dark-skin before Google's library scans.
   ===================================================================== */
.techish-gps {
	clear: both;
	display: flex;
	align-items: center;
	min-height: 44px;
	margin: var(--ti-sp-3) 0 var(--ti-sp-2);
}

/* The iframe Google injects — never wider than the column, no stray
   inline-block baseline gap. */
.techish-gps iframe,
.techish-gps [google-add-preferred-source-btn] {
	display: block;
	max-width: 100%;
}

/* Tighter rhythm on phones: the slot sits between the share pills and
   the ad, both of which already carry vertical margin. */
@media (max-width: 480px) {
	.techish-gps {
		margin: var(--ti-sp-2) 0 var(--ti-sp-1);
	}
}