/* =========================================================================
   NCERTTextbooks.com — clean white / blue study-material portal.
   Display + body: Lexend (a typeface designed to improve student reading).
   Interactions (reveal/.is-in, count, drawer, overlay, back-to-top) are driven
   by assets/js/main.js — class hooks (ink-*) are kept stable.
   ========================================================================= */

:root {
	/* v3.0.2 (owner 2026-08-18: "use home page colours unique color schema to all
	   website") — the homepage palette IS the site palette now. The names are
	   unchanged, so every rule that already reads a token followed automatically;
	   pipeline-content.css alone reads them 152 times. */
	--bg: #ffffff;
	--surface: #f7f7fb;
	--surface-2: #f2f2f8;
	--primary: #7b5cf0;
	--primary-d: #5f42c8;
	--primary-l: #efeafd;
	--ink: #16162e;
	--muted: #6b6b7b;
	--line: #e3e3e9;
	--accent: #3fae7c;
	--paper-card: #ffffff;
	--marker: #ffd83d;
	--radius: 16px;
	--radius-sm: 12px;
	--radius-pill: 999px;
	--shadow: 0 1px 2px rgba(33, 30, 24, .06), 0 10px 26px -16px rgba(33, 30, 24, .20);
	--shadow-hover: 0 10px 24px -8px rgba(33, 30, 24, .26);
	--ease-spring: cubic-bezier(.34, 1.32, .5, 1);
	--wrap: 1160px;
	--gap: 18px;
	--font: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	/* Editorial display + label faces — used on the HOMEPAGE only (scoped to
	   body.ink-home below); content pages stay on Lexend. */
	/* Headings share one face sitewide. The READING face (--font) is deliberately
	   NOT changed on content pages: Lexend is there because it is designed for
	   reading, and 380 study pages are read, not scanned (RULES §11). */
	--font-display: "Poppins", "Avenir Next", "Segoe UI", system-ui, sans-serif;
	--font-mono: "Spline Sans Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.6;
	color: var(--ink);
	background-color: var(--bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.ink-locked {
	overflow: hidden;
}

/* The search overlay + mobile drawer ship with the HTML [hidden] attribute and
   are revealed by JS (hidden=false). This MUST win over their own display rules,
   or the invisible fixed overlays sit over the page and eat every click. */
[hidden] {
	display: none !important;
}

a {
	color: var(--primary);
	text-decoration: none;
}

a:hover {
	color: var(--primary-d);
}

img {
	max-width: 100%;
	height: auto;
}

/* Headings stay near-black (owner 2026-08-18, after seeing purple headings live:
   "Use previous colour only for headings"). 3.0.7 moved them to --primary-d and
   the change is reverted here rather than left disabled — the purple read as
   decoration on a page whose job is reading, and near-black at 17.67:1 is the
   stronger choice for a study page. The brand colour stays on links and accents,
   where it marks something you can act on. */
h1,
h2,
h3 {
	color: var(--ink);
	line-height: 1.18;
	letter-spacing: -.02em;
	margin: 0;
}

.ink-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: 20px;
}

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

.skip-link {
	position: fixed;
	left: 12px;
	top: -60px;
	z-index: 999;
	background: var(--primary);
	color: #fff;
	padding: 10px 16px;
	border-radius: 10px;
	transition: top .2s;
}

.skip-link:focus {
	top: 12px;
	color: #fff;
}

:focus-visible {
	outline: 3px solid rgba(216, 73, 31, .45);
	outline-offset: 2px;
	border-radius: 6px;
}

/* ---------- Reading-progress bar (single posts) ---------- */
.ink-progress {
	position: fixed;
	inset: 0 0 auto 0;
	height: 3px;
	z-index: 60;
	background: transparent;
	pointer-events: none;
}

#ink-progress-bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--primary);
}

/* =========================================================================
   HEADER
   ========================================================================= */
.ink-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, .92);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--line);
	transition: box-shadow .25s, background .25s;
}

.ink-header.is-stuck {
	box-shadow: 0 6px 22px -16px rgba(33, 30, 24, .5);
}

.ink-header-row {
	display: flex;
	align-items: center;
	gap: 18px;
	height: 66px;
}

.ink-brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--primary-d);
	font-weight: 800;
}

.ink-brand:hover {
	color: var(--primary-d);
}

.ink-brand-mark {
	width: 30px;
	height: 30px;
	color: var(--primary);
	flex: none;
}

.ink-brand-mark svg {
	width: 100%;
	height: 100%;
}

.ink-brand-text {
	font-size: 1.32rem;
	letter-spacing: -.03em;
}

.ink-brand-text em {
	font-style: normal;
	color: var(--primary);
}

.ink-brand-dot {
	color: var(--muted);
	font-weight: 600;
}

.ink-nav {
	margin-left: auto;
}

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

.ink-nav a,
.ink-more-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 11px;
	border-radius: 10px;
	font-size: .95rem;
	font-weight: 600;
	color: var(--ink);
	white-space: nowrap;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	transition: background .18s, color .18s;
}

.ink-nav a:hover,
.ink-more-toggle:hover {
	background: var(--primary-l);
	color: var(--primary-d);
}

.ink-nav a.is-active {
	color: var(--primary);
	background: var(--primary-l);
}

.ink-more-toggle svg {
	width: 16px;
	height: 16px;
	transition: transform .2s;
}

/* More dropdown */
.ink-has-dropdown {
	position: relative;
}

.ink-dropdown {
	position: absolute;
	right: 0;
	top: calc(100% + 8px);
	min-width: 230px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 14px;
	box-shadow: var(--shadow);
	padding: 8px;
	display: grid;
	gap: 1px;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s, transform .18s, visibility .18s;
	z-index: 40;
}

.ink-has-dropdown:hover .ink-dropdown,
.ink-has-dropdown:focus-within .ink-dropdown,
.ink-dropdown.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ink-has-dropdown:focus-within .ink-more-toggle svg,
.ink-more-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.ink-dropdown a {
	display: block;
	padding: 9px 12px;
	border-radius: 9px;
	font-size: .92rem;
	font-weight: 500;
	color: var(--ink);
}

.ink-dropdown a:hover {
	background: var(--surface);
	color: var(--primary-d);
}

.ink-header-actions {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ink-icon-btn {
	width: 42px;
	height: 42px;
	display: inline-grid;
	place-items: center;
	border-radius: 11px;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--ink);
	cursor: pointer;
	transition: background .18s, border-color .18s;
}

.ink-icon-btn:hover {
	background: var(--primary-l);
	border-color: var(--primary-l);
	color: var(--primary-d);
}

.ink-icon-btn svg {
	width: 20px;
	height: 20px;
}

.ink-burger {
	display: none;
	flex-direction: column;
	gap: 4px;
}

.ink-burger span {
	width: 18px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .25s, opacity .2s;
}

.ink-burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}

.ink-burger[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.ink-burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* =========================================================================
   SEARCH OVERLAY
   ========================================================================= */
.ink-overlay {
	position: fixed;
	inset: 0;
	z-index: 80;
	background: rgba(33, 30, 24, .55);
	backdrop-filter: blur(4px);
	display: grid;
	place-items: start center;
	padding: 14vh 20px 20px;
	opacity: 0;
	transition: opacity .3s;
}

.ink-overlay.is-open {
	opacity: 1;
}

.ink-overlay-inner {
	width: 100%;
	max-width: 640px;
	background: #fff;
	border-radius: 20px;
	padding: 26px;
	box-shadow: 0 30px 80px -30px rgba(33, 30, 24, .6);
	transform: translateY(-12px);
	transition: transform .3s;
}

.ink-overlay.is-open .ink-overlay-inner {
	transform: translateY(0);
}

.ink-overlay-close {
	float: right;
	background: none;
	border: 0;
	font-size: 1.8rem;
	line-height: 1;
	color: var(--muted);
	cursor: pointer;
}

.ink-kicker {
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--primary);
	margin: 0 0 8px;
}

.ink-overlay-form {
	display: flex;
	gap: 8px;
	margin: 6px 0 14px;
}

.ink-overlay-form input {
	flex: 1;
	padding: 13px 16px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
}

.ink-overlay-form input:focus {
	outline: none;
	border-color: var(--primary);
}

.ink-overlay-form button,
.ink-hero-search button {
	padding: 13px 20px;
	border: 0;
	border-radius: 12px;
	background: var(--primary);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background .18s;
}

.ink-overlay-form button:hover,
.ink-hero-search button:hover {
	background: var(--primary-d);
}

.ink-overlay-hints {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	font-size: .9rem;
	color: var(--muted);
}

.ink-overlay-hints a {
	background: var(--surface);
	padding: 5px 11px;
	border-radius: var(--radius-pill);
	font-weight: 500;
}

/* =========================================================================
   MOBILE DRAWER
   ========================================================================= */
.ink-drawer {
	position: fixed;
	inset: 0;
	z-index: 80;
}

.ink-drawer-scrim {
	position: absolute;
	inset: 0;
	background: rgba(33, 30, 24, .5);
	border: 0;
	opacity: 0;
	transition: opacity .3s;
}

.ink-drawer.is-open .ink-drawer-scrim {
	opacity: 1;
}

.ink-drawer-panel {
	position: absolute;
	inset: 0 0 0 auto;
	width: min(86vw, 360px);
	background: #fff;
	padding: 20px;
	overflow-y: auto;
	transform: translateX(100%);
	transition: transform .32s cubic-bezier(.4, 0, .2, 1);
	box-shadow: -20px 0 60px -30px rgba(33, 30, 24, .6);
}

.ink-drawer.is-open .ink-drawer-panel {
	transform: translateX(0);
}

.ink-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 12px;
}

.ink-drawer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ink-drawer-links a {
	display: block;
	padding: 12px 12px;
	border-radius: 11px;
	font-weight: 600;
	color: var(--ink);
	transition: background .15s;
}

.ink-drawer-links a:hover,
.ink-drawer-links a.is-active {
	background: var(--primary-l);
	color: var(--primary-d);
}

.ink-drawer-classes {
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}

.ink-drawer-classes>div {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ink-drawer-classes a {
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 11px;
	background: var(--surface);
	font-weight: 700;
	color: var(--primary-d);
}

.ink-drawer-classes a:hover {
	background: var(--primary);
	color: #fff;
}

/* =========================================================================
   HERO
   ========================================================================= */
.ink-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
	border-bottom: 1px solid var(--line);
}

.ink-hero-grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
	background-size: 40px 40px;
	opacity: .5;
	-webkit-mask-image: radial-gradient(120% 80% at 80% -10%, #000 30%, transparent 75%);
	mask-image: radial-gradient(120% 80% at 80% -10%, #000 30%, transparent 75%);
}

.ink-hero-inner {
	position: relative;
	max-width: 880px;
	padding: clamp(48px, 8vw, 92px) 0 clamp(40px, 6vw, 72px);
}

.ink-hero-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid var(--line);
	color: var(--primary-d);
	font-size: .85rem;
	font-weight: 600;
	padding: 7px 14px;
	border-radius: var(--radius-pill);
	margin: 0 0 22px;
	box-shadow: var(--shadow);
}

.ink-pulse {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 0 rgba(78, 122, 90, .5);
	animation: ink-pulse 2s infinite;
}

@keyframes ink-pulse {
	70% {
		box-shadow: 0 0 0 8px rgba(78, 122, 90, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(78, 122, 90, 0);
	}
}

.ink-hero-title {
	font-size: clamp(2.1rem, 5.4vw, 3.6rem);
	font-weight: 800;
	letter-spacing: -.035em;
}

/* Still used by 404.php, search.php and template-notebook.php — the HOMEPAGE hero
   moved to the shared SVG marker stroke in 3.0.6, these three did not. Deleting
   this rule because the homepage stopped using it would have quietly flattened the
   highlight on all three; grep every template before removing a shared class.
   Its old gradient ended in a peach (#f3cdb9) mixed for the cream palette. */
.ink-marker {
	font-style: normal;
	color: var(--primary);
	position: relative;
	white-space: nowrap;
}

.ink-marker::after {
	content: "";
	position: absolute;
	left: -2px;
	right: -2px;
	bottom: .08em;
	height: .34em;
	z-index: -1;
	background: linear-gradient(90deg, var(--primary-l), #e0d6fb);
	border-radius: 4px;
}

.ink-hero-sub {
	font-size: clamp(1.02rem, 2vw, 1.2rem);
	color: var(--muted);
	max-width: 660px;
	margin: 18px 0 26px;
}

.ink-hero-search {
	display: flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: var(--radius-pill);
	padding: 7px 7px 7px 16px;
	max-width: 640px;
	box-shadow: var(--shadow);
	transition: border-color .2s, box-shadow .2s;
}

.ink-hero-search:focus-within {
	border-color: var(--primary);
	box-shadow: 0 0 0 4px rgba(216, 73, 31, .12);
}

.ink-hero-search svg {
	width: 20px;
	height: 20px;
	color: var(--muted);
	flex: none;
}

.ink-hero-search input {
	flex: 1;
	min-width: 0;
	border: 0;
	outline: none;
	font: inherit;
	font-size: 1rem;
	color: var(--ink);
	background: none;
}

.ink-hero-search button {
	border-radius: var(--radius-pill);
	white-space: nowrap;
}

.ink-hero-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 18px;
}

.ink-hero-quick a {
	font-size: .9rem;
	font-weight: 600;
	color: var(--primary-d);
	background: #fff;
	border: 1px solid var(--line);
	padding: 7px 14px;
	border-radius: var(--radius-pill);
	transition: background .16s, border-color .16s, color .16s;
}

.ink-hero-quick a:hover {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}

.ink-hero-stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin: 32px 0 0;
	max-width: 640px;
}

.ink-stat {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px 16px;
}

.ink-stat dd {
	margin: 0;
	font-size: 1.5rem;
	font-weight: 800;
	color: var(--primary-d);
	letter-spacing: -.02em;
}

.ink-stat dt {
	font-size: .82rem;
	color: var(--muted);
	font-weight: 500;
	margin-top: 2px;
}

/* =========================================================================
   SECTION SHELL
   ========================================================================= */
.ink-section {
	padding: clamp(44px, 6vw, 76px) 0;
}

.ink-section-tint {
	background: var(--surface);
}

.ink-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 28px;
}

.ink-title {
	font-size: clamp(1.5rem, 3.4vw, 2.1rem);
	font-weight: 800;
}

.ink-section-head .ink-kicker {
	margin-bottom: 6px;
}

.ink-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 700;
	color: var(--primary);
	white-space: nowrap;
	flex: none;
}

.ink-link:hover {
	color: var(--primary-d);
}

.ink-arr {
	width: 18px;
	height: 18px;
	transition: transform .2s;
}

.ink-link:hover .ink-arr {
	transform: translateX(3px);
}

/* =========================================================================
   STUDY BY CLASS — the signature class-number grid (10 & 12 featured)
   ========================================================================= */
.lc-class-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.lc-class-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 18px;
	min-height: 112px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	transition: transform .2s, box-shadow .2s, border-color .2s;
}

.lc-class-tile:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-hover);
	border-color: var(--primary);
	color: var(--ink);
}

.lc-class-num {
	font-size: 2.2rem;
	font-weight: 800;
	line-height: 1;
	color: var(--primary);
	letter-spacing: -.04em;
}

.lc-class-name {
	font-weight: 700;
	font-size: .98rem;
	margin-top: auto;
}

.lc-class-badge {
	position: absolute;
	top: 12px;
	right: 12px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff;
	background: var(--accent);
	padding: 3px 8px;
	border-radius: var(--radius-pill);
}

.lc-class-tile.is-featured {
	background: linear-gradient(160deg, var(--primary) 0%, var(--primary-d) 100%);
	border-color: transparent;
	color: #fff;
}

.lc-class-tile.is-featured:hover {
	color: #fff;
}

.lc-class-tile.is-featured .lc-class-num {
	color: #fff;
}

.lc-class-tile.is-featured .lc-class-badge {
	background: rgba(255, 255, 255, .22);
	color: #fff;
}

/* =========================================================================
   RESOURCE HUB CARDS (icon + tag + title + desc)
   ========================================================================= */
.lc-hub-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
}

.lc-hub-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 22px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	transition: transform .2s, box-shadow .2s, border-color .2s;
}

.lc-hub-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-hover);
	border-color: var(--primary);
	color: var(--ink);
}

.lc-hub-icon {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 13px;
	background: var(--primary-l);
	color: var(--primary);
	margin-bottom: 14px;
}

.lc-hub-icon svg {
	width: 24px;
	height: 24px;
}

.lc-hub-tag {
	position: absolute;
	top: 20px;
	right: 20px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--accent);
	background: rgba(78, 122, 90, .1);
	padding: 4px 9px;
	border-radius: var(--radius-pill);
}

.lc-hub-card h3 {
	font-size: 1.14rem;
	font-weight: 700;
}

.lc-hub-card p {
	color: var(--muted);
	font-size: .94rem;
	margin: 6px 0 16px;
}

.lc-hub-go {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 700;
	color: var(--primary);
	font-size: .92rem;
}

.lc-hub-card:hover .ink-arr {
	transform: translateX(3px);
}

/* =========================================================================
   SIMPLE LINK CARDS (board / references / practice / tools / competitive)
   ========================================================================= */
.lc-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}

.lc-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--ink);
	font-weight: 600;
	transition: transform .16s, box-shadow .18s, border-color .18s, background .18s;
}

.lc-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-hover);
	border-color: var(--primary);
	color: var(--primary-d);
}

.lc-card .ink-arr {
	color: var(--muted);
	flex: none;
	transition: transform .2s, color .2s;
}

.lc-card:hover .ink-arr {
	color: var(--primary);
	transform: translateX(3px);
}

/* =========================================================================
   SUBJECT CARDS (colour dot + name)
   ========================================================================= */
.lc-subject-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

.lc-subject {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 15px 17px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--ink);
	font-weight: 600;
	transition: transform .16s, box-shadow .18s, border-color .18s;
}

.lc-subject:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-hover);
	border-color: var(--primary);
	color: var(--ink);
}

.lc-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--dot, var(--primary));
	flex: none;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot, var(--primary)) 16%, transparent);
}

/* =========================================================================
   LATEST UPDATES
   ========================================================================= */
.lc-update-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 22px;
}

.lc-update-chips a {
	font-size: .86rem;
	font-weight: 600;
	color: var(--primary-d);
	background: #fff;
	border: 1px solid var(--line);
	padding: 6px 13px;
	border-radius: var(--radius-pill);
}

.lc-update-chips a:hover {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}

.lc-update-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
}

.lc-update-card {
	display: flex;
	flex-direction: column;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	color: var(--ink);
	transition: transform .2s, box-shadow .2s, border-color .2s;
}

.lc-update-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-hover);
	border-color: var(--primary);
	color: var(--ink);
}

.lc-update-cat {
	align-self: flex-start;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--primary);
	background: var(--primary-l);
	padding: 4px 10px;
	border-radius: var(--radius-pill);
	margin-bottom: 12px;
}

.lc-update-card h3 {
	font-size: 1.06rem;
	font-weight: 700;
	line-height: 1.35;
}

.lc-update-card time {
	margin-top: 10px;
	font-size: .84rem;
	color: var(--muted);
}

.lc-empty {
	color: var(--muted);
	background: #fff;
	border: 1px dashed var(--line);
	border-radius: var(--radius);
	padding: 28px;
	text-align: center;
}

/* =========================================================================
   FINAL CTA
   ========================================================================= */
.lc-cta {
	padding: clamp(44px, 6vw, 76px) 0;
	background: linear-gradient(160deg, var(--primary) 0%, var(--primary-d) 100%);
	color: #fff;
}

.lc-cta-inner {
	max-width: 720px;
}

.lc-cta h2 {
	color: #fff;
	font-size: clamp(1.6rem, 3.6vw, 2.3rem);
	font-weight: 800;
}

.lc-cta p {
	color: rgba(255, 255, 255, .82);
	font-size: 1.06rem;
	margin: 12px 0 24px;
}

.lc-cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.lc-btn {
	display: inline-flex;
	align-items: center;
	padding: 13px 24px;
	border-radius: var(--radius-pill);
	font-weight: 700;
	font-size: 1rem;
	transition: transform .16s, background .18s, color .18s;
}

.lc-btn:hover {
	transform: translateY(-2px);
}

.lc-btn-primary {
	background: #fff;
	color: var(--primary-d);
}

.lc-btn-primary:hover {
	background: #fff;
	color: var(--primary-d);
}

.lc-btn-ghost {
	background: rgba(255, 255, 255, .12);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, .4);
}

.lc-btn-ghost:hover {
	background: rgba(255, 255, 255, .2);
	color: #fff;
}

/* =========================================================================
   FOOTER
   ========================================================================= */
/* v3.0.0: the footer carries the study-material directory on EVERY page, so it
   became a light block. Edited in place rather than overridden further down —
   two declarations of one property in one file is the trap 2.9.11 recorded. */
.ink-footer {
	background: #f7f7fb;
	color: #52525f;
	border-top: 1px solid var(--line);
	padding: clamp(40px, 5vw, 56px) 0 28px;
}

.ink-footer-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px 26px;
}

@media (min-width: 560px) {
	.ink-footer-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ink-footer-brand {
		grid-column: 1 / -1;
	}
}

@media (min-width: 760px) {
	.ink-footer-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.ink-footer-brand {
		grid-column: 1 / -1;
	}
}

@media (min-width: 980px) {
	.ink-footer-grid {
		grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
		align-items: start;
	}

	.ink-footer-brand {
		grid-column: auto;
	}
}

.ink-footer .ink-brand {
	color: var(--ink);
}

.ink-footer .ink-brand:hover {
	color: var(--v-accent);
}

.ink-footer .ink-brand-mark {
	color: var(--v-accent);
}

.ink-footer .ink-brand-text em {
	color: var(--v-accent);
}

.ink-footer .ink-brand-dot {
	color: var(--muted);
}

.ink-footer-brand p {
	color: var(--muted);
	font-size: .94rem;
	margin: 14px 0 0;
	max-width: 36ch;
}

.ink-footer-legal {
	border-top: 1px solid var(--line);
	margin-top: 36px;
	padding-top: 22px;
}

.ink-footer-legal p {
	margin: 0;
	color: var(--muted);
	font-size: .86rem;
}

.ink-footer-disclaimer {
	margin-bottom: 8px !important;
	color: var(--muted) !important;
}

/* ---------- Back to top ---------- */
.ink-top {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 40;
	width: 46px;
	height: 46px;
	border-radius: 14px;
	background: var(--primary);
	color: #fff;
	border: 0;
	display: grid;
	place-items: center;
	cursor: pointer;
	box-shadow: var(--shadow-hover);
}

.ink-top svg {
	width: 20px;
	height: 20px;
}

.ink-top:hover {
	background: var(--primary-d);
}

/* =========================================================================
   ANIMATION (hero load-in + scroll reveal via main.js .is-in)
   ========================================================================= */
.ink-load {
	opacity: 0;
	transform: translateY(16px);
	animation: ink-rise .7s cubic-bezier(.2, .7, .2, 1) forwards;
	animation-delay: calc(var(--d, 0) * 90ms);
}

@keyframes ink-rise {
	to {
		opacity: 1;
		transform: none;
	}
}

.ink-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}

.ink-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}

	.ink-load,
	.ink-reveal {
		opacity: 1;
		transform: none;
	}

	/* Section underlines should still be visible without their draw animation. */
	.ink-home .ink-title .ink-underline::after {
		transform: scaleX(1);
	}

	/* Keep the brand ticker scrolling, just calmer (site-owner choice). */
	.ink-ticker-track {
		animation-duration: 90s !important;
	}
}

/* =========================================================================
   RESPONSIVE (mobile-first → up)
   ========================================================================= */
@media (min-width: 560px) {
	.lc-class-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.lc-subject-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.lc-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.lc-hub-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.lc-update-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ink-hero-stats {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 860px) {
	.lc-class-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.lc-subject-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.lc-card-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.lc-hub-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.lc-update-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1080px) {
	.lc-class-grid {
		grid-template-columns: repeat(6, 1fr);
	}

	.lc-card-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* Mobile header: hide inline nav, show burger */
@media (max-width: 920px) {
	.ink-nav {
		display: none;
	}

	.ink-burger {
		display: inline-flex;
	}
}

@media (min-width: 921px) {
	.ink-drawer {
		display: none;
	}
}

@media (max-width: 480px) {
	body {
		font-size: 16px;
	}

	.ink-hero-inner {
		padding: 30px 0 30px;
	}

	.ink-hero-title {
		font-size: clamp(1.55rem, 8.5vw, 2.05rem);
	}

	.ink-hero-sub {
		font-size: 1rem;
	}

	.ink-hero-stats {
		grid-template-columns: repeat(2, 1fr);
	}

	.ink-section-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.ink-hero-search {
		flex-wrap: wrap;
		border-radius: 18px;
	}

	.ink-hero-search input {
		width: 100%;
		padding: 6px 6px 6px 4px;
	}

	.ink-hero-search button {
		width: 100%;
	}
}

/* =========================================================================
   HOMEPAGE — editorial landing styles (icseboard.org "inkline" look).
   Fraunces serif display + Spline mono labels, SCOPED to body.ink-home so
   content/article pages keep Lexend. Plus the ticker band, the numbered
   subject-by-subject list and the popular/latest panels.
   ========================================================================= */

/* ---- Serif display + mono labels (homepage only) ---- */
.ink-home .ink-hero-title {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.06;
}

.ink-home .ink-hero-title span {
	display: block;
}

.ink-home .ink-title {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -.01em;
}

.ink-home .lc-cta h2 {
	font-family: var(--font-display);
	font-weight: 600;
	letter-spacing: -.01em;
}

.ink-home .lc-class-num {
	font-family: var(--font-display);
	font-weight: 700;
}

.ink-home .ink-stat dd {
	font-family: var(--font-display);
	font-weight: 700;
}

.ink-home .lc-hub-card h3 {
	font-family: var(--font-display);
	font-weight: 600;
}

.ink-home .ink-kicker {
	font-family: var(--font-mono);
	font-weight: 500;
	letter-spacing: .14em;
}

.ink-home .ink-hero-pill {
	font-family: var(--font-mono);
	font-weight: 500;
	letter-spacing: .12em;
	text-transform: uppercase;
	font-size: .72rem;
}

/* ---- Section-title draw-underline (overrides the inner-page highlight) ---- */
.ink-home .ink-title .ink-underline {
	display: inline;
	white-space: normal;
}

.ink-home .ink-title .ink-underline::after {
	left: 0;
	right: auto;
	bottom: -.14em;
	top: auto;
	width: 100%;
	height: .12em;
	z-index: auto;
	background: var(--primary);
	border-radius: 2px;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .75s cubic-bezier(.2, .7, .2, 1) .12s;
}

.ink-home .ink-section-head.is-in .ink-underline::after {
	transform: scaleX(1);
}

/* ---- Ticker band ---- */
.ink-ticker {
	background: var(--ink);
	color: #ffffff;
	overflow: hidden;
	padding: 11px 0;
	border-block: 1px solid var(--ink);
}

.ink-ticker-track {
	display: flex;
	gap: 26px;
	width: max-content;
	animation: ink-ticker 34s linear infinite;
	will-change: transform;
}

.ink-ticker:hover .ink-ticker-track {
	animation-play-state: paused;
}

.ink-ticker-track span {
	font-family: var(--font-mono);
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
}

.ink-ticker-track i {
	color: var(--marker);
	font-style: normal;
}

@keyframes ink-ticker {
	to {
		transform: translateX(-50%);
	}
}

/* ---- Subject by subject (numbered list) ---- */
.ink-sbj-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 40px;
}

.ink-sbj {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 6px;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	position: relative;
}

.ink-sbj::before {
	content: "";
	position: absolute;
	inset: 4px -12px;
	border-radius: 12px;
	background: var(--paper-card);
	opacity: 0;
	transform: scale(.97);
	transition: opacity .25s, transform .25s var(--ease-spring);
	z-index: 0;
}

.ink-sbj:hover {
	color: var(--ink);
}

.ink-sbj:hover::before {
	opacity: 1;
	transform: none;
	box-shadow: var(--shadow);
}

.ink-sbj>* {
	position: relative;
	z-index: 1;
}

.ink-sbj-index {
	font-family: var(--font-mono);
	font-size: .78rem;
	color: var(--primary-d);
	flex: none;
}

.ink-sbj-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.ink-sbj-body b {
	font-family: var(--font-display);
	font-size: 1.16rem;
	font-weight: 600;
}

.ink-sbj-body span {
	font-size: .84rem;
	color: var(--muted);
}

.ink-sbj .ink-arr {
	color: var(--primary);
	opacity: 0;
	transform: translateX(-6px);
	flex: none;
	transition: opacity .25s, transform .3s var(--ease-spring);
}

.ink-sbj:hover .ink-arr {
	opacity: 1;
	transform: none;
}

/* ---- Popular + Latest panels ---- */
.ink-two-col {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;
	align-items: start;
}

.ink-panel {
	background: var(--paper-card);
	border: 1.5px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(18px, 3vw, 26px);
	box-shadow: var(--shadow);
}

.ink-panel-head {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 14px;
}

.ink-panel-head h2 {
	font-family: var(--font-display);
	font-size: 1.4rem;
	font-weight: 600;
	margin: 0;
	flex: 1;
}

.ink-panel-tag {
	font-family: var(--font-mono);
	font-size: .66rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--accent);
	border: 1px solid currentColor;
	border-radius: var(--radius-pill);
	padding: 3px 10px;
	flex: none;
}

a.ink-panel-tag-link:hover {
	background: var(--accent);
	color: #fff;
}

.ink-rank-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ink-rank-list a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 8px;
	margin-inline: -8px;
	border-radius: 12px;
	color: var(--ink);
	transition: background-color .2s;
}

.ink-rank-list li+li a {
	border-top: 1px dashed var(--line);
}

.ink-rank-list a:hover {
	background: var(--bg);
	color: var(--ink);
}

.ink-rank-num {
	flex: none;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.02rem;
	border: 1.5px solid var(--ink);
	border-radius: 50%;
	transition: background-color .2s, transform .3s var(--ease-spring);
}

.ink-rank-list a:hover .ink-rank-num {
	background: var(--marker);
	transform: rotate(-8deg);
}

.ink-rank-body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.ink-rank-body b {
	font-weight: 700;
	font-size: .98rem;
}

.ink-rank-body span {
	font-size: .83rem;
	color: var(--muted);
}

.ink-rank-list .ink-arr {
	color: var(--primary);
	opacity: 0;
	flex: none;
	transition: opacity .2s, transform .3s var(--ease-spring);
}

.ink-rank-list a:hover .ink-arr {
	opacity: 1;
	transform: translateX(2px);
}

.ink-latest-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ink-latest-list a {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 8px;
	margin-inline: -8px;
	border-radius: 12px;
	color: var(--ink);
	transition: background-color .2s;
}

.ink-latest-list li+li a {
	border-top: 1px dashed var(--line);
}

.ink-latest-list a:hover {
	background: var(--bg);
}

.ink-latest-list b {
	font-weight: 600;
	font-size: .96rem;
}

.ink-latest-list a:hover b {
	color: var(--primary-d);
}

.ink-latest-list time {
	font-family: var(--font-mono);
	font-size: .72rem;
	color: var(--muted);
}

.ink-empty {
	color: var(--muted);
}

@media (min-width: 760px) {
	.ink-sbj-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ink-two-col {
		grid-template-columns: 1fr 1fr;
	}
}

/* =========================================================================
   INNER PAGES — posts, pages (incl. NCERT chapter pages), archive, search, 404
   ========================================================================= */
.ink-underline {
	position: relative;
	white-space: normal;
}

.ink-underline::after {
	content: "";
	position: absolute;
	left: -2px;
	right: -2px;
	bottom: .05em;
	height: .3em;
	z-index: -1;
	background: linear-gradient(90deg, var(--primary-l), #f3cdb9);
	border-radius: 4px;
}

/* Page / article hero band */
.ink-page-hero {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	padding: clamp(28px, 5vw, 52px) 0 clamp(22px, 3vw, 32px);
}

.ink-article-wrap {
	max-width: 820px;
}

.ink-crumbs ol {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
	padding: 0;
	font-size: .85rem;
	color: var(--muted);
}

.ink-crumbs li {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ink-crumbs li+li::before {
	content: "›";
	color: var(--muted);
}

.ink-crumbs a {
	color: var(--muted);
	font-weight: 500;
}

.ink-crumbs a:hover {
	color: var(--primary);
}

.ink-crumbs [aria-current="page"] {
	color: var(--ink);
	font-weight: 600;
}

/* Breadcrumb bar — full-width band directly below the primary nav, aligned to
   the layout's left edge (the sidebar column start), Apple-style chevrons. */
.ink-crumbs-bar {
	background: var(--paper-card);
	border-bottom: 1px solid var(--line);
}

.ink-crumbs-bar .ink-wrap {
	padding-block: 9px;
}

.ink-crumbs-bar .ink-crumbs {
	margin: 0;
}

.ink-crumbs-bar .ink-crumbs ol {
	margin: 0;
	font-size: .82rem;
	gap: 7px;
}

.ink-crumbs-bar .ink-crumbs li+li::before {
	content: "›";
	color: var(--muted);
	font-weight: 400;
}

.ink-crumbs-bar .ink-crumbs [aria-current="page"] {
	color: var(--ink);
}

.ink-chip {
	display: inline-block;
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--primary);
	background: var(--primary-l);
	padding: 5px 11px;
	border-radius: var(--radius-pill);
}

.ink-page-title {
	font-size: clamp(1.8rem, 4.4vw, 2.7rem);
	font-weight: 800;
	margin: 12px 0 0;
}

.ink-page-sub {
	color: var(--muted);
	margin-top: 12px;
}

.ink-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 9px;
	margin-top: 14px;
	font-size: .9rem;
	color: var(--muted);
}

.ink-meta-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--muted);
	display: inline-block;
}

.ink-meta-cat,
.ink-meta a {
	color: var(--primary);
	font-weight: 600;
}

/* Article body layout — single readable column by default; sidebar columns when
   the Customizer toggles them on (classes `has-left` / `has-right`). */
.ink-article-layout {
	padding-block: clamp(28px, 4vw, 48px);
}

.ink-article-content {
	max-width: 820px;
	margin-inline: auto;
}

@media (min-width: 1000px) {

	.ink-article-layout.has-left,
	.ink-article-layout.has-right {
		display: grid;
		gap: 40px;
		max-width: var(--wrap);
		align-items: start;
	}

	.ink-article-layout.has-left {
		grid-template-columns: 270px minmax(0, 1fr);
	}

	.ink-article-layout.has-right {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	.ink-article-layout.has-left.has-right {
		grid-template-columns: 248px minmax(0, 1fr) 290px;
	}

	.ink-article-layout.has-left .ink-article-content,
	.ink-article-layout.has-right .ink-article-content {
		margin-inline: 0;
		max-width: none;
	}
}

/* Small screens: stack as a single column with the ARTICLE FIRST, then the rails
   below it (so nothing is lost and the reader hits the content immediately). */
@media (max-width: 999px) {

	.ink-article-layout.has-left,
	.ink-article-layout.has-right {
		display: flex;
		flex-direction: column;
	}

	.ink-article-layout.has-left .ink-article-content,
	.ink-article-layout.has-right .ink-article-content {
		order: -1;
	}

	.ink-article-left,
	.ink-article-aside {
		margin-top: 32px;
	}
}

/* ---------- Published content prose (the_content) ---------- */
.ink-article-content {
	font-size: 1.06rem;
	line-height: 1.75;
	color: #25324f;
}

.ink-article-content>*+* {
	margin-top: 1.05em;
}

.ink-article-content h2 {
	font-size: clamp(1.4rem, 3vw, 1.75rem);
	font-weight: 800;
	margin-top: 1.7em;
	padding-top: .2em;
}

.ink-article-content h3 {
	font-size: 1.28rem;
	font-weight: 700;
	margin-top: 1.5em;
}

.ink-article-content h4 {
	font-size: 1.1rem;
	font-weight: 700;
	margin-top: 1.3em;
}

.ink-article-content p,
.ink-article-content li {
	color: #25324f;
}

.ink-article-content a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.ink-article-content a:hover {
	color: var(--primary-d);
}

.ink-article-content ul,
.ink-article-content ol {
	padding-left: 1.45em;
}

.ink-article-content li+li {
	margin-top: .4em;
}

.ink-article-content img,
.ink-featured-inline img {
	border-radius: 14px;
}

.ink-featured-inline {
	margin: 1.4em 0;
}

.ink-article-content blockquote {
	margin: 1.4em 0;
	padding: 4px 0 4px 18px;
	border-left: 4px solid var(--primary);
	color: var(--muted);
	font-style: italic;
}

.ink-article-content code {
	background: var(--surface);
	padding: 2px 6px;
	border-radius: 6px;
	font-size: .92em;
}

.ink-article-content pre {
	background: #16162e;
	color: #eceafd;
	padding: 16px;
	border-radius: 12px;
	overflow-x: auto;
}

.ink-article-content pre code {
	background: none;
	padding: 0;
}

.ink-article-content hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 2em 0;
}

/* ---------- Content tables (general + NCERT official-PDF table) ---------- */
.ink-article-content table,
.ce-ncert-pdf-table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.3em 0;
	font-size: .96rem;
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
}

.ink-article-content thead th,
.ce-ncert-pdf-table thead th {
	background: var(--surface-2);
	color: var(--primary-d);
	font-weight: 700;
	text-align: left;
}

.ink-article-content th,
.ink-article-content td,
.ce-ncert-pdf-table th,
.ce-ncert-pdf-table td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}

.ink-article-content tr:last-child td,
.ce-ncert-pdf-table tr:last-child td {
	border-bottom: 0;
}

.ink-article-content tbody tr:nth-child(even),
.ce-ncert-pdf-table tbody tr:nth-child(even) {
	background: #fafcff;
}

.ce-ncert-pdf-table a {
	font-weight: 600;
}

/* ---------- FAQ accordion (published content) ---------- */
.icse-faq-accordion {
	display: grid;
	gap: 10px;
	margin: 1.3em 0;
}

.icse-faq-item {
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}

.icse-faq-item summary {
	list-style: none;
	cursor: pointer;
	padding: 15px 18px;
	font-weight: 600;
	color: var(--ink);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.icse-faq-item summary::-webkit-details-marker {
	display: none;
}

.icse-faq-item summary::after {
	content: "+";
	font-size: 1.3rem;
	line-height: 1;
	color: var(--primary);
	transition: transform .2s;
	flex: none;
}

.icse-faq-item[open] summary {
	color: var(--primary-d);
	border-bottom: 1px solid var(--line);
}

.icse-faq-item[open] summary::after {
	transform: rotate(45deg);
}

.icse-faq-answer {
	padding: 14px 18px;
	color: #25324f;
}

.icse-faq-answer p:first-child {
	margin-top: 0;
}

/* ---------- Author byline + about box (published content) ---------- */
.icse-author-byline {
	font-size: .92rem;
	color: var(--muted);
	margin: 16px 0 0;
}

.icse-author-byline a,
.icse-author-byline__author {
	color: var(--primary);
	font-weight: 600;
}

.icse-author-byline__sep {
	color: var(--line);
}

.icse-author-about {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 22px 24px;
	margin: 36px auto 0;
	max-width: 820px;
}

.icse-author-about__eyebrow {
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--primary);
	margin: 0 0 6px;
}

.icse-author-about__name {
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ink);
}

.icse-author-about__divider {
	height: 1px;
	background: var(--line);
	margin: 14px 0;
}

.icse-author-about__role {
	color: var(--primary-d);
	/*font-weight: 600;*/
	font-size: .92rem;
	margin: 0 0 6px;
}

.icse-author-about__bio {
	color: var(--muted);
	margin: 0;
}

.icse-author-about__links {
	margin-top: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.icse-author-about__linkedin {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	border-radius: 8px;
	background: var(--ink, #0a2540);
	color: #fff;
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
}

.icse-author-about__linkedin::before {
	content: "in";
	display: inline-grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 3px;
	background: #fff;
	color: var(--ink, #0a2540);
	font-weight: 800;
	font-size: .72rem;
}

.icse-author-about__linkedin:hover {
	background: var(--primary-d, #1a4b8c);
}

.icse-author-about__profile {
	font-weight: 600;
}

/* ---------- Tag row, link-pages, post nav ---------- */
.ink-tag-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 28px;
}

.ink-link-pages {
	margin-top: 20px;
	font-weight: 600;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.ink-link-pages a {
	background: var(--surface);
	padding: 4px 11px;
	border-radius: 8px;
}

.ink-post-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	margin-top: 36px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}

.ink-post-nav a {
	font-weight: 700;
	color: var(--primary);
}

.ink-post-nav span {
	display: block;
	font-size: .8rem;
	color: var(--muted);
	font-weight: 500;
}

/* ---------- Sidebars (left class-nav accordion + right contextual rail) ---------- */
.ink-aside-sticky {
	position: sticky;
	top: 84px;
}

.ink-aside-box {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 14px 16px;
}

.ink-widget-title {
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--primary);
	margin: 0 0 6px;
}

.ink-classes-acc details {
	border-top: 1px solid var(--line);
}

.ink-classes-acc>.ink-widget-title+details {
	border-top: 0;
}

.ink-classes-acc summary {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 2px;
	font-weight: 600;
	color: var(--ink);
	border-radius: 8px;
}

.ink-classes-acc summary::-webkit-details-marker {
	display: none;
}

.ink-classes-acc summary::marker {
	content: "";
}

.ink-classes-acc summary:hover {
	color: var(--primary-d);
}

.ink-acc-num {
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 8px;
	background: var(--primary-l);
	color: var(--primary-d);
	font-size: .82rem;
	font-weight: 700;
	flex: none;
}

.ink-acc-chev {
	width: 17px;
	height: 17px;
	margin-left: auto;
	flex: none;
	color: var(--muted);
	transition: transform .2s;
}

.ink-classes-acc details[open]>summary .ink-acc-chev {
	transform: rotate(180deg);
}

.ink-classes-acc ul {
	list-style: none;
	margin: 0 0 8px;
	padding: 2px 0 4px 38px;
	display: grid;
	gap: 1px;
}

.ink-classes-acc ul a {
	display: block;
	padding: 7px 10px;
	border-radius: 8px;
	font-size: .9rem;
	font-weight: 500;
	color: var(--muted);
}

.ink-classes-acc ul a:hover,
.ink-classes-acc ul a.is-active {
	background: var(--surface);
	color: var(--primary-d);
}

.ink-acc-all {
	color: var(--primary) !important;
	font-weight: 600 !important;
}

.ink-widget {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px;
	margin-bottom: 16px;
}

.ink-smartnav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
	counter-reset: sn;
}

.ink-smartnav-list a,
.ink-smartnav-pop a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 10px;
	border-radius: 9px;
	font-size: .92rem;
	font-weight: 500;
	color: var(--ink);
}

.ink-smartnav-list a:hover,
.ink-smartnav-pop a:hover {
	background: var(--surface);
	color: var(--primary-d);
}

.ink-smartnav-list .ink-arr {
	width: 15px;
	height: 15px;
	margin-left: auto;
	color: var(--primary);
	flex: none;
}

.ink-smartnav-pop {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}

.ink-smartnav-cta {
	display: block;
	margin-top: 12px;
	padding: 14px 16px;
	border-radius: 13px;
	background: linear-gradient(160deg, var(--primary), var(--primary-d));
	color: #fff;
}

.ink-smartnav-cta:hover {
	color: #fff;
}

.ink-smartnav-cta-kicker {
	display: block;
	font-size: .72rem;
	font-weight: 600;
	opacity: .85;
}

.ink-smartnav-cta-label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	margin-top: 2px;
}

.ink-smartnav-cta-label .ink-arr {
	width: 16px;
	height: 16px;
}

/* ---------- Listing cards (archive / search / related) ---------- */
.ink-card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gap);
}

@media (min-width: 620px) {
	.ink-card-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 920px) {
	.ink-card-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ink-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform .2s, box-shadow .2s, border-color .2s;
}

.ink-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-hover);
	border-color: var(--primary);
}

.ink-card-media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--surface);
}

.ink-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ink-card-body {
	display: flex;
	flex-direction: column;
	padding: 18px;
	flex: 1;
}

.ink-card-cat {
	align-self: flex-start;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--primary);
	background: var(--primary-l);
	padding: 4px 9px;
	border-radius: var(--radius-pill);
	margin-bottom: 10px;
}

.ink-card-title {
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
}

.ink-card-title a {
	color: var(--ink);
}

.ink-card-title a:hover {
	color: var(--primary);
}

.ink-card-excerpt {
	color: var(--muted);
	font-size: .92rem;
	margin: 8px 0 0;
}

.ink-card-foot {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding-top: 14px;
	font-size: .82rem;
	color: var(--muted);
}

.ink-card-foot .ink-arr {
	margin-left: auto;
	width: 16px;
	height: 16px;
	color: var(--primary);
}

/* ---------- Archive / search / 404 helpers ---------- */
.ink-page-count {
	color: var(--muted);
	margin-top: 10px;
	font-size: .92rem;
}

.ink-page-search {
	display: flex;
	gap: 8px;
	max-width: 520px;
	margin-top: 18px;
}

.ink-page-search input {
	flex: 1;
	padding: 12px 16px;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	font: inherit;
}

.ink-page-search input:focus {
	outline: none;
	border-color: var(--primary);
}

.ink-page-search button {
	padding: 12px 20px;
	border: 0;
	border-radius: 12px;
	background: var(--primary);
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}

.ink-none {
	text-align: center;
	padding: 40px 0;
}

.ink-none-mark {
	font-size: 2.5rem;
}

.ink-none-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	margin-top: 18px;
}

.ink-404 {
	text-align: center;
}

.ink-404-code {
	font-size: clamp(4rem, 16vw, 8rem);
	font-weight: 800;
	line-height: 1;
	color: var(--primary);
}

/* ---------- Pagination ---------- */
.ink-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 40px;
}

.ink-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 10px;
	border-radius: 11px;
	border: 1px solid var(--line);
	background: #fff;
	color: var(--ink);
	font-weight: 600;
}

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

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

/* ---------- Comments + featured ---------- */
.ink-comments-wrap {
	max-width: 820px;
	margin-top: 36px;
}

.ink-comments-wrap .comment-list {
	list-style: none;
	padding: 0;
}

.ink-comments-wrap .comment-respond {
	margin-top: 24px;
}

.ink-comments-wrap input[type="text"],
.ink-comments-wrap input[type="email"],
.ink-comments-wrap input[type="url"],
.ink-comments-wrap textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1.5px solid var(--line);
	border-radius: 11px;
	font: inherit;
	margin-top: 6px;
}

.ink-comments-wrap .submit {
	padding: 12px 22px;
	border: 0;
	border-radius: 11px;
	background: var(--primary);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

/* ---------- Buttons used by content templates (page-download, 404, search) ---------- */
.ink-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 22px;
	border-radius: var(--radius-pill);
	font-weight: 700;
	background: var(--primary);
	color: #fff;
	transition: background .18s, transform .16s;
}

.ink-btn:hover {
	background: var(--primary-d);
	color: #fff;
	transform: translateY(-2px);
}

.ink-btn-light {
	background: #fff;
	color: var(--primary-d);
	border: 1px solid var(--line);
}

.ink-btn-verm {
	background: var(--primary);
	color: #fff;
}

.ink-btn-verm:hover {
	background: var(--primary-d);
	color: #fff;
}

/* =========================================================================
   EDITORIAL CONTENT PAGES (careerplan.in layout) — scoped to body.ink-editorial.
   Cream/dotted paper + vermillion accents + drop-cap + the Just In / Related /
   Quick Tools / Updates rail. Keeps the EXISTING Lexend font and heading styles
   (no serif swap). The homepage (body.ink-home) stays white/blue + Lexend.
   ========================================================================= */
.ink-editorial {
	--paper: #ffffff;
	--paper-card: #ffffff;
	--ink: #16162e;
	--muted: #6b6b7b;
	--verm: #7b5cf0;
	--verm-deep: #5f42c8;
	--line: #e3e3e9;
	background-color: var(--paper);
}

.ink-editorial .ink-main {
	color: var(--ink);
}

.ink-editorial .ink-page-hero {
	display: none;
}

.ink-editorial .ink-article {
	/*padding-top: clamp(18px, 3vw, 32px); */
}

/* article header now lives inside the centre column */
.ink-editorial .ink-article-head {
	margin-bottom: 22px;
}

.ink-editorial .ink-crumbs {
	margin-bottom: 12px;
}

.ink-editorial .ink-crumbs li+li::before {
	content: "→";
}

.ink-editorial .ink-crumbs a:hover {
	color: var(--verm);
}

.ink-editorial .ink-page-title {
	margin: 10px 0 0;
}

.ink-editorial .ink-chip {
	background: rgba(216, 73, 31, .1);
	color: var(--verm-deep);
}

.ink-editorial .ink-meta {
	color: var(--muted);
	margin-top: 16px;
}

.ink-editorial .ink-meta-cat,
.ink-editorial .ink-meta a {
	color: var(--verm);
}

/* body prose keeps the existing Lexend font + heading styles; only colour/accents
   change for the cream look (no font swap). */
.ink-editorial .ink-article-content {
	color: #2c2820;
}

.ink-editorial .ink-article-content a {
	color: var(--verm);
}

.ink-editorial .ink-article-content a:hover {
	color: var(--verm-deep);
}

.ink-editorial .ink-article-content blockquote {
	border-left-color: var(--verm);
}

.ink-editorial .ink-article-content>p:first-of-type::first-letter {
	font-weight: 800;
	float: left;
	font-size: 3.2em;
	line-height: .74;
	padding: 4px 10px 0 0;
	color: var(--verm);
}

/* tables / FAQ / author box recoloured for cream */
.ink-editorial .ink-article-content table,
.ink-editorial .ce-ncert-pdf-table {
	border-color: var(--line);
}

.ink-editorial .ink-article-content thead th,
.ink-editorial .ce-ncert-pdf-table thead th {
	background: #f0e8d6;
	color: var(--ink);
}

.ink-editorial .ink-article-content tbody tr:nth-child(even),
.ink-editorial .ce-ncert-pdf-table tbody tr:nth-child(even) {
	background: #fbf7ee;
}

.ink-editorial .ce-ncert-pdf-table a,
.ink-editorial .icse-faq-item summary::after {
	color: var(--verm);
}

.ink-editorial .icse-faq-item {
	background: var(--paper-card);
	border-color: var(--line);
}

.ink-editorial .icse-faq-item[open] summary {
	color: var(--verm-deep);
}

.ink-editorial .icse-author-about {
	background: var(--paper-card);
	border-color: var(--line);
}

.ink-editorial .icse-author-about__eyebrow,
.ink-editorial .icse-author-about__role,
.ink-editorial .icse-author-byline a,
.ink-editorial .icse-author-byline__author {
	/*color: var(--verm);*/
}

.ink-editorial .ink-post-nav {
	border-top-color: var(--line);
}

.ink-editorial .ink-post-nav a {
	color: var(--verm);
}

/* ---------- Rail cards: Just In / Related / Quick Tools ---------- */
.ink-rail-card {
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: 14px;
	padding: 18px;
	margin-bottom: 20px;
}

.ink-rail-title {
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ink);
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--ink);
}

.ink-rail-title::before {
	content: "◆";
	color: var(--verm);
	margin-right: 8px;
	font-size: .72em;
	vertical-align: 1px;
}

.ink-rail-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: rail;
	display: grid;
	gap: 13px;
}

.ink-rail-list li {
	counter-increment: rail;
	display: flex;
	gap: 9px;
	font-size: .92rem;
	line-height: 1.38;
}

.ink-rail-list li::before {
	content: counter(rail) ".";
	color: var(--verm);
	font-weight: 700;
	flex: none;
}

.ink-rail-list a {
	color: var(--ink);
	font-weight: 500;
}

.ink-rail-list a:hover {
	color: var(--verm);
}

.ink-tool-links {
	display: grid;
	gap: 8px;
}

.ink-tool-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	color: var(--ink);
	font-weight: 600;
	font-size: .92rem;
}

.ink-tool-links a:hover {
	border-color: var(--verm);
	color: var(--verm-deep);
}

.ink-tool-links .ink-arr {
	width: 16px;
	height: 16px;
	color: var(--verm);
	flex: none;
}

/* ---------- Dark "CBSE Updates" subscribe card ---------- */
.ink-updates-card {
	background: #211e18;
	border-radius: 14px;
	padding: 20px;
}

.ink-updates-title {
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 10px;
}

.ink-updates-title::before {
	content: "◆";
	color: var(--verm);
	margin-right: 8px;
}

.ink-updates-card p {
	color: #c9c2b2;
	font-size: .9rem;
	margin: 0 0 14px;
}

.ink-updates-form {
	display: grid;
	gap: 8px;
}

.ink-updates-form input {
	padding: 11px 13px;
	border-radius: 9px;
	border: 1px solid #4a463c;
	background: #2b2820;
	color: #fff;
	font: inherit;
	font-size: .95rem;
}

.ink-updates-form input::placeholder {
	color: #8a8474;
}

.ink-updates-form button {
	padding: 11px;
	border: 0;
	border-radius: 9px;
	background: var(--verm);
	color: #fff;
	font-weight: 700;
	cursor: pointer;
}

.ink-updates-form button:hover {
	background: var(--verm-deep);
}

/* =========================================================================
   BENTO HOMEPAGE SECTIONS  (NCERTTextbooks — everything below the hero + ticker).
   Namespaced `lcb-`, scoped to body.ink-home (article pages untouched). Reuses
   the existing cream-paper + vermillion tokens with a disciplined 60-30-10 split:
     60% base      → --bg cream page + --paper-card near-white cards (dominant)
     30% secondary → --surface warm bands, --line borders, --accent sage +
                     --marker amber for category-coding ONLY
     10% accent    → --primary vermillion: CTAs, key badges, hover, numerals
   Section shell (.ink-section / .ink-wrap / .ink-section-head / .ink-title) and
   scroll-reveal (.ink-reveal) are the existing theme parts — only the card grids
   inside each section are new here.
   ========================================================================= */
body.ink-home {
	--lcb-r: 20px;
	--lcb-r-lg: 26px;
	--lcb-r-sm: 14px;
	--lcb-gap: clamp(12px, 1.4vw, 18px);
	--lcb-ring: 0 0 0 4px rgba(216, 73, 31, .18);
}

/* ---- 12-col bento grid + span utilities (mobile 1-col → tablet 6 → desktop 12) ---- */
.ink-home .lcb-grid {
	display: grid;
	gap: var(--lcb-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.ink-home .lcb-grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

@media (min-width: 1024px) {
	.ink-home .lcb-grid {
		grid-template-columns: repeat(12, 1fr);
	}
}

.ink-home .lcb-3,
.ink-home .lcb-4,
.ink-home .lcb-6 {
	grid-column: 1 / -1;
}

@media (min-width: 640px) {
	.ink-home .lcb-6 {
		grid-column: span 6;
	}

	.ink-home .lcb-4 {
		grid-column: span 3;
	}

	.ink-home .lcb-3 {
		grid-column: span 3;
	}
}

@media (min-width: 1024px) {
	.ink-home .lcb-6 {
		grid-column: span 6;
	}

	.ink-home .lcb-4 {
		grid-column: span 4;
	}

	.ink-home .lcb-3 {
		grid-column: span 3;
	}
}

/* ---- shared card chrome ---- */
.ink-home .lcb-card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--lcb-r);
	padding: 20px;
	color: var(--ink);
	transition: transform .22s var(--ease-spring), box-shadow .22s, border-color .22s;
}

.ink-home .lcb-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-hover);
	border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
	color: var(--ink);
}

.ink-home .lcb-card:focus-visible {
	outline: none;
	box-shadow: var(--lcb-ring);
}

.ink-home .lcb-ico {
	width: 46px;
	height: 46px;
	display: grid;
	place-items: center;
	border-radius: 13px;
	background: var(--primary-l);
	color: var(--primary);
	margin-bottom: 14px;
	flex: none;
}

.ink-home .lcb-ico svg {
	width: 24px;
	height: 24px;
}

.ink-home .lcb-card h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.12rem;
}

.ink-home .lcb-card p {
	color: var(--muted);
	font-size: .92rem;
	margin: 6px 0 0;
}

.ink-home .lcb-go {
	margin-top: auto;
	padding-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
	color: var(--primary);
	font-size: .9rem;
}

.ink-home .lcb-card:hover .ink-arr {
	transform: translateX(3px);
}

/* ---- badges (sage/amber = 30% coding · accent/soft = 10% rationed) ---- */
.ink-home .lcb-badge {
	align-self: flex-start;
	font-family: var(--font-mono);
	font-size: .66rem;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--radius-pill);
}

.ink-home .lcb-badge-tr {
	position: absolute;
	top: 18px;
	right: 18px;
}

.ink-home .lcb-badge--accent {
	color: #fff;
	background: var(--primary);
}

.ink-home .lcb-badge--soft {
	color: var(--primary-d);
	background: var(--primary-l);
}

.ink-home .lcb-badge--sage {
	color: var(--accent);
	background: color-mix(in srgb, var(--accent) 12%, transparent);
}

.ink-home .lcb-badge--amber {
	color: #8a5a00;
	background: color-mix(in srgb, var(--marker) 30%, transparent);
}

/* ---- feature card (faint warm wash, roomier type — used sparingly) ---- */
.ink-home .lcb-card--feature {
	padding: 26px;
	border-radius: var(--lcb-r-lg);
}

.ink-home .lcb-card--feature::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--marker) 16%, transparent), transparent 60%);
}

.ink-home .lcb-card--feature>* {
	position: relative;
	z-index: 1;
}

.ink-home .lcb-card--feature h3 {
	font-size: 1.5rem;
}

.ink-home .lcb-card--feature p {
	font-size: 1rem;
	max-width: 46ch;
}

.ink-home .lcb-card--feature .lcb-ico {
	width: 54px;
	height: 54px;
}

/* ---- 1 · class numeral bento (signature; 10 & 12 are wide feature tiles) ---- */
.ink-home .lcb-classes {
	display: grid;
	gap: var(--lcb-gap);
	grid-template-columns: repeat(2, 1fr);
	grid-auto-flow: dense;
}

@media (min-width: 640px) {
	.ink-home .lcb-classes {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (min-width: 1024px) {
	.ink-home .lcb-classes {
		grid-template-columns: repeat(6, 1fr);
	}
}

.ink-home .lcb-cl {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-height: 128px;
	padding: 18px;
	background: var(--paper-card);
	border: 1px solid var(--line);
	border-radius: var(--lcb-r);
	color: var(--ink);
	transition: transform .2s var(--ease-spring), box-shadow .2s, border-color .2s;
}

.ink-home .lcb-cl:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-hover);
	border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
	color: var(--ink);
}

.ink-home .lcb-cl:focus-visible {
	outline: none;
	box-shadow: var(--lcb-ring);
}

.ink-home .lcb-num {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 2.4rem;
	line-height: 1;
	color: var(--primary);
	letter-spacing: -.04em;
}

.ink-home .lcb-nm {
	font-weight: 700;
	font-size: .96rem;
	margin-top: auto;
}

.ink-home .lcb-cl--feature {
	grid-column: span 2;
	background: linear-gradient(155deg, var(--primary) 0%, var(--primary-d) 100%);
	border-color: transparent;
	color: #fff;
	border-radius: var(--lcb-r-lg);
	min-height: 160px;
}

.ink-home .lcb-cl--feature:hover {
	color: #fff;
}

.ink-home .lcb-cl--feature .lcb-num {
	color: #fff;
	font-size: 3rem;
}

.ink-home .lcb-yr {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	font-family: var(--font-mono);
	font-size: .62rem;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(255, 255, 255, .2);
	padding: 4px 10px;
	border-radius: var(--radius-pill);
}

/* stretched-link: whole feature tile is clickable, quick-links stay clickable above it */
.ink-home .lcb-cl-main {
	display: flex;
	flex-direction: column;
	gap: 2px;
	color: inherit;
}

.ink-home .lcb-cl-main .lcb-nm {
	margin-top: 6px;
}

.ink-home .lcb-cl--feature .lcb-cl-main::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
}

.ink-home .lcb-cl-main:focus-visible {
	outline: none;
}

.ink-home .lcb-cl-main:focus-visible::after {
	box-shadow: var(--lcb-ring);
}

.ink-home .lcb-cl-quick {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 10px;
}

.ink-home .lcb-cl-quick a {
	font-size: .74rem;
	font-weight: 600;
	color: #fff;
	background: rgba(255, 255, 255, .16);
	border: 1px solid rgba(255, 255, 255, .26);
	padding: 5px 10px;
	border-radius: var(--radius-pill);
	transition: background .16s;
}

.ink-home .lcb-cl-quick a:hover {
	background: rgba(255, 255, 255, .3);
	color: #fff;
}

/* trailing tile that completes the last row (calm surface, not accent) */
.ink-home .lcb-cl-cta {
	justify-content: center;
	background: var(--surface);
	border-style: dashed;
	color: var(--ink);
}

.ink-home .lcb-cl-cta b {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.05rem;
}

.ink-home .lcb-cl-sub {
	font-size: .84rem;
	color: var(--muted);
}

.ink-home .lcb-cl-cta .lcb-go {
	margin-top: 8px;
}

@media (min-width: 640px) {
	.ink-home .lcb-cl-cta {
		grid-column: span 2;
	}
}

@media (min-width: 1024px) {
	.ink-home .lcb-cl-cta {
		grid-column: span 4;
	}
}

/* ---- compact "mini" directory cards (board resources / references / popular) ---- */
.ink-home .lcb-mini {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	padding: 16px 18px;
	border-radius: var(--lcb-r-sm);
	font-weight: 600;
}

.ink-home .lcb-mi {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	display: grid;
	place-items: center;
	background: var(--surface);
	color: var(--primary);
	flex: none;
}

.ink-home .lcb-mi svg {
	width: 19px;
	height: 19px;
}

.ink-home .lcb-lbl {
	flex: 1;
	min-width: 0;
	line-height: 1.3;
}

.ink-home .lcb-lbl small {
	display: block;
	font-weight: 500;
	font-size: .78rem;
	color: var(--muted);
}

.ink-home .lcb-mini .ink-arr {
	color: var(--muted);
	flex: none;
	transition: transform .2s var(--ease-spring), color .2s;
}

.ink-home .lcb-mini:hover .ink-arr {
	color: var(--primary);
	transform: translateX(3px);
}

/* ---- subject cards (per-subject colour dot = 30% coding layer) ---- */
.ink-home .lcb-subj {
	flex-direction: row;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	border-radius: var(--lcb-r-sm);
	border-left: 4px solid var(--dot, var(--primary));
}

.ink-home .lcb-si {
	font-family: var(--font-mono);
	font-size: .74rem;
	color: var(--muted);
	flex: none;
}

.ink-home .lcb-dot {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--dot, var(--primary));
	flex: none;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--dot, var(--primary)) 16%, transparent);
}

.ink-home .lcb-sb {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.ink-home .lcb-sb b {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.1rem;
	line-height: 1.2;
}

.ink-home .lcb-sb span {
	font-size: .8rem;
	color: var(--muted);
}

/* ---- popular rank panel + latest-updates panel ---- */
.ink-home .lcb-panels {
	display: grid;
	gap: var(--lcb-gap);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 900px) {
	.ink-home .lcb-panels {
		grid-template-columns: 1fr 1fr;
	}
}

.ink-home .lcb-panelhead {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 10px 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}

.ink-home .lcb-panelhead .ink-title {
	font-size: 1.4rem;
}

/* panel titles aren't .ink-section-head, so their draw-underline never triggers —
   show the marker statically instead. */
.ink-home .lcb-panelhead .ink-title .ink-underline::after {
	transform: scaleX(1);
}

.ink-home .lcb-stack {
	display: grid;
	gap: 12px;
}

.ink-home .lcb-rn {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	width: 34px;
	height: 34px;
	flex: none;
	display: grid;
	place-items: center;
	border: 1.5px solid var(--ink);
	border-radius: 50%;
	transition: background .2s, transform .3s var(--ease-spring);
}

.ink-home .lcb-rank:hover .lcb-rn {
	background: var(--marker);
	transform: rotate(-8deg);
}

.ink-home .lcb-upd-grid {
	display: grid;
	gap: 12px;
	grid-template-columns: 1fr;
}

@media (min-width: 520px) {
	.ink-home .lcb-upd-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.ink-home .lcb-upd .lcb-cat {
	margin-bottom: 12px;
}

.ink-home .lcb-upd h3 {
	font-family: var(--font);
	font-weight: 700;
	font-size: 1.04rem;
	line-height: 1.34;
}

.ink-home .lcb-upd time {
	display: block;
	margin-top: 8px;
	font-size: .82rem;
	color: var(--muted);
}

/* latest-updates rows: same row shape as the popular list, with a date chip
   standing in for the rank badge (freshness instead of ranking). */
.ink-home .lcb-updrow .lcb-when {
	font-family: var(--font-display);
	width: 34px;
	height: 34px;
	flex: none;
	display: grid;
	place-items: center;
	align-content: center;
	line-height: 1;
	border: 1.5px solid var(--ink);
	border-radius: 10px;
	transition: background .2s, transform .3s var(--ease-spring);
}

.ink-home .lcb-updrow .lcb-when b {
	font-weight: 700;
	font-size: .9rem;
}

.ink-home .lcb-updrow .lcb-when small {
	font-family: var(--font-mono);
	font-size: .52rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted);
}

.ink-home .lcb-updrow:hover .lcb-when {
	background: var(--marker);
	transform: rotate(-8deg);
}

.ink-home .lcb-updrow:hover .lcb-when small {
	color: inherit;
}

.ink-home .lcb-updrow .lcb-lbl {
	font-weight: 700;
}

.ink-home .lcb-updrow .lcb-lbl small {
	margin-top: 3px;
	font-family: var(--font-mono);
	font-size: .66rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--primary);
}

/* ---- three-state links: entries with no published page yet ---- */
.ink-home .is-soon,
.ink-dropdown .is-soon {
	cursor: default;
	opacity: .58;
}

/* kill every affordance that promises a destination */
.ink-home .is-soon:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--line);
	background: var(--surface);
}

.ink-home .is-soon .ink-arr,
.ink-home .is-soon .lcb-go .ink-arr {
	display: none;
}

.lcb-soon {
	flex: none;
	margin-left: auto;
	font-family: var(--font-mono);
	font-size: .6rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-pill);
	padding: 3px 8px;
}

.ink-home .lcb-go--soon {
	font-family: var(--font-mono);
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
}

.ink-dropdown .is-soon {
	display: flex;
	align-items: center;
	gap: 8px;
	justify-content: space-between;
}

/* ---- tools clusters (grouped chip lists) ---- */
.ink-home .lcb-cluster .lcb-ck {
	display: block;
	font-family: var(--font-mono);
	font-size: .66rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--primary);
	margin-bottom: 8px;
}

.ink-home .lcb-cluster h3 {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.14rem;
	margin-bottom: 12px;
}

.ink-home .lcb-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.ink-home .lcb-chips a {
	font-size: .86rem;
	font-weight: 600;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--line);
	padding: 7px 13px;
	border-radius: var(--radius-pill);
	transition: background .16s, color .16s, border-color .16s;
}

.ink-home .lcb-chips a:hover {
	background: var(--primary);
	border-color: var(--primary);
	color: #fff;
}

/* =========================================================================
   v3.0.0 — HOMEPAGE IN THE REFERENCE DESIGN + SITEWIDE STUDY DIRECTORY
   (owner 2026-08-18). New selectors only: nothing above this line is edited,
   so no existing rule can be cancelled out by these (the specificity trap
   recorded in 2.9.11).

   TWO SCOPES, DELIBERATELY DIFFERENT:
   · body.ink-home REDEFINES THE TOKENS, so the sections that were already
     there (ink-section, lcb-card, ink-title…) adopt the new palette and type
     without any of their rules being touched. One override, whole page.
   · The footer directory is SITEWIDE, so it must read well on cream article
     pages too. It therefore uses the THEME's tokens and takes its accent from
     --v-accent, which the homepage alone repoints at purple.
   ====================================================================== */

:root {
	--v-accent: var(--primary);
	/* vermillion everywhere by default */
	--v-navy: #16162e;
	--v-purple: #7b5cf0;
	--v-orange: #a496d9;
	--v-marker: #ffd83d;
	--v-lilac: #ecd6f3;
}

/* Every colour now comes from :root. What is left here is the one thing that is
   genuinely homepage-only: the homepage is SCANNED, so it sets Poppins as its body
   face; article pages are READ and keep Lexend. */
body.ink-home {
	--font: "Poppins", "Avenir Next", "Segoe UI", system-ui, -apple-system, sans-serif;
}

body.ink-home .ink-section-tint {
	background: linear-gradient(180deg, rgba(247, 247, 251, .9), rgba(247, 247, 251, 0));
}

/* ---------- headings with the marker stroke ---------- */
.v-h2 {
	font-family: var(--font-display);
	font-size: clamp(24px, 3.1vw, 34px);
	font-weight: 700;
	letter-spacing: -.01em;
	margin: 0 0 8px;
}

.v-mark {
	background: var(--v-lilac);
	padding: 2px 10px;
	border-radius: 3px;
}

.v-orange,
.v-plain {
	position: relative;
	display: inline-block;
	padding: 0 4px;
}

.v-orange {
	color: var(--v-orange);
}

.v-plain {
	color: var(--ink);
}

.v-sw {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -9px;
	width: 100%;
	height: 14px;
}

.v-lede {
	color: var(--muted);
	font-size: 15px;
	margin: 14px 0 0;
	max-width: 64ch;
}

.v-h3 {
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	margin: 30px 0 18px;
}

/* ---------- class tabs ---------- */
.v-tabs {
	display: flex;
	gap: 10px;
	overflow-x: auto;
	padding: 20px 2px 4px;
	scrollbar-width: none;
	scroll-snap-type: x proximity;
	-webkit-overflow-scrolling: touch;
}

.v-tabs::-webkit-scrollbar {
	display: none;
}

.v-tab {
	flex: 0 0 auto;
	scroll-snap-align: start;
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 11px 20px;
	cursor: pointer;
	transition: background .16s, color .16s, border-color .16s;
}

.v-tab:hover {
	border-color: var(--v-navy);
}

.v-tab.is-on {
	background: var(--v-navy);
	border-color: var(--v-navy);
	color: #fff;
}

.v-tab:focus-visible {
	outline: 3px solid var(--v-accent);
	outline-offset: 2px;
}

/* ---------- study-material cards ---------- */
.v-railwrap {
	position: relative;
}

.v-rail {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 4px 2px 10px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.v-rail::-webkit-scrollbar {
	display: none;
}

.v-card {
	flex: 0 0 202px;
	scroll-snap-align: start;
	position: relative;
	height: 264px;
	border-radius: 10px;
	background: var(--fill);
	padding: 22px 20px 0;
	overflow: hidden;
	color: var(--v-navy);
	display: block;
	transition: transform .2s ease, box-shadow .2s ease;
}

a.v-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 28px -14px rgba(20, 20, 40, .45);
}

a.v-card:focus-visible {
	outline: 3px solid var(--v-accent);
	outline-offset: 3px;
}

.v-ct {
	display: block;
	font-size: 19px;
	line-height: 1.32;
	position: relative;
	z-index: 2;
}

.v-ct b {
	font-weight: 600;
	display: block;
}

.v-ct i {
	font-style: normal;
	font-weight: 400;
	display: block;
}

.v-art {
	position: absolute;
	left: 50%;
	bottom: -18px;
	transform: translateX(-50%);
	width: 170px;
	height: 170px;
	z-index: 1;
}

.v-art svg {
	width: 100%;
	height: 100%;
	display: block;
}

.v-card.is-soon {
	filter: saturate(.28);
	opacity: .78;
	cursor: default;
}

.v-soon {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 3;
	font-size: 11px;
	font-weight: 600;
	color: var(--v-navy);
	background: #fff;
	border-radius: 999px;
	padding: 4px 10px;
}

.v-arw {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: var(--v-navy);
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	z-index: 5;
	box-shadow: 0 3px 10px rgba(20, 20, 40, .3);
}

.v-prev {
	left: -14px;
}

.v-next {
	right: -14px;
}

.v-arw:focus-visible {
	outline: 3px solid var(--v-accent);
	outline-offset: 2px;
}

.v-count {
	font-size: 13px;
	color: var(--muted);
	margin: 12px 0 0;
}

/* ---------- NCERT books shelf (same rail component) ---------- */
.v-bk {
	scroll-snap-align: start;
	flex: 0 0 186px;
	display: flex;
	height: 240px;
	border-radius: 5px 10px 10px 5px;
	overflow: hidden;
	color: var(--v-navy);
	background: #fff;
	box-shadow: 0 1px 3px rgba(20, 20, 40, .12), 0 14px 26px -16px rgba(20, 20, 40, .42);
	transition: transform .2s ease, box-shadow .2s ease;
}

.v-bk:hover {
	transform: translateY(-6px);
	box-shadow: 0 3px 6px rgba(20, 20, 40, .14), 0 24px 38px -18px rgba(20, 20, 40, .5);
}

.v-bk:focus-visible {
	outline: 3px solid var(--v-accent);
	outline-offset: 3px;
}

.v-bk-sp {
	flex: 0 0 14px;
	background: var(--sp);
	box-shadow: inset -4px 0 6px -3px rgba(0, 0, 0, .35);
}

.v-bk-fc {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 16px 15px;
	border: 1px solid var(--line);
	border-left: 0;
}

.v-bk-k {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .16em;
	color: var(--sp);
}

.v-bk-n {
	font-size: 58px;
	font-weight: 700;
	line-height: .95;
	margin-top: auto;
}

.v-bk-t {
	font-size: 15px;
	font-weight: 600;
	margin-top: 6px;
}

.v-bk-s {
	font-size: 12px;
	color: var(--muted);
	margin-top: 2px;
}

.v-bk-x {
	font-size: 11px;
	color: #6f6f82;
	margin-top: 9px;
	padding-top: 9px;
	border-top: 1px solid var(--line);
	line-height: 1.4;
}

/* ---------- sitewide study-material directory (redesigned 3.0.3) ----------
   The first version was four plain columns of hairline-separated lists — honest,
   but it read as a sitemap dump. What makes a link list scannable is RANK: a
   group you can find, a class row you can read at a glance, and subjects that
   look like separate destinations instead of one long comma-run. So subjects
   became chips, each group got a short accent rule rather than a full-width
   hairline, and the columns got real separation. Colours are the site tokens
   only — no new palette. */
.v-footdir {
	padding-top: 4px;
}

.v-mega {
	display: flex;
	gap: 0;
	align-items: stretch;
	margin-top: 30px;
}

.v-col {
	flex: 1 1 0;
	min-width: 0;
	padding: 0 26px;
	border-left: 1px solid var(--line);
}

.v-col:first-child {
	padding-left: 0;
	border-left: 0;
}

.v-col:last-child {
	padding-right: 0;
}

.v-gr {
	margin: 0 0 28px;
}

.v-gr:last-child {
	margin-bottom: 0;
}

.v-gr summary {
	list-style: none;
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 14px;
	position: relative;
	padding-bottom: 10px;
}

.v-gr summary::-webkit-details-marker {
	display: none;
}

/* a short accent rule reads as a designed heading; a full-width hairline reads
   as a table border */
.v-gr summary::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 26px;
	height: 2px;
	border-radius: 2px;
	background: var(--v-accent);
}

.v-gr h3 {
	font-family: var(--font-display);
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: -.005em;
	color: var(--ink);
}

.v-gr h3 a {
	color: var(--ink);
}

.v-gr h3 a:hover {
	color: var(--v-accent);
}

.v-gr-n {
	margin-left: auto;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--muted);
	background: var(--surface);
	border-radius: 999px;
	padding: 3px 9px;
	white-space: nowrap;
}

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

.v-gr li {
	margin: 0 0 14px;
}

.v-gr li:last-child {
	margin-bottom: 0;
}

.v-gr li>a,
.v-nolink {
	display: block;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--ink);
}

.v-gr li>a:hover {
	color: var(--v-accent);
}

.v-nolink {
	color: var(--muted);
	font-weight: 400;
}

/* Subjects are separate destinations, so they get separate shapes. */
.v-sub {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin-top: 7px;
}

.v-sub a {
	font-size: 11.5px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--muted);
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 3px 8px;
	white-space: nowrap;
	transition: background .14s, color .14s, border-color .14s;
}

.v-sub a:hover {
	background: var(--primary-l);
	border-color: var(--v-accent);
	color: var(--primary-d);
}

.v-sub a:focus-visible {
	outline: 2px solid var(--v-accent);
	outline-offset: 1px;
}

.v-footbar {
	margin-top: 40px;
	border-top: 1px solid var(--line);
	padding: 24px 0 4px;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
	justify-content: space-between;
}

.v-brand {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	color: var(--ink);
}

.v-brand em {
	font-style: normal;
	color: var(--v-accent);
}

.v-legal {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	font-size: 13px;
}

.v-legal a {
	color: var(--muted);
}

.v-legal a:hover {
	color: var(--v-accent);
}

/* ---------- phone is the primary view (RULES §11) ---------- */
@media (max-width: 1000px) {
	.v-mega {
		flex-wrap: wrap;
	}

	.v-col {
		flex: 1 1 44%;
		padding: 0 20px;
		border-left: 1px solid var(--line);
	}

	.v-col:nth-child(odd) {
		padding-left: 0;
		border-left: 0;
	}
}

@media (max-width: 640px) {
	.v-h2 {
		font-size: 24px;
	}

	.v-h3 {
		font-size: 19px;
		margin: 24px 0 14px;
	}

	.v-tab {
		padding: 10px 16px;
		font-size: 14px;
	}

	.v-card {
		flex-basis: 176px;
		height: 246px;
	}

	.v-bk {
		flex-basis: 158px;
		height: 214px;
	}

	.v-bk-n {
		font-size: 48px;
	}

	.v-arw {
		display: none;
	}

	.v-mega {
		flex-direction: column;
		gap: 0;
	}

	.v-col {
		display: contents;
	}

	.v-col {
		display: contents;
		padding: 0;
		border-left: 0;
	}

	.v-gr {
		order: var(--o);
		margin: 0 0 10px;
		border: 1px solid var(--line);
		border-radius: 10px;
		padding: 14px 16px;
		background: var(--paper-card);
	}

	.v-gr summary {
		border-bottom: 0;
		padding-bottom: 0;
		margin-bottom: 0;
		cursor: pointer;
		min-height: 44px;
		align-items: center;
	}

	.v-gr summary::before {
		display: none;
	}

	.v-gr summary::after {
		content: "+";
		margin-left: 8px;
		color: var(--v-accent);
		font-weight: 600;
	}

	.v-gr[open] summary::after {
		content: "\2212";
	}

	.v-gr[open] ul {
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px solid var(--line);
	}

	/* A chip is a link, and a link on a phone is a THUMB target. At desktop size
	   these are 24px tall, which is fine for a pointer and too small for a thumb
	   (RULES §11 asks for ~44px). Padding, not font size, does the work — the
	   label stays the same size, the target grows around it. */
	.v-sub {
		gap: 8px;
		margin-top: 10px;
	}

	.v-sub a {
		font-size: 12.5px;
		padding: 11px 14px;
		min-height: 40px;
		display: inline-flex;
		align-items: center;
	}

	.v-footbar {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
}

/* A class whose hub is not published yet: real label, no link, children still
   linked. Never a 404 in a footer that renders on every page. */
.v-nolink {
	font-size: 13.5px;
	color: var(--muted);
	line-height: 1.45;
}

/* =========================================================================
   3.0.5 — the two homepage panels are ONE component in two flavours
   (owner 2026-08-18: "for Latest Updates you used capital letter this make not
   matching same length to the most read even though we used 6 items").

   Six rows each was never the problem. Most-read titles are short curated
   labels on one line; Latest-updates titles are full page titles that wrap to
   two or three. Add a mono, uppercase, letter-spaced "UPDATE" where the other
   column has plain sentence-case meta, and the two columns end a screen apart.
   Fix: the title gets its own element in BOTH columns and is clamped to one
   line, and the meta line is styled identically on both sides. Same structure,
   same rhythm, same finishing line.
   ====================================================================== */
.ink-home .lcb-lbl b {
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.35;
}

.ink-home .lcb-lbl small {
	display: block;
	margin-top: 2px;
	font-family: var(--font);
	font-weight: 400;
	font-size: 12.5px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--muted);
}

/* the update rows had their own mono/uppercase treatment — it is gone, so the
   two columns cannot drift apart again */
.ink-home .lcb-updrow .lcb-lbl {
	font-weight: inherit;
}

.ink-home .lcb-updrow .lcb-lbl small {
	margin-top: 2px;
	font-family: var(--font);
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--muted);
}

/* one row height on both sides, so six rows really do end level */
.ink-home .lcb-rank,
.ink-home .lcb-updrow {
	min-height: 74px;
}

@media (max-width: 640px) {
	.ink-home .lcb-lbl b {
		font-size: 14.5px;
	}

	.ink-home .lcb-rank,
	.ink-home .lcb-updrow {
		min-height: 68px;
	}
}

/* The kicker above each panel heading belongs to the same system as the
   headings it introduces. */
.ink-home .ink-kicker {
	font-family: var(--font);
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--primary);
	margin: 0 0 8px;
}

/* The hero sets the biggest type on the site, so its marker stroke needs more
   room beneath it than a section heading's — same component, one variable. */
.ink-home .ink-hero-title .v-sw {
	bottom: -14px;
	height: 18px;
}