/*
 * Kingy AI Referral Index — hub + methodology.
 *
 * Scoped under .kri-page so nothing can leak to the other 677 pages.
 * Site design tokens only (parent theme :root) — no new type families.
 *
 * COLOUR RULE: the five bucket hues are DATA colours and appear only on marks,
 * swatches and bucket chips. Page chrome, headings, values and labels wear ink
 * tokens. A number never wears its series colour — the mark beside it carries
 * the identity. Do not "brighten" a heading with a bucket hue.
 *
 * DARK MODE: the site ships no prefers-color-scheme rules anywhere, so this page
 * renders light like every other page. Flipping only this hub would put a dark
 * page inside light site chrome. Every colour below is therefore a custom
 * property, so adopting a site-wide dark mode later is a token swap here, not a
 * rewrite. Validated dark steps, ready to drop in:
 *   behavioral #bf4306 · clickstream #12a195 · site-side #204dda
 *   network-cdn #ad0266 · self-report-forecast #ae9208
 */

.kri-page {
	--kri-surface: #fff;
	--kri-base: #f4f5f2;
	--kri-ink: #16181a;
	--kri-ink-soft: #5c6165;
	--kri-ink-faint: #8a9095;
	--kri-line: #e3e5e0;
	--kri-line-soft: #eef0ec;
	--kri-warn: #8a5a00;
	--kri-radius: 14px;
	--kri-display: 'Bricolage Grotesque', sans-serif;
	--kri-body: 'Schibsted Grotesk', sans-serif;
	--kri-mono: 'Spline Sans Mono', monospace;

	color: var(--kri-ink);
	font-family: var(--kri-body);
}

/* The template owns its own width; it renders outside .entry-content, so the
   theme's 760px prose cap and the :has(> style) un-cap never apply here. */
.kri-page .kri-wrap {
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 24px;
}
.kri-page .kri-measure { max-width: 72ch; }

/* ---------- hero ---------- */
.kri-hero { padding: 56px 0 40px; border-bottom: 1px solid var(--kri-line); }
.kri-hero__wave {
	display: inline-block;
	font: 600 13px/1 var(--kri-mono);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--kri-ink-soft);
	border: 1px solid var(--kri-line);
	border-radius: 999px;
	padding: 7px 13px;
	margin-bottom: 18px;
}
.kri-hero__title {
	font: 700 clamp(34px, 5vw, 56px)/1.06 var(--kri-display);
	letter-spacing: -.02em;
	margin: 0 0 16px;
}
.kri-hero__thesis {
	font-size: clamp(17px, 2vw, 20px);
	line-height: 1.55;
	color: var(--kri-ink-soft);
	max-width: 62ch;
	margin: 0 0 22px;
}
.kri-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
.kri-badge-method {
	display: inline-flex; align-items: center; gap: 8px;
	font: 600 14px/1 var(--kri-body);
	border: 1px solid var(--kri-line);
	background: var(--kri-surface);
	border-radius: 8px;
	padding: 9px 13px;
	text-decoration: none;
	color: var(--kri-ink);
}
.kri-badge-method:hover { border-color: var(--kri-ink); }
.kri-badge-method strong { font-family: var(--kri-mono); font-weight: 600; }

/* ---------- anchor landing ----------
   The theme's .site-header is position:sticky, 69px tall at top:4px, so it
   occupies the first ~73px of the viewport. Without this, every cited deep
   link (#dark-traffic-delta, #reconciled-ranges, #how-to-cite) scrolls its
   target to y=0 and parks it UNDER the header — on a page whose entire purpose
   is that individual sections get cited, that is a real defect, not polish.
   88px = 73px of header + breathing room. */
.kri-page [id] { scroll-margin-top: 88px; }

/* ---------- hero stat: our own measured figure ---------- */
.kri-hero__stat { margin: 22px 0 0; }
.kri-hero__stat a {
	display: inline-flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
	text-decoration: none; color: inherit;
	background: var(--kri-surface); border: 1px solid var(--kri-line);
	border-radius: var(--kri-radius); padding: 16px 20px;
}
.kri-hero__stat a:hover { border-color: var(--kri-ink); }
.kri-hero__stat-num { font: 700 clamp(26px, 3.4vw, 34px)/1 var(--kri-display); letter-spacing: -.02em; }
.kri-hero__stat-label { font-size: 14.5px; color: var(--kri-ink-soft); max-width: 42ch; }

/* ---------- freshness ---------- */
.kri-freshness {
	margin: 18px 0 0; font-size: 14px; color: var(--kri-ink-soft);
	max-width: 74ch; line-height: 1.55;
}
.kri-freshness__stale { color: var(--kri-warn); }

/* ---------- sections ---------- */
.kri-section { padding: 56px 0; border-bottom: 1px solid var(--kri-line-soft); }
.kri-section > h2 {
	font: 700 clamp(24px, 3vw, 34px)/1.15 var(--kri-display);
	letter-spacing: -.015em;
	margin: 0 0 12px;
}
.kri-section > h3 { font: 700 18px/1.3 var(--kri-display); margin: 26px 0 8px; }
.kri-section__lede { color: var(--kri-ink-soft); max-width: 68ch; margin: 0 0 24px; }
.kri-page p { margin: 0 0 14px; }

.kri-draft {
	display: inline-block;
	font: 700 11px/1 var(--kri-mono);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--kri-warn);
	background: rgba(138, 90, 0, .09);
	border: 1px dashed var(--kri-warn);
	border-radius: 6px;
	padding: 7px 10px;
	margin: 0 0 20px;
}
.kri-placeholder { color: var(--kri-ink-faint); font-style: italic; }
.kri-warn { color: var(--kri-warn); font-weight: 600; }

/* ---------- chart ---------- */
.kri-chart__panel { margin: 0 0 34px; }
.kri-chart__panel-title { font: 700 17px/1.3 var(--kri-display); margin: 0 0 4px; }
.kri-chart__panel-note { color: var(--kri-ink-soft); font-size: 14.5px; margin: 0 0 12px; max-width: 68ch; }

/* Dense charts scroll inside their own box rather than squashing text to
   illegibility or forcing the page to scroll sideways. */
.kri-chart__scroll {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	background: var(--kri-surface);
	border: 1px solid var(--kri-line);
	border-radius: var(--kri-radius);
	padding: 8px 4px;
}
.kri-chart__svg { display: block; width: 100%; min-width: 660px; height: auto; }

.kri-chart__svg .kri-row-label { font: 600 12.5px var(--kri-body); fill: var(--kri-ink); }
.kri-chart__svg .kri-row-org   { font: 400 11px var(--kri-body);   fill: var(--kri-ink-faint); }
.kri-chart__svg .kri-value     { font: 600 12.5px var(--kri-mono); fill: var(--kri-ink); }
.kri-chart__svg .kri-axis-label{ font: 400 11px var(--kri-mono);   fill: var(--kri-ink-faint); }
.kri-chart__svg .kri-group     { font: 700 11px var(--kri-body);   fill: var(--kri-ink-soft); letter-spacing: .04em; text-transform: uppercase; }
.kri-chart__svg .kri-grid      { stroke: var(--kri-line-soft); stroke-width: 1; }
.kri-chart__svg .kri-axis      { stroke: var(--kri-line); stroke-width: 1; }
.kri-chart__svg .kri-zero      { stroke: var(--kri-ink-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.kri-chart__svg .kri-row.is-faded .kri-row-label,
.kri-chart__svg .kri-row.is-faded .kri-value { fill: var(--kri-ink-soft); }
.kri-chart__svg .kri-row.is-faded { opacity: .75; }

.kri-legend {
	list-style: none; margin: 6px 0 0; padding: 0;
	display: flex; flex-wrap: wrap; gap: 10px 22px;
	font-size: 13.5px; color: var(--kri-ink-soft);
}
.kri-legend li { display: flex; align-items: center; gap: 8px; }
.kri-legend__swatch {
	width: 13px; height: 13px; border-radius: 3px; flex: none;
	border: 1px solid rgba(0, 0, 0, .12);
}
.kri-legend__swatch--hatch {
	background: repeating-linear-gradient(45deg, var(--kri-ink-faint) 0 2px, transparent 2px 5px);
}
.kri-legend__meta { color: var(--kri-ink-faint); }

.kri-chart__excluded {
	margin: 18px 0 0; padding: 13px 15px;
	background: rgba(138, 90, 0, .06);
	border-left: 3px solid var(--kri-warn);
	border-radius: 0 8px 8px 0;
	font-size: 14.5px; max-width: 74ch;
}
.kri-chart__download { margin: 16px 0 0; font-size: 14.5px; color: var(--kri-ink-soft); }
.kri-chart__download a { color: var(--kri-ink); font-weight: 600; }
.kri-chart__empty { color: var(--kri-ink-faint); font-style: italic; padding: 18px; }

/* ---------- reconciled range cards ---------- */
.kri-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kri-card {
	background: var(--kri-surface);
	border: 1px solid var(--kri-line);
	border-radius: var(--kri-radius);
	padding: 24px;
}
.kri-card__label { font: 700 15px/1.2 var(--kri-body); margin: 0 0 10px; color: var(--kri-ink-soft); }
.kri-card__range { font: 700 clamp(28px, 4vw, 40px)/1 var(--kri-display); margin: 0 0 10px; letter-spacing: -.02em; }
.kri-card__single {
	font-size: 14px; margin: 0 0 12px; padding: 11px 13px;
	background: var(--kri-base); border-radius: 8px;
}
.kri-card__single-lead { display: block; font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--kri-ink-soft); margin-bottom: 3px; }
.kri-card__single strong { font-size: 17px; }
.kri-card__single-note { color: var(--kri-ink-soft); }
.kri-card__n { font-size: 13.5px; color: var(--kri-ink-soft); margin: 0 0 8px; }
.kri-card__thin {
	font-size: 13.5px; color: var(--kri-warn); margin: 0 0 12px;
	padding-left: 11px; border-left: 2px solid var(--kri-warn);
}
.kri-card__confidence { font-size: 14px; color: var(--kri-ink-soft); margin: 0 0 14px; }
.kri-card__link { margin: 0; font-size: 14px; }
.kri-card__link a { color: var(--kri-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* ---------- seven deltas ---------- */
.kri-deltas { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.kri-delta {
	border-left: 2px solid var(--kri-line);
	padding: 2px 0 2px 20px;
	max-width: 74ch;
}
.kri-delta:target { border-left-color: var(--kri-ink); }
.kri-delta__title { font: 700 19px/1.3 var(--kri-display); margin: 0 0 6px; display: flex; gap: 11px; align-items: baseline; }
.kri-delta__num { font: 600 13px var(--kri-mono); color: var(--kri-ink-faint); }
.kri-delta__body { margin: 0 0 6px; color: var(--kri-ink-soft); }
.kri-delta__anchor { margin: 0; font: 400 12px var(--kri-mono); }
.kri-delta__anchor a { color: var(--kri-ink-faint); text-decoration: none; }
.kri-delta__anchor a:hover { color: var(--kri-ink); text-decoration: underline; }

/* ---------- catalog table ---------- */
.kri-tablewrap {
	overflow-x: auto;
	border: 1px solid var(--kri-line);
	border-radius: var(--kri-radius);
	background: var(--kri-surface);
}
.kri-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 14px; }
.kri-table th, .kri-table td { text-align: left; vertical-align: top; padding: 13px 16px; border-bottom: 1px solid var(--kri-line-soft); }
.kri-table thead th {
	font: 700 12px/1.2 var(--kri-body);
	letter-spacing: .05em; text-transform: uppercase;
	color: var(--kri-ink-soft);
	border-bottom: 1px solid var(--kri-line);
	white-space: nowrap;
	position: sticky; top: 0; background: var(--kri-surface); z-index: 1;
}
.kri-table .kri-t-group th {
	background: var(--kri-base);
	font: 700 11px/1.2 var(--kri-body);
	letter-spacing: .07em; text-transform: uppercase;
	color: var(--kri-ink-soft);
	padding: 9px 16px;
}
.kri-t-study { min-width: 210px; }
.kri-t-name { display: block; font-weight: 700; color: var(--kri-ink); }
.kri-t-org { display: block; font-size: 12.5px; color: var(--kri-ink-faint); margin-top: 2px; }
.kri-t-method { min-width: 230px; }
.kri-t-bucket { display: inline-block; font: 600 11px var(--kri-body); color: var(--kri-ink-soft); border: 1px solid var(--kri-line); border-radius: 5px; padding: 3px 7px; margin-bottom: 6px; }
.kri-t-methodtext { display: block; color: var(--kri-ink-soft); }
.kri-t-sample { display: block; color: var(--kri-ink-faint); font-size: 12.5px; margin-top: 3px; }
.kri-t-window { white-space: nowrap; font-family: var(--kri-mono); font-size: 12.5px; color: var(--kri-ink-soft); }
.kri-t-headline { display: block; font-weight: 700; font-size: 15px; }
.kri-t-denom { display: block; color: var(--kri-ink-faint); font-size: 12.5px; margin-top: 3px; }
.kri-t-caveat { color: var(--kri-ink-soft); min-width: 200px; }
.kri-t-link a { color: var(--kri-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.kri-t-nolink { color: var(--kri-ink-faint); font-size: 12.5px; }
.kri-t-empty { color: var(--kri-ink-faint); font-style: italic; }
.kri-table tr.is-unplotted { background: rgba(138, 90, 0, .035); }

.kri-badge {
	display: inline-block; margin: 6px 6px 0 0;
	font: 600 10.5px/1 var(--kri-body);
	letter-spacing: .04em; text-transform: uppercase;
	border-radius: 5px; padding: 5px 7px;
	border: 1px solid var(--kri-line);
	color: var(--kri-ink-soft);
}
.kri-badge--tierb { border-color: var(--kri-ink-faint); }
.kri-badge--pending { color: var(--kri-warn); border-color: var(--kri-warn); background: rgba(138, 90, 0, .07); }
.kri-badge--unplotted { color: var(--kri-ink-faint); border-style: dashed; }
.kri-badge--stale { color: var(--kri-warn); border-color: var(--kri-warn); border-style: dashed; }

.kri-sort {
	background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
	font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
}
.kri-sort:hover { color: var(--kri-ink); text-decoration: underline; }
.kri-table thead th[aria-sort] { color: var(--kri-ink); }

.kri-tierb { margin-top: 26px; }
.kri-tierb > summary {
	cursor: pointer; font: 700 15px var(--kri-display);
	padding: 13px 16px; background: var(--kri-base);
	border: 1px solid var(--kri-line); border-radius: 10px;
}
.kri-tierb[open] > summary { border-radius: 10px 10px 0 0; }
.kri-tierb__why { color: var(--kri-ink-soft); font-size: 14.5px; max-width: 74ch; padding: 18px 2px 14px; }

/* ---------- first-party ---------- */
.kri-firstparty__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0 0 18px; }
.kri-firstparty__grid > div {
	background: var(--kri-surface); border: 1px solid var(--kri-line);
	border-radius: var(--kri-radius); padding: 22px;
}
.kri-firstparty__grid dt { font: 600 13px/1.2 var(--kri-body); color: var(--kri-ink-soft); margin: 0 0 8px; }
.kri-firstparty__grid dd { margin: 0; font: 700 clamp(26px, 3.4vw, 36px)/1 var(--kri-display); letter-spacing: -.02em; }

/* ---------- cite ---------- */
.kri-cite__string code {
	display: block; font-family: var(--kri-mono); font-size: 14px;
	background: var(--kri-base); border: 1px solid var(--kri-line);
	border-radius: 8px; padding: 14px 16px; overflow-x: auto;
}
.kri-cite__rows { color: var(--kri-ink-faint); font-size: 13.5px; }
.kri-download {
	display: inline-block; font-weight: 700; color: #fff; background: var(--kri-ink);
	border-radius: 8px; padding: 12px 18px; text-decoration: none;
}
.kri-download:hover { background: #0d151a; }

/* ---------- methodology ---------- */
.kri-method__version {
	display: inline-block; font: 600 13px var(--kri-mono);
	border: 1px solid var(--kri-line); border-radius: 999px;
	padding: 7px 13px; color: var(--kri-ink-soft); margin-bottom: 18px;
}
.kri-changelog { list-style: none; margin: 0; padding: 0; }
.kri-changelog li {
	display: grid; grid-template-columns: 128px 1fr; gap: 18px;
	padding: 13px 0; border-bottom: 1px solid var(--kri-line-soft);
}
.kri-changelog time { font: 600 13px var(--kri-mono); color: var(--kri-ink-faint); }
.kri-changelog__empty { color: var(--kri-ink-faint); font-style: italic; padding: 14px 0; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.kri-cards { grid-template-columns: 1fr; }
	.kri-firstparty__grid { grid-template-columns: 1fr; }
	.kri-changelog li { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 600px) {
	.kri-section { padding: 40px 0; }
	.kri-hero { padding: 36px 0 30px; }
	.kri-page .kri-wrap { padding: 0 18px; }
}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
	.kri-page * { transition: none !important; }
}
/* Windows High Contrast: bucket fills are dropped by the OS, so the hatch
   outline and the direct value labels are what carry the reading. */
@media (forced-colors: active) {
	.kri-chart__svg .kri-bar { forced-color-adjust: none; }
	.kri-legend__swatch { border: 1px solid CanvasText; }
	.kri-chart__scroll, .kri-tablewrap, .kri-card { border-color: CanvasText; }
}