/* ==========================================================================
   IJCIT Carbon — institutional B2B IT publication
   Inherits IBM Carbon Design System (Plex Sans 300 display, flat-square chrome,
   single IBM Blue accent #0f62fe). NO serif, 0px corners, no shadows.
   ========================================================================== */

/* -- Tokens -- */

:root {
	/* Surface */
	--ij-canvas:            #ffffff;
	--ij-surface-1:         #f4f4f4;
	--ij-surface-2:         #e0e0e0;
	--ij-hairline:          #e0e0e0;
	--ij-hairline-strong:   #161616;
	--ij-inverse-canvas:    #161616;
	--ij-inverse-surface-1: #262626;

	/* Ink */
	--ij-ink:               #161616;
	--ij-ink-muted:         #525252;
	--ij-ink-subtle:        #6b6b6b;  /* bumped from #8c8c8c for WCAG AA 4.5:1 on white */
	--ij-inverse-ink:       #ffffff;
	--ij-inverse-ink-muted: #c6c6c6;

	/* Accent — IBM Blue, the ONLY chromatic colour */
	--ij-blue:              #0f62fe;
	--ij-blue-60:           #0043ce;
	--ij-blue-80:           #002d9c;
	--ij-blue-hover:        #0050e6;
	--ij-blue-on-dark:      #78a9ff;  /* IBM Blue 50 — WCAG AA on charcoal footer */

	/* Semantic (rare) */
	--ij-success:           #24a148;
	--ij-warning:           #f1c21b;
	--ij-error:             #da1e28;

	/* Type */
	--ij-font:              'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
	--ij-font-mono:         'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

	/* Spacing (4px grid) */
	--ij-sp-xxs: 4px;
	--ij-sp-xs:  8px;
	--ij-sp-sm:  12px;
	--ij-sp-md:  16px;
	--ij-sp-lg:  24px;
	--ij-sp-xl:  32px;
	--ij-sp-xxl: 48px;
	--ij-sp-section: 96px;

	/* Container */
	--ij-container: 1320px;
	--ij-gutter:    32px;
}

/* -- GP container override (the "ultra wide single post" bug fix) -- */

body.ijcit-template #page,
body.ijcit-template .site-content,
body.ijcit-template .content-area,
body.ijcit-template main#content {
	display: block !important;
	flex: none !important;
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
}

/* -- Reset on Carbon body -- */

body.ijcit-template {
	margin: 0;
	background: var(--ij-canvas);
	color: var(--ij-ink);
	font-family: var(--ij-font);
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.16px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.ijcit-template *,
body.ijcit-template *::before,
body.ijcit-template *::after {
	box-sizing: border-box;
}

body.ijcit-template img {
	max-width: 100%;
	height: auto;
	display: block;
}

body.ijcit-template a {
	color: var(--ij-blue);
	text-decoration: none;
	transition: color .12s ease;
}
body.ijcit-template a:hover { color: var(--ij-blue-60); text-decoration: underline; text-underline-offset: 3px; }

/* Global focus-visible (WCAG 2.4.7) — applies to every interactive element in theme scope */
body.ijcit-template a:focus-visible,
body.ijcit-template button:focus-visible,
body.ijcit-template input:focus-visible,
body.ijcit-template select:focus-visible,
body.ijcit-template textarea:focus-visible,
body.ijcit-template [tabindex]:focus-visible {
	outline: 2px solid var(--ij-blue);
	outline-offset: 2px;
}

body.ijcit-template button,
body.ijcit-template input,
body.ijcit-template select,
body.ijcit-template textarea {
	font-family: inherit;
	font-size: inherit;
	letter-spacing: inherit;
	color: inherit;
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px,1px,1px,1px);
	height: 1px; width: 1px; overflow: hidden;
}

/* Skip link */
.ij-skip {
	position: absolute; left: -9999px;
}
.ij-skip:focus {
	left: 16px; top: 16px;
	background: var(--ij-blue);
	color: #fff;
	padding: 8px 12px;
	z-index: 1000;
}

/* -- Container -- */

.ij-container {
	width: 100%;
	max-width: var(--ij-container);
	margin: 0 auto;
	padding: 0 var(--ij-gutter);
}

/* -- Typography utilities -- */

.ij-display-xl {
	font-family: var(--ij-font);
	font-size: clamp(40px, 6vw, 76px);
	font-weight: 300;
	line-height: 1.08;
	letter-spacing: -0.5px;
	margin: 0;
	color: var(--ij-ink);
}

.ij-display-lg {
	font-family: var(--ij-font);
	font-size: clamp(34px, 4.5vw, 60px);
	font-weight: 300;
	line-height: 1.1;
	letter-spacing: -0.4px;
	margin: 0;
	color: var(--ij-ink);
}

.ij-display-md {
	font-family: var(--ij-font);
	font-size: clamp(28px, 3.2vw, 42px);
	font-weight: 300;
	line-height: 1.18;
	letter-spacing: 0;
	margin: 0;
	color: var(--ij-ink);
}

.ij-headline {
	font-family: var(--ij-font);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.25;
	letter-spacing: 0;
	margin: 0;
}

.ij-card-title {
	font-family: var(--ij-font);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.33;
	letter-spacing: 0;
	margin: 0;
	color: var(--ij-ink);
}

.ij-subhead {
	font-family: var(--ij-font);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--ij-ink-muted);
	margin: 0;
}

.ij-body-lg {
	font-family: var(--ij-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.55;
	color: var(--ij-ink-muted);
	margin: 0;
}

.ij-body {
	font-family: var(--ij-font);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.16px;
	color: var(--ij-ink);
	margin: 0;
}

.ij-body-sm {
	font-family: var(--ij-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	letter-spacing: 0.16px;
	color: var(--ij-ink-muted);
	margin: 0;
}

.ij-body-emphasis {
	font-family: var(--ij-font);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.16px;
	color: var(--ij-ink);
	margin: 0;
}

.ij-caption {
	font-family: var(--ij-font);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.33;
	letter-spacing: 0.32px;
	color: var(--ij-ink-subtle);
	margin: 0;
}

/* Eyebrows — sentence case 14px (Carbon resists all-caps tracking) */
.ij-eyebrow {
	font-family: var(--ij-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.3;
	letter-spacing: 0.16px;
	color: var(--ij-blue);
	margin: 0 0 var(--ij-sp-md);
}

/* Plex Serif allowed in ONE place: editorial pull-quote */
.ij-pullquote {
	font-family: 'IBM Plex Serif', Georgia, serif;
	font-size: clamp(24px, 3.2vw, 36px);
	font-weight: 400;
	line-height: 1.35;
	color: var(--ij-ink);
	margin: 0;
	padding: 0;
	border: 0;
	font-style: italic;
}

/* -- Buttons -- */

.ij-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--ij-font);
	font-size: 14px;
	font-weight: 400;
	line-height: 1.29;
	letter-spacing: 0.16px;
	padding: 12px 16px;
	min-height: 48px;
	border: 1px solid transparent;
	border-radius: 0;
	cursor: pointer;
	text-decoration: none;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}

/* Buttons — scoped under body.ijcit-template to beat the global `a { color: var(--ij-blue) }` cascade */

body.ijcit-template .ij-btn--primary,
body.ijcit-template a.ij-btn--primary,
body.ijcit-template button.ij-btn--primary {
	background: var(--ij-blue);
	color: #fff;
}
body.ijcit-template .ij-btn--primary:hover,
body.ijcit-template a.ij-btn--primary:hover,
body.ijcit-template button.ij-btn--primary:hover {
	background: var(--ij-blue-hover);
	color: #fff;
	text-decoration: none;
}
body.ijcit-template .ij-btn--primary:active { background: var(--ij-blue-80); }

body.ijcit-template .ij-btn--secondary,
body.ijcit-template a.ij-btn--secondary,
body.ijcit-template button.ij-btn--secondary {
	background: var(--ij-ink);
	color: #fff;
}
body.ijcit-template .ij-btn--secondary:hover { background: #262626; color: #fff; text-decoration: none; }

body.ijcit-template .ij-btn--tertiary,
body.ijcit-template a.ij-btn--tertiary,
body.ijcit-template button.ij-btn--tertiary {
	background: transparent;
	color: var(--ij-blue);
	border-color: var(--ij-blue);
}
body.ijcit-template .ij-btn--tertiary:hover {
	background: var(--ij-blue);
	color: #fff;
	text-decoration: none;
}

body.ijcit-template .ij-btn--ghost {
	background: transparent;
	color: var(--ij-blue);
	padding-left: 0;
	padding-right: 0;
}
body.ijcit-template .ij-btn--ghost:hover {
	color: var(--ij-blue-60);
	background: transparent;
}

body.ijcit-template .ij-btn--inverse,
body.ijcit-template a.ij-btn--inverse,
body.ijcit-template button.ij-btn--inverse {
	background: #fff;
	color: #161616;            /* hardcoded — bg is always white, text must always be charcoal */
	border-color: #fff;
}
body.ijcit-template .ij-btn--inverse:hover,
body.ijcit-template a.ij-btn--inverse:hover,
body.ijcit-template button.ij-btn--inverse:hover {
	background: #f4f4f4;
	color: #161616;
	text-decoration: none;
}

.ij-btn--block { width: 100%; }

/* -- Link arrow -- */
.ij-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ij-blue);
	font-size: 14px;
	letter-spacing: 0.16px;
	text-decoration: none;
}
.ij-link:hover { color: var(--ij-blue-60); text-decoration: underline; text-underline-offset: 4px; }

/* -- Inputs -- */

.ij-input {
	width: 100%;
	background: var(--ij-surface-1);
	color: var(--ij-ink);
	padding: 11px 16px;
	min-height: 48px;
	border: 0;
	border-bottom: 1px solid var(--ij-hairline);
	border-radius: 0;
	font-family: var(--ij-font);
	font-size: 16px;
	letter-spacing: 0.16px;
	transition: border-color .12s ease;
}
.ij-input::placeholder { color: var(--ij-ink-subtle); }
.ij-input:focus {
	outline: none;
	border-bottom: 2px solid var(--ij-blue);
	padding-bottom: 10px;
}

/* -- Utility bar (slim gray ribbon above top nav) -- */

.ij-utility {
	background: var(--ij-surface-1);
	color: var(--ij-ink-muted);
	border-bottom: 1px solid var(--ij-hairline);
}
.ij-utility__inner {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 32px;
	font-size: 12px;
	letter-spacing: 0.32px;
}
.ij-utility__brand { font-weight: 600; color: var(--ij-ink); }
.ij-utility__sep { color: var(--ij-ink-subtle); }
.ij-utility__tag { color: var(--ij-ink-muted); }
.ij-utility__right { margin-left: auto; display: flex; gap: 16px; }
.ij-utility__right a { color: var(--ij-ink-muted); }
.ij-utility__right a:hover { color: var(--ij-blue); text-decoration: none; }
.ij-utility__cta { color: var(--ij-blue) !important; font-weight: 600; }

@media (max-width: 720px) {
	.ij-utility__tag { display: none; }
	.ij-utility__right a:not(.ij-utility__cta) { display: none; }
}

/* -- Top nav -- */

.ij-topnav {
	background: var(--ij-canvas);
	border-bottom: 1px solid var(--ij-hairline);
	position: sticky;
	top: 0;
	z-index: 80;
}
.ij-topnav__inner {
	display: flex;
	align-items: center;
	min-height: 64px;
	gap: 32px;
}
.ij-topnav__brand {
	color: var(--ij-ink);
	font-family: var(--ij-font);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: -0.2px;
	text-decoration: none;
}
.ij-topnav__brand:hover { color: var(--ij-blue); text-decoration: none; }
.ij-topnav__mark-dot { color: var(--ij-blue); }
.ij-topnav__primary {
	display: flex;
	gap: 24px;
	margin-left: 8px;
}
.ij-topnav__primary a {
	color: var(--ij-ink);
	font-size: 14px;
	letter-spacing: 0.16px;
	padding: 8px 0;
	border-bottom: 2px solid transparent;
	text-decoration: none;
	transition: color .12s ease, border-color .12s ease;
}
.ij-topnav__primary a:hover {
	color: var(--ij-blue);
	border-bottom-color: var(--ij-blue);
	text-decoration: none;
}
.ij-topnav__right {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 16px;
}
.ij-topnav__hamburger {
	display: none;
	background: transparent;
	border: 0;
	width: 44px;
	height: 44px;
	cursor: pointer;
	padding: 10px;
}
.ij-topnav__hamburger span {
	display: block;
	height: 2px;
	background: var(--ij-ink);
	margin: 4px 0;
}

@media (max-width: 960px) {
	.ij-topnav__primary { display: none; }
	.ij-topnav__hamburger { display: block; }
	.ij-topnav__right .ij-btn { display: none; }
}

.ij-mobile {
	background: var(--ij-canvas);
	border-bottom: 1px solid var(--ij-hairline);
}
.ij-mobile__inner {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 24px 24px;
}
.ij-mobile a {
	color: var(--ij-ink);
	font-size: 18px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ij-hairline);
	text-decoration: none;
}
.ij-mobile a:hover { color: var(--ij-blue); }
.ij-mobile .ij-btn { margin-top: 16px; width: 100%; }

/* -- Section bands (two-surface rhythm) -- */

.ij-main { display: block; }

.ij-band {
	padding: clamp(48px, 8vw, 96px) 0;
	background: var(--ij-canvas);
}
.ij-band--surface { background: var(--ij-surface-1); }

.ij-section-head {
	margin-bottom: var(--ij-sp-xxl);
	max-width: 720px;
}
.ij-section-head--row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	max-width: none;
}
.ij-section-head--row .ij-link { white-space: nowrap; }

/* -- Hero -- */

.ij-hero {
	padding: clamp(64px, 10vw, 128px) 0 clamp(48px, 8vw, 96px);
	background: var(--ij-canvas);
	/* Documented soft-blue gradient — the only allowed atmospheric (used when no bg image) */
	background-image: linear-gradient(180deg, rgba(15,98,254,0.04) 0%, rgba(15,98,254,0) 60%);
	border-bottom: 1px solid var(--ij-hairline);
	position: relative;
}
.ij-hero__inner { max-width: 1080px; }
.ij-hero__eye { color: var(--ij-ink-muted); }
.ij-hero__title-soft { color: var(--ij-ink-muted); }
.ij-hero__title { margin-bottom: var(--ij-sp-xl); }
.ij-hero__sub { max-width: 680px; margin-bottom: var(--ij-sp-xl); }
.ij-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* Featured-image hero variant — image as bg + 0.10→0.55→0.88 linear overlay */
.ij-hero--bg {
	background-size: cover;
	background-position: center;
	background-color: var(--ij-ink);
	color: #fff;
	padding: clamp(128px, 14vw, 192px) 0 clamp(96px, 10vw, 144px);
	border-bottom: 0;
	overflow: hidden;
}
.ij-hero--bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(0,0,0,0.10) 0%,
		rgba(0,0,0,0.55) 55%,
		rgba(0,0,0,0.88) 100%);
	z-index: 0;
}
.ij-hero--bg .ij-container { position: relative; z-index: 1; }

/* White-text overrides inside the bg hero */
.ij-hero--bg .ij-hero__eye {
	color: rgba(255,255,255,0.85);
}
.ij-hero--bg .ij-hero__title { color: #fff; }
.ij-hero--bg .ij-hero__title-soft { color: rgba(255,255,255,0.78); }
.ij-hero--bg .ij-hero__sub { color: rgba(255,255,255,0.92); }

/* Tertiary button on dark needs a white border + text for AA */
.ij-hero--bg .ij-btn--tertiary,
.ij-hero--bg a.ij-btn--tertiary {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,0.6);
}
.ij-hero--bg .ij-btn--tertiary:hover,
.ij-hero--bg a.ij-btn--tertiary:hover {
	background: #fff;
	color: var(--ij-ink);
	border-color: #fff;
}

/* -- Vertical-grid (two-vertical band) -- */

.ij-vertgrid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}
@media (max-width: 880px) { .ij-vertgrid { grid-template-columns: 1fr; } }

.ij-vertcard {
	background: var(--ij-canvas);
	border: 1px solid var(--ij-hairline);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	min-width: 0;  /* allow grid item to shrink below intrinsic min-content */
}
.ij-vertcard__head { margin-bottom: 8px; }
.ij-vertcard__latest {
	font-size: 12px;
	letter-spacing: 0.32px;
	color: var(--ij-ink-subtle);
	text-transform: none;
	margin: 16px 0 4px;
	padding-top: 16px;
	border-top: 1px solid var(--ij-hairline);
}
.ij-vertcard__title {
	font-family: var(--ij-font);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
	color: var(--ij-ink);
	text-decoration: none;
	margin-bottom: 4px;
}
.ij-vertcard__title:hover { color: var(--ij-blue); text-decoration: none; }

/* -- Tile grid (3-up / 4-up) -- */

.ij-tilegrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.ij-tilegrid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) {
	.ij-tilegrid, .ij-tilegrid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.ij-tilegrid, .ij-tilegrid--4 { grid-template-columns: 1fr; }
}

.ij-tile {
	background: var(--ij-canvas);
	border: 1px solid var(--ij-hairline);
	display: flex;
	flex-direction: column;
}
.ij-tile__media {
	display: block;
	aspect-ratio: 16 / 10;
	background-color: var(--ij-surface-1);
	background-size: cover;
	background-position: center;
	border-bottom: 1px solid var(--ij-hairline);
}
.ij-tile__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}
.ij-tile__title {
	font-family: var(--ij-font);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	margin: 0;
}
.ij-tile__title a { color: var(--ij-ink); text-decoration: none; }
.ij-tile__title a:hover { color: var(--ij-blue); }
.ij-tile__sub {
	font-size: 14px;
	line-height: 1.45;
	color: var(--ij-ink-muted);
	letter-spacing: 0.16px;
	margin: 0;
}

/* -- Insight grid (surface-1 band, 3-up text-only) -- */

.ij-insightgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
@media (max-width: 1100px) { .ij-insightgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ij-insightgrid { grid-template-columns: 1fr; } }

.ij-insight {
	background: var(--ij-canvas);
	border: 1px solid var(--ij-hairline);
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 200px;
}
.ij-insight__title {
	font-family: var(--ij-font);
	font-size: 18px;
	font-weight: 400;
	line-height: 1.35;
	margin: 0;
	flex: 1;
}
.ij-insight__title a { color: var(--ij-ink); text-decoration: none; }
.ij-insight__title a:hover { color: var(--ij-blue); }

/* -- Vertical label / meta row -- */

.ij-vertical {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.32px;
	color: var(--ij-blue);
	text-decoration: none;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--ij-blue);
	text-transform: none;
}
.ij-vertical:hover { color: var(--ij-blue-60); border-bottom-color: var(--ij-blue-60); text-decoration: none; }

.ij-meta-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	font-size: 13px;
	letter-spacing: 0.16px;
	color: var(--ij-ink-muted);
	margin: 0;
}
.ij-meta-row .ij-vertical { font-size: 13px; }
.ij-meta-sep { color: var(--ij-ink-subtle); }

/* -- Pull-quote band -- */

.ij-pullquote-band {
	max-width: 880px;
	text-align: center;
}
.ij-pullquote { margin-bottom: 16px; }
.ij-pullquote__sig {
	font-size: 14px;
	letter-spacing: 0.16px;
	color: var(--ij-ink-muted);
	margin: 0;
}

/* -- Article -- */

.ij-article { padding: 0; }

.ij-article__head {
	padding: 96px 0 64px;
	background: var(--ij-canvas);
	position: relative;
}
.ij-article__title { margin: 16px 0 24px; }
.ij-article__byline {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
}

/* Featured-image hero variant — image as bg + 0.10→0.55→0.88 linear overlay */
.ij-article__head--bg {
	background-size: cover;
	background-position: center;
	background-color: var(--ij-ink);
	padding: 128px 0 80px;
	color: #fff;
	overflow: hidden;
}
.ij-article__head--bg::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,
		rgba(0,0,0,0.10) 0%,
		rgba(0,0,0,0.55) 55%,
		rgba(0,0,0,0.88) 100%);
	z-index: 0;
}
/* Mobile hero padding — 128px top is disproportionate at 390px viewport */
@media (max-width: 640px) {
	.ij-article__head--bg { padding: 72px 0 48px; }
}
.ij-article__head--bg .ij-container,
.ij-article__head--bg .ij-article__head-inner { position: relative; z-index: 1; }

/* White-text overrides inside the hero */
.ij-article__head--bg .ij-article__title,
.ij-article__head--bg .ij-body-emphasis { color: #fff; }
.ij-article__head--bg .ij-caption,
.ij-article__head--bg .ij-article__credentials { color: rgba(255,255,255,0.85); }
.ij-article__head--bg .ij-crumbs a { color: rgba(255,255,255,0.85); }
.ij-article__head--bg .ij-crumbs a:hover { color: #fff; }
.ij-article__head--bg .ij-crumbs span[aria-current] { color: #fff; }
.ij-article__head--bg .ij-crumbs__sep { color: rgba(255,255,255,0.45); }
.ij-article__head--bg .ij-vertical {
	color: #fff;
	border-bottom-color: rgba(255,255,255,0.9);
}
.ij-article__head--bg .ij-vertical:hover { color: #fff; border-bottom-color: #fff; }
.ij-article__head--bg .ij-complexity {
	color: #fff;
	background: rgba(255,255,255,0.12);
	border-color: rgba(255,255,255,0.3);
}
.ij-article__head--bg .ij-author-avatar {
	background: rgba(255,255,255,0.18);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.3);
}
.ij-article__head--bg .ij-article__author-link { color: #fff; text-decoration: none; }
.ij-article__head--bg .ij-article__author-link:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.ij-author-avatar {
	width: 40px;
	height: 40px;
	background: var(--ij-ink);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.16px;
}

/* Legacy article-feature figure (no longer rendered — kept for safety) */
.ij-article__feature { display: none; }

.ij-article__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 280px;
	gap: 56px;
	padding: 48px var(--ij-gutter) 96px;  /* 48px top breathing room between hero and body */
	max-width: 1320px;
	margin: 0 auto;
}
@media (max-width: 1024px) {
	.ij-article__layout { grid-template-columns: 1fr; }
	.ij-article__rail { order: 2; }
}

.ij-article__body {
	font-family: var(--ij-font);
	font-size: 18px;
	line-height: 1.6;
	color: var(--ij-ink);
	letter-spacing: 0.16px;    /* applies to li, blockquote, td, etc. — not just p */
	max-width: 680px;
}
.ij-article__body h2 {
	font-size: 28px;
	font-weight: 400;
	line-height: 1.25;
	margin: 56px 0 16px;
	letter-spacing: 0;
	color: var(--ij-ink);
}
.ij-article__body h3 {
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
	margin: 40px 0 12px;
	color: var(--ij-ink);
}
.ij-article__body p { margin: 0 0 20px; }
.ij-article__body a {
	color: var(--ij-blue);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.ij-article__body ul,
.ij-article__body ol { margin: 0 0 20px 24px; padding: 0; }
.ij-article__body li { margin-bottom: 8px; }

.ij-article__body blockquote {
	margin: 32px 0;
	padding: 24px 32px;
	border-left: 2px solid var(--ij-blue);
	background: var(--ij-surface-1);
	font-size: 20px;
	line-height: 1.5;
}

.ij-article__body code {
	font-family: var(--ij-font-mono);
	background: var(--ij-surface-1);
	padding: 2px 6px;
	font-size: 14px;
}

.ij-article__foot {
	margin-top: 64px;
	padding-top: 24px;
	border-top: 1px solid var(--ij-hairline);
	color: var(--ij-ink-muted);
}
.ij-article__foot p { margin: 4px 0; }

/* -- Rail (sticky sidebar) -- */

.ij-article__rail {
	position: sticky;
	top: 96px;
	align-self: start;
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.ij-toc {
	border-left: 1px solid var(--ij-hairline);
	padding-left: 16px;
}
.ij-toc__label {
	font-size: 12px;
	font-weight: 600;
	color: var(--ij-ink);
	letter-spacing: 0.32px;
	margin: 0 0 12px;
}
.ij-toc__list { list-style: none; margin: 0; padding: 0; }
.ij-toc__item { margin: 0; padding: 4px 0; }
.ij-toc__item a {
	display: block;
	font-size: 14px;
	letter-spacing: 0.16px;
	color: var(--ij-ink-muted);
	text-decoration: none;
	padding: 2px 0 2px 0;
	margin-left: -17px;
	padding-left: 16px;
	border-left: 2px solid transparent;
}
.ij-toc__item--h3 a { padding-left: 28px; font-size: 13px; }
.ij-toc__item a:hover { color: var(--ij-blue); }
.ij-toc__item.is-active a {
	color: var(--ij-blue);
	border-left-color: var(--ij-blue);
	font-weight: 600;
}

.ij-rail-widget {
	background: var(--ij-canvas);
	border: 1px solid var(--ij-hairline);
	padding: 20px;
}
.ij-rail-widget__head {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.32px;
	color: var(--ij-ink);
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ij-hairline);
}

.ij-rail-recent {
	display: grid;
	grid-template-columns: 80px 1fr;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--ij-hairline);
	text-decoration: none;
}
.ij-rail-recent:last-of-type { border-bottom: 0; }
.ij-rail-recent__thumb {
	width: 80px;
	height: 60px;
	object-fit: cover;
	background: var(--ij-surface-1);
	border: 0;
}
.ij-rail-recent__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.ij-rail-recent__vert {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32px;
	color: var(--ij-blue);
}
.ij-rail-recent__title {
	font-size: 14px;
	line-height: 1.35;
	color: var(--ij-ink);
}
.ij-rail-recent:hover .ij-rail-recent__title { color: var(--ij-blue); }

.ij-rail-widget--blue {
	background: var(--ij-ink);
	color: #fff;
	border-color: var(--ij-ink);
}
.ij-rail-widget__head--blue {
	color: #fff;
	border-bottom-color: var(--ij-inverse-surface-1);
}
.ij-rail-widget--blue .ij-body-sm { color: var(--ij-inverse-ink-muted); margin-bottom: 16px; }

/* -- Related grid (foot of single post) -- */

.ij-relgrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}
@media (max-width: 1100px) { .ij-relgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ij-relgrid { grid-template-columns: 1fr; } }

/* -- Pagination -- */

.ij-pagination {
	margin: 64px 0 0;
	display: flex;
	gap: 8px;
	justify-content: center;
	flex-wrap: wrap;
}
.ij-pagination .page-numbers {
	min-width: 48px;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 14px;
	border: 1px solid var(--ij-hairline);
	color: var(--ij-ink);
	font-size: 14px;
	letter-spacing: 0.16px;
	text-decoration: none;
	background: var(--ij-canvas);
}
.ij-pagination .page-numbers:hover { border-color: var(--ij-blue); color: var(--ij-blue); text-decoration: none; }
.ij-pagination .page-numbers.current {
	background: var(--ij-blue);
	color: #fff;
	border-color: var(--ij-blue);
}

/* -- Breadcrumbs -- */

.ij-crumbs {
	display: flex;
	gap: 8px;
	align-items: center;
	font-size: 12px;
	letter-spacing: 0.32px;
	color: var(--ij-ink-subtle);
	margin-bottom: 12px;
}
.ij-crumbs a { color: var(--ij-ink-muted); text-decoration: none; }
.ij-crumbs a:hover { color: var(--ij-blue); }
.ij-crumbs__sep { color: var(--ij-ink-subtle); }
.ij-crumbs span[aria-current] { color: var(--ij-ink); }

/* -- Page hero (about / contact / generic) -- */

.ij-page-hero {
	padding: 96px 0 64px;
	background: var(--ij-canvas);
	border-bottom: 1px solid var(--ij-hairline);
}
.ij-prose {
	max-width: 760px;
	font-size: 18px;
	line-height: 1.6;
	color: var(--ij-ink);
}
.ij-prose h2 {
	font-family: var(--ij-font);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.25;
	margin: 48px 0 16px;
	color: var(--ij-ink);
}
.ij-prose h3 {
	font-family: var(--ij-font);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.3;
	margin: 32px 0 12px;
	color: var(--ij-ink);
}
.ij-prose p { margin: 0 0 20px; }
.ij-prose a { color: var(--ij-blue); text-decoration: underline; text-underline-offset: 3px; }
.ij-prose ul, .ij-prose ol { margin: 0 0 20px 24px; }
.ij-prose li { margin-bottom: 8px; }

/* -- Archive hero -- */

.ij-archive-hero { padding: 64px 0 32px; }
.ij-archive-hero__sub { max-width: 720px; margin-top: 16px; }

/* -- 404 -- */

.ij-404 { text-align: left; padding: 128px 0; }
.ij-404__inner { max-width: 720px; }
.ij-404__sub { margin: 24px 0 32px; }
.ij-404__cta { display: flex; gap: 12px; flex-wrap: wrap; }

/* -- CTA banner -- */

.ij-cta-banner {
	background: var(--ij-blue);
	color: #fff;
	padding: clamp(48px, 6vw, 80px) 0;
}
.ij-cta-banner__inner {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 48px;
	align-items: center;
}
@media (max-width: 880px) { .ij-cta-banner__inner { grid-template-columns: 1fr; } }
@media (max-width: 672px) {
	.ij-cta-banner__form { flex-direction: column; align-items: stretch; }
	.ij-cta-banner__form .ij-input { margin-bottom: 8px; }
}
.ij-cta-banner__eye { color: rgba(255,255,255,0.85); }
.ij-cta-banner__title {
	font-family: var(--ij-font);
	font-size: clamp(28px, 3.4vw, 42px);
	font-weight: 300;
	line-height: 1.2;
	color: #fff;
	margin: 0 0 12px;
}
.ij-cta-banner__sub {
	font-size: 16px;
	line-height: 1.5;
	color: rgba(255,255,255,0.9);
	letter-spacing: 0.16px;
	margin: 0;
}
.ij-cta-banner__form { display: flex; gap: 8px; }
.ij-cta-banner__form .ij-input { background: rgba(255,255,255,0.12); color: #fff; border-bottom-color: rgba(255,255,255,0.4); }
.ij-cta-banner__form .ij-input::placeholder { color: rgba(255,255,255,0.7); }
.ij-cta-banner__form .ij-input:focus { border-bottom-color: #fff; }

/* -- Footer -- */

.ij-footer {
	background: var(--ij-inverse-canvas);
	color: var(--ij-inverse-ink-muted);
	padding: 64px 0 0;
}
.ij-footer__inner {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
	gap: 32px;
}
@media (max-width: 1024px) {
	.ij-footer__inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px)  { .ij-footer__inner { grid-template-columns: 1fr; } }

.ij-footer__brand .ij-footer__mark {
	font-family: var(--ij-font);
	font-size: 42px;
	font-weight: 300;
	color: #fff;
	letter-spacing: -0.4px;
	display: inline-block;
	margin-bottom: 16px;
}
.ij-footer__tag {
	color: var(--ij-inverse-ink-muted);
	font-size: 14px;
	line-height: 1.45;
	margin: 0 0 8px;
	max-width: 320px;
}
.ij-footer__est { color: var(--ij-ink-subtle); font-size: 12px; letter-spacing: 0.32px; margin: 0; }

.ij-footer__head {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.16px;
	margin: 0 0 12px;
}
/* Footer link colour overrides the global `body.ijcit-template a` rule (which would render IBM Blue and fail AA on charcoal — 3.6:1) */
body.ijcit-template .ij-footer__col a {
	display: block;
	color: var(--ij-inverse-ink-muted);
	font-size: 14px;
	letter-spacing: 0.16px;
	padding: 4px 0;
	text-decoration: none;
}
body.ijcit-template .ij-footer__col a:hover,
body.ijcit-template .ij-footer__legal a:hover {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}
/* Legal-row links are inline (the dot-separated row at the page foot) */
body.ijcit-template .ij-footer__legal a {
	color: var(--ij-inverse-ink-muted);
	text-decoration: none;
}

.ij-footer__col address { font-style: normal; }
.ij-footer__col address p {
	margin: 4px 0;
	color: var(--ij-inverse-ink-muted);
	font-size: 14px;
	letter-spacing: 0.16px;
}

.ij-footer__legal {
	margin-top: 64px;
	border-top: 1px solid var(--ij-inverse-surface-1);
	padding: 24px 0;
}
.ij-footer__legal-inner {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 12px;
	letter-spacing: 0.32px;
	color: var(--ij-ink-subtle);
}
.ij-footer__legal-inner p { margin: 0; }
.ij-footer__legal-right { color: var(--ij-inverse-ink-muted); }

/* -- Reading progress bar (top of viewport, 3px) -- */

.ij-progress {
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	height: 3px;
	background: rgba(15, 98, 254, 0.12);
	z-index: 200;
	pointer-events: none;
}
.ij-progress__fill {
	height: 100%;
	background: var(--ij-blue);
	width: 0%;
	transition: width .08s linear;
	box-shadow: 0 0 8px rgba(15, 98, 254, 0.45);
}
/* Hide on non-single-post pages (single.php is the only template that renders the markup) */

/* -- WordPress block / GP overrides -- */

body.ijcit-template .wp-block-image img { display: block; }
body.ijcit-template .wp-block-image figcaption {
	font-size: 12px;
	letter-spacing: 0.32px;
	color: var(--ij-ink-muted);
	margin-top: 8px;
}

/* Gutenberg block paragraph — apply Carbon 0.16px body tracking */
body.ijcit-template .wp-block-paragraph,
body.ijcit-template .ij-article__body p,
body.ijcit-template .ij-prose p {
	letter-spacing: 0.16px;
}

/* Anchor scroll-margin so sticky nav doesn't obscure jump targets */
body.ijcit-template [id] { scroll-margin-top: 120px; }

/* Customizer style.min.css overrides — body-class scoped */
body.ijcit-template .site,
body.ijcit-template .grid-container,
body.ijcit-template .inside-article {
	background: transparent !important;
	box-shadow: none !important;
}

/* ==========================================================================
   GROUP B/C/D/E APPENDS — features 3-22 of audit-cleanup rev
   ========================================================================== */

/* -- Carbon arrow icon on buttons (signature CTA detail) -- */

.ij-arrow {
	margin-left: 4px;
	transition: transform .15s ease;
}
body.ijcit-template .ij-btn:hover .ij-arrow,
body.ijcit-template .ij-link:hover .ij-arrow { transform: translateX(3px); }

/* -- Complexity badge (Carbon caption) -- */

.ij-complexity {
	display: inline-block;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.32px;
	color: var(--ij-ink);
	background: var(--ij-surface-1);
	padding: 4px 10px;
	border: 1px solid var(--ij-hairline);
}

.ij-article__meta-row {
	display: flex;
	gap: 12px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 12px;
}

/* -- Bookmark button -- */

.ij-bookmark {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid var(--ij-hairline);
	color: var(--ij-ink-muted);
	padding: 6px 12px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.32px;
	cursor: pointer;
	transition: color .12s, border-color .12s, background .12s;
	margin-left: auto;
	align-self: center;
}
.ij-bookmark:hover { color: var(--ij-blue); border-color: var(--ij-blue); }
.ij-bookmark[aria-pressed="true"] {
	color: #fff;
	background: var(--ij-blue);
	border-color: var(--ij-blue);
}
.ij-bookmark[aria-pressed="true"] .ij-bookmark__label::before { content: 'Saved'; }
.ij-bookmark[aria-pressed="true"] .ij-bookmark__label { font-size: 0; line-height: 0; }
.ij-bookmark[aria-pressed="true"] .ij-bookmark__label::before { font-size: 12px; line-height: 1.29; }

/* -- Author credentials caption -- */

.ij-article__credentials {
	color: var(--ij-ink-muted);
	margin: 2px 0;
}

/* -- Saved page empty state -- */

.ij-saved-empty {
	max-width: 540px;
	padding: 48px 0;
}
.ij-saved-empty .ij-btn { margin-top: 16px; }
#ij-saved-list:empty + .ij-saved-empty[hidden] { display: block; }

/* -- Theme toggle (Carbon) -- */

.ij-theme-toggle {
	background: transparent;
	border: 0;
	color: var(--ij-ink-muted);
	cursor: pointer;
	padding: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color .12s;
}
.ij-theme-toggle:hover { color: var(--ij-blue); }
.ij-theme-toggle__icon { display: none; }
[data-theme="light"] .ij-theme-toggle__icon--moon { display: inline; }
[data-theme="dark"]  .ij-theme-toggle__icon--sun  { display: inline; }

/* -- Search toggle + saved toggle (top-nav) -- */

.ij-search-toggle,
.ij-saved-toggle {
	background: transparent;
	border: 0;
	color: var(--ij-ink-muted);
	cursor: pointer;
	padding: 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.ij-search-toggle:hover,
.ij-saved-toggle:hover { color: var(--ij-blue); }
.ij-saved-toggle__count {
	position: absolute;
	top: 0;
	right: -2px;
	background: var(--ij-blue);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	min-width: 16px;
	height: 16px;
	line-height: 16px;
	padding: 0 4px;
	text-align: center;
}

/* -- Editorial calendar (utility bar) -- */

.ij-utility__cal {
	color: var(--ij-ink);
	font-weight: 600;
	letter-spacing: 0.16px;
}
@media (max-width: 720px) {
	.ij-utility__cal { display: none; }
}

/* -- Search overlay -- */

/* Global safety: [hidden] must win over display rules below */
body.ijcit-template [hidden] { display: none !important; }

.ij-search {
	position: fixed;
	inset: 0;
	background: rgba(22,22,22,0.6);
	z-index: 100;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 80px 16px;
	overscroll-behavior: contain;
}
.ij-search[hidden] { display: none; }
.ij-search__panel {
	background: var(--ij-canvas);
	width: 100%;
	max-width: 720px;
	border: 1px solid var(--ij-hairline);
	max-height: calc(100vh - 160px);
	overflow-y: auto;
}
.ij-search__panel > .ij-container { padding: 24px; }
.ij-search__bar {
	display: flex;
	gap: 12px;
	align-items: center;
	margin-bottom: 16px;
}
.ij-search__input {
	flex: 1;
	background: var(--ij-surface-1);
	border: 0;
	border-bottom: 2px solid var(--ij-hairline);
	font-family: var(--ij-font);
	font-size: 18px;
	padding: 12px 16px;
	color: var(--ij-ink);
	letter-spacing: 0.16px;
}
.ij-search__input:focus { outline: none; border-bottom-color: var(--ij-blue); }
.ij-search__close {
	background: transparent;
	border: 1px solid var(--ij-hairline);
	color: var(--ij-ink-muted);
	padding: 8px 14px;
	font-size: 14px;
	cursor: pointer;
}
.ij-search__close:hover { color: var(--ij-blue); border-color: var(--ij-blue); }
.ij-search__filters {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--ij-hairline);
	padding-bottom: 8px;
}
.ij-search__filter {
	background: transparent;
	border: 0;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.16px;
	color: var(--ij-ink-muted);
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -9px;
}
.ij-search__filter:hover { color: var(--ij-blue); }
.ij-search__filter.is-active {
	color: var(--ij-ink);
	border-bottom-color: var(--ij-blue);
}
.ij-search__results {
	min-height: 80px;
}
.ij-search__result {
	display: block;
	padding: 14px 0;
	border-bottom: 1px solid var(--ij-hairline);
	text-decoration: none;
}
.ij-search__result:last-child { border-bottom: 0; }
.ij-search__result:hover,
.ij-search__result.is-active { background: var(--ij-surface-1); }
.ij-search__result-vert {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.32px;
	color: var(--ij-blue);
}
.ij-search__result-title {
	display: block;
	font-size: 16px;
	color: var(--ij-ink);
	line-height: 1.35;
	margin: 4px 0 2px;
}
.ij-search__result-sum {
	display: block;
	font-size: 13px;
	color: var(--ij-ink-muted);
	line-height: 1.4;
}
.ij-search__empty {
	padding: 32px 0;
	color: var(--ij-ink-muted);
	font-size: 14px;
	text-align: center;
}
.ij-search__hint {
	margin: 16px 0 0;
	font-size: 12px;
	color: var(--ij-ink-subtle);
	letter-spacing: 0.32px;
}
.ij-search__hint kbd {
	font-family: var(--ij-font-mono);
	font-size: 11px;
	padding: 2px 5px;
	background: var(--ij-surface-1);
	border: 1px solid var(--ij-hairline);
	color: var(--ij-ink);
}

/* -- Glossary tooltips (auto-wrapped abbreviations) -- */

abbr.ij-gloss {
	cursor: help;
	border-bottom: 1px dotted var(--ij-blue);
	text-decoration: none;
	position: relative;
}
abbr.ij-gloss[data-def]::after {
	content: attr(data-def);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: calc(100% + 8px);
	/* Hardcode dark bg + light text so it stays readable in BOTH light and dark themes
	   — using var(--ij-ink)/var(--ij-canvas) would flip to white-on-white in dark mode */
	background: #161616;
	color: #f4f4f4;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.16px;
	line-height: 1.4;
	white-space: normal;
	width: max-content;
	max-width: 280px;
	border: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
	z-index: 5;
}
abbr.ij-gloss:hover::after,
abbr.ij-gloss:focus::after { opacity: 1; }

/* -- Drop cap on single-post first paragraph -- */

.ij-article__body .ij-lede::first-letter {
	float: left;
	font-family: var(--ij-font);
	font-size: 64px;
	font-weight: 300;
	line-height: 1;
	margin: 6px 12px 0 0;
	color: var(--ij-blue);
}
.ij-article__body .ij-lede {
	font-size: 20px;
	line-height: 1.55;
	color: var(--ij-ink);
}

/* -- Takeaways callout (top of article) -- */

.ij-takeaways {
	background: var(--ij-surface-1);
	border-left: 2px solid var(--ij-blue);
	padding: 24px 28px;
	margin: 32px 0 48px;
}
.ij-takeaways__head {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.32px;
	color: var(--ij-blue);
	margin: 0 0 12px;
	text-transform: none;
}
.ij-takeaways__list {
	margin: 0;
	padding-left: 18px;
	font-size: 16px;
	line-height: 1.5;
	color: var(--ij-ink);
	letter-spacing: 0.16px;
}
.ij-takeaways__list li { margin-bottom: 8px; }
.ij-takeaways__list li:last-child { margin-bottom: 0; }

/* -- Editorial callout shortcodes (Carbon flat) -- */

.ij-callout {
	background: var(--ij-canvas);
	border: 1px solid var(--ij-hairline);
	border-left: 2px solid var(--ij-blue);
	padding: 20px 24px;
	margin: 32px 0;
}
.ij-callout--bottom { border-left-color: var(--ij-ink); }
.ij-callout--watch  { border-left-color: var(--ij-warning); }
.ij-callout__head {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.32px;
	color: var(--ij-ink);
	margin: 0 0 8px;
}
.ij-callout--insight .ij-callout__head { color: var(--ij-blue); }
.ij-callout__body {
	font-size: 16px;
	line-height: 1.5;
	color: var(--ij-ink);
	letter-spacing: 0.16px;
}
.ij-callout__body p:last-child { margin-bottom: 0; }

/* -- Stat callout shortcode (inline data figure) -- */

.ij-stat {
	display: block;
	background: var(--ij-canvas);
	border: 1px solid var(--ij-hairline);
	border-top: 2px solid var(--ij-blue);
	padding: 24px 28px;
	margin: 32px 0;
}
.ij-stat__number {
	display: block;
	font-family: var(--ij-font);
	font-size: clamp(40px, 6vw, 72px);
	font-weight: 300;
	line-height: 1;
	letter-spacing: -0.5px;
	color: var(--ij-blue);
	font-variant-numeric: tabular-nums;
	margin-bottom: 8px;
}
.ij-stat__label {
	font-size: 14px;
	letter-spacing: 0.16px;
	color: var(--ij-ink-muted);
}

/* -- Inline pull-quote (shortcode, distinct from homepage band) -- */

.ij-pullquote--inline {
	margin: 32px 0;
	padding: 0 0 0 24px;
	border-left: 2px solid var(--ij-blue);
	font-family: 'IBM Plex Serif', Georgia, serif;
	font-style: italic;
	font-size: clamp(20px, 2.6vw, 28px);
	line-height: 1.4;
	color: var(--ij-ink);
}
.ij-pullquote__cite {
	display: block;
	margin-top: 12px;
	font-family: var(--ij-font);
	font-style: normal;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.16px;
	color: var(--ij-ink-muted);
}

/* -- Lead-fact paragraph (bold first sentence pattern, NYT-style) -- */

.ij-lead-fact {
	font-weight: 500;
	color: var(--ij-ink);
}

/* -- Section anchor hover link (hover H2/H3 → reveal #) -- */

.ij-article__body h2,
.ij-article__body h3 {
	position: relative;
}
.ij-article__body h2[id]::before,
.ij-article__body h3[id]::before {
	content: '#';
	position: absolute;
	left: -28px;
	color: var(--ij-blue);
	font-weight: 400;
	opacity: 0;
	transition: opacity .15s;
	text-decoration: none;
}
.ij-article__body h2[id]:hover::before,
.ij-article__body h3[id]:hover::before { opacity: 1; cursor: pointer; }

/* -- TOC per-section time -- */

.ij-toc__item a {
	display: flex !important;
	justify-content: space-between;
	gap: 12px;
}
.ij-toc__time {
	font-family: var(--ij-font-mono);
	font-size: 11px;
	color: var(--ij-ink-subtle);
	letter-spacing: 0;
	white-space: nowrap;
}

/* -- Sources block (foot of article) -- */

.ij-sources {
	background: var(--ij-surface-1);
	border: 1px solid var(--ij-hairline);
	padding: 20px 24px;
	margin: 48px 0 32px;
}
.ij-sources__summary {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.16px;
	color: var(--ij-ink);
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
}
.ij-sources__summary::before {
	content: '+';
	font-family: var(--ij-font-mono);
	color: var(--ij-blue);
	font-size: 18px;
	line-height: 1;
}
.ij-sources[open] .ij-sources__summary::before { content: '−'; }
.ij-sources__list {
	margin: 16px 0 0;
	padding-left: 20px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--ij-ink);
	letter-spacing: 0.16px;
}
.ij-sources__list li { margin-bottom: 8px; }

/* -- Article corrections hint -- */

.ij-article__corrections-hint {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--ij-hairline);
}

/* -- Footer RSS badge -- */

.ij-footer__rss {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	padding: 6px 12px;
	border: 1px solid var(--ij-inverse-surface-1);
	color: var(--ij-inverse-ink-muted);
	font-family: var(--ij-font-mono);
	font-size: 12px;
	letter-spacing: 0.32px;
	text-decoration: none;
	background: transparent;
}
.ij-footer__rss:hover {
	color: #fff;
	border-color: var(--ij-blue);
	text-decoration: none;
}
.ij-footer__rss svg { color: var(--ij-warning); }

/* -- Footer trust column (visual distinction) -- */

.ij-footer__col--trust .ij-footer__head { color: var(--ij-blue-on-dark); }

/* ==========================================================================
   DARK MODE — Carbon Gray-100 theme (manual + prefers-color-scheme respect)
   ========================================================================== */

[data-theme="dark"] {
	--ij-canvas:            #161616;
	--ij-surface-1:         #262626;
	--ij-surface-2:         #393939;
	--ij-hairline:          #393939;
	--ij-hairline-strong:   #ffffff;
	--ij-inverse-canvas:    #0d0d0d;
	--ij-inverse-surface-1: #262626;
	--ij-ink:               #f4f4f4;
	--ij-ink-muted:         #c6c6c6;
	--ij-ink-subtle:        #a8a8a8;
	--ij-inverse-ink:       #ffffff;
	--ij-inverse-ink-muted: #c6c6c6;
	--ij-blue:              #78a9ff;       /* IBM Blue-50 — passes AA on dark */
	--ij-blue-60:           #a6c8ff;
	--ij-blue-80:           #d0e2ff;
	--ij-blue-hover:        #4589ff;
	--ij-blue-on-dark:      #78a9ff;
	color-scheme: dark;
}

/* Dark-mode primary button text override (white text on Blue-50 fails contrast) */
[data-theme="dark"] body.ijcit-template .ij-btn--primary,
[data-theme="dark"] body.ijcit-template a.ij-btn--primary,
[data-theme="dark"] body.ijcit-template button.ij-btn--primary {
	color: #161616;
	background: var(--ij-blue);
}
[data-theme="dark"] body.ijcit-template .ij-btn--primary:hover { background: var(--ij-blue-hover); color: #161616; }

/* Hero soft-blue wash sits a touch deeper in dark mode */
[data-theme="dark"] .ij-hero {
	background-image: linear-gradient(180deg, rgba(120,169,255,0.06) 0%, rgba(120,169,255,0) 60%);
}

[data-theme="dark"] .ij-takeaways,
[data-theme="dark"] .ij-sources,
[data-theme="dark"] .ij-stat,
[data-theme="dark"] .ij-callout,
[data-theme="dark"] .ij-vertcard,
[data-theme="dark"] .ij-tile,
[data-theme="dark"] .ij-insight,
[data-theme="dark"] .ij-rail-widget {
	background: var(--ij-surface-1);
}

/* Smooth transition between themes (skip prefers-reduced-motion users) */
@media (prefers-reduced-motion: no-preference) {
	html { transition: background-color .2s ease; }
	body.ijcit-template,
	body.ijcit-template .ij-topnav,
	body.ijcit-template .ij-utility,
	body.ijcit-template .ij-band,
	body.ijcit-template .ij-tile,
	body.ijcit-template .ij-vertcard,
	body.ijcit-template .ij-callout,
	body.ijcit-template .ij-takeaways,
	body.ijcit-template .ij-rail-widget {
		transition: background-color .2s ease, color .2s ease, border-color .2s ease;
	}
}

/* ==========================================================================
   VIEW TRANSITIONS API (progressive enhancement)
   ========================================================================== */

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: .2s;
	animation-timing-function: ease;
}

::view-transition-old(article-title),
::view-transition-new(article-title) { animation-duration: .25s; }

::view-transition-old(article-feature),
::view-transition-new(article-feature) { animation-duration: .3s; }

/* Skip transitions for reduced-motion users */
@media (prefers-reduced-motion: reduce) {
	::view-transition-group(*),
	::view-transition-old(*),
	::view-transition-new(*) { animation: none !important; }
}

/* ==========================================================================
   PRINT — Carbon briefing print upgrades
   ========================================================================== */

@media print {
	@page {
		size: A4;
		margin: 2.4cm 2cm;
	}
	.ij-utility,
	.ij-topnav,
	.ij-mobile,
	.ij-cta-banner,
	.ij-footer,
	.ij-article__rail,
	.ij-progress,
	.ij-relgrid,
	.ij-band--surface,            /* hides orphaned "More from this desk" heading */
	.ij-section-head--row .ij-link,
	.ij-bookmark,
	.ij-theme-toggle,
	.ij-search-toggle,
	.ij-saved-toggle,
	.ij-search { display: none !important; }
	.ij-article__head--bg { background-image: none !important; }  /* no ink-waste on bg image */
	.ij-article__head--bg::before { background: none !important; } /* no overlay either */
	.ij-article__head--bg,
	.ij-article__head--bg * { color: #000 !important; }            /* readable in print */
	.ij-article__layout { grid-template-columns: 1fr; padding: 0; max-width: none; }
	body.ijcit-template { font-size: 11pt; color: #000; background: #fff; }
	.ij-article__body { font-size: 11pt; line-height: 1.45; max-width: none; }
	.ij-article__body h2 { font-size: 16pt; page-break-after: avoid; margin-top: 18pt; break-after: avoid; }
	.ij-article__body h3 { font-size: 13pt; page-break-after: avoid; break-after: avoid; }
	.ij-article__body p,
	.ij-article__body li { orphans: 3; widows: 3; }
	.ij-article__body img,
	.ij-article__body figure,
	.ij-stat,
	.ij-callout,
	.ij-takeaways,
	.ij-sources { page-break-inside: avoid; break-inside: avoid; }
	.ij-takeaways { background: #fff !important; border: 1px solid #000; border-left-width: 3px; }
	.ij-sources { background: #fff !important; border: 1px solid #000; }
	.ij-sources[open] .ij-sources__list { display: block !important; }
	.ij-sources__summary::before { content: '' !important; }
	.ij-article__body a {
		color: #000;
		text-decoration: underline;
	}
	.ij-article__body a[href^="http"]::after {
		content: ' (' attr(href) ')';
		font-size: 9pt;
		color: #555;
		word-break: break-all;
	}
	.ij-article__head::before {
		content: 'Ijcit · A specialised journal for European IT decision-makers';
		display: block;
		font-size: 9pt;
		color: #555;
		margin-bottom: 12pt;
		padding-bottom: 6pt;
		border-bottom: 1px solid #000;
	}
	.ij-article__foot::after {
		content: 'ijcit.org';
		display: block;
		margin-top: 18pt;
		padding-top: 6pt;
		border-top: 1px solid #000;
		font-size: 9pt;
		color: #555;
	}
}