/* Nashville PBS Design System — generated from tokens.json */
:root, [data-theme="default"] {
  --pbs-blue: #2638c4; /* PBS signature blue: primary CTAs, links, and prominent brand placement. The only color used for the P-head logo shield. */
  --white: #ffffff; /* Primary canvas color for content pages; text and icons on dark/brand surfaces. */
  --navy-blue: #0a145a; /* Darkest blue: headers, footers, covers, dark UI surfaces, and headings. Button active/pressed state. */
  --medium-blue: #0f1e8c; /* Secondary depth blue: primary button hover state, gradient midpoint, dark panel fills. */
  --light-blue: #486cd8; /* Reclassified in v3 from accent to secondary blue: focus rings, gradient start point, UI depth. Passes WCAG AA on white as a UI color. */
  --teal: #48d3cd; /* Primary accent: sparingly, one at a time. Use for fills, bars, and highlights. Never for body text on white (fails AA contrast). Never on-air. */
  --yellow: #ffcf00; /* Primary accent: sparingly, one at a time. Use for fills, bars, and highlights. Never for body text on white (fails AA contrast). Never on-air. */
  --coral: #fe704e; /* Primary accent: sparingly, one at a time. Use for fills, bars, and name labels. Never for body text on white (fails AA contrast). Never on-air. */
  --sky: #8ddfff; /* Primary accent alt (new in v3): when teal/yellow/coral fail contrast or less vibrancy is needed. Use over solid blues, subtle backgrounds, or as alt text over footage. Never paired with secondary accents. */
  --honey: #ffbd00; /* Primary accent alt (new in v3): when teal/yellow/coral fail contrast or less vibrancy is needed. Use over solid blues or as alt text over footage. Never paired with secondary accents. */
  --peach: #ffb699; /* Primary accent alt (new in v3): when teal/yellow/coral fail contrast or less vibrancy is needed. Use over solid blues or as alt text over footage. Never paired with secondary accents. */
  --purple: #4e05ac; /* Secondary accent: infographics and illustration only. Never on-air, never as a substitute for primary accents. */
  --red: #d6383a; /* Secondary accent: infographics and illustration only. Never on-air, never as a substitute for primary accents. */
  --green: #087b45; /* Secondary accent: infographics and illustration only. Never on-air, never as a substitute for primary accents. */
  --cloud: #f6f8fa; /* Recommended neutral (PBS Brand v3): subtlest surface tint for alternating sections. Cool-only; never on-air. */
  --fog: #eef0f5; /* Recommended neutral (PBS Brand v3): light surface background for cards and panels. Cool-only; never on-air. */
  --slate: #5c6e85; /* Recommended neutral (PBS Brand v3): secondary text, muted UI labels, and metadata. Cool-only; never on-air. */
  --deep-sea: #040c41; /* Recommended neutral (PBS Brand v3): near-black for very dark surfaces. Cool-only; never on-air. */
  --midnight: #000525; /* Recommended neutral (PBS Brand v3): deepest dark, nearly black. Cool-only; never on-air. */
  --neutral-950: #070c2e; /* UI neutral ramp (not in PBS brand book): near-black; near-body text on very dark backgrounds. */
  --neutral-900: #10173a; /* UI neutral ramp (not in PBS brand book): primary body text color on white surfaces. */
  --neutral-800: #232a52; /* UI neutral ramp (not in PBS brand book): strong secondary text or dark icon fill. */
  --neutral-700: #3a4166; /* UI neutral ramp (not in PBS brand book): secondary text, active state for muted elements. */
  --neutral-500: #6b7191; /* UI neutral ramp (not in PBS brand book): muted text, placeholder text, and secondary labels. */
  --neutral-400: #9297b3; /* UI neutral ramp (not in PBS brand book): disabled text and icon states. */
  --neutral-300: #c3c7d9; /* UI neutral ramp (not in PBS brand book): strong border and divider lines. */
  --neutral-200: #e4e6f0; /* UI neutral ramp (not in PBS brand book): default 1px borders for cards and surfaces. */
  --neutral-100: #f2f3f8; /* UI neutral ramp (not in PBS brand book): subtle input and surface backgrounds. */
  --neutral-50: #f8f9fc; /* UI neutral ramp (not in PBS brand book): near-white surface tint; barely perceptible differentiation. */
  --brand-primary: var(--pbs-blue); /* Semantic alias: primary interactive color. Maps to PBS Blue. Use for buttons, links, and primary interactive elements. */
  --brand-primary-hover: var(--medium-blue); /* Semantic alias: hover state for primary buttons and interactive elements. */
  --brand-primary-active: var(--navy-blue); /* Semantic alias: active/pressed state for primary buttons and interactive elements. */
  --brand-on-primary: var(--white); /* Semantic alias: text and icon color on primary brand surfaces (PBS Blue, gradient backgrounds). */
  --surface-page: var(--white); /* Default page background: white content canvas. */
  --surface-card: var(--white); /* Card surface: white with 1px border and restrained shadow. */
  --surface-subtle: var(--fog); /* Slightly tinted surface for alternating sections, selected states, and subtle panels. */
  --surface-sunken: var(--cloud); /* Inset/recessed surface: search fields, code blocks, and depressed UI areas. */
  --surface-inverse: var(--navy-blue); /* Dark inverse surface: headers, footers, and dark-theme panels. Use white text on this surface. */
  --surface-brand: var(--pbs-blue); /* Brand-colored surface: membership bands, CTA sections, brand callouts. Use white text on this surface. */
  --text-heading: var(--navy-blue); /* Heading and label text color on light surfaces: h1 through h4 and prominent labels. */
  --text-body: var(--neutral-900); /* Primary body text color: paragraphs, descriptions, and all readable prose on white. */
  --text-muted: var(--neutral-500); /* Muted/secondary text: captions, metadata, timestamps, and supporting labels. */
  --text-on-dark: var(--white); /* Full-opacity text on dark or brand surfaces (navy, PBS Blue, gradient). */
  --text-on-dark-muted: rgba(255,255,255,.72); /* Muted text on dark or brand surfaces: 72% white for secondary labels on navy/PBS Blue. */
  --text-link: var(--pbs-blue); /* Link text color on light surfaces. */
  --text-link-hover: var(--medium-blue); /* Link hover color: slightly darker than resting link state. */
  --border: var(--neutral-200); /* Default 1px border for cards and surface containers. */
  --border-strong: var(--neutral-300); /* Stronger 1.5px border for interactive controls (inputs, tags, secondary buttons). */
  --border-brand: var(--pbs-blue); /* Brand-colored border: focus indicators, selected states, and brand-outlined elements. */
  --focus-ring: var(--light-blue); /* 3px focus ring color for keyboard navigation. WCAG AA compliant. Applied as box-shadow, not outline. */
  --accent-teal: var(--teal); /* Component-level alias for the teal primary accent. One per layout; never body text on white. */
  --accent-yellow: var(--yellow); /* Component-level alias for the yellow primary accent. One per layout; never body text on white. */
  --accent-coral: var(--coral); /* Component-level alias for the coral primary accent. One per layout; never body text on white. */
  --shadow-none: none; /* No shadow: flat default state for cards and surfaces at rest. */
  --shadow-xs: 0 1px 2px rgba(10,20,90,.06); /* Barely-there lift: header items, sticky elements, and minimal depth cues. */
  --shadow-sm: 0 1px 3px rgba(10,20,90,.08),0 1px 2px rgba(10,20,90,.06); /* Subtle shadow: resting card state. The default for most card components. */
  --shadow-md: 0 4px 12px rgba(10,20,90,.10),0 2px 4px rgba(10,20,90,.06); /* Medium shadow: hover state for interactive cards; dropdowns and popovers. */
  --shadow-lg: 0 12px 28px rgba(10,20,90,.14),0 4px 8px rgba(10,20,90,.08); /* Strong shadow: modals, drawers, and prominently elevated floating elements. */
  --shadow-xl: 0 24px 48px rgba(10,20,90,.18); /* Maximum shadow: overlays and the highest-elevation floating elements. */
  --shadow-focus: 0 0 0 3px rgba(72,108,216,.45); /* Focus ring shadow: 3px Light Blue ring for keyboard navigation. WCAG AA compliant. Use on interactive controls. */
  --ring-focus: 0 0 0 3px rgba(72,108,216,.45); /* Alias for shadow-focus: same value. Prefer this alias when applying to interactive elements via CSS custom property. */
}
:root {
  --space-0: 0; /* Zero spacing: removes margins/padding explicitly. */
  --space-1: 4px; /* 4px (1 unit): tightest gap; icon padding, badge inner spacing, separator margins. */
  --space-2: 8px; /* 8px (2 units): compact inner padding for small components (tags, chips). */
  --space-3: 12px; /* 12px (3 units): small component padding; button vertical padding at sm size. */
  --space-4: 16px; /* 16px (4 units): standard inner padding for controls and list items. */
  --space-5: 20px; /* 20px (5 units): medium inner padding; button vertical padding at md size. */
  --space-6: 24px; /* 24px (6 units): card padding, section internal gap, column gutter (matches --gutter). */
  --space-7: 28px; /* Section-opener top padding; the step PillarDivider references between space-6 (24px) and space-8 (32px). Added at upgrade: the component used it but the scale never declared it. */
  --space-8: 32px; /* 32px (8 units): card gap, breathing room between related sections. */
  --space-10: 40px; /* 40px (10 units): generous section padding and major component gaps. */
  --space-12: 48px; /* 48px (12 units): large section padding; hero vertical padding. */
  --space-16: 64px; /* 64px (16 units): major section spacing; page-level vertical rhythm. */
  --space-20: 80px; /* 80px (20 units): hero and feature section vertical padding. */
  --space-24: 96px; /* 96px (24 units): largest standard section padding. */
  --space-32: 128px; /* 128px (32 units): maximum vertical spacing for page-level layout separators. */
  --gutter: 24px; /* Standard column gutter: 24px, matching space-6. Use for grid gaps and page-edge padding. */
  --content-max: 1200px; /* Maximum content width: center with auto margins. Components and page sections constrain to this width. */
  --stack-tight: 8px; /* Tight vertical stack: between closely related elements (label + input, icon + text). */
  --stack: 16px; /* Standard vertical stack: between paragraphs and sibling elements in a content flow. */
  --stack-loose: 32px; /* Loose vertical stack: between distinct sections within a page block. */
  --radius-none: 0; /* No rounding: full-bleed bands, square-cornered elements, and broadcast graphics. */
  --radius-xs: 4px; /* Minimal rounding: small chips, inline badges, and tight UI elements. */
  --radius-sm: 8px; /* Small rounding: media thumbnails, small cards, and input fields. Brand standard for media. */
  --radius-md: 12px; /* Medium rounding: cards and content containers. Primary brand-standard radius. */
  --radius-lg: 16px; /* Large rounding: larger panels, dialogs, and prominent containers. */
  --radius-xl: 24px; /* Extra-large rounding: feature panels and prominent rounded containers. */
  --radius-pill: 999px; /* Full pill shape: tags, badges, and any element that should be fully rounded. */
  --radius-button: 999px; /* Buttons are always fully pill-shaped per brand rules. Use this alias for all button border-radius. */
  --radius-card: 12px; /* Semantic alias for card corners: matches radius-md. Use on card components for consistency. */
  --radius-media: 8px; /* Semantic alias for media items (show posters, thumbnails, images in cards): matches radius-sm. */
  --gradient-primary: linear-gradient(135deg,#486CD8 0%,#2638C4 45%,#0F1E8C 100%); /* Primary PBS gradient: Light Blue → PBS Blue → Medium Blue, diagonal at 135°. Use for backgrounds, graphic-element fills, and imagery overlays. Light source always in a top corner. */
  --gradient-secondary: linear-gradient(135deg,#8DDFFF 0%,#486CD8 22%,#2638C4 55%,#0F1E8C 100%); /* Secondary gradient: adds Sky at the start. Full-bleed backgrounds ONLY. Never with imagery, footage, or competing elements. */
  --gradient-primary-overlay: linear-gradient(135deg,rgba(72,108,216,.8) 0%,rgba(38,56,196,.8) 45%,rgba(15,30,140,.8) 100%); /* Primary gradient at exactly 80% opacity: use over imagery and footage. Always exactly 80%, do not adjust the opacity. */
  --gradient-primary-tr: linear-gradient(225deg,#486CD8 0%,#2638C4 45%,#0F1E8C 100%); /* Primary gradient with the light source top-right: the same stops as gradient-primary at 225°. The on-air default for endpages, promos and title cards (brand book, Broadcast). The light source is always a top corner, 135° (top-left) or 225° (top-right), nothing else. From the standalone project, October 2026. */
  --gradient-primary-overlay-tr: linear-gradient(225deg,rgba(72,108,216,.8) 0%,rgba(38,56,196,.8) 45%,rgba(15,30,140,.8) 100%); /* gradient-primary-tr at exactly 80% opacity, over imagery and footage when the light source is top-right. Always exactly 80%; do not adjust the opacity. From the standalone project, October 2026. */
  --gradient-brand: linear-gradient(135deg,#486CD8 0%,#2638C4 45%,#0F1E8C 100%); /* Alias for gradient-primary: same stops and angle. Use interchangeably; prefer gradient-primary for new work. */
  --gradient-deep: linear-gradient(160deg,#0F1E8C,#0A145A); /* Deep dark gradient: Medium Blue → Navy at 160°. Use for cover panels, deep backgrounds, and dark surface headers. */
  --chart-series-1: #2638C4; /* Categorical slot 1, PBS Blue. Series colors are assigned in this fixed order and never cycled or re-ordered when a series is filtered out. */
  --chart-series-2: #FE704E; /* Categorical slot 2, Coral. Sits below 3:1 on white, so a chart using it carries visible value labels or a table view. */
  --chart-series-3: #087B45; /* Categorical slot 3, Green (a PBS secondary accent, approved for infographics). */
  --chart-series-4: #486CD8; /* Categorical slot 4, Light Blue. */
  --chart-series-5: #D6383A; /* Categorical slot 5, Red (secondary accent). The last slot: a sixth series folds into Other or the chart becomes small multiples. */
  --chart-other: #5C6E85; /* The Other bucket and de-emphasized context series (Slate). Never a named series. */
  --chart-highlight: #FFCF00; /* Single-series emphasis: the one bar, point or segment the slide is about, in Yellow with the rest in PBS Blue. Also the annotation marker. One highlight per chart. */
  --chart-seq-1: #8DDFFF; /* Sequential ramp, lightest (Sky). Magnitude scales run Sky, Light Blue, PBS Blue, Medium Blue, Navy: one hue, light to dark, never a rainbow. */
  --chart-seq-2: #486CD8; /* Sequential ramp step 2 (Light Blue). */
  --chart-seq-3: #2638C4; /* Sequential ramp step 3 (PBS Blue). */
  --chart-seq-4: #0F1E8C; /* Sequential ramp step 4 (Medium Blue). */
  --chart-seq-5: #0A145A; /* Sequential ramp, darkest (Navy). */
  --chart-div-neg: #FE704E; /* Diverging scale, negative or warm pole (Coral). */
  --chart-div-mid: #EEF0F5; /* Diverging scale midpoint: neutral Fog, never a hue. */
  --chart-div-pos: #2638C4; /* Diverging scale, positive or cool pole (PBS Blue). */
  --chart-status-good: #087B45; /* Status: good, on track. Always with an icon or word, never color alone. A chart showing status uses no categorical series beyond PBS Blue. */
  --chart-status-warning: #FFBD00; /* Status: warning, watch (Honey). Always with an icon or word. */
  --chart-status-critical: #D6383A; /* Status: critical, off track (Red). Always with an icon or word. */
  --chart-grid: #E4E6F0; /* Gridlines and axis lines, 1px, recessive (neutral-200). No vertical gridlines on bar charts. */
  --chart-axis-text: #3A4166; /* Axis tick labels and legend text (neutral-700). Values and labels always wear text colors, never the series color. */
  --chart-surface: #FFFFFF; /* Charts live on white. On a Navy slide, one series only: Teal or Yellow fill with white labels. */
  --fw-light: 300; /* Light weight: large display text only; avoid for body or small sizes. */
  --fw-regular: 400; /* Regular weight: standard body text and readable prose. */
  --fw-medium: 500; /* Medium weight: labels, navigation items, and subtitles. */
  --fw-semibold: 600; /* Semibold: between medium and bold; interactive element labels and secondary headings. */
  --fw-bold: 700; /* Bold: headings (h1–h4) and important labels. Primary heading weight. */
  --fw-black: 800; /* Black/extra-bold: display headings with tight negative tracking (ls-display). The heaviest PBS Sans weight. */
  --lh-tight: 1.05; /* Extra-tight line height: large display type only (fs-display-xl and above). Too tight for body text. */
  --lh-heading: 1.15; /* Heading line height: h1 through h4. Comfortable for multi-line headings without excessive spacing. */
  --lh-snug: 1.3; /* Snug line height: tight body text, large labels, or subheadings. Full body text uses 1.55 (set directly on fs-body style). */
  --ls-display: -0.02em; /* Tight tracking for display headings: pair with fw-bold or fw-black at large sizes (fs-display-lg and above). */
  --ls-heading: -0.01em; /* Slight negative tracking for headings: h1 through h3. Reduces visual looseness at heading sizes. */
  --ls-normal: 0; /* Normal tracking: body text and smaller sizes. Do not apply negative tracking below fs-h4. */
  --font-sans: "PBS Sans",Arial,-apple-system,system-ui,sans-serif;
  --font-cond: "PBS Sans Cond","PBS Sans",Arial,sans-serif;
  --font-mono: "IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --font-kids: "PBS KIDS Headline",Arial,sans-serif;
  --font-kids-cond: "PBS KIDS Headline Condensed","PBS KIDS Headline",Arial,sans-serif;
  --text-fs-display-2xl: 400 5rem/1.4 var(--font-sans);
  --text-fs-display-xl: 400 3.75rem/1.4 var(--font-sans);
  --text-fs-display-lg: 400 3rem/1.4 var(--font-sans);
  --text-fs-display-md: 400 2.5rem/1.05 var(--font-sans); /* Section-opener titles and the rotated sidebar label (PillarDivider, KeySidebar). Sits between h1 and display-lg; added at upgrade so the components' 40px titles live on the scale. */
  --text-fs-h1: 400 2.25rem/1.4 var(--font-sans);
  --text-fs-h2: 400 1.75rem/1.4 var(--font-sans);
  --text-fs-h3: 400 1.375rem/1.4 var(--font-sans);
  --text-fs-h4: 400 1.125rem/1.4 var(--font-sans);
  --text-fs-body-lg: 400 1.125rem/1.4 var(--font-sans);
  --text-fs-ui-lg: 400 1.0625rem/1.3 var(--font-sans); /* Large control text: Button size lg. */
  --text-fs-body: 400 1rem/1.55 var(--font-sans);
  --text-fs-ui: 400 0.9375rem/1.3 var(--font-sans); /* Control and card text: Button md, Input and Select text, Checkbox, Radio and Switch labels, ShowCard titles, RingAvatar names, KeySidebar points. */
  --text-fs-body-sm: 400 0.875rem/1.4 var(--font-sans);
  --text-fs-ui-sm: 400 0.8125rem/1.3 var(--font-sans); /* Small control text: Button sm, Tag, form field labels, ShowCard meta, PullQuote name tags, RingAvatar titles. */
  --text-fs-caption: 400 0.75rem/1.4 var(--font-sans);
  --text-fs-overline: 400 0.6875rem/1.4 var(--font-sans);
  --text-slide-title: 400 96px/1.05 var(--font-sans); /* Title slide headline. Bold (fw-bold or fw-black), ls-display tracking. One line, two at most. */
  --text-slide-section: 400 80px/1.05 var(--font-sans); /* Section-starter slide title on solid Navy or Medium Blue, white. */
  --text-slide-h1: 400 56px/1.1 var(--font-sans); /* Content slide title. Bold, PBS Blue on white, white on blue. */
  --text-slide-h2: 400 40px/1.15 var(--font-sans); /* Slide subhead or the one emphasized phrase; also the chart title on a chart slide. */
  --text-slide-body: 400 32px/1.35 var(--font-sans); /* Slide body copy. Regular weight, left-aligned, at most five short lines. */
  --text-slide-caption: 400 24px/1.3 var(--font-sans); /* The floor. Sources, footnotes, axis labels and chart annotations. Nothing on a slide is smaller. */
}
.fs-display-2xl {
  font-family: var(--font-sans);
  font-size: 5rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-display-xl {
  font-family: var(--font-sans);
  font-size: 3.75rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-display-lg {
  font-family: var(--font-sans);
  font-size: 3rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-display-md {
  font-family: var(--font-sans);
  font-size: 2.5rem;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-h1 {
  font-family: var(--font-sans);
  font-size: 2.25rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-h2 {
  font-family: var(--font-sans);
  font-size: 1.75rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-h3 {
  font-family: var(--font-sans);
  font-size: 1.375rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-h4 {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-body-lg {
  font-family: var(--font-sans);
  font-size: 1.125rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-ui-lg {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-ui {
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-body-sm {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-ui-sm {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-caption {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.fs-overline {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0.08em;
}
.slide-title {
  font-family: var(--font-sans);
  font-size: 96px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: 0;
}
.slide-section {
  font-family: var(--font-sans);
  font-size: 80px;
  line-height: 1.05;
  font-weight: 400;
  letter-spacing: 0;
}
.slide-h1 {
  font-family: var(--font-sans);
  font-size: 56px;
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: 0;
}
.slide-h2 {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: 0;
}
.slide-body {
  font-family: var(--font-sans);
  font-size: 32px;
  line-height: 1.35;
  font-weight: 400;
  letter-spacing: 0;
}
.slide-caption {
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: 0;
}
@font-face {
  font-family: "PBS Sans";
  src: url("fonts/PBSSans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PBS Sans";
  src: url("fonts/PBSSans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PBS Sans";
  src: url("fonts/PBSSans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PBS Sans";
  src: url("fonts/PBSSans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PBS Sans";
  src: url("fonts/PBSSans-Black.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PBS Sans";
  src: url("fonts/PBSSans-Light-It.woff2") format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PBS Sans";
  src: url("fonts/PBSSans-It.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PBS Sans";
  src: url("fonts/PBSSans-Medium-It.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PBS Sans";
  src: url("fonts/PBSSans-Bold-It.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PBS Sans";
  src: url("fonts/PBSSans-Black-It.woff2") format("woff2");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PBS Sans Cond";
  src: url("fonts/PBSSans-Cond.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PBS Sans Cond";
  src: url("fonts/PBSSans-Cond-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PBS Sans Cond";
  src: url("fonts/PBSSans-Cond-It.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PBS Sans Cond";
  src: url("fonts/PBSSans-Cond-Bold-It.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "PBS KIDS Headline";
  src: url("fonts/PBSKIDSHeadline-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PBS KIDS Headline";
  src: url("fonts/PBSKIDSHeadline-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PBS KIDS Headline Condensed";
  src: url("fonts/PBSKIDSHeadline-Cond.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "PBS KIDS Headline Condensed";
  src: url("fonts/PBSKIDSHeadline-Cond-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}