/* =============================================================================
 * Periphery Digital — Design System (Canonical Stylesheet)
 * -----------------------------------------------------------------------------
 * Generated from: wiki/brand/*.md (Ari's modular brand wiki)
 * Generated date: 2026-05-10
 *
 * Source files (versions per frontmatter at generation time):
 *   - wiki/brand/design.md              — design system overview
 *   - wiki/brand/core/tokens.md         — color, type, spacing, radius, shadow
 *   - wiki/brand/components/*.md        — KPI, table, band, chart specs
 *
 * Loaded by: any internal HTML artifact via a relative <link rel="stylesheet">
 *   <link rel="stylesheet" href="../../wiki/brand/design-system.css">
 *   (Adjust depth to artifact location.)
 *
 * Re-generation: Re-run the html-render generator when Ari updates any file in
 *   wiki/brand/*.md. Do not hand-edit values that originate in tokens.md —
 *   change tokens.md and regenerate.
 *
 * -----------------------------------------------------------------------------
 * FORBIDDEN VALUES — never reintroduce, ever:
 *   - #EF7125            (retired orange — pre-2025 brand)
 *   - #2DB9C5            (retired teal — pre-2025 brand)
 *   - #FFFFFF / #fff     (pure white — use Cloud White #F7F9F2)
 *   - #5B3DF5            (wrong purple from legacy email signature)
 *   - Europa, Nunito Sans (retired typefaces — use DM Sans + Inter)
 *   - Any emoji glyph or emoji string in rendered output
 * =============================================================================
 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@200;300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* =============================================================================
 * TOKENS
 * ============================================================================= */
:root {
  /* === COLORS — PRIMARY === */
  --color-purple: #5229D3;     /* Insight Purple — leading brand color */
  --color-lime: #C3E05A;       /* Spark Lime — secondary; never standalone primary */

  /* === COLORS — NEUTRAL === */
  --color-pine: #2A4E45;       /* Anchor Pine — stability */
  --color-inkwell: #0F0F0F;    /* Near-black — primary text (NOT pure #000000) */
  --color-white: #F7F9F2;      /* Cloud White — default page background (NOT pure #FFFFFF) */

  /* === COLORS — ACCENT (decorative; most fail WCAG on white as small text) === */
  --color-coral: #FF8C8C;      /* Connection Coral — KPI down-trend */
  --color-sky: #A1D4FF;        /* Soft Sky */
  --color-amber: #F0D26F;      /* Optimist Amber */
  --color-stone: #6E6E6E;      /* Stone Beige — secondary text; AA 4.8:1 on Cloud White */

  /* === COLORS — UTILITY === */
  --color-border: #E5E5E5;     /* Default border, row separators */
  --color-row-alt: #F0F0F8;    /* Data-table alt-row tint AND KPI card tint */
  --color-row-hover: #EAE8FF;  /* Data-table hover */
  --color-grid: #F0F0F0;       /* Chart grid lines */
  --color-disclaimer: #333333; /* Email disclaimer text */

  /* === GRADIENTS === */
  /* TODO: Pink → Purple gradient — pink stop unspecified by creative team. Add when defined. */
  --gradient-purple-black: linear-gradient(135deg, #5229D3 0%, #0F0F0F 100%);
  --gradient-purple-lime:  linear-gradient(135deg, #5229D3 0%, #C3E05A 100%);
  --gradient-lime-black:   linear-gradient(135deg, #C3E05A 0%, #0F0F0F 100%);
  --gradient-text:         linear-gradient(90deg, #FF8C8C 0%, #5229D3 100%); /* Gradient text for headlines on light bgs */

  /* === FONTS === */
  --font-display: 'DM Sans', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* === SPACING ⚠️ working convention, pending creative team validation === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  /* === RADII ⚠️ working convention, pending creative team validation === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* === SHADOWS ⚠️ working convention, pending creative team validation === */
  --shadow-sm: 0 1px 3px rgba(15,15,15,0.08);
  --shadow-md: 0 4px 12px rgba(15,15,15,0.12);
  --shadow-lg: 0 8px 24px rgba(15,15,15,0.20);

  /* === TYPE SCALE ⚠️ pending creative team sign-off === */
  --fs-display:        64px;
  --fs-h1:             44px;
  --fs-h2:             30px;
  --fs-h3:             22px;
  --fs-h4:             18px;
  --fs-body-lg:        18px;
  --fs-body:           16px;
  --fs-body-sm:        14px;
  --fs-caption:        12px;
  --fs-label:          12px;
  --fs-kpi-value:      56px;
  --fs-kpi-label:      13px;
  --fs-section-label:  11px;
  --fs-table-header:   13px;
  --fs-table-body:     13px;
}

/* =============================================================================
 * RESET / BASE
 * ============================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--color-inkwell);
  background: var(--color-white);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* =============================================================================
 * COMPONENTS — BANDS
 * ============================================================================= */

/* Header band — top of reports/decks; matches Ari's reports.md exactly */
.header-band {
  background: var(--color-purple);
  color: var(--color-white);
  padding: 32px 40px; /* asymmetric on purpose — do NOT tokenize */
}

.header-band h1,
.header-band .title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.1;
  color: var(--color-white);
}

.header-band .subtitle,
.header-band .meta {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--color-white);
  opacity: 0.85;
  margin-top: var(--space-2);
}

/* Report footer — has copyright + meta */
.footer-band {
  background: var(--color-inkwell);
  color: var(--color-white);
  padding: 24px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
}

.footer-band .copyright {
  color: var(--color-white);
  opacity: 0.7;
}

.footer-band .wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Slide footer — presentations; NO copyright, just wordmark + page number */
.slide-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 40px;
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--color-stone);
  border-top: 1px solid var(--color-border);
}

.slide-footer .wordmark {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-inkwell);
}

.slide-footer .page-number {
  font-variant-numeric: tabular-nums;
}

/* =============================================================================
 * COMPONENTS — KPI CARDS
 * -----------------------------------------------------------------------------
 * V3 hybrid default: tinted block, no chrome. Card-ness comes from bg tint
 * alone. Pair with .section-label ABOVE a group of cards to structure the page.
 *
 * REJECTED patterns (never reintroduce):
 *   - border-left: 3px solid var(--color-purple)  (too "AI dashboard template")
 *   - box-shadow on .kpi-card  (V3 has none)
 *   - border-radius on .kpi-card  (V3 has none — sharp corners are intentional)
 * ============================================================================= */
.kpi-card {
  background: var(--color-row-alt); /* #F0F0F8 pale purple tint */
  padding: 20px 24px;
  /* no border, no shadow, no border-radius — intentional */
}

/* Optional modifier: doubles as a section divider when one card per row */
.kpi-card--ruled {
  border-top: 1px solid var(--color-inkwell);
}

.kpi-card .value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-kpi-value); /* 56px */
  line-height: 1.0;
  color: var(--color-inkwell);
}

.kpi-card .label {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-kpi-label); /* 13px */
  line-height: 1.4;
  color: var(--color-stone);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: var(--space-2);
}

/* Trend indicators */
.kpi-trend-up {
  color: var(--color-pine); /* DEFAULT — Anchor Pine, WCAG-accessible */
}

/* Decorative modifier only — fails WCAG AA as small text on white.
 * Use only for large display contexts (>=24px) or non-essential decoration. */
.kpi-trend-up--accent {
  color: var(--color-lime);
}

.kpi-trend-down {
  color: var(--color-coral);
}

.kpi-trend-neutral {
  color: var(--color-stone);
}

/* =============================================================================
 * COMPONENTS — SECTION LABELS
 * Used ABOVE groups of KPI cards or content sections to structure the page.
 * ============================================================================= */
.section-label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-section-label); /* 11px */
  line-height: 1.4;
  color: var(--color-stone);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--space-3);
}

/* =============================================================================
 * COMPONENTS — DATA TABLES
 * ============================================================================= */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-table-body); /* 13px */
}

.data-table thead {
  background: var(--color-purple);
  color: var(--color-white);
}

.data-table th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-table-header);
  line-height: 1.4;
  padding: 10px 16px;
  text-align: left;
  color: var(--color-white);
}

.data-table td {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--fs-table-body);
  line-height: 1.6;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-inkwell);
}

.data-table tbody tr:nth-child(even) {
  background: var(--color-row-alt);
}

.data-table tbody tr:hover {
  background: var(--color-row-hover);
}

.data-table tr.totals {
  background: var(--color-inkwell);
  color: var(--color-white);
  font-weight: 600;
}

.data-table tr.totals td {
  color: var(--color-white);
  border-bottom: none;
}

/* =============================================================================
 * COMPONENTS — CHART CONTAINER
 * Container styling only. Charts themselves come from a charting library at
 * render time. No gradients inside charts — flat fills only.
 * Grid lines should use var(--color-grid) #F0F0F0 (set by the chart library).
 * ============================================================================= */
.chart-container {
  background: var(--color-white);
  padding: var(--space-4);
  /* No border — chart itself provides visual structure (V3 minimalism). */
}

.chart-container .chart-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h4);
  color: var(--color-inkwell);
  margin-bottom: var(--space-3);
}

.chart-container .chart-caption {
  font-family: var(--font-body);
  font-size: var(--fs-caption);
  color: var(--color-stone);
  margin-top: var(--space-3);
}

/* =============================================================================
 * COMPONENTS — PASSWORD GATE
 * Included for completeness (client-report use case). Not used by internal
 * artifacts today, but keeps a single canonical stylesheet for both.
 * ============================================================================= */
.password-gate {
  position: fixed;
  inset: 0;
  background: var(--color-purple);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.password-gate .gate-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  color: var(--color-white);
  margin-bottom: var(--space-4);
}

.password-gate input {
  background: transparent;
  border: 1px solid var(--color-white);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  padding: 12px 16px;
  width: 320px;
  max-width: 80vw;
  outline: none;
}

.password-gate input::placeholder {
  color: var(--color-white);
  opacity: 0.6;
}

.password-gate button.unlock {
  background: var(--color-lime);
  color: var(--color-inkwell);
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-body);
  padding: 12px 24px;
  border: none;
  margin-top: var(--space-3);
  cursor: pointer;
}

/* =============================================================================
 * COMPONENTS — GRADIENT TEXT
 * Light backgrounds only. Do not use on purple or dark surfaces.
 * ============================================================================= */
.gradient-text {
  background: var(--gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* =============================================================================
 * ARTICLE — wiki/explainer prose styles
 * Used by internal markdown-rendered docs (knowledge articles, plans, etc.)
 * ============================================================================= */
.article {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px;
  font-family: var(--font-body);
  color: var(--color-inkwell);
}

.article h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1); /* 44px */
  line-height: 1.1;
  margin-bottom: var(--space-3);
}

.article .subtitle {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg); /* 18px */
  color: var(--color-stone);
  margin-bottom: var(--space-5);
}

.article h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h2); /* 30px */
  line-height: 1.2;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.article h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3); /* 22px */
  line-height: 1.2;
  margin-top: var(--space-5);
  margin-bottom: var(--space-3);
}

.article h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h4); /* 18px */
  line-height: 1.2;
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
}

.article p,
.article ul,
.article ol {
  font-family: var(--font-body);
  font-size: var(--fs-body); /* 16px */
  line-height: 1.6;
  margin-bottom: var(--space-3);
}

.article ul,
.article ol {
  padding-left: var(--space-4);
}

.article li {
  margin-bottom: var(--space-1);
}

.article a {
  color: var(--color-purple);
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease;
}

.article a:hover {
  border-bottom-color: var(--color-purple);
}

.article blockquote {
  border-left: 3px solid var(--color-purple);
  padding: var(--space-3) var(--space-4);
  background: #FAFAFA;
  color: #3A3A3A;
  margin: var(--space-4) 0;
}

.article blockquote p:last-child {
  margin-bottom: 0;
}

.article code {
  font-family: Menlo, Monaco, 'SF Mono', monospace;
  font-size: 0.9em;
  background: var(--color-row-alt);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  color: var(--color-inkwell);
}

.article pre {
  background: var(--color-inkwell);
  color: var(--color-white);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--space-3) 0;
  font-family: Menlo, Monaco, 'SF Mono', monospace;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}

.article pre code {
  background: transparent;
  padding: 0;
  color: inherit;
  border-radius: 0;
}

/* Lighter table style for prose — no purple header band, just bold th + rules */
.article table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-4) 0;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
}

.article table th {
  font-weight: 600;
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-inkwell);
  color: var(--color-inkwell);
}

.article table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-inkwell);
}

.article hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-5) 0;
}

.article img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* =============================================================================
 * COMPONENTS — CALLOUTS
 * Used in articles/plans/specs to surface side-notes, warnings, tips.
 * No left-stripe accent (rejected pattern). Subtle tinted bg + bold title.
 * ============================================================================= */
.callout {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  line-height: 1.55;
  color: var(--color-inkwell);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-4) 0;
}

.callout .callout-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-inkwell);
  margin-bottom: var(--space-1);
}

.callout p {
  margin: 0;
}

.callout p + p {
  margin-top: var(--space-2);
}

.callout--info {
  background: #E8F1F6; /* Soft Sky tinted onto Cloud White */
}

.callout--warning {
  background: #FAF3DC; /* Optimist Amber tinted onto Cloud White */
}

.callout--success {
  background: #EAF1DA; /* Spark Lime tinted onto Cloud White */
}

.callout--tip {
  background: var(--color-row-alt); /* #F0F0F8 pale purple tint */
}

.callout--note {
  background: var(--color-white);
  border-top: 1px solid var(--color-stone);
}

/* =============================================================================
 * COMPONENTS — STATUS BADGES
 * Small inline pills for marking statuses (Draft, Active, Shipped, etc.).
 * ============================================================================= */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

.badge--draft {
  background: #E5E5E5;
  color: #3A3A3A;
}

.badge--active {
  background: var(--color-lime);
  color: var(--color-inkwell);
}

.badge--review {
  background: var(--color-amber);
  color: var(--color-inkwell);
}

.badge--blocked {
  background: var(--color-coral);
  color: var(--color-inkwell);
}

.badge--shipped {
  background: var(--color-purple);
  color: var(--color-white);
}

.badge--archived {
  background: var(--color-stone);
  color: var(--color-white);
}

/* =============================================================================
 * COMPONENTS — DECISION MATRIX
 * Compact table for "Option A vs B vs C with pros/cons". Lighter than
 * .data-table — no purple header band — so it slots into articles.
 * ============================================================================= */
.decision-matrix {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  margin: var(--space-4) 0;
  background: var(--color-white);
}

.decision-matrix th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  text-align: left;
  padding: 16px 20px;
  border-bottom: 2px solid var(--color-inkwell);
  color: var(--color-inkwell);
  background: var(--color-white);
}

.decision-matrix td {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  padding: 16px 20px;
  vertical-align: top;
  color: var(--color-inkwell);
}

.decision-matrix tr:not(:last-child) td {
  border-bottom: 1px solid var(--color-border);
}

.decision-matrix td + td,
.decision-matrix th + th {
  border-left: 1px solid var(--color-border);
}

.decision-matrix .pro {
  display: block;
  color: var(--color-pine);
  margin-bottom: var(--space-1);
}

.decision-matrix .pro::before {
  content: "+ ";
  font-weight: 600;
}

.decision-matrix .con {
  display: block;
  color: var(--color-coral);
  margin-bottom: var(--space-1);
}

.decision-matrix .con::before {
  content: "\2013\00a0"; /* en dash + nbsp, never emoji */
  font-weight: 600;
}

/* =============================================================================
 * COMPONENTS — ANNOTATED CODE
 * Code block on the left, severity-coded annotations on the right.
 * Inspired by inline-margin annotation pattern for review artifacts.
 * ============================================================================= */
.annotated-code {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  align-items: start;
}

.annotated-code pre {
  background: var(--color-inkwell);
  color: var(--color-white);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: 0;
  font-family: Menlo, Monaco, 'SF Mono', monospace;
  font-size: var(--fs-body-sm);
  line-height: 1.5;
}

.annotated-code .annotations {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.annotated-code .annotation {
  padding: 10px 12px;
  border-left: 3px solid var(--color-border);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-inkwell);
}

.annotated-code .annotation .annotation-line {
  display: block;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 11px;
  color: var(--color-stone);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.annotated-code .annotation--info {
  border-left-color: var(--color-sky);
}

.annotated-code .annotation--warning {
  border-left-color: var(--color-amber);
}

.annotated-code .annotation--severe {
  border-left-color: var(--color-coral);
}

@media (max-width: 720px) {
  .annotated-code {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
 * COMPONENTS — COMPARISON GRID
 * Side-by-side option cards. Unlike .grid-3, each card has a fixed shape:
 * label overline, title, body, tradeoff (pushed to bottom).
 * Border IS intentional here — comparison cards are box-like by design.
 * ============================================================================= */
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.comparison-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
}

.comparison-card .label {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-section-label);
  line-height: 1.4;
  color: var(--color-stone);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: var(--space-2);
}

.comparison-card .title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.25;
  color: var(--color-inkwell);
  margin-bottom: var(--space-2);
}

.comparison-card .body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-inkwell);
  margin-bottom: var(--space-3);
}

.comparison-card .tradeoff {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-stone);
  margin-top: auto;
}

/* =============================================================================
 * COMPONENTS — CHART HELPERS
 * Title + legend helpers for inline SVG charts that live in .chart-container.
 * Charts themselves use flat fills only (no gradients) per reports.md.
 * ============================================================================= */
.chart-container .chart-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.3;
  color: var(--color-inkwell);
  margin-bottom: var(--space-3);
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-stone);
}

.chart-legend .legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.chart-legend .legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: var(--radius-sm);
}

/* =============================================================================
 * COMPONENTS — PULL QUOTE
 * Large display quote for long-form articles. Insight Purple opening glyph.
 * ============================================================================= */
.pull-quote {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  color: var(--color-inkwell);
  margin: var(--space-6) auto;
  max-width: 600px;
  padding: 0 var(--space-3);
}

.pull-quote::before {
  content: "\201C";
  font-size: 64px;
  color: var(--color-purple);
  line-height: 0;
  vertical-align: middle;
  margin-right: 8px;
}

.pull-quote .attribution {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  color: var(--color-stone);
  margin-top: var(--space-2);
}

/* =============================================================================
 * UTILITIES — grid layouts
 * ============================================================================= */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

@media (max-width: 720px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* =============================================================================
 * PRINT
 * ============================================================================= */
@media print {
  body {
    background: #fff;
  }
  .header-band,
  .footer-band {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}