/*
 * ICAI. Dark first, a light mode, one loud colour.
 *
 * Tokens (--ic-*) per mode on :root[data-mode]; every component reads them. The site layer's markup (gts-*),
 * the plugins (--gtm-*, --gtc-*, --gtchat-*, --gtb-*, --gtl-*) and the app on the public site (--slr-*) take
 * their colours from the same tokens at the end of this file.
 *
 * Type: Anybody (display, a variable width axis used as part of the design) and Atkinson Hyperlegible Next
 * (text). Radius follows hierarchy: pills for actions, a big soft frame for the hero art, nearly square paper.
 */

:root {
	--ic-font-display: "Anybody", "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, sans-serif;
	--ic-font-text: "Atkinson Hyperlegible Next", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ic-wrap: 1200px;
	--ic-gutter: clamp(16px, 4vw, 40px);
	--ic-header-h: 68px;
	--ic-section-y: clamp(72px, 9vw, 136px);
	--ic-radius-sm: 10px;
	--ic-radius: 16px;
	--ic-radius-lg: 28px;
	--ic-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

	/* Dark, the default: black and red-orange, white for contrast, no grey (quiet text is a pale red-orange). */
	--ic-bg: #000000;
	--ic-bg-2: #0d0402;
	--ic-surface: #140603;
	--ic-surface-2: #1c0904;
	--ic-line: #5a1c09;
	--ic-line-soft: #2e0e05;
	--ic-text: #ffffff;
	--ic-muted: #ffc9b5;
	--ic-faint: #ff9f80;
	--ic-pink: #ff4d1a;
	--ic-pink-soft: rgba(255, 77, 26, 0.16);
	--ic-on-pink: #000000;
	--ic-mint: #ff8a4d;
	--ic-mint-soft: rgba(255, 138, 77, 0.14);
	--ic-peach: #ffb38f;
	--ic-danger: #ff3d2e;
	--ic-focus: #ffffff;
	--ic-paper: #ffffff;
	--ic-paper-ink: #000000;
	--ic-glow: 0 0 0 1px rgba(255, 77, 26, 0.5), 0 10px 40px -10px rgba(255, 77, 26, 0.65);
	color-scheme: dark;
}

:root[data-mode="light"] {
	--ic-bg: #ffffff;
	--ic-bg-2: #fff3ee;
	--ic-surface: #ffffff;
	--ic-surface-2: #fff0e9;
	--ic-line: #000000;
	--ic-line-soft: #ffd2c2;
	--ic-text: #000000;
	--ic-muted: #5a1a08;
	--ic-faint: #8a2a10;
	--ic-pink: #e63a0b;
	--ic-pink-soft: rgba(230, 58, 11, 0.1);
	--ic-on-pink: #ffffff;
	--ic-mint: #b83208;
	--ic-mint-soft: rgba(184, 50, 8, 0.1);
	--ic-peach: #b83208;
	--ic-danger: #c40000;
	--ic-focus: #000000;
	--ic-paper: #ffffff;
	--ic-paper-ink: #000000;
	--ic-glow: 0 0 0 1px rgba(230, 58, 11, 0.4), 0 12px 30px -14px rgba(230, 58, 11, 0.5);
	color-scheme: light;
}

/* ------------------------------------------------------------------------------------------------ base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--ic-header-h) + 16px); }
body {
	margin: 0;
	background: var(--ic-bg);
	color: var(--ic-text);
	font-family: var(--ic-font-text);
	font-size: 1.0625rem;
	line-height: 1.65;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img, svg, video, canvas { max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--ic-focus); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { margin: 0; font-family: var(--ic-font-display); font-weight: 760; line-height: 1.05; letter-spacing: -0.01em; }
.ic-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.ic-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--ic-pink); color: var(--ic-on-pink); font-weight: 700; text-decoration: none; transition: top 0.2s var(--ic-ease); }
.ic-skip:focus { top: 12px; }
.ic-wrap { width: min(100% - 2 * var(--ic-gutter), var(--ic-wrap)); margin-inline: auto; }
.ic-main { min-height: calc(100dvh - var(--ic-header-h)); }

.ic-h1 { font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.2rem); font-stretch: 112%; font-weight: 800; margin-bottom: 0.4em; }
.ic-h2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.5rem); font-stretch: 118%; font-weight: 800; }
.ic-h3 { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); font-stretch: 104%; font-weight: 700; line-height: 1.2; }
.ic-lead { max-width: 62ch; font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem); line-height: 1.55; color: var(--ic-muted); }
.ic-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(32px, 5vw, 56px); }
.ic-head .ic-lead { margin: 0; }

/* Buttons: pills. The loud one is pink; the quiet one is a line. */
.ic-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; min-height: 48px; padding: 0.7em 1.35em; border: 2px solid transparent; border-radius: 999px; font-family: var(--ic-font-text); font-size: 1rem; font-weight: 700; line-height: 1.1; text-decoration: none; cursor: pointer; transition: transform 0.15s var(--ic-ease), box-shadow 0.2s var(--ic-ease), background-color 0.2s, color 0.2s, border-color 0.2s; }
.ic-btn--primary { background: var(--ic-pink); color: var(--ic-on-pink); }
.ic-btn--primary:hover { box-shadow: var(--ic-glow); transform: translateY(-1px); }
.ic-btn--ghost { border-color: var(--ic-line); color: var(--ic-text); background: transparent; }
.ic-btn--ghost:hover { border-color: var(--ic-text); }
.ic-btn--quiet { color: var(--ic-muted); padding-inline: 0.6em; }
.ic-btn--sm { min-height: 40px; padding: 0.5em 1em; font-size: 0.95rem; }
.ic-btn:active { transform: translateY(1px); }
.ic-btn .ic-icon { width: 1.05em; height: 1.05em; }
.ic-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; }

/* ---------------------------------------------------------------------------------------------- header */

.ic-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--ic-bg) 88%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color 0.2s; }
.ic-header.is-scrolled, .ic-app-page .ic-header { border-bottom-color: var(--ic-line-soft); }
.ic-header__bar { display: flex; align-items: center; gap: 24px; height: var(--ic-header-h); }
.ic-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ic-text); text-decoration: none; }
.ic-mark { width: 30px; height: 30px; color: var(--ic-text); flex: none; }
.ic-brand__name { font-family: var(--ic-font-display); font-size: 1.45rem; font-weight: 850; font-stretch: 132%; letter-spacing: 0.01em; line-height: 1; }
.ic-nav { margin-inline: auto; }
.ic-nav ul { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ic-nav a { display: inline-block; padding: 8px 12px; border-radius: 999px; color: var(--ic-muted); font-weight: 600; font-size: 0.98rem; text-decoration: none; transition: color 0.15s, background-color 0.15s; }
.ic-nav a:hover { color: var(--ic-text); background: var(--ic-surface); }
.ic-header__actions { display: flex; align-items: center; gap: 10px; }
.ic-mode, .ic-menu { display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--ic-line); border-radius: 999px; background: transparent; color: var(--ic-text); cursor: pointer; }
.ic-mode:hover, .ic-menu:hover { border-color: var(--ic-text); }
.ic-mode .ic-icon--sun, :root[data-mode="light"] .ic-mode .ic-icon--moon { display: none; }
:root[data-mode="light"] .ic-mode .ic-icon--sun { display: block; }
.ic-menu { display: none; }
.ic-menu .ic-icon--close, .ic-menu[aria-expanded="true"] .ic-icon--menu { display: none; }
.ic-menu[aria-expanded="true"] .ic-icon--close { display: block; }
.ic-drawer { border-top: 1px solid var(--ic-line-soft); background: var(--ic-bg); padding: 12px 0 24px; }
.ic-drawer__list { margin: 0 0 16px; padding: 0; list-style: none; }
.ic-drawer__list a { display: block; padding: 14px 2px; border-bottom: 1px solid var(--ic-line-soft); font-family: var(--ic-font-display); font-size: 1.5rem; font-weight: 750; font-stretch: 110%; text-decoration: none; }
.ic-drawer__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }

@media (max-width: 960px) {
	.ic-nav, .ic-header__btn { display: none; }
	.ic-menu { display: inline-grid; }
	.ic-header__actions { margin-left: auto; }
}

/* ------------------------------------------------------------------------------------------------ hero */

.ic-hero { padding: clamp(40px, 6vw, 88px) 0 clamp(56px, 8vw, 112px); }
.ic-hero__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.ic-hero__title { font-size: clamp(2.6rem, 1.2rem + 4.4vw, 5rem); font-weight: 860; font-stretch: 122%; line-height: 0.92; letter-spacing: -0.025em; margin-bottom: 0.32em; text-wrap: balance; }
.ic-hero__lead { max-width: 52ch; margin-bottom: 1.8em; font-size: clamp(1.1rem, 0.98rem + 0.45vw, 1.32rem); line-height: 1.6; color: var(--ic-muted); }
.ic-hero__note { margin: 18px 0 0; font-size: 0.95rem; color: var(--ic-faint); }
.ic-funnel { position: relative; margin: 0; aspect-ratio: 4 / 5; max-height: 640px; width: 100%; border-radius: var(--ic-radius-lg); background: radial-gradient(120% 80% at 50% 0%, var(--ic-surface-2), var(--ic-bg-2) 70%); border: 1px solid var(--ic-line-soft); overflow: hidden; }
.ic-funnel__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

@media (max-width: 860px) {
	.ic-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.ic-funnel { aspect-ratio: 5 / 4; max-height: 420px; }
}

/* ------------------------------------------------------------------------------------------- sections */

.ic-section { padding: var(--ic-section-y) 0; }
.ic-section + .ic-section { border-top: 1px solid var(--ic-line-soft); }

/* The paper: a drawn first page, then the citation. */
.ic-paper__grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.ic-sheet { position: relative; margin: 0 14px 14px 0; isolation: isolate; }
.ic-sheet::before { content: ""; position: absolute; inset: 18px -14px -14px 14px; z-index: 0; border-radius: 6px; background: var(--ic-pink); transform: rotate(1.4deg); }
.ic-sheet__page { position: relative; z-index: 1; aspect-ratio: 8.5 / 11; padding: 9% 8%; border-radius: 6px; background: var(--ic-paper); color: var(--ic-paper-ink); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.06); transform: rotate(-2.2deg); }
.ic-sheet__venue { margin: 0 0 6%; font-size: clamp(0.6rem, 0.5rem + 0.3vw, 0.75rem); font-weight: 700; color: #e63a0b; }
.ic-sheet__title { margin: 0 0 5%; font-family: var(--ic-font-display); font-size: clamp(0.95rem, 0.6rem + 1vw, 1.35rem); font-weight: 800; font-stretch: 96%; line-height: 1.12; }
.ic-sheet__authors { display: flex; gap: 6px; margin: 0 0 8%; }
.ic-sheet__authors span { height: 6px; flex: 1; border-radius: 3px; background: #ffc4b0; }
.ic-sheet__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; align-content: start; }
.ic-sheet__cols span { height: 5px; border-radius: 3px; background: #ffd2c2; }
.ic-sheet__cols span:nth-child(3n) { width: 78%; }
.ic-sheet__flow { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 5px; margin: 8px 0; padding: 10px; border: 1.5px solid #ffc4b0; border-radius: 4px; font-style: normal; }
.ic-sheet__flow b { display: block; height: 9px; border-radius: 3px; background: #ff9a7a; }
.ic-sheet__flow b:nth-child(1) { width: 86%; }
.ic-sheet__flow b:nth-child(2) { width: 66%; }
.ic-sheet__flow b:nth-child(3) { width: 44%; }
.ic-sheet__flow b:nth-child(4) { width: 22%; background: #ff4d1a; }
.ic-paper__name { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.3rem); font-stretch: 100%; font-weight: 780; line-height: 1.12; margin-bottom: 14px; text-wrap: balance; }
.ic-paper__venue { margin: 0 0 4px; font-weight: 700; color: var(--ic-pink); }
.ic-paper__with { margin: 0 0 4px; color: var(--ic-muted); }
.ic-paper__doi { margin: 0 0 24px; color: var(--ic-muted); font-variant-numeric: tabular-nums; }
.ic-paper__doi span { color: var(--ic-faint); }
.ic-paper__text > p { max-width: 60ch; }
.ic-paper__tool { color: var(--ic-text); font-weight: 600; }
.ic-paper .ic-actions { margin-top: 28px; }
.ic-paper__name, .ic-sheet__title { overflow-wrap: break-word; hyphens: auto; }
@media (max-width: 860px) {
	.ic-paper__grid { grid-template-columns: minmax(0, 1fr); }
	.ic-sheet { max-width: 320px; }
}

/* How it works: the road, then three pillars. */
.ic-road { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0; margin: 0 0 clamp(48px, 6vw, 80px); padding: 0; list-style: none; counter-reset: none; }
.ic-road__stop { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 0 10px 0 0; }
.ic-road__stop::before { content: ""; position: absolute; top: 21px; left: 44px; right: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--ic-line), var(--ic-line)); }
.ic-road__stop.is-last::before { display: none; }
.ic-road__dot { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ic-line); background: var(--ic-bg); font-family: var(--ic-font-display); font-weight: 800; font-size: 1.05rem; color: var(--ic-muted); }
.ic-road__stop.is-last .ic-road__dot { border-color: var(--ic-pink); background: var(--ic-pink); color: var(--ic-on-pink); }
.ic-road__label { margin-top: 10px; font-family: var(--ic-font-display); font-weight: 780; font-stretch: 108%; font-size: 1.12rem; line-height: 1.15; }
.ic-road__text { font-size: 0.92rem; line-height: 1.45; color: var(--ic-muted); padding-right: 6px; }
.ic-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.ic-pillar { padding-top: 22px; border-top: 3px solid var(--ic-line); }
.ic-pillar--ai { border-top-color: var(--ic-mint); }
.ic-pillar .ic-h3 { margin-bottom: 10px; }
.ic-pillar p { margin: 0; color: var(--ic-muted); }

@media (max-width: 1020px) {
	.ic-road { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 36px; }
	.ic-road__stop:nth-child(4)::before { display: none; }
}
@media (max-width: 640px) {
	.ic-road { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
	.ic-road__stop { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; padding: 0 0 22px; }
	.ic-road__stop::before, .ic-road__stop:nth-child(4)::before { display: block; top: 44px; bottom: 0; left: 20.5px; right: auto; width: 3px; height: auto; }
	.ic-road__stop.is-last::before { display: none; }
	.ic-road__dot { grid-row: 1 / span 2; }
	.ic-road__label { margin-top: 8px; }
	.ic-pillars { grid-template-columns: minmax(0, 1fr); }
}

/* The plan: the one place the type gets loud. */
.ic-plan { background: var(--ic-bg-2); }
.ic-plan__list { margin: clamp(28px, 4vw, 48px) 0 0; padding: 0; list-style: none; }
.ic-plan__step { display: flex; align-items: baseline; gap: 0.32em; padding: clamp(10px, 1.6vw, 18px) 0; border-bottom: 1px solid var(--ic-line-soft); font-family: var(--ic-font-display); font-size: clamp(1.75rem, 0.9rem + 4.4vw, 5rem); font-weight: 800; font-stretch: 62%; line-height: 1.02; letter-spacing: -0.01em; }
.ic-plan__n { flex: none; color: var(--ic-pink); font-stretch: 100%; font-variant-numeric: tabular-nums; }
.ic-plan__text { text-wrap: balance; }
.ic-plan__step:last-child { border-bottom: 0; }
.ic-plan__step:last-child .ic-plan__text { font-stretch: 150%; font-weight: 900; }
.ic-plan__note { margin: 24px 0 0; color: var(--ic-faint); }

/* Research on research: a line from assisted to autonomous. */
.ic-dial { margin: 0 0 clamp(40px, 5vw, 64px); }
.ic-dial__track { position: relative; height: 10px; margin: 44px 0 28px; border-radius: 999px; background: var(--ic-line-soft); }
.ic-dial__fill { position: absolute; inset: 0 auto 0 0; width: 30%; border-radius: 999px; background: linear-gradient(90deg, var(--ic-mint), var(--ic-pink)); }
.ic-dial__mark { position: absolute; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--ic-bg); border: 3px solid var(--ic-pink); }
.ic-dial__mark b { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); font-size: 0.85rem; font-weight: 700; white-space: nowrap; color: var(--ic-text); }
.ic-dial__mark--today { left: 30%; }
.ic-dial__mark--next { left: 92%; border-style: dashed; border-color: var(--ic-faint); }
.ic-dial__mark--next b { color: var(--ic-faint); }
.ic-dial__ends { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 6vw, 96px); }
.ic-dial__end p { margin: 10px 0 0; color: var(--ic-muted); max-width: 46ch; }
.ic-dial__end--far { text-align: right; justify-self: end; }
.ic-dial__end--far p { margin-left: auto; }
.ic-research__words { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(24px, 5vw, 72px); align-items: start; }
.ic-research__big { font-family: var(--ic-font-display); font-size: clamp(1.4rem, 1rem + 1.6vw, 2.25rem); font-weight: 700; font-stretch: 100%; line-height: 1.25; margin: 0; }
.ic-research__words p:last-child { margin: 0; color: var(--ic-muted); }

@media (max-width: 760px) {
	.ic-dial__ends, .ic-research__words { grid-template-columns: minmax(0, 1fr); }
	.ic-dial__end--far { text-align: left; justify-self: start; }
	.ic-dial__end--far p { margin-left: 0; }
	.ic-dial__mark--next { left: 88%; }
}

/* About me. */
.ic-about__grid { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.ic-about__portrait { position: relative; aspect-ratio: 1; max-width: 340px; }
.ic-about__monogram, .ic-about__photo { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 42% 58% 55% 45% / 48% 42% 58% 52%; object-fit: cover; }
.ic-about__monogram { background: var(--ic-pink); color: var(--ic-on-pink); font-family: var(--ic-font-display); font-size: clamp(4rem, 3rem + 5vw, 7.5rem); font-weight: 900; font-stretch: 140%; line-height: 1; letter-spacing: -0.02em; }
.ic-about__portrait::after { content: ""; position: absolute; inset: 8% -6% -6% 8%; z-index: -1; border-radius: 55% 45% 48% 52% / 52% 58% 42% 48%; border: 2px solid var(--ic-mint); }
.ic-about__text .ic-h2 { margin-bottom: 18px; }
.ic-about__bio { max-width: 64ch; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); line-height: 1.7; }
.ic-about__text .ic-h3 { margin: 28px 0 8px; }
.ic-about .ic-actions { margin-top: 8px; }

@media (max-width: 760px) {
	.ic-about__grid { grid-template-columns: minmax(0, 1fr); }
	.ic-about__portrait { max-width: 200px; }
}

/* Get access. */
.ic-access { background: var(--ic-pink); color: var(--ic-on-pink); border-top: 0 !important; }
.ic-access__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.ic-access .ic-h2 { font-size: clamp(2.6rem, 1.4rem + 5vw, 6rem); font-stretch: 130%; }
.ic-access .ic-lead { color: inherit; opacity: 0.86; margin: 0; }
.ic-access .ic-btn--primary { background: var(--ic-on-pink); color: var(--ic-pink); }
.ic-access .ic-btn--primary:hover { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.5); }
.ic-access .ic-btn--ghost { border-color: currentColor; color: inherit; }
.ic-access .ic-actions { margin-top: 10px; }
.ic-access :focus-visible { outline-color: var(--ic-on-pink); }

/* ---------------------------------------------------------------------------------------------- footer */

.ic-footer { padding: 48px 0 40px; border-top: 1px solid var(--ic-line-soft); }
.ic-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 40px; align-items: start; }
.ic-footer__tagline { margin: 12px 0 0; color: var(--ic-faint); font-size: 0.95rem; }
.ic-footer__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.ic-footer__links a { color: var(--ic-muted); text-decoration: none; font-weight: 600; }
.ic-footer__links a:hover { color: var(--ic-text); }
.ic-footer__copy { grid-column: 1 / -1; margin: 12px 0 0; color: var(--ic-faint); font-size: 0.9rem; }
@media (max-width: 700px) {
	.ic-footer__inner { grid-template-columns: minmax(0, 1fr); }
	.ic-footer__links { justify-content: flex-start; }
}

/* The site map: every public page in small type, a column per heading (two on a phone). */
.ic-footer__inner--map { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.ic-sitemap { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 30px 28px; }
.ic-sitemap__col { min-width: 0; }
.ic-sitemap__title { margin: 0 0 12px; font-family: var(--ic-font-display); font-size: 0.78rem; font-weight: 800; font-stretch: 108%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ic-text); }
.ic-sitemap ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; line-height: 1.35; }
.ic-sitemap a { color: var(--ic-muted); font-size: 0.86rem; line-height: 1.35; text-decoration: none; overflow-wrap: anywhere; }
.ic-sitemap a:hover, .ic-sitemap a:focus-visible { color: var(--ic-text); text-decoration: underline; text-decoration-color: var(--ic-pink); text-underline-offset: 3px; }
.ic-sitemap .ic-icon { display: inline; width: 12px; height: 12px; margin-left: 4px; vertical-align: -1px; opacity: 0.75; }
.ic-footer__inner--map .ic-footer__copy { margin: 4px 0 0; padding-top: 20px; border-top: 1px solid var(--ic-line-soft); }
@media (max-width: 560px) {
	.ic-sitemap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 18px; }
}

/* ------------------------------------------------------------------------------------------- pages */

.ic-page { padding: clamp(40px, 6vw, 80px) 0; max-width: 760px; }
.ic-page .ic-h1 { margin-bottom: 0.5em; }
.ic-prose { font-size: 1.08rem; }
.ic-prose > * { max-width: 70ch; }
.ic-prose h2 { font-size: 1.8rem; margin: 1.6em 0 0.5em; }
.ic-prose h3 { font-size: 1.35rem; margin: 1.4em 0 0.4em; }
.ic-prose a { color: var(--ic-pink); }
.ic-prose img { border-radius: var(--ic-radius); }
.ic-post__date { margin: 0 0 8px; color: var(--ic-faint); font-size: 0.95rem; }
.ic-posts { padding: clamp(40px, 6vw, 80px) 0; }
.ic-posts__list { margin: 24px 0 0; padding: 0; list-style: none; }
.ic-post { padding: 26px 0; border-top: 1px solid var(--ic-line-soft); }
.ic-post__title a { text-decoration: none; }
.ic-post__title a:hover { color: var(--ic-pink); }
.ic-post__excerpt { margin: 8px 0 0; color: var(--ic-muted); max-width: 70ch; }
.ic-pager { display: flex; gap: 16px; margin-top: 24px; }
.ic-pager a { color: var(--ic-pink); font-weight: 700; }
.ic-comments { padding-top: 0; }
.ic-comments__list { padding-left: 1.2em; }

/* 404 */
.ic-404 { padding: clamp(56px, 10vw, 140px) 0; }
.ic-404__code { margin: 0 0 8px; font-family: var(--ic-font-display); font-size: clamp(5rem, 3rem + 10vw, 12rem); font-weight: 900; font-stretch: 150%; line-height: 0.85; color: var(--ic-pink); letter-spacing: -0.03em; }
.ic-404 .ic-h1 { max-width: 18ch; }
.ic-404 .ic-lead { margin-bottom: 28px; }

/* The site layer's pages: log in, join, forgot, reset, log out beside a panel of the brand. */
.ic-auth__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 5vw, 72px); align-items: start; padding: clamp(32px, 5vw, 72px) 0 clamp(56px, 8vw, 104px); }
.ic-auth__side { position: sticky; top: calc(var(--ic-header-h) + 32px); display: flex; flex-direction: column; gap: 18px; min-height: 420px; padding: clamp(28px, 4vw, 48px); border-radius: var(--ic-radius-lg); background: var(--ic-pink); color: var(--ic-on-pink); overflow: hidden; }
.ic-auth__mark { width: 64px; height: 64px; color: var(--ic-on-pink); }
.ic-auth__mark circle { fill: var(--ic-on-pink); }
.ic-auth__title { margin: auto 0 0; font-family: var(--ic-font-display); font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.6rem); font-weight: 850; font-stretch: 125%; line-height: 0.95; letter-spacing: -0.02em; }
.ic-auth__text { margin: 0; max-width: 32ch; opacity: 0.85; font-size: 1.05rem; }
.ic-auth__main { min-width: 0; }
.ic-auth__h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.1rem); }
.ic-auth .gts-page { align-items: stretch; }
.ic-auth .gts-card--auth { max-width: none; }
.ic-auth .gts-page > .gts-notice { max-width: none; }

@media (max-width: 860px) {
	.ic-auth__grid { grid-template-columns: minmax(0, 1fr); }
	.ic-auth__side { position: static; min-height: 0; flex-direction: row; align-items: center; padding: 18px 20px; border-radius: var(--ic-radius); }
	.ic-auth__mark { width: 40px; height: 40px; flex: none; }
	.ic-auth__title { margin: 0; font-size: 1.5rem; }
	.ic-auth__text { display: none; }
}

/* The account page: wide. */
.ic-account__wrap { padding: clamp(32px, 5vw, 64px) 0 clamp(56px, 8vw, 104px); }

/* The app on the public site: the whole window, with no site header above it (header-app.php). */
body.slr-front { --slr-front-offset: 0px; }
.ic-app-page .ic-main { min-height: 0; }
.ic-app { min-height: 100dvh; }

/* --------------------------------------------------------------------------- the site layer (gts-*) */

.gts, .gts-auth, .gts-notice, .gts-sections, .gts-card, .gts-mention, .gts-person, .gts-people {
	--gts-fg: var(--ic-text);
	--gts-muted: var(--ic-muted);
	--gts-surface: var(--ic-surface);
	--gts-surface-2: var(--ic-surface-2);
	--gts-line: var(--ic-line);
	--gts-accent: var(--ic-pink);
	--gts-on-accent: var(--ic-on-pink);
	--gts-accent-2: var(--ic-text);
	--gts-on-accent-2: var(--ic-bg);
	--gts-link: var(--ic-pink);
	--gts-success: var(--ic-mint);
	--gts-warning: var(--ic-peach);
	--gts-danger: var(--ic-danger);
	--gts-info: var(--ic-mint);
	--gts-focus: var(--ic-focus);
	--gts-border-width: 1px;
	--gts-radius: var(--ic-radius);
	--gts-radius-sm: var(--ic-radius-sm);
	--gts-shadow: none;
	--gts-font-display: var(--ic-font-display);
}
.gts-card { border-color: var(--ic-line-soft); }
.gts-card__title, .gts-section__title, .gts-profile-card__name { font-stretch: 112%; font-weight: 800; }
.gts-btn { border-radius: 999px; min-height: 46px; padding-inline: 1.3em; }
.gts-btn--primary:hover { box-shadow: var(--ic-glow); }
.gts-btn--secondary { background: var(--ic-text); border-color: var(--ic-text); color: var(--ic-bg); }
.gts-input, .gts-form select { border-radius: 12px; background: var(--ic-bg); border-color: var(--ic-line); }
.gts-input:focus, .gts-form select:focus { border-color: var(--ic-focus); }
.gts-settings__nav a { border-color: var(--ic-line-soft); }
.gts-chip--live { border-color: var(--ic-mint); color: var(--ic-mint); }
.gts-notice { background: var(--ic-surface); }

/* ------------------------------------------------------------------------- the plugins' design tokens */

:root:root {
	--gtm-bg: transparent; --gtm-surface: var(--ic-surface); --gtm-surface-2: var(--ic-surface-2); --gtm-text: var(--ic-text); --gtm-muted: var(--ic-muted); --gtm-border: var(--ic-line-soft); --gtm-border-width: 1px; --gtm-radius: var(--ic-radius); --gtm-radius-sm: var(--ic-radius-sm); --gtm-shadow: none; --gtm-shadow-sm: none; --gtm-primary: var(--ic-pink); --gtm-on-primary: var(--ic-on-pink); --gtm-accent: var(--ic-pink); --gtm-on-accent: var(--ic-on-pink); --gtm-success: var(--ic-mint); --gtm-warning: var(--ic-peach); --gtm-danger: var(--ic-danger); --gtm-font: var(--ic-font-text); --gtm-font-display: var(--ic-font-display); --gtm-input-bg: var(--ic-bg); --gtm-input-border: var(--ic-line); --gtm-focus: var(--ic-focus);
	--gtc-font: var(--ic-font-text); --gtc-font-display: var(--ic-font-display); --gtc-bg: transparent; --gtc-surface: var(--ic-surface); --gtc-surface-2: var(--ic-surface-2); --gtc-text: var(--ic-text); --gtc-text-soft: var(--ic-muted); --gtc-muted: var(--ic-faint); --gtc-border: var(--ic-line-soft); --gtc-control-border: var(--ic-line); --gtc-primary: var(--ic-pink); --gtc-on-primary: var(--ic-on-pink); --gtc-accent: var(--ic-pink); --gtc-on-accent: var(--ic-on-pink); --gtc-accent-soft: var(--ic-pink-soft); --gtc-link: var(--ic-pink); --gtc-success: var(--ic-mint); --gtc-warning: var(--ic-peach); --gtc-danger: var(--ic-danger); --gtc-focus: var(--ic-focus); --gtc-radius: var(--ic-radius); --gtc-radius-sm: var(--ic-radius-sm); --gtc-radius-lg: var(--ic-radius-lg); --gtc-radius-pill: 999px; --gtc-border-width: 1px; --gtc-shadow: none; --gtc-shadow-sm: none; --gtc-shadow-raised: none;
	--gtb-bg: var(--ic-bg); --gtb-lane-bg: var(--ic-bg-2); --gtb-lane-border: var(--ic-line-soft); --gtb-lane-radius: var(--ic-radius); --gtb-card-bg: var(--ic-surface); --gtb-card-fg: var(--ic-text); --gtb-card-muted: var(--ic-muted); --gtb-card-border: var(--ic-line-soft); --gtb-card-radius: var(--ic-radius-sm); --gtb-accent: var(--ic-pink); --gtb-on-accent: var(--ic-on-pink); --gtb-focus: var(--ic-focus); --gtb-font: var(--ic-font-text); --gtb-font-display: var(--ic-font-display);
	--gtchat-font: var(--ic-font-text); --gtchat-font-display: var(--ic-font-display); --gtchat-bubble-bg: var(--ic-pink); --gtchat-bubble-fg: var(--ic-on-pink); --gtchat-bubble-radius: 999px; --gtchat-border-width: 1px; --gtchat-border-color: var(--ic-line); --gtchat-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.6); --gtchat-panel-radius: var(--ic-radius-lg); --gtchat-panel-bg: var(--ic-surface); --gtchat-panel-fg: var(--ic-text); --gtchat-panel-muted: var(--ic-muted); --gtchat-muted-fg: var(--ic-muted); --gtchat-header-bg: var(--ic-bg-2); --gtchat-header-fg: var(--ic-text); --gtchat-bot-bg: var(--ic-surface-2); --gtchat-bot-fg: var(--ic-text); --gtchat-user-bg: var(--ic-pink); --gtchat-user-fg: var(--ic-on-pink); --gtchat-accent: var(--ic-mint); --gtchat-input-bg: var(--ic-bg); --gtchat-focus: var(--ic-focus); --gtchat-radius: var(--ic-radius-sm);
	--gtchat-on-accent: var(--ic-on-pink); --gtchat-shadow-color: rgba(0, 0, 0, 0.45); --gtchat-log-bg: var(--ic-bg); --gtchat-soft-bg: var(--ic-surface-2); --gtchat-person-bg: var(--ic-mint-soft); --gtchat-person-fg: var(--ic-text); --gtchat-link: var(--ic-pink); --gtchat-danger: var(--ic-danger); --gtchat-success: var(--ic-mint); --gtchat-warning: var(--ic-peach);
	--gtl-text: var(--ic-text); --gtl-text-soft: var(--ic-muted); --gtl-muted: var(--ic-faint); --gtl-line: var(--ic-line-soft); --gtl-surface: var(--ic-surface); --gtl-surface-2: var(--ic-surface-2); --gtl-primary: var(--ic-pink); --gtl-primary-soft: var(--ic-pink-soft); --gtl-link: var(--ic-pink); --gtl-ai: var(--ic-mint); --gtl-radius: var(--ic-radius); --gtl-radius-sm: var(--ic-radius-sm); --gtl-border-width: 1px;
}

/* ------------------------------------------------------------------- the app on the public site (--slr-*) */

/* The Matrix theme keeps its own look (the app puts a dark sheet behind its sections); dark and light take mine. */
body.slr-front.slr-theme-dark .slr-app {
	--slr-bg: #000000; --slr-panel: #0f0503; --slr-panel-2: #0a0302; --slr-hover: #1f0a05; --slr-input: #000000; --slr-input-disabled: #140603; --slr-segment: #000000; --slr-code: #1c0904;
	--slr-border: #3d1307; --slr-border-strong: #6b200c; --slr-text: #ffffff; --slr-muted: #ffc9b5;
	--slr-accent: #ff4d1a; --slr-accent-hover: #ff6a3d; --slr-accent-soft: rgba(255, 77, 26, 0.16); --slr-accent-border: rgba(255, 77, 26, 0.5); --slr-link: #ff8a5c; --slr-info-bg: #140603;
	--slr-ai: #ff8a4d; --slr-ai-soft: rgba(255, 138, 77, 0.14); --slr-ai-bg: #1a0a04; --slr-ai-border: rgba(255, 138, 77, 0.35);
	--slr-strong-bg: #ffffff; --slr-strong-text: #000000; --slr-pop: #1c0904; --slr-sticky: rgba(0, 0, 0, 0.92);
	--slr-radius: 12px; --slr-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
	--slr-road-car: #ff4d1a;
	font-family: var(--ic-font-text);
}
body.slr-front.slr-theme-light .slr-app {
	--slr-bg: #ffffff; --slr-panel: #ffffff; --slr-panel-2: #fff7f3; --slr-hover: #fff0e9; --slr-input: #ffffff; --slr-input-disabled: #fff3ee; --slr-segment: #ffe6dc; --slr-code: #fff0e9;
	--slr-border: #ffc4b0; --slr-border-strong: #000000; --slr-text: #000000; --slr-muted: #5a1a08;
	--slr-accent: #e63a0b; --slr-accent-hover: #c42f06; --slr-accent-soft: #ffe6dc; --slr-accent-border: #ffb39a; --slr-link: #c42f06; --slr-info-bg: #fff3ee;
	--slr-ai: #b83208; --slr-ai-soft: #ffe6dc; --slr-ai-bg: #fff7f3; --slr-ai-border: #ffc4b0;
	--slr-strong-bg: #000000; --slr-strong-text: #ffffff; --slr-pop: #000000; --slr-sticky: rgba(255, 255, 255, 0.92);
	--slr-radius: 12px;
	--slr-road-car: #e63a0b;
	font-family: var(--ic-font-text);
}
body.slr-front .slr-app h1, body.slr-front .slr-app h2 { font-family: var(--ic-font-display); font-stretch: 108%; }
html:has(> body.slr-front.slr-theme-dark), body.slr-front.slr-theme-dark { background: #000000; }
html:has(> body.slr-front.slr-theme-light), body.slr-front.slr-theme-light { background: #ffffff; }

/* The review's road in the app, in this theme's colours (the markup is the app's). */
body.slr-front .slr-road { border-radius: var(--ic-radius); }
body.slr-front .slr-road-stop.is-done::before { background: linear-gradient(90deg, var(--slr-ai), var(--slr-accent)); }
body.slr-front .slr-road-dot { font-family: var(--ic-font-display); font-weight: 800; }
body.slr-front .slr-road-stop.is-done .slr-road-dot { color: var(--slr-strong-text); }
body.slr-front .slr-road-stop.is-current .slr-road-dot { box-shadow: 0 0 0 5px var(--slr-accent-soft); }
body.slr-front .slr-road-label { font-family: var(--ic-font-display); font-stretch: 104%; font-weight: 750; }
body.slr-front .slr-road-car { color: var(--slr-road-car); fill: var(--slr-road-car); }
body.slr-front .slr-road-next { border-radius: var(--ic-radius-sm); }
body.slr-front .slr-road-next .slr-btn { border-radius: 999px; }

/* --------------------------------------------------------------------------------------- motion */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

@media print {
	.ic-header, .ic-footer, .ic-funnel, .ic-access { display: none; }
	body { background: #fff; color: #000; }
}

/* A bare branded page (a plugin's page for people without an account). */
.ic-bare__bar .ic-header__actions { margin-left: auto; }
.ic-bare__main { padding: clamp(28px, 5vw, 64px) 0; min-height: calc(100dvh - var(--ic-header-h) - 80px); }
.ic-bare__foot { padding: 24px 0; }
.ic-bare__foot .ic-footer__copy { margin: 0; }

/* How we work: the culture, as a numbered list of principles. */
.ic-culture__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(14px, 2vw, 22px); margin: clamp(28px, 4vw, 44px) 0 0; padding: 0; list-style: none; }
.ic-culture__item { display: flex; gap: 14px; align-items: flex-start; padding: clamp(16px, 2vw, 22px); border: 1px solid var(--ic-line-soft); border-radius: 18px; background: var(--ic-bg-2); }
.ic-culture__item p { margin: 0; line-height: 1.55; }
.ic-culture__item strong { display: block; margin-bottom: 4px; font-family: var(--ic-font-display); font-size: 1.12rem; }
.ic-culture__n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ic-pink); color: #fff; font-weight: 800; font-variant-numeric: tabular-nums; }
