@charset "UTF-8";
/* ==========================================================================
   Citizens' Climate Lobby - Design Tokens
   Source: Figma "Components.fig" (Overview / Type-Color, Spacing, Buttons)
   ========================================================================== */

/* Ubuntu is loaded at 400 / 500 / 700 only — there is no 600 face.
   --fw-strong-heading is therefore 700 (not 600); see D0 in DEVIATIONS.
   If you need Semi-Bold parity with the original Figma, also include 600
   here and change --fw-strong-heading below back to 600. */
/* Source Sans 3 is the modernized successor to Source Sans Pro on Google
   Fonts (same designer, updated metrics). It's listed first in --font-body
   below, with 'Source Sans Pro' kept as a fallback so that if the original
   .ttf/.otf files are installed locally (e.g. for print parity work) they
   take precedence over the CDN version. */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400;1,700&family=Roboto:wght@400;500;700&family=Shadows+Into+Light+Two&display=swap');

:root {
  /* =========================================================
     BRAND - Green ramp (Primary)
     ========================================================= */
  --brand-darkest: #2A3314;   /* Primary - Darkest */
  --brand-dark:    #5A7931;   /* Primary - Dark */
  --brand:         #9BC23B;   /* Primary */
  --brand-medium:  #C2D96C;   /* Primary - Medium */
  --brand-light:   #D5E5AC;   /* Primary - Light */
  --brand-lightest:#EBF4DB;   /* Primary - Lightest */

  /* =========================================================
     UTILITY
     ========================================================= */
  --util-alert-red:       #D71F26;
  --util-alert-red-light: #F9B9BA;
  --util-success:         #87AD5A;

  /* =========================================================
     SPECIALTY - C-Decorative
     ========================================================= */
  --c-dec-1: #15527B;   /* Decorative 1 - deep blue (CCL Dark Blue) */
  --c-dec-2: #0081C7;   /* Decorative 2 - CCL Blue */
  --c-dec-3: #99DBF9;   /* Decorative 3 - pale sky */
  --c-dec-4: #ECF0F3;   /* Decorative 4 - pale neutral */

  /* =========================================================
     GREYSCALE (Neutrals)
     ========================================================= */
  --grey-1000: #000000;
  --grey-600:  #333333;
  --grey-500:  #474748;
  --grey-400:  #7A787A;
  --grey-300:  #A7A8AA;
  --grey-200:  #ECF0F3;
  --grey-100:  #F4F7F9;
  --grey-0:    #FFFFFF;

  /* =========================================================
     LEGACY ALIASES (kept so existing components keep working)
     ========================================================= */
  --ccl-blue:         var(--c-dec-2);
  --ccl-blue-dark:    var(--c-dec-1);
  --ccl-blue-bg:      #E8F3F9;
  --ccl-blue-pressed: var(--grey-500);

  --ccl-green:         var(--brand);
  --ccl-green-dark:    var(--brand-dark);
  --ccl-green-pressed: var(--brand-light);
  --ccl-green-bg:      var(--brand-lightest);

  --ccl-alert-red:       var(--util-alert-red);
  --ccl-alert-red-light: var(--util-alert-red-light);
  --ccl-alert-red-bg:    #FDEEED;
  --ccl-alert-dark-red:  #90251B;

  --ccl-sky:          var(--c-dec-3);
  --ccl-teal-bg:      #E9F4F6;
  --ccl-navy:         var(--c-dec-1);
  --ccl-purple:       #46296B;
  --ccl-purple-light: #D9C9E3;
  --ccl-purple-bg:    #EEEAEF;

  /* Chart series, in the order the Chart block assigns them (blocks/chart).
     Checked as a set (dataviz validate_palette.js, all pairs, light surface):
     inside the lightness band, distinct under deutan/protan/tritan simulation,
     and >= 3:1 against white. Lines also differ by dash, so colour is never the
     only cue. 1-2 are brand colours; 3-4 are chart-only mid tones (the brand
     purple #46296B is too dark to sit beside them). Swap one and re-run the
     validator on all four. */
  --chart-1: var(--ccl-blue);   /* #0081C7 */
  --chart-2: var(--brand-dark); /* #5A7931 */
  --chart-3: #A0569A;           /* magenta */
  --chart-4: #B8862B;           /* ochre */

  --ccl-grey-100: var(--grey-500);
  --ccl-grey-90:  var(--grey-500);
  --ccl-grey-80:  var(--grey-400);
  --ccl-grey-70:  var(--grey-300);
  --ccl-grey-50:  var(--grey-300);
  --ccl-grey-30:  var(--grey-200);
  --ccl-grey-10:  var(--grey-100);
  --ccl-grey-0:   var(--grey-0);

  /* =========================================================
     INITIALS PALETTE — six earthy, equal-weight tints for
     hashing user names to backgrounds in lists of people
     (member directory, mention picker, chat threads).
     All six pass AA with white text. NOT for general UI use:
     these are people-colors, not brand colors. For solo /
     hero avatars (current user, byline) use --ccl-blue or
     the --gradient-blue-green.
     ========================================================= */
  --avatar-initials-1: #4A6E8A;  /* Steel  */
  --avatar-initials-2: #5F6E3F;  /* Sage   */
  --avatar-initials-3: #A05A3F;  /* Clay   */
  --avatar-initials-4: #6B4263;  /* Plum   */
  --avatar-initials-5: #8A6628;  /* Ochre  */
  --avatar-initials-6: #3F7373;  /* Teal   */

  --ccl-black:      var(--grey-1000);
  --ccl-text:       var(--grey-600);
  --ccl-text-muted: #444444;
  --ccl-text-help:  var(--grey-500);

  /* -------- SEMANTIC (map roles -> colors) -------- */
  --fg1: var(--grey-500);
  --fg2: var(--grey-600);
  --fg3: #444444;
  --fg-muted: var(--grey-400);
  --fg-inverse: var(--grey-0);
  --fg-link: var(--c-dec-2);
  --fg-link-strong: #1A74A8;   /* Darker link variant for hover-prone surfaces and dense lists */
  --quote-teal: #5BA3B0;       /* Brand teal used for the pull-quote glyph (assets/brand/marks/quote.svg) */
  --quote-surface-bg: #fff;    /* LEGACY .conf-quote-block only (retired framed pattern) — the ccl/quote featured frame no longer paints a background, so it needs no per-parent setup */
  --quote-card-bg: var(--grey-100); /* Fill of the subdued quote card. Flips to #fff automatically inside any .has-background block (site.css § QUOTES); a component with its own fill sets it to #fff itself, or the card vanishes into it */
  --fg-error: var(--util-alert-red);

  --bg-page: var(--grey-0);
  --bg-subtle: var(--grey-100);
  --bg-panel: var(--grey-200);
  --bg-info: #E8F3F9;
  --bg-success: var(--brand-lightest);
  --bg-error: #FDEEED;
  --bg-header: var(--c-dec-2);

  --border-default: var(--grey-300);
  --border-strong: var(--grey-400);
  --border-input:  var(--grey-400);

  /* =========================================================
     GRADIENTS - use tastefully; background or accent only.
     All linear, 135deg (top-left -> bottom-right).
     ========================================================= */
  --light-blue: #1FB3E1;
  --gradient-blue-green: linear-gradient(135deg, #0081C7 0%, #9BC23B 100%);  /* Highlighted text / underlines */
  --gradient-light-blue: linear-gradient(135deg, #0081C7 0%, #1FB3E1 100%);  /* Background color */
  --gradient-dark-blue:  linear-gradient(135deg, #15527B 0%, #0081C7 100%);  /* Background color */
  /* Horizontal blue→green for thin gradient strokes — active-tab
     underlines, label accents, section-divider rules. Distinct from
     --gradient-blue-green (135deg, for full-bleed surfaces). Direction
     is locked to blue→green everywhere per design call (Jun 2026). */
  --gradient-underline:  linear-gradient(90deg,  #0081C7 0%, #9BC23B 100%);

  /* -------- SPACING (tokens from Spacing page) -------- */
  --spacing-2xs: 4px;
  --spacing-xs:  8px;
  --spacing-sm:  12px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 40px;
  --spacing-3xl: 48px;
  --spacing-4xl: 64px;
  --spacing-5xl: 80px;
  --spacing-6xl: 96px;
  --spacing-7xl: 160px;

  /* Page-edge insets. Two tokens because two distinct patterns exist:
     - --page-gutter: full-width sections that own the viewport edge
       (hero, mobilized, team-cards, footer, etc.) — generous on desktop.
     - --container-pad: max-width centered containers (section-header,
       pillar-row, .container utilities) — tight interior breathing room
       on desktop since max-width already handles the outer alignment.
     Both converge to --spacing-lg below 900px so every page-edge content
     line shares one mobile inset (see @media block at end of file). */
  /* Content frame. Backgrounds bleed past it; sections that centre themselves
     with max-width + auto margins clamp to this. Needed by .hm-approach. */
  --frame-max:     1440px;
  --page-gutter:   var(--spacing-4xl);   /* 64px desktop, 24px mobile */
  --container-pad: var(--spacing-md);    /* 16px desktop, 24px mobile */

  /* -------- RADII --------
     4px buttons/inputs · 8px small feature tiles · 16px cards
     · 20px hero/modal-scale surfaces · pill on avatars + badges */
  /* xs < sm < md < lg. These two were transposed relative to the design system
     (the prototype has xs 4px / sm 8px), so "extra small" was the LARGER of the
     two -- which is how a reader following the design docs ends up setting the
     wrong radius. Names corrected here; every usage was swapped with them, so
     nothing renders differently. */
  --radius-xs: 4px;      /* Buttons, inputs, small chips */
  --radius-sm: 8px;      /* Pillar tiles, small feature cards smaller than a card */
  --radius-md: 16px;     /* Cards, feature tiles, standard panels */
  --radius-lg: 20px;     /* Anything larger than a card — modals, hero blocks, CTA banners, media wells */
  --radius-pill: 999px;  /* Avatars, badges */

  /* -------- SHADOWS -------- */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.25);
  --shadow-card: 0 2px 4px rgba(0,0,0,0.2);
  --shadow-elevated: 0 8px 14px rgba(22,50,92,0.3);
  --shadow-subtle: 0 2px 4px #D8DDE6;

  /* -------- TYPOGRAPHY --------
     Font families:
       Heading body: Ubuntu
       Body:         Source Sans Pro
     Weights:
       Strong Heading: 600 (Semi-Bold)
       Weak:           400 (Regular)
       Strong Body:    700 (Bold)

     Role-based scale. Values are desktop; mobile overrides below via @media. */
  --font-display: 'Ubuntu', 'Segoe UI', system-ui, sans-serif;   /* Headings, buttons */
  --font-body: 'Source Sans 3', 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
  --font-ui: 'Roboto', system-ui, sans-serif;                    /* Legacy UI labels */
  --font-hand: 'Shadows Into Light Two', 'Comic Sans MS', cursive; /* Handwritten accents (vivid captions, tape labels). Self-hosted: theme.json fontFamilies "hand" loads assets/fonts/shadows-into-light-two-latin.woff2. */

  /* Role tokens (desktop). Heading tokens are named for the TAG that uses them
     (h3 → --fs-h3), so DevTools never shows one heading level borrowing
     another's style. h1 is the display size, hence --fs-h1-display. --fs-h5 is
     the 20px step (ledes, eyebrows, small titles); nothing styles an h5 tag with
     it yet.

     ⚠ THE PROTOTYPE NAMES THESE ONE SLOT LOWER (its --fs-h2 is our --fs-h3).
     Renamed 2026-09-28 — a deliberate divergence from token parity. When porting
     a rule from the prototype, translate:
       --fs-display → --fs-h1-display   --fs-h1 → --fs-h2   --fs-h2 → --fs-h3
       --fs-h3 → --fs-h4                --fs-h4 → --fs-h5   (and --lh-* alike)
     bin/css-drift.sh applies this map before diffing. */
  --fs-h1-display: 56px; --lh-h1-display: 64px;
  --fs-h2:         40px; --lh-h2:         48px;
  --fs-h3:         32px; --lh-h3:         40px;
  --fs-h4:         24px; --lh-h4:         32px;
  --fs-h5:         20px; --lh-h5:         28px;
  /* Item title — the ONE sanctioned exception to tag = size (2026-09-28): the
     title inside a repeated item (tile, card, list item) keeps its semantic
     level (usually h3) but reads at this size. Editors pick it as the Heading
     block's "Item title" style; tile/card CSS applies it by default. Never for
     section headings. */
  --fs-item-title: 24px; --lh-item-title: 32px;
  --fs-small:     18px; --lh-small:    28px;
  --fs-tiny:      14px; --lh-tiny:     20px;
  --fs-uppercase: 14px; --lh-uppercase:20px;

  /* Ubuntu Semi-Bold (600) is NOT in the @import above — strong-heading is 700.
     See DEVIATIONS · D0 for why. Keeping this token name ("strong-heading")
     so consumers don't have to change — only the value moved. */
  --fw-strong-heading: 700;  /* Bold */
  --fw-weak:           400;  /* Regular   */
  --fw-strong-body:    700;  /* Bold      */

  /* Legacy numeric aliases — kept so existing components keep working. */
  --text-xs:   10px;
  --text-sm:   12px;
  --text-base: 14px;   /* = tiny */
  --text-md:   16px;   /* small / UI / compact text (buttons, labels, chips) */
  --fs-body:   19px;   /* DEFAULT body prose — WP-side. The prototype's base is 16px (--text-md); bumped here for readability (our audience skews older). */
  --text-lg:   18px;
  --text-xl:   20px;   /* = h4 */
  --text-2xl:  24px;   /* = h3 */
  --text-3xl:  28px;
  --text-4xl:  36px;
  --text-5xl:  48px;
  --text-hero: 56px;   /* = display desktop */

  --leading-tight: 1.0;
  --leading-snug: 1.15;
  --leading-body: 1.44;  /* 23/16 */
  --leading-roomy: 1.6;
}

/* =========================================================
   Semantic element styles — scope under a `.ccl` wrapper.

   All element selectors below are wrapped in :where() so they
   contribute ZERO specificity. That means component classes
   like `.leader__name { margin: 0 }` win against the base
   `h3` defaults without needing !important.  Base rules still
   apply as a fallback anywhere a component class doesn't.
   See STYLING-PRINCIPLES.md § 2.
   ========================================================= */
:where(.ccl), :where(.ccl) * { box-sizing: border-box; }

.ccl {
  font-family: var(--font-body);
  color: var(--fg2);
  font-size: var(--text-md); /* compact/UI base; body PROSE is set on p below (--fs-body) */
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}
/* The page ground belongs to <body>, not to the marker class.
   `ccl` does double duty: the theme puts it on <body>, and seven patterns also
   put it on their own wrapper so the .ccl-scoped rules reach them in the block
   editor (which doesn't carry the body class). While `background` lived on the
   shared rule, every one of those wrappers painted an opaque white box — a
   no-op on a white page, which is why it went unnoticed for so long, and a
   solid rectangle over any gradient or tint behind it. None of the seven sets a
   background of its own, so none of them wanted one. */
body.ccl {
  background: var(--bg-page);
}

/* TAG = SIZE heading scale (H1 56 / H2 40 / H3 32 / H4 24). These `.ccl`-scoped
   rules are what apply on the FRONT END (<body class="ccl">) and override
   theme.json's heading element defaults — so this scale MUST stay in sync with
   the h1–h4 element sizes in theme.json (which govern the editor canvas, where
   there's no .ccl). Change both together. Each tag reads its own-named token
   (h2 → --fs-h2); theme.json's h1–h4 point at the same tokens. */
:where(.ccl) h1, .ccl .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-strong-heading);
  font-size: var(--fs-h1-display);
  line-height: calc(var(--lh-h1-display) / var(--fs-h1-display));
  color: var(--ccl-black);
  letter-spacing: -0.01em;
  margin: 0 0 var(--spacing-md);
}
:where(.ccl) h2, .ccl .h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-strong-heading);
  font-size: var(--fs-h2);
  line-height: calc(var(--lh-h2) / var(--fs-h2));
  color: var(--ccl-black);
  letter-spacing: -0.5px;
  margin: 0 0 var(--spacing-md);
}
:where(.ccl) h3, .ccl .h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-strong-heading);
  font-size: var(--fs-h3);
  line-height: calc(var(--lh-h3) / var(--fs-h3));
  color: var(--fg2);
  margin: 0 0 var(--spacing-sm);
}
:where(.ccl) h4, .ccl .h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-strong-heading);
  font-size: var(--fs-h4);
  line-height: calc(var(--lh-h4) / var(--fs-h4));
  color: var(--fg2);
  margin: 0 0 var(--spacing-xs);
}
/* .display / .t-display moved to assets/css/site.css (unscoped) — one source of
   truth that works in the editor too (no .ccl there). Do not re-add scoped here. */
/* THE canonical body paragraph. Everything else inherits this -- a component
   should not restate body type. 33 rules used to, all saying 19px/1.5/-0.285px
   with color:var(--ccl-black), which is how sections drifted apart: a section
   matched its neighbours only if someone had remembered to restate the values,
   so the DEFAULT was the odd one out.
   Values are .body-2's (its own comment called them "the 19/1.5/-0.285
   paragraph style that recurs across pages") with --fg2 (#333) for the colour,
   which is what the design system specifies -- the component drift was toward
   pure black.

   UNSCOPED, not `:where(.ccl) p`, for the same reason the eyebrows are (see
   site.css): the front end is <body class="ccl"> so the scope adds nothing
   there, but the block-editor canvas has NO .ccl ancestor -- a scoped rule
   would render in preview and leave body copy unstyled while editing, which is
   exactly what the 23 unscoped component rules this replaces were covering.
   Specificity is unchanged: :where() contributes 0, so both forms are (0,0,1)
   and anything can still override. */
p {
  margin: 0 0 var(--spacing-md);
  font-family: var(--font-body);
  /* 19px via --fs-body, which carries the reason: "bumped here for readability
     (our audience skews older)". theme.json's core/paragraph declares the SAME
     token, because core/paragraph sets selectors.root = "p" and WordPress emits
     it against `:root :where(p)` at (0,1,0) -- outranking this rule at (0,0,1).
     Declaring one token in both places means whichever selector wins, the
     result is identical, and an environment that doesn't emit the block style
     can't silently shift body copy. */
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: -0.285px;
  color: var(--fg2);
}
/* Core List block -- prose too, so it gets the paragraph's type. Without this
   a list fell back to the 16px UI base on .ccl and sat visibly smaller than
   the paragraph introducing it. The indent puts the bullets just inside the
   text column (the article body's lists use the same --spacing-xl). :where()
   keeps it at (0,0,0): component lists built on the List block (.at-activities,
   the resource links) style themselves and win without trying. */
:where(.wp-block-list) {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  letter-spacing: -0.285px;
  color: var(--fg2);
  padding-left: var(--spacing-xl);
}

/* `<figure>` defaults to margin: 1em 40px in browsers — reset so
   grid/flex layouts using figures (pull-quotes, captioned media,
   image-mosaic items) align without per-component overrides. */
:where(.ccl) figure { margin: 0; }
:where(.ccl) blockquote { margin: 0; }
.ccl .t-small { font-size: var(--fs-small); line-height: calc(var(--lh-small) / var(--fs-small)); }
.ccl .t-tiny, :where(.ccl) small, .ccl .help { font-size: var(--fs-tiny); line-height: calc(var(--lh-tiny) / var(--fs-tiny)); color: var(--fg1); letter-spacing: 0.01em; }
.ccl .t-uppercase { font-family: var(--font-body); font-weight: var(--fw-strong-body); font-size: var(--fs-uppercase); line-height: calc(var(--lh-uppercase) / var(--fs-uppercase)); letter-spacing: 0.12em; text-transform: uppercase; }
.ccl .error-text { font-size: var(--fs-tiny); color: var(--fg-error); }
.ccl .field-label { font-family: var(--font-display); font-weight: var(--fw-strong-body); font-size: var(--fs-small); color: var(--fg1); }
/* Links: colour only, and underline the TEXT on hover. The prototype underlined
   via a transparent border-bottom that turned blue on hover, but border-bottom
   spans the whole box — so block-level clickables (nav, drawer, cards) got a
   FULL-WIDTH line while only inline links looked right. text-decoration underlines
   just the text, so inline links keep a natural underline and block-level links
   (which set their own text-decoration:none) get none. Deliberate divergence
   from the prototype's tokens.css (a known bug there). */
:where(.ccl) a, .ccl .link { color: var(--fg-link); text-decoration: none; }
:where(.ccl) a:hover, .ccl .link:hover { text-decoration: underline; text-underline-offset: 0.15em; }

/* Prose links -- an unclassed <a> inside a paragraph. Ported from the
   prototype, where it exists and we'd never brought it across, so prose links
   here have been falling back to the base rule above.

   That fallback is --fg-link (#0081C7), and upstream's note on this rule is
   blunt about why that's wrong: it measures 4.23:1 on plain white, which FAILS
   AA. --ccl-navy is 8.32:1 on white, 7.73:1 on grey-100 and 7.37:1 on the
   blue-bg tint -- AA with headroom on every surface the site actually uses.
   (--fg-link-strong only scrapes past, at 4.53:1 on the tint.)

   The underline is required, not decoration: navy against #333 body copy is
   1.52:1, so colour alone would make a link near-invisible inside a paragraph.
   That's the trade navy makes -- maximum contrast against the background,
   almost none against the text -- and the underline is what pays for it. Bold
   reinforces the same signal for low-vision readers.

   `p > a:not([class])` is deliberately narrow: nav, footer, breadcrumb and the
   language switcher all use unclassed <a> inside <li>, and none of them should
   pick this up. Classed links (.read-more, .btn, card CTAs) are untouched --
   with one exception this theme creates: .team-card__link puts its class on the
   wrapping <p> rather than the <a>, so that inner <a> IS matched here. site.css
   carries the opt-out next to the component. */
:where(.ccl) p > a:not([class]) {
  color: var(--ccl-navy);
  font-weight: var(--fw-strong-body);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
:where(.ccl) p > a:not([class]):hover {
  color: var(--ccl-blue);
  text-decoration-thickness: 2px;
}
/* …and the same in a core List block's items, which are prose like p. Scoped
   to .wp-block-list rather than all `li > a` for the reason above: nav, footer
   and breadcrumb links are unclassed <a> in plain <li>s. Same (0,1,2) as the
   p rule, so it beats `.ccl a`'s text-decoration:none; a component list that
   restyles its links (.at-resource-group) does so at (0,1,2) in site.css. */
:where(.ccl .wp-block-list) li > a:not([class]) {
  color: var(--ccl-navy);
  font-weight: var(--fw-strong-body);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
:where(.ccl .wp-block-list) li > a:not([class]):hover {
  color: var(--ccl-blue);
  text-decoration-thickness: 2px;
}
.ccl .disabled, .ccl [disabled] { color: var(--ccl-grey-70); }
.ccl .page-title {
  font-family: var(--font-display);
  font-weight: var(--fw-strong-heading);
  font-size: var(--fs-h2);
  color: var(--ccl-blue);
  line-height: calc(var(--lh-h2) / var(--fs-h2));
}
.ccl .eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: 0.33em;
  text-transform: uppercase;
  color: var(--fg-inverse);
}

/* In-page eyebrows — MOVED to assets/css/site.css, unscoped (same reason as the
   buttons below): the editor canvas has no .ccl ancestor, so a `.ccl .eyebrow-*`
   rule renders in preview/front end but goes UNSTYLED while editing — which is
   exactly why the conferences / monthly-meetings eyebrows looked plain in the
   editor. The raw .eyebrow-* classes (emitted by those ACF blocks) and the
   is-style-eyebrow-* block styles now share one unscoped set there. Do NOT
   re-add scoped `.ccl .eyebrow-*` here. See preview/eyebrows.html for the three
   roles (blue = page wayfinding, green = block section-type, meta = list label). */

/* ------- Buttons -------
   MOVED to assets/css/site.css, unscoped. Do NOT re-add a scoped `.ccl .btn`
   system here on a tokens re-sync from the prototype: the editor canvas has
   no .ccl, so a scoped rule is invisible in the editor and drifts from the
   front end (that was the pill-radius bug). Keep buttons in site.css. */

/* ------- Inputs ------- */
.ccl .input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--border-input);
  background: #fff;
  font-family: var(--font-body);
  font-size: var(--text-md);
  color: var(--fg2);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ccl .input:focus { outline: none; border-color: var(--ccl-blue); box-shadow: 0 0 0 3px rgba(0,129,199,0.2); }
.ccl .input[aria-invalid="true"] { border-color: var(--ccl-alert-red); }

/* ------- Cards ------- */
.ccl .card {
  background: #fff;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--spacing-lg);
}

/* ------- Feedback banners ------- */
.ccl .banner {
  padding: 12px 16px;
  border-radius: var(--radius-xs);
  border-left: 4px solid;
  font-size: var(--text-md);
}
.ccl .banner-info { background: var(--bg-info); border-color: var(--ccl-blue); color: var(--ccl-blue-dark); }
.ccl .banner-success { background: var(--bg-success); border-color: var(--ccl-green-dark); color: var(--ccl-green-dark); }
.ccl .banner-error { background: var(--bg-error); border-color: var(--ccl-alert-red); color: var(--ccl-alert-dark-red); }

/* -------- Responsive type (mobile) --------
   Below 768px, reduce headline roles per the spec.
   h4, h5, Small, Tiny, Uppercase are identical on both breakpoints so they
   are not overridden here. */
@media (max-width: 767px) {
  :root {
    --fs-h1-display: 40px; --lh-h1-display: 48px;
    --fs-h2:         36px; --lh-h2:         44px;
    --fs-h3:         28px; --lh-h3:         36px;
    /* h4, h5, small, tiny, uppercase unchanged */
  }
}

/* Page-edge inset collapse — same breakpoint as the layout reflow in
   site.css (multi-column grids collapse to single column at 900px), so
   the gutter and the column count flip together. Both tokens converge
   here so full-width sections and centered max-width containers line up
   along the same vertical at mobile. */
@media (max-width: 900px) {
  :root {
    --page-gutter:   var(--spacing-lg);    /* 64px → 24px */
    --container-pad: var(--spacing-lg);    /* 16px → 24px */
  }
}