/* =========================================================
       2026 Publication Typography (Sans-only, px-based)
       - Body: 18px, mid-form articles (500–1000 words)
       - Font: Plus Jakarta Sans everywhere
       - Content container: 860px desktop, readable measure inside
       - Colors: headings #1a2844, body #333, links rgb(63,81,181)
       ========================================================= */

    :root {
      /* Layout */
      --content-max: 860px;
      --measure: 72ch; /* readable line-length within 860px */

      /* Fonts */
      --font-sans: "Plus Jakarta Sans", Arial, sans-serif;

      /* Base type */
      --body-size: 18px;
      --body-line: 1.75; /* long-form comfort */
      --body-color: #333;
      --heading-color: #1a2844;
      --link-color: rgb(63, 81, 181);

      /* Rhythm */
      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-7: 32px;
      --space-8: 40px;
      --space-9: 48px;

      --flow: 18px;
      --flow-tight: 12px;
      --flow-loose: 24px;

      /* UI neutrals for demo */
      --page-bg: #ffffff;
      --panel-bg: rgba(26, 40, 68, 0.035);
      --border: rgba(26, 40, 68, 0.14);
      --muted: rgba(26, 40, 68, 0.72);
    }

    /* ---- Global defaults ---- */
    html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

    body {
      font-family: var(--font-sans);
      font-size: var(--body-size);
      line-height: var(--body-line);
      color: var(--body-color);
      margin: 0;
      background: var(--page-bg);

      font-kerning: normal;
      text-rendering: optimizeLegibility;
      font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    }

    /* Optional wrapper targets */
    article, .prose {
      max-width: var(--content-max);
      margin-left: auto;
      margin-right: auto;
    }

    /* Keep actual text column readable inside the container */
    .prose {
      max-width: min(var(--content-max), var(--measure));
      text-wrap: pretty;
    }

    /* ---- Headings ---- */
    h1, h2, h3, h4, h5, h6 {
      font-family: var(--font-sans);
      font-weight: 650;
      line-height: 1.15;
      letter-spacing: -0.02em;
      color: var(--heading-color);
      margin: 0;
      text-wrap: balance;
    }

    /* Fluid-ish scale (still px-centric) */
    h1 { font-size: clamp(38px, 3.2vw, 54px); margin: 0 0 var(--space-6); }
    h2 { font-size: clamp(28px, 2.2vw, 40px); margin: var(--space-9) 0 var(--space-4); }
    h3 { font-size: clamp(22px, 1.7vw, 30px); margin: var(--space-8) 0 var(--space-3); }
    h4 { font-size: 22px; letter-spacing: -0.01em; margin: var(--space-7) 0 var(--space-3); }
    h5 { font-size: 18px; letter-spacing: -0.005em; margin: var(--space-6) 0 var(--space-2); }
    h6 { font-size: 16px; letter-spacing: 0; margin: var(--space-6) 0 var(--space-2); }

    /* Avoid huge gaps when headings stack */
    h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6 {
      margin-top: var(--space-4);
    }

    /* ---- Paragraphs & common blocks ---- */
    p { margin: 0; }

    .prose > :where(p, ul, ol, blockquote, pre, table, figure, dl, .callout, .pullquote) {
      margin: 0 0 var(--flow);
    }

    /* Slightly tighter when paragraph follows a heading */
    .prose :where(h2, h3, h4, h5, h6) + p {
      margin-top: 0;
    }

    /* Lead/intro paragraph (optional) */
    .prose .lede,
    .prose p.lede {
      font-size: 20px;
      line-height: 1.7;
      margin-bottom: var(--space-6);
      color: rgba(0,0,0,0.72);
    }

    /* Small text */
    small, .text-small {
      font-size: 15px;
      line-height: 1.6;
    }

    /* ---- Links ---- */
    a {
      color: var(--link-color);
      text-decoration-thickness: from-font;
      text-underline-offset: 0.14em;
    }
    a:hover {
      text-decoration-thickness: max(2px, 0.12em);
    }

    /* ---- Lists (ul/ol/li + nesting) ---- */
    ul, ol {
      margin: 0;
      padding-left: 24px; /* marker alignment */
    }

    li {
      margin: 0 0 8px;
    }
    li:last-child { margin-bottom: 0; }

    /* If list items contain paragraphs, keep rhythm clean */
    li > p {
      margin: 0 0 10px;
    }
    li > p:last-child { margin-bottom: 0; }

    /* Nested lists */
    li > ul,
    li > ol {
      margin-top: 10px;
      margin-bottom: 0;
      padding-left: 20px;
    }

    /* Deep nesting density */
    :where(ul, ol) :where(ul, ol) {
      padding-left: 18px;
    }
    :where(ul, ol) :where(li) {
      margin-bottom: 6px;
    }

    /* Markers */
    ::marker { font-variant-numeric: tabular-nums; }

    /* ---- Definition lists ---- */
    dl { margin: 0; }
    dt {
      font-weight: 650;
      margin: var(--space-5) 0 var(--space-2);
      color: var(--heading-color);
    }
    dd {
      margin: 0 0 var(--space-4);
      padding-left: 16px;
    }

    /* ---- Blockquotes ---- */
    blockquote {
      margin: 0 0 var(--flow);
      padding: 18px 22px;
      border-left: 4px solid rgba(26, 40, 68, 0.35); /* derived from heading color */
      color: var(--heading-color);
      background: rgba(26, 40, 68, 0.03);
      border-radius: 10px;
      opacity: 0.98;
    }
    blockquote > :last-child { margin-bottom: 0; }

    /* ---- Code ---- */
    code, kbd, samp {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
      font-size: 0.95em;
    }
    p code, li code, dd code {
      padding: 2px 6px;
      border-radius: 6px;
      background: rgba(26, 40, 68, 0.06);
    }

    pre {
      margin: 0 0 var(--flow);
      padding: 18px 22px;
      border-radius: 14px;
      overflow-x: auto;
      line-height: 1.6;
      font-size: 15px;
      background: rgba(26, 40, 68, 0.06);
      border: 1px solid rgba(26, 40, 68, 0.10);
    }
    pre code { padding: 0; background: none; }

    /* ---- Figures / captions ---- */
    figure { margin: 0 0 var(--flow); }
    figcaption, .caption {
      font-size: 15px;
      line-height: 1.5;
      margin-top: 10px;
      max-width: 70ch;
      opacity: 0.85;
    }

    /* ---- Tables ---- */
    table {
      width: 100%;
      border-collapse: collapse;
      font-size: 15px;
      line-height: 1.5;
      margin: 0 0 var(--flow);
      border: 1px solid rgba(26, 40, 68, 0.12);
      border-radius: 12px;
      overflow: hidden;
    }
    th, td {
      text-align: left;
      padding: 10px 12px;
      vertical-align: top;
      border-bottom: 1px solid rgba(26, 40, 68, 0.10);
    }
    tr:last-child td { border-bottom: 0; }
    th {
      font-weight: 650;
      letter-spacing: -0.01em;
      color: var(--heading-color);
      background: rgba(26, 40, 68, 0.04);
    }

    /* ---- Horizontal rule ---- */
    hr {
      border: 0;
      height: 1px;
      margin: var(--space-9) 0;
      background: rgba(26, 40, 68, 0.14);
    }

    /* ---- Utility: vertical flow (outside prose too) ---- */
    .flow > * + * { margin-top: var(--flow); }
    .flow-tight > * + * { margin-top: var(--flow-tight); }
    .flow-loose > * + * { margin-top: var(--flow-loose); }

    /* ---- Accessibility ---- */
    :focus-visible {
      outline: 2px solid var(--link-color);
      outline-offset: 3px;
    }

    /* =========================================================
       Option 2: Pullquote + Callout components
       ========================================================= */

    /* Pullquote: mid-article emphasis (works as <aside class="pullquote">...) */
    .pullquote {
      padding: 20px 22px;
      border-radius: 16px;
      background: rgba(26, 40, 68, 0.04);
      border: 1px solid rgba(26, 40, 68, 0.12);
      color: var(--heading-color);
    }
    .pullquote p {
      font-size: 22px;
      line-height: 1.45;
      letter-spacing: -0.01em;
      margin: 0;
    }
    .pullquote cite {
      display: block;
      margin-top: 10px;
      font-style: normal;
      font-size: 14px;
      line-height: 1.4;
      color: rgba(26, 40, 68, 0.75);
    }

    /* Callout: informational panel with variants */
    .callout {
      padding: 16px 18px;
      border-radius: 14px;
      border: 1px solid rgba(26, 40, 68, 0.14);
      background: rgba(26, 40, 68, 0.03);
    }

    .callout__title {
      font-weight: 650;
      color: var(--heading-color);
      margin: 0 0 8px;
      letter-spacing: -0.01em;
    }

    .callout > :last-child { margin-bottom: 0; }

    /* Variants (subtle, professional) */
    .callout--note {
      background: rgba(63, 81, 181, 0.07);
      border-color: rgba(63, 81, 181, 0.22);
    }
    .callout--note .callout__title { color: rgb(47, 61, 160); }

    .callout--tip {
      background: rgba(26, 40, 68, 0.04);
      border-color: rgba(26, 40, 68, 0.18);
    }

    .callout--warning {
      background: rgba(255, 171, 0, 0.10);
      border-color: rgba(255, 171, 0, 0.28);
    }
    .callout--warning .callout__title { color: rgba(125, 82, 0, 0.95); }

    /* Mobile refinement */
    @media (max-width: 640px) {
      :root { --body-size: 17px; }
      h1 { margin-bottom: var(--space-5); }
      h2 { margin-top: var(--space-8); }
      .pullquote p { font-size: 20px; }
    }

    /* Demo page chrome (not required for your site) */
    .demo-shell {
      padding: 36px 18px 80px;
    }
    .demo-top {
      max-width: var(--content-max);
      margin: 0 auto 24px;
      padding: 18px 18px;
      border: 1px solid var(--border);
      border-radius: 16px;
      background: var(--panel-bg);
    }
    .demo-meta {
      margin: 0;
      color: rgba(26, 40, 68, 0.75);
      font-size: 15px;
      line-height: 1.6;
    }









    /* =========================================================
       2026 Publication Typography (Sans-only, px-based)
       - Body: 18px, mid-form articles
       - Font: Plus Jakarta Sans everywhere
       - Content container: 860px desktop, readable measure inside
       - Colors: headings #1a2844, body #333, links rgb(63,81,181)
       ========================================================= */

    :root {
      --content-max: 860px;
      --measure: 72ch;

      --font-sans: "Plus Jakarta Sans", Arial, sans-serif;

      --body-size: 18px;
      --body-line: 1.75;
      --body-color: #333;
      --heading-color: #1a2844;
      --link-color: rgb(63, 81, 181);

      --space-2: 8px;
      --space-3: 12px;
      --space-4: 16px;
      --space-5: 20px;
      --space-6: 24px;
      --space-7: 32px;
      --space-8: 40px;
      --space-9: 48px;

      --flow: 18px;
    }

    html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }

    body {
      font-family: var(--font-sans);
      font-size: var(--body-size);
      line-height: var(--body-line);
      color: var(--body-color);
      margin: 0;

      font-kerning: normal;
      text-rendering: optimizeLegibility;
      font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
      background: #fff;
    }

    /* Page framing for the preview (not required on your site) */
    .page {
      padding: 44px 18px 80px;
    }

    /* Your container */
    .ebt-expo-categories__overview-content {
      max-width: var(--content-max);
      margin: 0 auto;
    }

    /* Treat your content area like .prose */
    .ebt-expo-categories__overview-content {
      max-width: min(var(--content-max), var(--measure));
      text-wrap: pretty;
    }

    /* Headings */
    h1, h2, h3, h4, h5, h6 {
      font-family: var(--font-sans);
      font-weight: 650;
      line-height: 1.15;
      letter-spacing: -0.02em;
      color: var(--heading-color);
      margin: 0;
      text-wrap: balance;
    }

    h1 { font-size: clamp(38px, 3.2vw, 54px); margin: 0 0 var(--space-6); }
    h2 { font-size: clamp(28px, 2.2vw, 40px); margin: var(--space-9) 0 var(--space-4); }
    h3 { font-size: clamp(22px, 1.7vw, 30px); margin: var(--space-8) 0 var(--space-3); }
    h4 { font-size: 22px; letter-spacing: -0.01em; margin: var(--space-7) 0 var(--space-3); }
    h5 { font-size: 18px; letter-spacing: -0.005em; margin: var(--space-6) 0 var(--space-2); }
    h6 { font-size: 16px; letter-spacing: 0; margin: var(--space-6) 0 var(--space-2); }

    /* Blocks rhythm */
    p { margin: 0; }

    .ebt-expo-categories__overview-content > :where(p, ul, ol, blockquote, pre, table, figure, dl, .wp-caption) {
      margin: 0 0 var(--flow);
    }

    .ebt-expo-categories__overview-content :where(h2, h3, h4, h5, h6) + p { margin-top: 0; }

    /* Links */
    a {
      color: var(--link-color);
      text-decoration-thickness: from-font;
      text-underline-offset: 0.14em;
    }
    a:hover { text-decoration-thickness: max(2px, 0.12em); }

    /* Lists */
    ul, ol { margin: 0; padding-left: 24px; }
    li { margin: 0 0 8px; }
    li:last-child { margin-bottom: 0; }
    li > ul, li > ol { margin-top: 10px; margin-bottom: 0; padding-left: 20px; }
    :where(ul, ol) :where(ul, ol) { padding-left: 18px; }
    :where(ul, ol) :where(li) { margin-bottom: 6px; }
    ::marker { font-variant-numeric: tabular-nums; }

    /* WordPress images / captions (so this preview matches reality) */
    img {
      max-width: 100%;
      height: auto;
      border-radius: 14px;
      display: block;
    }

    .wp-caption {
      max-width: 100%;
    }
    .wp-caption-text {
      font-size: 15px;
      line-height: 1.5;
      margin: 10px 0 0;
      opacity: 0.85;
    }

    /* Common WP alignment classes */
    .aligncenter { margin-left: auto; margin-right: auto; }
    .wp-caption.aligncenter { display: block; }

    .alignright {
      float: right;
      margin: 6px 0 14px 18px;
      max-width: 310px; /* matches your inline width in sample */
    }

    /* Clear floats between sections */
    .clearfix::after { content: ""; display: block; clear: both; }

    /* Mobile: remove float so images don’t crush text */
    @media (max-width: 720px) {
      .alignright {
        float: none;
        margin: 0 0 var(--flow);
        max-width: 100%;
      }
    }