/* ==========================================================================
   ICL Design System — EMBED BUILD (generated file, do not edit)
   --------------------------------------------------------------------------
   Source:  https://github.com/x-the-owl equivalents — icl-design-system
   Version: v0.7-21-gc0f321b   Built: 2026-09-02
   Type scale: 0.9 (rem pinned to px at 14.4px/rem)
   Rebuild: python3 tools/build-embed.py

   For legacy pages that do not consume the design system directly.
   All base styles are scoped under .icl-zone — wrap system markup in
   <div class="icl-zone"> ... </div> and the rest of the host page is
   untouched. Component classes (.icl-*) are already collision-safe.
   Load the consolidated Adobe Fonts kit alongside this file:
   <link rel="stylesheet" href="https://use.typekit.net/ucc2doj.css">
   ========================================================================== */

/* ---- tokens/tokens.css (rem pinned to px) ---- */
/* ==========================================================================
   ICL Design System — Design Tokens
   --------------------------------------------------------------------------
   Tier 1: PRIMITIVES  — raw values. Never reference these in component CSS.
   Tier 2: SEMANTIC    — role-based aliases. Components consume these.
   Themes (tokens/themes.css) override semantic accent tokens per project.
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------
     TIER 1 · PRIMITIVES
     ------------------------------------------------------------------ */

  /* Tennessee Orange — UT primary. Accent use only; never body text
     lighter than orange-600 (contrast). */
  --icl-orange-50:  #FFF4E5;
  --icl-orange-100: #FFE3C2;
  --icl-orange-200: #FFC58A;
  --icl-orange-300: #FFA64D;
  --icl-orange-400: #FF9124;
  --icl-orange-500: #FF8200;  /* PMS 151 — the brand orange */
  --icl-orange-600: #D96F00;
  --icl-orange-700: #AD5800;  /* AA text on white */
  --icl-orange-800: #854400;
  --icl-orange-900: #5C2F00;

  /* Smokey — UT's warm-neutral gray family (black is not in the
     palette; Smokey stands in for it). */
  --icl-gray-900: #2E2F30;
  --icl-gray-800: #454648;
  --icl-gray-700: #58595B;  /* Smokey */
  --icl-gray-600: #6E7072;
  --icl-gray-500: #838588;
  --icl-gray-400: #A5A7A9;
  --icl-gray-300: #C4C5C7;
  --icl-gray-200: #DDDEDF;
  --icl-gray-100: #EFEFEF;
  --icl-gray-50:  #F6F6F6;

  --icl-white: #FFFFFF;

  /* Globe — UT secondary blue. The link color on every property and
     theme (historically, links on the web are blue). */
  --icl-globe-300: #7CC3E0;
  --icl-globe-600: #006C93;  /* AA text on white and on Limestone */
  --icl-globe-700: #00577A;

  /* Limestone — UT warm neutral (CMYK 5 5 10 0 → #F0EDE4 at the 100
     step), extended to a full ramp. THE structural neutral family
     (adopted v0.3, replacing the legacy site's cool Slate): light
     surfaces at the top of the ramp, the dark stone bands at the
     bottom. */
  --icl-limestone-50:  #F8F6F0;
  --icl-limestone-75:  #F4F1EA;  /* half-step: large surfaces (100 reads
                                    strong across a whole band) */
  --icl-limestone-100: #F0EDE4;  /* the brand value */
  --icl-limestone-200: #E1DBCB;
  --icl-limestone-300: #CBC2A9;
  --icl-limestone-400: #ACA083;
  --icl-limestone-500: #8B8066;
  --icl-limestone-600: #6C634D;
  --icl-limestone-700: #524B3A;
  --icl-limestone-800: #3A352A;
  --icl-limestone-900: #27231B;
  --icl-limestone-950: #181510;
  /* Back-compat aliases */
  --icl-limestone: var(--icl-limestone-100);
  --icl-limestone-border: var(--icl-limestone-200);

  /* Project accent primitives (see themes.css for full theme sets) */
  --icl-magma-500:  #E03A2F;   /* molten red */
  --icl-magma-700:  #AC2A21;
  --icl-papi-500:   #64A03C;   /* instrument green */
  --icl-papi-700:   #447127;
  --icl-slateproj-500: #4E7FA0; /* slate blue */
  --icl-slateproj-700: #38607C;
  --icl-plasma-500: #7D5BA6;   /* ionized violet */
  --icl-plasma-700: #5F4287;
  --icl-parsec-500: #0E8078;   /* deep teal (kin to UT Valley) */
  --icl-parsec-700: #00655F;

  /* Status */
  --icl-blue-600:  #1B6E9B;
  --icl-blue-100:  #DEEFF7;
  --icl-green-600: #2F7D3B;
  --icl-green-100: #E1F1E3;
  --icl-yellow-600:#8A6D00;
  --icl-yellow-100:#FBF3D0;
  --icl-red-600:   #B3261E;
  --icl-red-100:   #F9E0DE;

  /* Type families — Adobe Fonts (kit: proxima-nova, merriweather,
     acumin-pro, rift). Fallbacks keep layout stable if the kit fails. */
  --icl-font-display: "rift", "Oswald", "Arial Narrow", sans-serif;
  --icl-font-sans: "proxima-nova", "acumin-pro", "Helvetica Neue", Arial, sans-serif;
  --icl-font-serif: "merriweather", Georgia, "Times New Roman", serif;
  --icl-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Type scale — 1.25 ratio, fluid at display sizes */
  --icl-text-xs:   10.8px;
  --icl-text-sm:   12.6px;
  --icl-text-md:   14.4px;
  --icl-text-lg:   16.2px;
  --icl-text-xl:   18px;
  --icl-text-2xl:  22.5px;
  --icl-text-3xl:  28.1232px;
  --icl-text-4xl:  clamp(28.8px, 21.6px + 2vw, 35.1504px);
  --icl-text-5xl:  clamp(34.56px, 25.92px + 3vw, 43.9488px);
  --icl-text-display: clamp(39.6px, 28.8px + 4vw, 64.8px);

  --icl-leading-tight: 1.15;
  --icl-leading-snug: 1.35;
  --icl-leading-normal: 1.6;
  --icl-leading-loose: 1.8;

  --icl-tracking-wide: 0.06em;
  --icl-tracking-caps: 0.1em;

  /* Space — 4px base */
  --icl-space-1:  3.6px;
  --icl-space-2:  7.2px;
  --icl-space-3:  10.8px;
  --icl-space-4:  14.4px;
  --icl-space-5:  21.6px;
  --icl-space-6:  28.8px;
  --icl-space-7:  43.2px;
  --icl-space-8:  57.6px;
  --icl-space-9:  86.4px;
  --icl-space-10: 115.2px;

  /* Radius — crisp, technical. Reserve large radii for pills only. */
  --icl-radius-sm: 2px;
  --icl-radius-md: 4px;
  --icl-radius-lg: 8px;
  --icl-radius-full: 999px;

  /* Elevation — restrained, warmed to the limestone ink. The two inset
     shadows are the sunken twins of --icl-shadow-sm (same ink, same 2px
     softness): raised elements cast it outward, sunken ones catch it inward.
     -inset  = even on all sides, for sunken panels (boxes/cards on the
               sunken surface; NOT small inline code chips).
     -inset-band = top + bottom only, for full-width sunken bands. */
  --icl-shadow-sm: 0 1px 2px rgba(24, 21, 16, 0.08);
  --icl-shadow-md: 0 2px 8px rgba(24, 21, 16, 0.12);
  --icl-shadow-lg: 0 8px 24px rgba(24, 21, 16, 0.16);
  --icl-shadow-inset: inset 0 0 2px rgba(24, 21, 16, 0.08);
  --icl-shadow-inset-band: inset 0 1px 2px rgba(24, 21, 16, 0.08),
                           inset 0 -1px 2px rgba(24, 21, 16, 0.08);

  /* Signature keyline — the orange rule inherited from icl.utk.edu */
  --icl-keyline-width: 3px;

  /* Layout */
  --icl-container-max: 1036.8px;      /* 1152px */
  --icl-container-narrow: 662.4px;   /* long-form reading measure */
  --icl-container-pad: clamp(14.4px, 4vw, 28.8px);

  /* Motion */
  --icl-ease: cubic-bezier(0.2, 0, 0.2, 1);
  --icl-duration-fast: 120ms;
  --icl-duration-base: 200ms;

  /* ------------------------------------------------------------------
     TIER 2 · SEMANTIC — components reference ONLY these
     ------------------------------------------------------------------ */

  /* Surfaces */
  --icl-color-bg: var(--icl-white);
  --icl-color-surface: var(--icl-white);
  --icl-color-surface-sunken: var(--icl-limestone-75); /* 100 is too strong
                                       across a full band; it stays in play
                                       for smaller washes */
  --icl-color-surface-raised: var(--icl-white);
  --icl-color-inverse-bg: var(--icl-limestone-900);
  --icl-color-inverse-surface: var(--icl-limestone-800);

  /* Text. Muted and subtle are tuned (not raw Smokey steps) so they meet AA:
     muted clears 4.5:1 on the limestone-75 sunken band; subtle clears 4.5:1 on
     white but is NOT AA on limestone — keep subtle to white surfaces or large
     text, never small text on a limestone band. */
  --icl-color-text: var(--icl-gray-800);
  --icl-color-text-muted: #67696B;
  --icl-color-text-subtle: #727376;
  --icl-color-heading: var(--icl-limestone-900);
  --icl-color-ink: var(--icl-limestone-950);  /* deepest warm ink — hero text
                                     on light bands (same value on-accent
                                     resolves to at lab level, but NOT the
                                     theme-overridable on-accent slot) */
  --icl-color-inverse-text: var(--icl-limestone-100);
  --icl-color-inverse-text-subtle: var(--icl-limestone-300);
  --icl-color-inverse-heading: var(--icl-white);

  /* Accent — the per-project theme surface area. Default theme = ICL
     institutional (Tennessee Orange). Project themes override these. */
  --icl-color-accent: var(--icl-orange-500);
  --icl-color-accent-strong: var(--icl-orange-700); /* AA text on white */
  --icl-color-accent-soft: var(--icl-orange-50);    /* tint wash */
  --icl-color-on-accent: var(--icl-limestone-950);  /* text atop accent */
  --icl-color-accent-inverse: var(--icl-orange-500);/* accent on dark — true
                                       Tennessee Orange passes AA on the
                                       limestone-900 stone bands */

  /* Links — Globe blue on every property and theme; NOT part of the
     per-project accent slot. */
  --icl-color-link: var(--icl-globe-600);
  --icl-color-link-hover: var(--icl-limestone-950);
  --icl-color-inverse-link: var(--icl-globe-300);

  /* White text for filled emphasis/CTA buttons whose fill is dark enough to
     carry it (e.g. the download button's Globe-blue on the lab theme). */
  --icl-color-on-emphasis: var(--icl-white);

  /* Eyebrows & kickers — the pure accent hue on every theme (ICL orange
     #FF8200, each project its accent). Treated as WCAG "incidental text"
     (the real headline sits below), so exempt from the 4.5:1 body-text
     gate; that's what lets true Tennessee Orange be used here. Blue stays
     reserved for links. */
  --icl-color-eyebrow: var(--icl-color-accent);
  --icl-color-eyebrow-inverse: var(--icl-color-accent-inverse);

  /* Borders & lines */
  --icl-color-border: var(--icl-limestone-200);
  --icl-color-border-strong: var(--icl-limestone-400);
  --icl-color-inverse-border: var(--icl-limestone-600);
  --icl-color-keyline: var(--icl-color-accent);
  /* Signature background effect (.icl-background-fx) — adaptive: scanlines on light bands,
     crossed grid on dark stone bands. Light scanlines are limestone-500 ink
     laid down with multiply (see icl.css) so they pick up the surface's
     warmth instead of reading gray; they carry a touch more ink than the
     grid since a single direction works harder. */
  --icl-grid-size: 16px;                                    /* dark grid pitch  */
  --icl-scanline-size: 6px;                                 /* light scanline pitch */
  --icl-color-scanline: rgba(139, 128, 102, 0.3);           /* limestone-500 ink, light bands */
  --icl-color-inverse-grid-line: rgba(255, 255, 255, 0.075);/* grid ink, dark stone bands  */
  /* Feature-strength line inks — same hues, more ink. Used where the
     pattern is part of the composition rather than a whisper (the hero
     background suite bumps its bands to these). */
  --icl-color-scanline-strong: rgba(139, 128, 102, 0.5);
  --icl-color-inverse-grid-line-strong: rgba(255, 255, 255, 0.16);

  /* Focus */
  --icl-color-focus-ring: var(--icl-blue-600);

  /* Status */
  --icl-color-info: var(--icl-blue-600);
  --icl-color-info-bg: var(--icl-blue-100);
  --icl-color-success: var(--icl-green-600);
  --icl-color-success-bg: var(--icl-green-100);
  --icl-color-warning: var(--icl-yellow-600);
  --icl-color-warning-bg: var(--icl-yellow-100);
  --icl-color-danger: var(--icl-red-600);
  --icl-color-danger-bg: var(--icl-red-100);
}

/* ---- tokens/themes.css (verbatim) ---- */
/* ==========================================================================
   ICL Design System — Project Themes
   --------------------------------------------------------------------------
   Every ICL project keeps the shared foundation (limestone, Smokey,
   type, spacing) and swaps ONLY the accent slot. Apply a theme by setting
   data-theme on <html>, <body>, or any subtree:

       <body data-theme="magma">

   Each theme must define all five accent tokens. Rules for choosing a
   project color:
     · accent-strong must pass WCAG AA (4.5:1) as text on white
     · on-accent must pass AA atop accent (use limestone-950 or white)
     · accent-inverse is the accent adjusted for use on limestone-900
     · stay clear of Tennessee Orange — it is reserved for ICL itself
     · links are not themable: they stay Globe blue on every property
   ========================================================================== */

/* Derived aliases (keyline, eyebrow) are declared on :root, where their
   var() references resolve against the DEFAULT accent and then inherit
   as resolved values. Re-declaring them on every themed scope makes
   them re-resolve against the theme's accent instead.
   Links are deliberately NOT here — they stay Globe blue everywhere. */
[data-theme] {
  --icl-color-keyline: var(--icl-color-accent);
  --icl-color-eyebrow: var(--icl-color-accent);
  --icl-color-eyebrow-inverse: var(--icl-color-accent-inverse);
}

/* ICL institutional (default) — defined in tokens.css; repeated here so
   the switcher can reset explicitly. */
[data-theme="icl"] {
  --icl-color-accent: var(--icl-orange-500);
  --icl-color-accent-strong: var(--icl-orange-700);
  --icl-color-accent-soft: var(--icl-orange-50);
  --icl-color-on-accent: var(--icl-limestone-950);
  --icl-color-accent-inverse: var(--icl-orange-500);
}

/* MAGMA — dense linear algebra on GPUs. Molten red. */
[data-theme="magma"] {
  --icl-color-accent: var(--icl-magma-500);
  --icl-color-accent-strong: var(--icl-magma-700);
  --icl-color-accent-soft: #FCEAE8;
  --icl-color-on-accent: #FFFFFF;
  --icl-color-accent-inverse: #F0776D;
}

/* PAPI — performance counters. Instrument green. */
[data-theme="papi"] {
  --icl-color-accent: var(--icl-papi-500);
  --icl-color-accent-strong: var(--icl-papi-700);
  --icl-color-accent-soft: #EBF3E3;
  --icl-color-on-accent: #181510;
  --icl-color-accent-inverse: #8FC468;
}

/* SLATE — distributed dense linear algebra. Slate blue. */
[data-theme="slate"] {
  --icl-color-accent: var(--icl-slateproj-500);
  --icl-color-accent-strong: var(--icl-slateproj-700);
  --icl-color-accent-soft: #E9F0F5;
  --icl-color-on-accent: #FFFFFF;
  --icl-color-accent-inverse: #82ABC7;
}

/* PLASMA — parallel linear algebra for multicore. Ionized violet. */
[data-theme="plasma"] {
  --icl-color-accent: var(--icl-plasma-500);
  --icl-color-accent-strong: var(--icl-plasma-700);
  --icl-color-accent-soft: #F0EAF7;
  --icl-color-on-accent: #FFFFFF;
  --icl-color-accent-inverse: #A98FCB;
}

/* PaRSEC — task-based runtime. Deep teal (kin to UT "Valley"). */
[data-theme="parsec"] {
  --icl-color-accent: var(--icl-parsec-500);
  --icl-color-accent-strong: var(--icl-parsec-700);
  --icl-color-accent-soft: #E2F1F0;
  --icl-color-on-accent: #FFFFFF;
  --icl-color-accent-inverse: #5BB5AE;
}

/* Limestone was adopted as the structural neutral family in v0.3
   (previously a data-neutrals="limestone" experiment here); its values
   now live directly in tokens.css. The legacy cool Slate family is
   retired. */

/* ---- css/icl.css (base rules scoped under .icl-zone; rem pinned to px) ---- */
/* ==========================================================================
   ICL Design System — Components
   --------------------------------------------------------------------------
   Requires tokens/tokens.css (and optionally tokens/themes.css).
   Components reference ONLY semantic tokens (--icl-color-*, --icl-space-*).
   Naming: .icl-component, .icl-component--variant, .icl-component__part
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Reset & base
   -------------------------------------------------------------------------- */
.icl-zone, .icl-zone *, .icl-zone *::before, .icl-zone *::after { box-sizing: border-box; }

.icl-zone {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Anchor jumps clear the sticky .icl-navbar instead of hiding the target
     heading behind it (navbar is 50.4px + keyline; a little breathing room). */
  scroll-padding-top: 64.8px;
}

.icl-zone {
  margin: 0;
  font-family: var(--icl-font-sans);
  font-size: var(--icl-text-md);
  line-height: var(--icl-leading-normal);
  color: var(--icl-color-text);
  background: var(--icl-color-bg);
  -webkit-font-smoothing: antialiased;
}

.icl-zone img, .icl-zone svg, .icl-zone video { max-width: 100%; height: auto; display: block; }

.icl-zone :focus-visible {
  outline: 2px solid var(--icl-color-focus-ring);
  outline-offset: 2px;
}

.icl-zone ::selection {
  background: var(--icl-color-accent);
  color: var(--icl-color-on-accent);
}

@media (prefers-reduced-motion: reduce) {
  .icl-zone, .icl-zone *, .icl-zone *::before, .icl-zone *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   2 · Typography
   -------------------------------------------------------------------------- */
.icl-zone h1, .icl-zone h2, .icl-zone h3, .icl-zone h4, .icl-zone h5, .icl-zone h6 {
  margin: 0 0 var(--icl-space-3);
  font-family: var(--icl-font-sans);
  font-weight: 700;
  line-height: var(--icl-leading-tight);
  color: var(--icl-color-heading);
}

.icl-zone h1 { font-size: var(--icl-text-4xl); }
.icl-zone h2 { font-size: var(--icl-text-3xl); }
.icl-zone h3 { font-size: var(--icl-text-2xl); }
.icl-zone h4 { font-size: var(--icl-text-xl); }
.icl-zone h5 { font-size: var(--icl-text-lg); }
.icl-zone h6 {
  font-size: var(--icl-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--icl-tracking-caps);
  color: var(--icl-color-text-muted);
}

.icl-zone p { margin: 0 0 var(--icl-space-4); }

.icl-zone a {
  color: var(--icl-color-link);
  text-decoration: none;
  text-underline-offset: 0.2em;
  transition: color var(--icl-duration-fast) var(--icl-ease);
}
.icl-zone a:hover { color: var(--icl-color-link-hover); text-decoration: underline; }

.icl-zone hr {
  border: 0;
  border-top: 1px solid var(--icl-color-border);
  margin: var(--icl-space-6) 0;
}

.icl-zone code, .icl-zone kbd, .icl-zone samp {
  font-family: var(--icl-font-mono);
  font-size: 0.875em;
}
.icl-zone code {
  background: var(--icl-color-surface-sunken);
  border: 1px solid var(--icl-color-border);
  border-radius: var(--icl-radius-sm);
  padding: 0.1em 0.35em;
}
/* On dark bands the light chip disappears under light text — use the
   accent as the highlight instead (theme-aware). */
.icl-zone .icl-section--inverse code, .icl-zone .icl-hero code, .icl-zone .icl-footer code {
  background: var(--icl-color-accent);
  border-color: transparent;
  color: var(--icl-color-on-accent);
}

.icl-zone blockquote {
  margin: var(--icl-space-5) 0;
  padding: var(--icl-space-2) var(--icl-space-5);
  border-left: var(--icl-keyline-width) solid var(--icl-color-keyline);
  font-family: var(--icl-font-serif);
  font-size: var(--icl-text-lg);
  line-height: var(--icl-leading-loose);
  color: var(--icl-color-text-muted);
}

/* Display type — Rift. The distinct ICL voice: condensed, uppercase. */
.icl-zone .icl-display {
  font-family: var(--icl-font-display);
  font-weight: 700;
  font-size: var(--icl-text-display);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--icl-color-heading);
  margin: 0 0 var(--icl-space-3);
}

.icl-zone .icl-display--md { font-size: var(--icl-text-5xl); }
.icl-zone .icl-display--sm { font-size: var(--icl-text-4xl); }

/* Eyebrow — small tracked label above a heading. Proxima Nova caps;
   Globe blue on light surfaces (default theme), project accent under
   project themes. */
.icl-zone .icl-eyebrow {
  display: block;
  font-family: var(--icl-font-sans);
  font-weight: 700;
  font-size: var(--icl-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--icl-tracking-caps);
  color: var(--icl-color-eyebrow);
  margin: 0 0 var(--icl-space-2);
}

/* Signature name style — first name Merriweather bold, last name
   Proxima Nova caps (from the PAPI team grid). Works inline anywhere:
   <span class="icl-name__first">Jack</span>
   <span class="icl-name__last">Dongarra</span> */
.icl-zone .icl-name__first {
  font-family: var(--icl-font-serif);
  font-weight: 700;
}
.icl-zone .icl-name__last {
  font-family: var(--icl-font-sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
}

/* Lede — opening paragraph */
.icl-zone .icl-lede {
  font-size: var(--icl-text-xl);
  line-height: var(--icl-leading-snug);
  color: var(--icl-color-text-muted);
  max-width: 42em;
}

/* Prose — long-form editorial (newsletter, articles) */
.icl-zone .icl-prose {
  font-family: var(--icl-font-serif);
  font-size: 15.3px;
  line-height: var(--icl-leading-loose);
  max-width: var(--icl-container-narrow);
}
.icl-zone .icl-prose h2, .icl-zone .icl-prose h3 { font-family: var(--icl-font-sans); margin-top: var(--icl-space-6); }

/* --------------------------------------------------------------------------
   3 · Layout
   -------------------------------------------------------------------------- */
.icl-zone .icl-container {
  max-width: var(--icl-container-max);
  margin-inline: auto;
  padding-inline: var(--icl-container-pad);
}
.icl-zone .icl-container--narrow { max-width: var(--icl-container-narrow); }

.icl-zone .icl-section { padding-block: var(--icl-space-8); }
.icl-zone .icl-section--tight { padding-block: var(--icl-space-7); }

/* Alternating band backgrounds (the projector-site rhythm) */
.icl-zone .icl-section--sunken {
  background: var(--icl-color-surface-sunken);
  border-top: 1px solid var(--icl-color-border);
  border-bottom: 1px solid var(--icl-color-border);
  box-shadow: var(--icl-shadow-inset-band);
}
.icl-zone .icl-section--inverse {
  background: var(--icl-color-inverse-bg);
  color: var(--icl-color-inverse-text);
}
.icl-zone .icl-section--inverse h1, .icl-zone .icl-section--inverse h2, .icl-zone .icl-section--inverse h3, .icl-zone .icl-section--inverse h4, .icl-zone .icl-section--inverse .icl-display {
  color: var(--icl-color-inverse-heading);
}
.icl-zone .icl-section--inverse a:not([class*="icl-btn"]) { color: var(--icl-color-inverse-link); }
.icl-zone .icl-section--inverse .icl-eyebrow { color: var(--icl-color-eyebrow-inverse); }

/* Accent band — the band-level accent surface: Tennessee Orange at lab level,
   each project theme its own hue (rule 8 satisfied through the accent slot).
   Adopted with the hero background suite (v0.7). On-accent ink carries all
   text: the usual eyebrow hue (pure accent) and link hue (Globe blue) both
   fail against the accent itself — accent-on-accent is invisible and Globe
   blue is 2.4:1 on orange — so both drop to on-accent here. Keep inline
   links off accent bands where possible; buttons are the CTA vocabulary. */
.icl-zone .icl-section--accent {
  background: var(--icl-color-accent);
  color: var(--icl-color-on-accent);
}
/* Accent-filled buttons sitting on the accent band match the band — a white
   outline gives them back an edge. */
.icl-zone .icl-section--accent .icl-btn--primary, .icl-zone .icl-section--accent .icl-btn--download {
  border-color: var(--icl-color-on-emphasis);
}
/* Secondary (outline) buttons drop to on-accent — their accent-strong
   text/border would sink into the band. Border follows via currentColor. */
.icl-zone .icl-section--accent .icl-btn--secondary { color: var(--icl-color-on-accent); }
.icl-zone .icl-section--accent h1, .icl-zone .icl-section--accent h2, .icl-zone .icl-section--accent h3, .icl-zone .icl-section--accent h4, .icl-zone .icl-section--accent .icl-display {
  color: var(--icl-color-on-accent);
}
.icl-zone .icl-section--accent a:not([class*="icl-btn"]) { color: var(--icl-color-on-accent); }
.icl-zone .icl-section--accent .icl-eyebrow { color: var(--icl-color-on-accent); }
.icl-zone .icl-section--accent.icl-background-fx { --icl-grid-fade: var(--icl-color-accent); }

/* Signature background effect (.icl-background-fx) — descendant of the legacy
   grid-bg.jpg, built in pure CSS + SVG. It's adaptive: horizontal scanlines
   on light surfaces, the crossed graph-paper grid on dark stone bands. One
   class, .icl-background-fx;
   the band's own light/dark treatment picks the pattern (David's call —
   scanlines read best on limestone, the grid reads best light-on-stone).
   In both cases the lines fade in and out over ~1.8px (printed, not
   pixel-crisp) with an SVG film-grain wash so the surface reads as worn
   paper.

   The veil fades the texture out around the content so headings can
   breathe. Default assumes the heading sits upper-left: clean at the top
   left, texture emerging toward the bottom right. For bands with centered
   content, .icl-background-fx--center clears the middle instead. Override
   --icl-grid-veil for anything bespoke. */
.icl-zone .icl-background-fx {
  /* Light bands: warm limestone scanlines. Multiply lays the lines down
     like ink on the surface so they take the limestone's warmth instead
     of sitting on top as gray; veil and grain stay normal. */
  /* The grain SVGs are base64-encoded ON PURPOSE: CSS aggregators (Drupal 7's
     rewrote the SVG-internal filter reference "#g" into a file path, which
     killed the filter and tiled the rect solid black) can't touch base64.
     The rect also carries fill='none' so a failed filter degrades to
     invisible, never black. Decoded source lives in tools/grain-svgs.md.
     (Keep even comments free of literal "u r l (" sequences — aggregator
     regexes don't all strip comments first.) */
  --icl-grid-fade: var(--icl-color-surface-sunken);
  --icl-grid-veil: linear-gradient(to top left, transparent 10%, var(--icl-grid-fade) 80%);
  /* Grain rides in a custom property so a band can opt out inline
     (--icl-fx-grain: none) — e.g. on a pure-white band where the wash
     reads as off-white. */
  --icl-fx-grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSdnJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDAuMjIgMCAwIDAgMCAwLjE5IDAgMCAwIDAgMC4xNCAwIDAgMCAwLjEyIDAnLz48L2ZpbHRlcj48cmVjdCB3aWR0aD0nMTQwJyBoZWlnaHQ9JzE0MCcgZmlsbD0nbm9uZScgZmlsdGVyPSd1cmwoI2cpJy8+PC9zdmc+");
  background-image:
    var(--icl-grid-veil),
    var(--icl-fx-grain),
    linear-gradient(180deg, transparent 0.2px, var(--icl-color-scanline) 0.9px, transparent 1.8px);
  background-size:
    100% 100%,
    140px 140px,
    var(--icl-scanline-size) var(--icl-scanline-size);
  background-blend-mode: normal, normal, multiply;
}
.icl-zone .icl-section--inverse.icl-background-fx, .icl-zone .icl-hero.icl-background-fx, .icl-zone .icl-footer.icl-background-fx, .icl-zone .icl-background-fx--inverse {
  /* Dark stone bands: light graph-paper grid. White lines would vanish
     under multiply, so these composite normally. */
  --icl-grid-fade: var(--icl-color-inverse-bg);
  --icl-fx-grain: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJz48ZmlsdGVyIGlkPSdnJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC44JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdmFsdWVzPScwIDAgMCAwIDEgMCAwIDAgMCAxIDAgMCAwIDAgMC45NSAwIDAgMCAwLjEgMCcvPjwvZmlsdGVyPjxyZWN0IHdpZHRoPScxNDAnIGhlaWdodD0nMTQwJyBmaWxsPSdub25lJyBmaWx0ZXI9J3VybCgjZyknLz48L3N2Zz4=");
  background-image:
    var(--icl-grid-veil),
    var(--icl-fx-grain),
    linear-gradient(180deg, transparent 0.2px, var(--icl-color-inverse-grid-line) 0.9px, transparent 1.8px),
    linear-gradient(90deg, transparent 0.2px, var(--icl-color-inverse-grid-line) 0.9px, transparent 1.8px);
  background-size:
    100% 100%,
    140px 140px,
    var(--icl-grid-size) var(--icl-grid-size),
    var(--icl-grid-size) var(--icl-grid-size);
  background-blend-mode: normal;
}
/* Centered-content bands: clear the middle, texture at the edges */
.icl-zone .icl-background-fx--center {
  --icl-grid-veil: radial-gradient(ellipse at 50% 50%, var(--icl-grid-fade) 25%, transparent 85%);
}
/* Spotlight: the inverse veil — the effect is fullest at a focal point and
   fades away from it (e.g. scanlines strongest behind a collage's images).
   Set the focal point with --icl-fx-focus (default sits left-of-center, over
   a collage's media column) and the reach with --icl-fx-spotlight (ellipse
   radii as % of band width/height — the default's 40% vertical radius fades
   the effect out by the top/bottom of a collage's photos rather than running
   to the band edges). */
.icl-zone .icl-background-fx--spotlight {
  --icl-grid-veil: radial-gradient(ellipse var(--icl-fx-spotlight, 55% 40%) at var(--icl-fx-focus, 30% 50%),
    transparent 30%, var(--icl-grid-fade) 100%);
}

/* Hero background suite (.icl-hero-bg) — layered promotional surfaces in the
   manner of the ACS NUCL fx panels: base color → photo → content, with the
   signature effect still supplied by .icl-background-fx (the band's own
   light/dark treatment keeps picking scanlines vs grid — rule 10 intact).
   This class only adds the photo-layer machinery on the band's pseudos.

     <section class="icl-hero icl-background-fx icl-hero-bg"
              style="--icl-hero-image: url('server-room.jpg')">

   Surfaces are the band classes already in the system: .icl-hero /
   .icl-section--inverse (dark stone), .icl-section--sunken (light
   limestone), .icl-section--accent (orange, or the project hue).

   The photo anchors right and masks out toward the content side, so it
   cross-fades against the pattern and the heading sits on calm base color
   (the same reasoning as the ACS --bg-image layer). Knobs:
     --icl-hero-image     the photo; omit it and the band is a plain fx band.
                          Use a site-root-relative or absolute URL — browsers
                          resolve a relative url() in a custom property
                          against the consuming stylesheet, not the page
     --icl-hero-position  cover anchor (default 75% 50%)
     --icl-hero-mask      the cross-fade (overrides the width-adaptive
                          default at every size)
     --icl-hero-overlay-mask  reach of the pattern overlay that rides OVER
                          the photo (default fades in from the content side
                          and holds the photo side; see below)
     --icl-hero-halo      size of the text halo (band-colored bloom behind
                          hero text) — 0 disables (the opt-out), 0.4 default
     --icl-hero-halo-spread   reach of the halo's outer layers (default 2)
     --icl-hero-halo-opacity  strength of the halo color, 0–1 (default 1)
     --icl-hero-overlay-blend  blend of that overlay. Defaults are the
                          adaptive pair (David, 2026-08-21): color-burn on
                          light bands, color-dodge on dark stone — the
                          escape hatch for a tonally mismatched photo is
                          setting this to multiply (light) / screen (dark)
                          inline on the band

   The suite is width-adaptive (David, 2026-08-21): the band is a size query
   container, and the pseudos — which CAN query their originating element —
   step up at 691.2px of container width, where a panel stops being a card and
   starts being a hero. Wide panels get feature-strength line inks and the
   long eased cross-fade; card-scale panels keep the quiet default inks and
   a compressed fade so the copy clears the photo. Browsers without
   container queries degrade to the quiet card treatment everywhere — never
   the loud one. The band's OWN fx pattern cannot self-query, so it stays at
   the quiet shared inks at every size; the veil and the photo cover nearly
   all of it, and the overlay is what carries the pattern at feature
   strength. */
.icl-zone .icl-hero-bg {
  position: relative;
  isolation: isolate;  /* keeps the duotone blend inside the band */
  container-name: icl-hero-bg;
  container-type: inline-size;
}
/* z-index -1 paints the pseudos above the band's own background stack
   (base color + fx pattern) but below its in-flow content, so the content
   needs no z-index of its own. Mask blacks are alpha carriers, not rendered
   color. */
/* --icl-hero-fade / --icl-hero-overlay-fade are the width-adaptive default
   masks (internal — override the public knobs above, not these). */
.icl-zone .icl-hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--icl-hero-image, none);
  background-size: cover;
  background-position: var(--icl-hero-position, 75% 50%);
  --icl-hero-fade: linear-gradient(to left, rgba(0,0,0,1) 18%, rgba(0,0,0,0.7) 32%, rgba(0,0,0,0.3) 48%, rgba(0,0,0,0) 64%);
  -webkit-mask-image: var(--icl-hero-mask, var(--icl-hero-fade));
  mask-image: var(--icl-hero-mask, var(--icl-hero-fade));
}
/* Pattern overlay — the signature lines carried OVER the photo. The band's
   own fx pattern sits under the photo and would die where the image is
   opaque; this pseudo re-draws just the line layer above it, masked to
   fade in from the content side and hold the photo side, so the print
   runs across the whole panel. Blends are the adaptive contrast pair,
   chosen over multiply/screen in the 2026-08-21 comparison: ink scanlines
   COLOR-BURN on light bands (etched into the image's darks, clear of its
   highlights); the light grid COLOR-DODGES on dark stone (lit out of the
   image's highlights, absent from its blacks). The texture keys itself to
   the image — strongest where the photo's tonality matches the band, gone
   where it doesn't. For a mismatched photo (dark image on a light band or
   the reverse) the pattern fades out of the overlay region entirely; if it
   must read there, drop --icl-hero-overlay-blend to the even-handed
   multiply (light) / screen (dark). */
.icl-zone .icl-hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image:
    linear-gradient(180deg, transparent 0.2px, var(--icl-color-scanline) 0.9px, transparent 1.8px);
  background-size: var(--icl-scanline-size) var(--icl-scanline-size);
  mix-blend-mode: var(--icl-hero-overlay-blend, color-burn);
  --icl-hero-overlay-fade: linear-gradient(to right, rgba(0,0,0,0) 18%, rgba(0,0,0,1) 58%);
  -webkit-mask-image: var(--icl-hero-overlay-mask, var(--icl-hero-overlay-fade));
  mask-image: var(--icl-hero-overlay-mask, var(--icl-hero-overlay-fade));
}
.icl-zone .icl-section--inverse.icl-hero-bg::after, .icl-zone .icl-hero.icl-hero-bg::after, .icl-zone .icl-footer.icl-hero-bg::after, .icl-zone .icl-background-fx--inverse.icl-hero-bg::after {
  background-image:
    linear-gradient(180deg, transparent 0.2px, var(--icl-color-inverse-grid-line) 0.9px, transparent 1.8px),
    linear-gradient(90deg, transparent 0.2px, var(--icl-color-inverse-grid-line) 0.9px, transparent 1.8px);
  background-size:
    var(--icl-grid-size) var(--icl-grid-size),
    var(--icl-grid-size) var(--icl-grid-size);
  mix-blend-mode: var(--icl-hero-overlay-blend, color-dodge);
}
/* Flipped composition — photo holds the left edge, content sits right */
.icl-zone .icl-hero-bg--flip::before {
  background-position: var(--icl-hero-position, 25% 50%);
  --icl-hero-fade: linear-gradient(to right, rgba(0,0,0,1) 18%, rgba(0,0,0,0.7) 32%, rgba(0,0,0,0.3) 48%, rgba(0,0,0,0) 64%);
}
.icl-zone .icl-hero-bg--flip::after {
  --icl-hero-overlay-fade: linear-gradient(to left, rgba(0,0,0,0) 18%, rgba(0,0,0,1) 58%);
}

/* Hero scale (container ≥ 691.2px): feature-strength inks on the overlay and
   the long eased cross-fade on the photo. */
@container icl-hero-bg (min-width: 691.2px) {
  .icl-zone .icl-hero-bg::before {
    --icl-hero-fade: linear-gradient(to left, rgba(0,0,0,1) 30%, rgba(0,0,0,0.72) 45%, rgba(0,0,0,0.35) 62%, rgba(0,0,0,0) 80%);
  }
  .icl-zone .icl-hero-bg--flip::before {
    --icl-hero-fade: linear-gradient(to right, rgba(0,0,0,1) 30%, rgba(0,0,0,0.72) 45%, rgba(0,0,0,0.35) 62%, rgba(0,0,0,0) 80%);
  }
  .icl-zone .icl-hero-bg::after {
    --icl-color-scanline: var(--icl-color-scanline-strong);
    --icl-color-inverse-grid-line: var(--icl-color-inverse-grid-line-strong);
  }
}

/* Duotone photo — the people-photo gradient map at band scale. The grayscale
   photo blends with the surface beneath it (base color + fx pattern — the
   printed lines show through the image), mapping the photo into the band's
   own hue. Adaptive like the fx itself: on light bands the photo multiplies
   down like ink (a [limestone ink → paper] map); on dark stone and accent
   bands it screens up (a [surface → warm white] map — stone gives a warm
   silver print, accent the orange one). Knobs mirror the person duotone:
     --icl-hero-duotone-contrast  midtone spread, pre-blend
     --icl-hero-duotone-paper     endpoint trim — on dark/accent bands <1
                                  warms highlights off pure white; on light
                                  bands >1 lifts the photo's blacks so the
                                  print stays warm dark, never pure black */
.icl-zone .icl-hero-bg--duotone::before {
  filter: grayscale(1)
          contrast(var(--icl-hero-duotone-contrast, 0.9))
          brightness(var(--icl-hero-duotone-paper, 1.2));
  mix-blend-mode: var(--icl-hero-blend, multiply);
}
.icl-zone .icl-section--inverse.icl-hero-bg--duotone, .icl-zone .icl-hero.icl-hero-bg--duotone, .icl-zone .icl-footer.icl-hero-bg--duotone, .icl-zone .icl-background-fx--inverse.icl-hero-bg--duotone, .icl-zone .icl-section--accent.icl-hero-bg--duotone {
  --icl-hero-blend: screen;
  --icl-hero-duotone-contrast: 1.4;
  --icl-hero-duotone-paper: 0.93;
}

/* Type is part of the hero formula (David, 2026-08-21).
   Titles wear the display voice — Rift, uppercase — sized to the panel by
   the same 691.2px container threshold as the rest of the suite: card scale
   below it, hero scale above. A heading that carries .icl-display keeps
   its own explicit scale (real page heroes keep using it).
   Body copy sits over texture and the photo fade, so it runs a step bolder
   and larger than default; ledes keep their own size (already larger) but
   share the weight. :where keeps the lede exclusion at zero specificity. */
.icl-zone .icl-hero-bg h1:not(.icl-display), .icl-zone .icl-hero-bg h2:not(.icl-display), .icl-zone .icl-hero-bg h3:not(.icl-display), .icl-zone .icl-hero-bg h4:not(.icl-display) {
  font-family: var(--icl-font-display);
  font-weight: 700;
  font-size: var(--icl-text-2xl);
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: var(--icl-space-2);
}
.icl-zone .icl-hero-bg p { font-weight: 600; }
.icl-zone .icl-hero-bg p:where(:not(.icl-hero__lede)) { font-size: var(--icl-text-lg); }
/* Light-band hero text runs at the deepest warm ink so limestone and
   accent panels carry equal text weight (David, 2026-08-21) — the default
   heading (limestone-900) and body (gray-800) read a step lighter than the
   accent band's on-accent. --icl-color-ink, not on-accent: themes override
   on-accent (white for dark project accents), which would break a light
   band. Dark stone bands keep their inverse colors. */
.icl-zone .icl-section--sunken.icl-hero-bg { color: var(--icl-color-ink); }
.icl-zone .icl-section--sunken.icl-hero-bg h1, .icl-zone .icl-section--sunken.icl-hero-bg h2, .icl-zone .icl-section--sunken.icl-hero-bg h3, .icl-zone .icl-section--sunken.icl-hero-bg h4 {
  color: var(--icl-color-ink);
}
/* Text halo — a soft bloom in the band's OWN base color behind hero text
   (David, 2026-08-21). Where copy crosses into the photo the bloom lifts it
   off the image; over the flat band color it is invisible, because it IS
   that color (--icl-grid-fade, resolved per band by the fx rules; falls
   back to transparent = no-op off an fx band). No new color enters the
   system. Knobs (text-shadow itself has no spread or opacity — spread here
   is the reach of the two outer layers, opacity rides in the color):
     --icl-hero-halo          size — scales every blur radius; 0 disables,
                              0.4 default
     --icl-hero-halo-spread   tail reach — scales only the outer layers;
                              2 default
     --icl-hero-halo-opacity  0–1 — fades the bloom color via color-mix
   A raised card sitting on a hero band should set --icl-hero-halo: 0 (the
   band-colored bloom would show against the card's white). */
.icl-zone .icl-hero-bg :is(h1, .icl-zone h2, .icl-zone h3, .icl-zone h4, .icl-zone p, .icl-zone .icl-eyebrow) {
  --icl-hero-halo-color: color-mix(in srgb,
    var(--icl-grid-fade, transparent) calc(var(--icl-hero-halo-opacity, 1) * 100%),
    transparent);
  text-shadow:
    0 0 calc(3px  * var(--icl-hero-halo, 0.4)) var(--icl-hero-halo-color),
    0 0 calc(6px  * var(--icl-hero-halo, 0.4)) var(--icl-hero-halo-color),
    0 0 calc(12px * var(--icl-hero-halo, 0.4) * var(--icl-hero-halo-spread, 2)) var(--icl-hero-halo-color),
    0 0 calc(24px * var(--icl-hero-halo, 0.4) * var(--icl-hero-halo-spread, 2)) var(--icl-hero-halo-color);
}
/* Hero-scale title size. This block must FOLLOW the base title rule above:
   the two tie on specificity, so source order decides which wins inside
   the query — earlier placement would let the card size override this. */
@container icl-hero-bg (min-width: 691.2px) {
  .icl-zone .icl-hero-bg h1:not(.icl-display), .icl-zone .icl-hero-bg h2:not(.icl-display), .icl-zone .icl-hero-bg h3:not(.icl-display), .icl-zone .icl-hero-bg h4:not(.icl-display) {
    font-size: var(--icl-text-4xl);
  }
}

/* Signature keyline — accent rule on top edge */
.icl-zone .icl-keyline-top { border-top: var(--icl-keyline-width) solid var(--icl-color-keyline); }

/* Simple responsive grid */
.icl-zone .icl-grid { display: grid; gap: var(--icl-space-5); }
.icl-zone .icl-grid--2 { grid-template-columns: repeat(2, 1fr); }
.icl-zone .icl-grid--3 { grid-template-columns: repeat(3, 1fr); }
.icl-zone .icl-grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 806.4px) {
  .icl-zone .icl-grid--3, .icl-zone .icl-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 518.4px) {
  .icl-zone .icl-grid--2, .icl-zone .icl-grid--3, .icl-zone .icl-grid--4 { grid-template-columns: 1fr; }
}

/* Section header — eyebrow + title + optional lede, used everywhere */
.icl-zone .icl-section-header { margin-bottom: var(--icl-space-6); max-width: 46em; }
.icl-zone .icl-section-header .icl-display, .icl-zone .icl-section-header h2 { margin-bottom: var(--icl-space-2); }

/* --------------------------------------------------------------------------
   4 · Buttons
   -------------------------------------------------------------------------- */
.icl-zone .icl-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--icl-space-2);
  font-family: var(--icl-font-display); /* buttons are actions — display voice */
  font-size: var(--icl-text-md);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--icl-tracking-wide);
  padding: 0.75em 1.5em;
  border: 1px solid transparent;
  border-radius: var(--icl-radius-md); /* subtly rounded */
  cursor: pointer;
  text-decoration: none;
  transition: background var(--icl-duration-fast) var(--icl-ease),
              border-color var(--icl-duration-fast) var(--icl-ease),
              color var(--icl-duration-fast) var(--icl-ease);
}
.icl-zone .icl-btn:hover { text-decoration: none; }

.icl-zone .icl-btn--primary {
  background: var(--icl-color-accent);
  color: var(--icl-color-on-accent);
}
.icl-zone .icl-btn--primary:hover {
  background: var(--icl-color-accent-strong);
  color: var(--icl-color-bg);
}

.icl-zone .icl-btn--secondary {
  background: transparent;
  color: var(--icl-color-accent-strong);
  border-color: currentColor;
}
.icl-zone .icl-btn--secondary:hover {
  background: var(--icl-color-accent-soft);
  color: var(--icl-color-accent-strong);
}

.icl-zone .icl-btn--ghost {
  background: transparent;
  color: var(--icl-color-text);
}
.icl-zone .icl-btn--ghost:hover { background: var(--icl-color-surface-sunken); color: var(--icl-color-heading); }

/* On dark surfaces */
.icl-zone .icl-btn--inverse {
  background: transparent;
  color: var(--icl-color-inverse-heading);
  border-color: var(--icl-color-inverse-border);
}
.icl-zone .icl-btn--inverse:hover { border-color: var(--icl-color-accent-inverse); color: var(--icl-color-accent-inverse); }

/* Neutral outline — a quiet secondary action (e.g. DOI/BibTeX) with no accent
   color, so an accent-filled sibling can carry the emphasis. */
.icl-zone .icl-btn--outline {
  background: transparent;
  color: var(--icl-color-text);
  border-color: var(--icl-color-border-strong);
}
.icl-zone .icl-btn--outline:hover {
  background: var(--icl-color-surface-sunken);
  border-color: var(--icl-color-text-muted);
  color: var(--icl-color-heading);
}

/* Emphasized download CTA — filled, white text, pairs with a download icon.
   On project themes it uses the accent (dark enough for white text). On the
   lab theme Tennessee Orange can't carry white accessibly (2.5:1), so the fill
   falls back to Globe blue there. */
.icl-zone .icl-btn--download {
  background: var(--icl-color-link);
  color: var(--icl-color-on-emphasis);
}
.icl-zone[data-theme]:not([data-theme="icl"]) .icl-btn--download, .icl-zone [data-theme]:not([data-theme="icl"]) .icl-btn--download {
  background: var(--icl-color-accent);
  color: var(--icl-color-on-accent);
}
/* Re-assert the text color on hover, or the global a:hover rule recolors it
   dark against the fill. Darken the fill itself via brightness. */
.icl-zone .icl-btn--download:hover {
  filter: brightness(0.93);
  color: var(--icl-color-on-emphasis);
}
.icl-zone[data-theme]:not([data-theme="icl"]) .icl-btn--download:hover, .icl-zone [data-theme]:not([data-theme="icl"]) .icl-btn--download:hover {
  color: var(--icl-color-on-accent);
}

.icl-zone .icl-btn--sm { font-size: var(--icl-text-sm); padding: 0.55em 1.1em; }
.icl-zone .icl-btn--lg { font-size: var(--icl-text-lg); padding: 0.85em 1.8em; }

.icl-zone .icl-btn[disabled], .icl-zone .icl-btn--disabled {
  opacity: 0.45;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   5 · Badges & tags
   -------------------------------------------------------------------------- */
.icl-zone .icl-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--icl-font-sans); /* Proxima, not Rift — Rift badges read as buttons */
  font-weight: 700; /* the kit has no Proxima 600 */
  font-size: var(--icl-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--icl-tracking-wide);
  line-height: 1;
  padding: 0.45em 0.8em;
  border-radius: var(--icl-radius-sm);
  background: var(--icl-color-accent-soft);
  color: var(--icl-color-accent-strong);
}
.icl-zone .icl-badge--solid { background: var(--icl-color-accent); color: var(--icl-color-on-accent); }
.icl-zone .icl-badge--neutral { background: var(--icl-color-surface-sunken); color: var(--icl-color-text-muted); border: 1px solid var(--icl-color-border); }
.icl-zone .icl-badge--info { background: var(--icl-color-info-bg); color: var(--icl-color-info); }
.icl-zone .icl-badge--success { background: var(--icl-color-success-bg); color: var(--icl-color-success); }
.icl-zone .icl-badge--warning { background: var(--icl-color-warning-bg); color: var(--icl-color-warning); }
.icl-zone .icl-badge--danger { background: var(--icl-color-danger-bg); color: var(--icl-color-danger); }

/* Tag — lowercase metadata chip (research areas, keywords) */
.icl-zone .icl-tag {
  display: inline-block;
  font-size: var(--icl-text-sm);
  line-height: 1;
  padding: 0.4em 0.7em;
  border: 1px solid var(--icl-color-border);
  border-radius: var(--icl-radius-full);
  color: var(--icl-color-text-muted);
  background: var(--icl-color-surface);
  text-decoration: none;
}
.icl-zone a.icl-tag:hover {
  border-color: var(--icl-color-accent-strong);
  color: var(--icl-color-accent-strong);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   6 · Forms
   -------------------------------------------------------------------------- */
.icl-zone .icl-field { margin-bottom: var(--icl-space-4); }

.icl-zone .icl-label {
  display: block;
  font-size: var(--icl-text-sm);
  font-weight: 600;
  color: var(--icl-color-heading);
  margin-bottom: var(--icl-space-1);
}

.icl-zone .icl-hint {
  font-size: var(--icl-text-sm);
  color: var(--icl-color-text-subtle);
  margin-top: var(--icl-space-1);
}

.icl-zone .icl-input, .icl-zone .icl-select, .icl-zone .icl-textarea {
  width: 100%;
  font-family: var(--icl-font-sans);
  font-size: var(--icl-text-md);
  color: var(--icl-color-text);
  background: var(--icl-color-surface);
  border: 1px solid var(--icl-color-border-strong);
  border-radius: var(--icl-radius-sm);
  padding: 0.6em 0.75em;
  transition: border-color var(--icl-duration-fast) var(--icl-ease);
}
.icl-zone .icl-input:focus, .icl-zone .icl-select:focus, .icl-zone .icl-textarea:focus {
  outline: 2px solid var(--icl-color-focus-ring);
  outline-offset: -1px;
  border-color: var(--icl-color-focus-ring);
}
.icl-zone .icl-input[aria-invalid="true"] { border-color: var(--icl-color-danger); }
.icl-zone .icl-textarea { min-height: 93.6px; resize: vertical; }

.icl-zone .icl-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2358595B' d='M1.4 0L6 4.6 10.6 0 12 1.4l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75em center;
  padding-right: 2.25em;
}

/* Search — nav-embedded variant */
.icl-zone .icl-search { position: relative; }
.icl-zone .icl-search .icl-input { padding-left: 2.4em; }
.icl-zone .icl-search::before {
  content: "";
  position: absolute;
  left: 0.8em; top: 50%;
  width: 1em; height: 1em;
  transform: translateY(-50%);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23838588' stroke-width='2'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='M11 11l4 4'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* --------------------------------------------------------------------------
   7 · Cards
   -------------------------------------------------------------------------- */
.icl-zone .icl-card {
  background: var(--icl-color-surface-raised);
  border: 1px solid var(--icl-color-border);
  border-radius: var(--icl-radius-md);
  padding: var(--icl-space-5);
  box-shadow: var(--icl-shadow-sm);
}

/* Feature card — the keyline motif carries project identity.
   Keyline surfaces are square: a rounded corner would peel away from the
   straight accent edge (same rule on .icl-pub, .icl-alert, .icl-codeblock). */
.icl-zone .icl-card--feature {
  border-top: var(--icl-keyline-width) solid var(--icl-color-keyline);
  border-radius: 0;
  transition: box-shadow var(--icl-duration-base) var(--icl-ease),
              transform var(--icl-duration-base) var(--icl-ease);
}
.icl-zone a.icl-card--feature { display: block; color: inherit; text-decoration: none; }
.icl-zone a.icl-card--feature:hover {
  box-shadow: var(--icl-shadow-md);
  transform: translateY(-2px);
  text-decoration: none;
}

.icl-zone .icl-card__kicker {
  font-family: var(--icl-font-sans);
  font-weight: 700;
  font-size: var(--icl-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--icl-tracking-caps);
  color: var(--icl-color-eyebrow);
  margin-bottom: var(--icl-space-2);
}
.icl-zone .icl-card__title { font-size: var(--icl-text-xl); margin-bottom: var(--icl-space-2); }
.icl-zone .icl-card__body { color: var(--icl-color-text-muted); margin-bottom: 0; }
.icl-zone .icl-card__meta {
  margin-top: var(--icl-space-4);
  font-size: var(--icl-text-sm);
  color: var(--icl-color-text-subtle);
}

/* Person card */
.icl-zone .icl-person { text-align: center; }
.icl-zone .icl-person__photo {
  width: 108px; height: 108px;
  margin: 0 auto var(--icl-space-3);
  border-radius: var(--icl-radius-full);
  object-fit: cover;
  background: var(--icl-color-surface-sunken);
}
.icl-zone .icl-person__initials {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--icl-font-display);
  font-size: var(--icl-text-2xl);
  font-weight: 700;
  color: var(--icl-color-accent-strong);
  background: var(--icl-color-accent-soft);
}
/* Duotone photo treatment — a CSS gradient map of [accent ink → white].
   The grayscale photo screens onto the frame's ink-colored backdrop:
   shadows take the ink color, highlights go to warm white. The backdrop
   is the tonal floor, so the ink mixes accent toward heading-dark to
   keep faces legible; contrast spreads the midtones before the blend.
   isolation keeps the blend from reaching the band/card behind the
   circle. Knobs are per-element tunable (same pattern as the fx knobs). */
.icl-zone .icl-person__photo-frame {
  --icl-duotone-ink-mix: 30%;   /* how far the ink darkens from accent */
  --icl-duotone-contrast: 1.5;  /* midtone spread, pre-blend           */
  --icl-duotone-paper: 0.93;    /* <1 warms highlights off pure white  */
  width: 108px; height: 108px;
  margin: 0 auto var(--icl-space-3);
  position: relative;
  border-radius: var(--icl-radius-full);
  overflow: hidden;
  isolation: isolate;
  /* NO background here: browsers paint the element's own background out to
     the full rounded edge but clip children slightly tighter, so a painted
     backdrop always peeks through as a hairline ring the photo can never
     cover. The ink backdrop lives on ::before instead — a child, clipped
     like the photo and inset 1px inside its coverage. */
}
/* No inset and no radius of its own: the frame's clip must be the ONLY
   rounded edge in the stack. Any inset leaves an untinted photo annulus;
   any own-radius adds a second anti-aliased edge for the blend to reveal. */
.icl-zone .icl-person__photo-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb,
    var(--icl-color-accent),
    var(--icl-color-heading) var(--icl-duotone-ink-mix));
  transition: background-color var(--icl-duration-base) var(--icl-ease);
}
.icl-zone .icl-person__photo-frame > .icl-person__photo {
  width: 100%; height: 100%;
  margin: 0;
  border-radius: 0; /* the frame clips; a second rounded edge ghosts a ring */
  filter: grayscale(1)
          contrast(var(--icl-duotone-contrast))
          brightness(var(--icl-duotone-paper));
  mix-blend-mode: screen;
  transition: filter var(--icl-duration-base) var(--icl-ease);
}
/* #000 is screen's blend identity (screen over black = photo unchanged),
   not a rendered color — the photo fully covers it. Not a visible use of
   pure black. */
.icl-zone .icl-person:hover .icl-person__photo-frame::before, .icl-zone .icl-person__photo-frame:hover::before {
  background: #000;
}
.icl-zone .icl-person:hover .icl-person__photo-frame > .icl-person__photo, .icl-zone .icl-person__photo-frame:hover > .icl-person__photo {
  filter: none;
}
.icl-zone .icl-person__name { font-weight: 700; color: var(--icl-color-heading); margin: 0; }
.icl-zone .icl-person__role { font-size: var(--icl-text-sm); color: var(--icl-color-text-muted); margin: 0; }

/* Stat */
.icl-zone .icl-stat { border-left: var(--icl-keyline-width) solid var(--icl-color-keyline); padding-left: var(--icl-space-4); }
.icl-zone .icl-stat__value {
  font-family: var(--icl-font-display);
  font-weight: 700;
  font-size: var(--icl-text-5xl);
  line-height: 1;
  color: var(--icl-color-heading);
}
.icl-zone .icl-stat__label {
  font-size: var(--icl-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--icl-tracking-wide);
  color: var(--icl-color-text-muted);
}
.icl-zone .icl-section--inverse .icl-stat__value { color: var(--icl-color-inverse-heading); }

/* --------------------------------------------------------------------------
   7b · Media frames & collage feature
   -------------------------------------------------------------------------- */
/* Frame — an image "window" that holds its own shape no matter the source
   image's dimensions (the modern form of the transparent-gif spacer trick:
   the frame owns the aspect ratio; the real image rides behind as a cover
   background and is cropped to fit).
     <div class="icl-frame" role="img" aria-label="…"
          style="--icl-frame-image: url('/files/photo.jpg'); --icl-frame-ratio: 3 / 4"></div>
   Purely decorative frames use aria-hidden="true" instead of role/label. */
.icl-zone .icl-frame {
  display: block;
  width: 100%;
  aspect-ratio: var(--icl-frame-ratio, 4 / 3);
  background-image: var(--icl-frame-image, none);
  background-size: cover;
  background-position: var(--icl-frame-position, center);
  background-color: var(--icl-color-surface-sunken); /* shows until the image paints */
  border-radius: var(--icl-radius-sm);
  /* Photos read as physical objects — they carry the large shadow by
     default. Tune per band with --icl-frame-shadow. */
  box-shadow: var(--icl-frame-shadow, var(--icl-shadow-lg));
}

/* Collage feature — the tennessee.edu "How UT Impacts Your Life" pattern in
   ICL clothes: a staggered three-frame collage beside a headline + body
   column. Unlike the UT original (one pre-baked PNG), each frame is a real
   .icl-frame, so any image fits any slot. Put the pattern inside a band;
   the signature .icl-background-fx is the ICL answer to UT's faint
   triangle-pattern backdrop. */
.icl-zone .icl-collage {
  display: grid;
  gap: var(--icl-space-7);
  align-items: center;
  /* Collage photos wear a tight offset shadow hugging the print (David's
     tuned value, 2026-08-05) instead of the frame default's soft ambient
     lg — inherits down to the .icl-frame children via --icl-frame-shadow. */
  --icl-frame-shadow: 2px 2px 5px rgba(85, 85, 85, 0.65);
}
.icl-zone .icl-collage__media {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--icl-space-4);
  align-items: start;
  align-self: start;
}
/* Slot geometry (from the reference composition): big landscape top-left,
   portrait beside it vertically centered against the stack, small landscape
   below the big one with their right edges aligned.
   Each slot presets a ratio; override per-frame with --icl-frame-ratio. */
.icl-zone .icl-collage__media .icl-frame:nth-child(1) {
  grid-column: 1 / 9;
  grid-row: 1;
  --icl-frame-ratio: 4 / 3;
}
.icl-zone .icl-collage__media .icl-frame:nth-child(2) {
  grid-column: 9 / 13;
  grid-row: 1 / span 2;
  align-self: center;
  --icl-frame-ratio: 3 / 4;
}
.icl-zone .icl-collage__media .icl-frame:nth-child(3) {
  grid-column: 3 / 9;
  grid-row: 2;
  --icl-frame-ratio: 16 / 10;
}
.icl-zone .icl-collage__body { max-width: 34em; }
.icl-zone .icl-collage__body > :last-child { margin-bottom: 0; }
@media (min-width: 806.4px) {
  /* Media/text split. Tunable per band via --icl-collage-split — shrinking
     the media share shrinks the photos in both dimensions (frame heights
     follow their widths), e.g. minmax(0, 6.3fr) minmax(0, 5.7fr) for ~10%
     smaller photos. */
  .icl-zone .icl-collage { grid-template-columns: var(--icl-collage-split, minmax(0, 7fr) minmax(0, 5fr)); }
}

/* --------------------------------------------------------------------------
   8 · Navbar
   -------------------------------------------------------------------------- */
.icl-zone .icl-navbar {
  background: var(--icl-color-inverse-bg);
  border-bottom: var(--icl-keyline-width) solid var(--icl-color-keyline);
  position: sticky;
  top: 0;
  z-index: 50;
}
.icl-zone .icl-navbar__inner {
  display: flex;
  align-items: center;
  gap: var(--icl-space-5);
  min-height: 50.4px;
}
.icl-zone .icl-navbar__brand {
  display: flex;
  align-items: baseline;
  gap: var(--icl-space-2);
  font-family: var(--icl-font-display);
  font-weight: 700;
  font-size: var(--icl-text-xl);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--icl-color-inverse-heading);
  text-decoration: none;
}
.icl-zone .icl-navbar__brand:hover { color: var(--icl-color-inverse-heading); text-decoration: none; }
.icl-zone .icl-navbar__brand-mark { color: var(--icl-color-accent-inverse); }
/* The mark is the ICL lettermark SVG inlined with fill: currentColor, so it
   takes the same theme accent as the text mark it replaced (a text fallback
   still works). Baseline flex alignment rests the mark on the text baseline. */
.icl-zone .icl-navbar__brand-mark svg {
  display: block;
  height: 0.95em;
  width: auto;
  fill: currentColor;
}
.icl-zone .icl-navbar__brand-project {
  color: var(--icl-color-inverse-text);
  font-weight: 700;
  font-size: 1.1em;
  border-left: 1px solid var(--icl-color-inverse-border);
  padding-left: var(--icl-space-2);
}

.icl-zone .icl-navbar__nav {
  display: flex;
  align-items: stretch;
  align-self: flex-end;   /* bottom-align so the active link's underline lands
                             exactly on the navbar keyline (not 1–2px above it) */
  gap: var(--icl-space-1);
  margin-left: auto;
  list-style: none;
  padding: 0; margin-block: 0;
}
.icl-zone .icl-navbar__link {
  display: flex;
  align-items: center;
  padding: 0 var(--icl-space-3);
  min-height: 50.4px;
  font-size: var(--icl-text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--icl-tracking-wide);
  color: var(--icl-color-inverse-text);
  text-decoration: none;
  border-bottom: var(--icl-keyline-width) solid transparent;
  margin-bottom: calc(-1 * var(--icl-keyline-width));
  transition: color var(--icl-duration-fast) var(--icl-ease);
}
.icl-zone .icl-navbar__link:hover { color: var(--icl-color-inverse-heading); text-decoration: none; }
.icl-zone .icl-navbar__link[aria-current="page"], .icl-zone .icl-navbar__link--active {
  color: var(--icl-color-inverse-heading);
  border-bottom-color: var(--icl-color-inverse-heading);
}

.icl-zone .icl-navbar__toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 1px solid var(--icl-color-inverse-border);
  border-radius: var(--icl-radius-sm);
  color: var(--icl-color-inverse-heading);
  font: inherit;
  padding: var(--icl-space-1) var(--icl-space-3);
  cursor: pointer;
}

@media (max-width: 806.4px) {
  .icl-zone .icl-navbar__toggle { display: block; }
  .icl-zone .icl-navbar__nav {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--icl-color-inverse-bg);
    border-bottom: var(--icl-keyline-width) solid var(--icl-color-keyline);
    padding: var(--icl-space-2) var(--icl-container-pad);
  }
  .icl-zone .icl-navbar__nav.is-open { display: flex; }
  .icl-zone .icl-navbar__link { min-height: 39.6px; border-bottom: 0; margin-bottom: 0; }
  .icl-zone .icl-navbar__link[aria-current="page"] { color: var(--icl-color-accent-inverse); }
}

/* --------------------------------------------------------------------------
   9 · Hero / banner
   -------------------------------------------------------------------------- */
.icl-zone .icl-hero {
  background: var(--icl-color-inverse-bg);
  color: var(--icl-color-inverse-text);
  padding-block: var(--icl-space-9);
  position: relative;
}
.icl-zone .icl-hero .icl-display { color: var(--icl-color-inverse-heading); }
.icl-zone .icl-hero .icl-eyebrow { color: var(--icl-color-eyebrow-inverse); }
.icl-zone .icl-hero__lede {
  font-size: var(--icl-text-xl);
  line-height: var(--icl-leading-snug);
  max-width: 38em;
  /* No color of its own: the band supplies it (inverse-text on stone,
     ink on light hero bands, on-accent on accent bands). */
}
.icl-zone .icl-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--icl-space-3);
  margin-top: var(--icl-space-6);
}
/* Media lockup — a content image (publication cover, screenshot) takes the
   body slot; body copy, when present, sits to the image's right and wraps
   under it only when the row runs out of room. */
.icl-zone .icl-hero__media {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--icl-space-5);
}
.icl-zone .icl-hero__media .icl-hero__lede { flex: 1 1 16em; }
.icl-zone .icl-hero__thumb {
  display: block;
  flex: none;
  width: min(144px, 40%);
  border-radius: var(--icl-radius-sm);
  box-shadow: var(--icl-shadow-lg);
}
.icl-zone .icl-hero--compact { padding-block: var(--icl-space-7); }

/* --------------------------------------------------------------------------
   10 · Tabs (project-site section nav)
   -------------------------------------------------------------------------- */
.icl-zone .icl-tabs {
  display: flex;
  gap: var(--icl-space-1);
  border-bottom: 1px solid var(--icl-color-border);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--icl-space-5);
  overflow-x: auto;
}
.icl-zone .icl-tabs__tab {
  padding: var(--icl-space-3) var(--icl-space-4);
  font-weight: 600;
  font-size: var(--icl-text-sm);
  color: var(--icl-color-text-muted);
  text-decoration: none;
  border: 0;
  background: none;
  cursor: pointer;
  border-bottom: var(--icl-keyline-width) solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  font-family: var(--icl-font-sans);
}
.icl-zone .icl-tabs__tab:hover { color: var(--icl-color-heading); text-decoration: none; }
.icl-zone .icl-tabs__tab[aria-selected="true"], .icl-zone .icl-tabs__tab--active {
  color: var(--icl-color-accent-strong);
  border-bottom-color: var(--icl-color-accent);
}

/* --------------------------------------------------------------------------
   11 · Tables
   -------------------------------------------------------------------------- */
.icl-zone .icl-table-wrap { overflow-x: auto; }

.icl-zone .icl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--icl-text-sm);
}
.icl-zone .icl-table caption {
  text-align: left;
  font-weight: 700;
  color: var(--icl-color-heading);
  padding-bottom: var(--icl-space-3);
}
.icl-zone .icl-table th {
  font-family: var(--icl-font-display);
  font-weight: 600;
  font-size: var(--icl-text-sm);
  text-transform: uppercase;
  letter-spacing: var(--icl-tracking-wide);
  text-align: left;
  color: var(--icl-color-heading);
  border-bottom: 2px solid var(--icl-color-heading);
  padding: var(--icl-space-2) var(--icl-space-3);
}
.icl-zone .icl-table td {
  padding: var(--icl-space-3);
  border-bottom: 1px solid var(--icl-color-border);
  vertical-align: top;
}
.icl-zone .icl-table--striped tbody tr:nth-child(even) { background: var(--icl-color-surface-sunken); }
.icl-zone .icl-table tbody tr:hover { background: var(--icl-color-accent-soft); }

/* --------------------------------------------------------------------------
   12 · Publication list
   -------------------------------------------------------------------------- */
.icl-zone .icl-pubs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--icl-space-3);
}
/* Each publication is a raised white card with a left accent keyline —
   reads well lifted off the sunken limestone band. */
.icl-zone .icl-pub {
  background: var(--icl-color-surface-raised);
  border: 1px solid var(--icl-color-border);
  border-left: var(--icl-keyline-width) solid var(--icl-color-keyline);
  border-radius: 0; /* keyline surfaces are square */
  box-shadow: var(--icl-shadow-sm);
  padding: var(--icl-space-4) var(--icl-space-5);
}
.icl-zone .icl-pub__title {
  font-size: var(--icl-text-lg);
  font-weight: 700;
  color: var(--icl-color-heading);
  margin: 0 0 var(--icl-space-1);
}
.icl-zone .icl-pub__title a { color: inherit; }
.icl-zone .icl-pub__title a:hover { color: var(--icl-color-accent-strong); }
/* Authors read as Proxima caps — the surname half of the signature style,
   applied to the whole name (a serif bold initial mismatches its surname,
   so pubs deliberately do NOT use the full signature treatment). */
.icl-zone .icl-pub__authors {
  font-size: var(--icl-text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.045em;
  color: var(--icl-color-text-muted);
  margin: 0 0 var(--icl-space-1);
}
/* Not italic as a block: citation italics belong only to journal/book
   titles — mark those with <i> in the venue text; locations and dates
   stay roman, separated by commas (never em dashes). */
.icl-zone .icl-pub__venue {
  font-family: var(--icl-font-sans);
  font-size: var(--icl-text-sm);
  color: var(--icl-color-text-muted);
  margin: 0 0 var(--icl-space-2);
}
.icl-zone .icl-pub__links {
  display: flex;
  align-items: center;
  gap: var(--icl-space-2);
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   13 · Alerts / callouts
   -------------------------------------------------------------------------- */
.icl-zone .icl-alert {
  display: flex;
  gap: var(--icl-space-3);
  padding: var(--icl-space-4);
  border-radius: 0; /* keyline surfaces are square */
  border: 1px solid var(--icl-color-border);
  border-left: var(--icl-keyline-width) solid var(--icl-color-info);
  background: var(--icl-color-info-bg);
  color: var(--icl-color-text);
  margin-bottom: var(--icl-space-4);
}
.icl-zone .icl-alert__title { font-weight: 700; color: var(--icl-color-heading); margin: 0 0 var(--icl-space-1); }
.icl-zone .icl-alert p:last-child { margin-bottom: 0; }

.icl-zone .icl-alert--success { border-left-color: var(--icl-color-success); background: var(--icl-color-success-bg); }
.icl-zone .icl-alert--warning { border-left-color: var(--icl-color-warning); background: var(--icl-color-warning-bg); }
.icl-zone .icl-alert--danger { border-left-color: var(--icl-color-danger);  background: var(--icl-color-danger-bg); }
.icl-zone .icl-alert--accent { border-left-color: var(--icl-color-accent);  background: var(--icl-color-accent-soft); }

/* --------------------------------------------------------------------------
   14 · Code block
   -------------------------------------------------------------------------- */
.icl-zone .icl-codeblock {
  background: var(--icl-color-inverse-bg);
  color: var(--icl-color-inverse-text);
  border-radius: 0; /* keyline surfaces are square */
  border-top: var(--icl-keyline-width) solid var(--icl-color-keyline);
  padding: var(--icl-space-4) var(--icl-space-5);
  overflow-x: auto;
  font-family: var(--icl-font-mono);
  font-size: var(--icl-text-sm);
  line-height: 1.7;
  margin: 0 0 var(--icl-space-4);
}
.icl-zone .icl-codeblock code { background: none; border: 0; padding: 0; font-size: inherit; }

/* --------------------------------------------------------------------------
   15 · Footer
   -------------------------------------------------------------------------- */
.icl-zone .icl-footer {
  background: var(--icl-color-inverse-bg);
  color: var(--icl-color-inverse-text);
  border-top: var(--icl-keyline-width) solid var(--icl-color-keyline);
  padding-block: var(--icl-space-7) var(--icl-space-6);
  font-size: var(--icl-text-sm);
}
.icl-zone .icl-footer a:not([class*="icl-btn"]) { color: var(--icl-color-inverse-text); }
.icl-zone .icl-footer a:not([class*="icl-btn"]):hover { color: var(--icl-color-inverse-link); }
.icl-zone .icl-footer__brand {
  font-family: var(--icl-font-display);
  font-weight: 700;
  font-size: var(--icl-text-xl);
  text-transform: uppercase;
  color: var(--icl-color-inverse-heading);
  margin-bottom: var(--icl-space-2);
}
.icl-zone .icl-footer__heading {
  font-family: var(--icl-font-display);
  font-weight: 600;
  font-size: var(--icl-text-md);
  text-transform: uppercase;
  letter-spacing: var(--icl-tracking-wide);
  color: var(--icl-color-inverse-heading);
  margin: 0 0 var(--icl-space-3);
}
.icl-zone .icl-footer__links { list-style: none; padding: 0; margin: 0; }
.icl-zone .icl-footer__links li { margin-bottom: var(--icl-space-2); }
.icl-zone .icl-footer__legal {
  margin-top: var(--icl-space-6);
  padding-top: var(--icl-space-4);
  border-top: 1px solid var(--icl-color-inverse-border);
  color: var(--icl-color-inverse-text-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--icl-space-4);
  justify-content: space-between;
}

/* --------------------------------------------------------------------------
   16 · Breadcrumbs
   -------------------------------------------------------------------------- */
.icl-zone .icl-breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--icl-space-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--icl-space-4);
  font-size: var(--icl-text-sm);
  color: var(--icl-color-text-subtle);
}
.icl-zone .icl-breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: var(--icl-space-2); color: var(--icl-color-border-strong); }
.icl-zone .icl-breadcrumbs [aria-current] { color: var(--icl-color-text); font-weight: 600; }

/* --------------------------------------------------------------------------
   17 · Utilities
   -------------------------------------------------------------------------- */
.icl-zone .icl-u-text-muted { color: var(--icl-color-text-muted); }
.icl-zone .icl-u-text-center { text-align: center; }
.icl-zone .icl-u-mono { font-family: var(--icl-font-mono); }
.icl-zone .icl-u-serif { font-family: var(--icl-font-serif); }
.icl-zone .icl-u-mt-0 { margin-top: 0; }
.icl-zone .icl-u-mb-0 { margin-bottom: 0; }
.icl-zone .icl-u-flow > * + * { margin-top: var(--icl-space-4); }
.icl-zone .icl-u-cluster { display: flex; flex-wrap: wrap; gap: var(--icl-space-2); align-items: center; }
.icl-zone .icl-u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}