/* ============================================================
   Bulgarian Name Days — extracted stylesheet
   Source-of-truth for /name-days.html only (scoped, page-specific).
   Extracted from inline <style> blocks: 2026-05-17 12:46 UTC
   ============================================================ */


    .section-block { margin-top: 56px; padding-top: 24px; border-top: 1px solid #f0ede6; }
    .section-block:first-of-type { border-top: none; }
    .section-block .section-intro { font-size: 1.05rem; line-height: 1.75; color: #444; margin: 0 0 26px; max-width: 65ch; }
    .section-block h3 { font-family: 'Playfair Display', serif; font-size: 1.45rem; font-weight: 800; color: #012169; margin: 38px 0 14px; padding-bottom: 8px; border-bottom: 2px solid #f0c040; display: inline-block; }
    .section-block h4 { font-family: 'Space Grotesk', sans-serif; font-size: 1.1rem; font-weight: 700; color: #012169; margin: 26px 0 10px; }
    .section-block p { font-size: 1rem; line-height: 1.78; color: #2d3748; margin: 0 0 18px; max-width: 70ch; }
    .section-block p strong { color: #012169; font-weight: 700; }
    .section-block p a, .section-block li a { color: #C8102E; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
    .section-block p a:hover, .section-block li a:hover { color: #012169; }
    .section-block ul, .section-block ol { margin: 0 0 22px; padding-left: 26px; max-width: 70ch; }
    .section-block ul li, .section-block ol li { font-size: 1rem; line-height: 1.7; color: #2d3748; margin-bottom: 8px; }
    .section-block ul li::marker { color: #C8102E; }
    .section-block ol li::marker { font-weight: 700; color: #C8102E; }

    .section-block .faq-item { background: #fff; border: 1px solid #e8e4dc; border-radius: 10px; padding: 0; margin: 0 0 12px; }
    .section-block .faq-item[open] { border-color: #012169; }
    .section-block .faq-item summary { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: #012169; padding: 14px 18px; cursor: pointer; font-size: 1rem; line-height: 1.5; list-style: none; position: relative; padding-right: 44px; }
    .section-block .faq-item summary::-webkit-details-marker { display: none; }
    .section-block .faq-item summary::after { content: '+'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: #C8102E; }
    .section-block .faq-item[open] summary::after { content: '\2013'; }
    .section-block .faq-item p { padding: 0 18px 16px; margin: 0; font-size: .95rem; line-height: 1.7; color: #444; max-width: none; }

    .section-block .callout { display: flex; gap: 14px; align-items: flex-start; padding: 18px 22px; border-radius: 12px; margin: 22px 0; line-height: 1.65; font-size: .95rem; }
    .section-block .callout--info { background: #eff6ff; border-left: 4px solid #2563eb; color: #1e3a5f; }
    .section-block .callout--success { background: #ecfdf5; border-left: 4px solid #00966E; color: #1f3d2c; }
    .section-block .callout--warning { background: #fff8e6; border-left: 4px solid #f59e0b; color: #5a3e00; }
    .section-block .callout-icon { font-size: 1.4rem; flex-shrink: 0; }
    .section-block .callout strong { display: block; margin-bottom: 4px; color: #012169; font-family: 'Space Grotesk', sans-serif; }
    .section-block .callout--warning strong { color: #92400e; }

    .cmp-table { width: 100%; border-collapse: collapse; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.06); margin: 22px 0 8px; font-size: .9rem; }
    .cmp-table thead { background: #012169; }
    .cmp-table th { padding: 11px 14px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .76rem; letter-spacing: .04em; color: #fff; text-align: left; text-transform: uppercase; }
    .cmp-table td { padding: 10px 14px; border-bottom: 1px solid #f0ede6; vertical-align: top; line-height: 1.55; }
    .cmp-table tr:last-child td { border-bottom: none; }
    .cmp-table tr:nth-child(even) td { background: #faf9f7; }
    .cmp-table .scale-huge { color: #C8102E; font-weight: 700; }
    .cmp-table .scale-large { color: #d97706; font-weight: 600; }
    .cmp-table .scale-medium { color: #2563eb; }
    .cmp-table .scale-small { color: #6b7280; }
    .cmp-note { font-size: .82rem; color: #6b7280; margin: 6px 0 22px; font-style: italic; }

    .gotcha { background: #fef3c7; border-left: 5px solid #f59e0b; border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 18px 0; }
    .gotcha h4 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #92400e; font-size: 1rem; margin: 0 0 6px; padding: 0; border: none; }
    .gotcha p { font-size: .92rem; color: #5a3e00; line-height: 1.6; max-width: none; }
    .checklist { background: #ecfdf5; border-left: 5px solid #00966E; border-radius: 0 12px 12px 0; padding: 18px 22px; margin: 18px 0; }
    .checklist h4 { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: #065f46; font-size: 1rem; margin: 0 0 8px; padding: 0; border: none; }
    .checklist ul { padding-left: 22px; margin: 0; }
    .checklist li { font-size: .92rem; color: #1f3d2c; line-height: 1.6; margin-bottom: 4px; }
    .checklist li::marker { color: #00966E; }

    /* Today's name-day widget */
    .nameday-today { background: linear-gradient(135deg, #012169 0%, #1a3a8a 100%); color: #fff; border-radius: 14px; padding: 28px 32px; margin: 24px 0 32px; box-shadow: 0 6px 22px rgba(1,33,105,.18); }
    .nameday-today .label { font-family: 'Space Grotesk', sans-serif; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #f0c040; margin: 0 0 6px; }
    .nameday-today .date { font-family: 'Playfair Display', serif; font-size: 1.7rem; font-weight: 800; color: #fff; margin: 0 0 14px; line-height: 1.2; }
    .nameday-today .names { font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,0.94); margin: 0 0 14px; max-width: none; }
    .nameday-today .names strong { color: #f0c040; }
    .nameday-today .scroll-cta { display: inline-block; background: rgba(255,255,255,0.15); color: #fff; padding: 9px 18px; border-radius: 999px; font-family: 'Space Grotesk', sans-serif; font-size: .88rem; font-weight: 600; text-decoration: none; border: 1px solid rgba(255,255,255,0.35); transition: background .2s; }
    .nameday-today .scroll-cta:hover { background: rgba(255,255,255,0.25); color: #f0c040; }
    .nameday-today .quiet { color: rgba(255,255,255,0.84); font-style: italic; max-width: none; margin: 0; }

    /* Saint card grid for origin stories */
    .saint-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px; margin: 30px 0; }
    .saint-card { background: #fff; border: 1px solid #e8e4dc; border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.05); display: flex; flex-direction: column; }
    .saint-card img { width: 100%; height: 220px; object-fit: cover; display: block; background: #f0ede6; }
    .saint-card-body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }
    .saint-card h4 { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: #012169; margin: 0 0 6px; padding: 0; border: none; }
    .saint-card .saint-date { font-family: 'Space Grotesk', sans-serif; font-size: .78rem; color: #C8102E; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; }
    .saint-card p { font-size: .92rem; line-height: 1.6; color: #444; margin: 0 0 10px; max-width: none; }
    .saint-card p:last-child { margin: 0; }
    .saint-card .saint-overlay { color: #2d3748; font-style: italic; border-top: 1px dashed #e8e4dc; padding-top: 10px; margin-top: auto; font-size: .9rem; }

    /* Famous figures table */
    .famous-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin: 24px 0; }
    .famous-row { background: #faf9f7; border-left: 4px solid #f0c040; border-radius: 0 10px 10px 0; padding: 16px 20px; }
    .famous-row .name { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 800; color: #012169; margin: 0 0 10px; }
    .famous-row ul { padding-left: 22px; margin: 0; }
    .famous-row li { font-size: .94rem; line-height: 1.6; color: #2d3748; margin-bottom: 6px; }
    .famous-row li strong { color: #012169; }
    .famous-row li .years { font-family: 'Space Grotesk', sans-serif; font-size: .82rem; color: #6b7280; }

    /* Hero overrides */
    .guide-hero { background: linear-gradient(135deg, #012169 0%, #1a3a8a 100%); color: #fff; padding: 64px 0 56px; }
    .guide-hero-inner { max-width: 920px; margin: 0 auto; padding: 0 24px; }
    .guide-hero h1 { font-family: 'Playfair Display', serif; font-size: 2.4rem; font-weight: 900; line-height: 1.18; color: #fff; margin: 0 0 18px; }
    .guide-hero-lead { font-size: 1.1rem; line-height: 1.65; color: rgba(255,255,255,0.94); margin: 0 0 22px; max-width: 60ch; }
    .guide-hero-meta { font-family: 'Space Grotesk', sans-serif; font-size: .82rem; color: #f0c040; letter-spacing: .04em; margin: 0 0 22px; }
    .guide-hero-pills { display: flex; flex-wrap: wrap; gap: 8px; }
    .guide-hero-pills .pill { background: rgba(255,255,255,0.14); color: #fff; padding: 7px 14px; border-radius: 999px; font-family: 'Space Grotesk', sans-serif; font-size: .82rem; font-weight: 500; border: 1px solid rgba(255,255,255,0.22); }

    .page-wrap { max-width: 920px; margin: 0 auto; padding: 36px 24px 80px; }
    .toc-box { background: #faf9f7; border-radius: 14px; padding: 22px 26px; margin: 0 0 36px; }
    .toc-box h2 { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: #012169; margin: 0 0 12px; font-weight: 800; }
    .toc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
    .toc-grid a { font-family: 'Space Grotesk', sans-serif; font-size: .94rem; color: #012169; text-decoration: none; padding: 4px 0; border-bottom: 1px dashed #e8e4dc; }
    .toc-grid a:hover { color: #C8102E; }
    @media (max-width: 600px) { .toc-grid { grid-template-columns: 1fr; } }

    .section-label { font-family: 'Space Grotesk', sans-serif; font-size: .76rem; color: #C8102E; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 6px; }
    .section-title { font-family: 'Playfair Display', serif; font-size: 1.9rem; font-weight: 900; color: #012169; margin: 0 0 14px; line-height: 1.2; }

    /* Calendar table custom */
    .calendar-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: 24px 0; }
    .calendar-table thead { background: #012169; }
    .calendar-table th { padding: 11px 12px; color: #fff; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: .76rem; text-align: left; text-transform: uppercase; letter-spacing: .04em; }
    .calendar-table td { padding: 12px; border-bottom: 1px solid #f0ede6; vertical-align: top; line-height: 1.5; }
    .calendar-table tr:nth-child(even) td { background: #faf9f7; }
    .calendar-table .nd-date { font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: #012169; white-space: nowrap; }
    .calendar-table .nd-names { font-weight: 600; color: #C8102E; }
    .calendar-table .nd-variants { font-size: .82rem; color: #6b7280; line-height: 1.4; }
    @media (max-width: 768px) {
      /* Calendar table → card layout on phones.
         Each row becomes a self-contained card with: big navy date top-left,
         feast title beneath, name chips, scale pill top-right, Add button
         bottom-right. Cleaner than the previous "stack cells vertically" pattern. */
      .calendar-table { border-collapse: separate; border-spacing: 0; }
      .calendar-table thead { display: none; }
      .calendar-table tbody { display: grid; grid-template-columns: 1fr; gap: 12px; }
      .calendar-table tbody tr {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
          "date scale"
          "feast feast"
          "names names"
          "variants variants"
          "cal cal";
        gap: 4px 12px;
        padding: 14px 16px;
        background: #fff;
        border: 1px solid #e2e2dd;
        border-radius: 10px;
        box-shadow: 0 1px 3px rgba(0,0,0,0.04);
      }
      .calendar-table tbody tr:nth-child(even) { background: #fff; }
      .calendar-table tbody tr:nth-child(even) td { background: transparent; }
      .calendar-table td {
        display: block;
        border: none;
        padding: 0;
        background: transparent !important;
        line-height: 1.4;
      }
      .calendar-table .nd-date {
        grid-area: date;
        font-family: 'Space Grotesk', sans-serif;
        font-size: 1.06rem;
        font-weight: 700;
        color: #1a3a8c;
        letter-spacing: 0.01em;
        /* Allow wrapping for long movable-feast dates like
           "First Saturday of Lent" — they'd otherwise overflow horizontally
           and break the card layout. */
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: normal;
        line-height: 1.25;
      }
      .calendar-table tbody tr {
        min-width: 0;
        overflow: hidden;
      }
      .calendar-table td:nth-child(2) {
        grid-area: feast;
        font-family: 'Playfair Display', Georgia, serif;
        font-size: 1.02rem;
        font-weight: 600;
        color: #2a2a2a;
        line-height: 1.32;
        margin-top: 2px;
      }
      .calendar-table .nd-names {
        grid-area: names;
        font-size: .92rem;
        font-weight: 600;
        color: #C8102E;
        margin-top: 4px;
      }
      .calendar-table .nd-variants {
        grid-area: variants;
        font-size: .78rem;
        color: #7a7a7a;
        line-height: 1.4;
      }
      .calendar-table [class^="scale-"] {
        grid-area: scale;
        justify-self: end;
        align-self: start;
        padding: 3px 9px;
        border-radius: 999px;
        font-size: .68rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        white-space: nowrap;
      }
      .calendar-table .scale-huge   { background: #c0392b; color: #fff; }
      .calendar-table .scale-large  { background: #1a3a8c; color: #fff; }
      .calendar-table .scale-medium { background: #f0c040; color: #1a3a8c; }
      .calendar-table .scale-small  { background: #e2e2dd; color: #4a4a4a; }
      .calendar-table .nd-cal {
        grid-area: cal;
        justify-self: start;
        margin-top: 4px;
      }
      .cal-dropdown .cal-btn { padding: 6px 12px; font-size: .82rem; }
      .cal-menu { left: 0; right: auto; }
    }
  
    /* Calendar quick-start panel + Add-to-calendar buttons (17 May 2026) */
    .quick-start-panel {
      background: linear-gradient(135deg, #f4f7ff 0%, #fff 100%);
      border: 1px solid #d6dcf0;
      border-left: 4px solid #1a73e8;
      border-radius: 8px;
      padding: 18px 22px;
      margin: 0 0 28px;
    }
    .qs-title { margin: 0 0 6px; font-size: 1.05rem; color: #1a3a8c; font-weight: 700; }
    .qs-lead { margin: 0 0 14px; color: #4a4a4a; font-size: .95rem; }
    .qs-btn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
    .quick-cal-btn {
      display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
      padding: 8px 10px; min-height: 50px;
      background: #fff; border: 1px solid #cfd8e3; border-radius: 6px;
      text-decoration: none; color: #1a3a8c;
      transition: background 0.15s, border-color 0.15s, transform 0.1s;
    }
    .quick-cal-btn:hover { background: #1a73e8; border-color: #1a73e8; color: #fff; transform: translateY(-1px); }
    .qcb-date { font-size: .78rem; font-weight: 700; opacity: .8; }
    .qcb-name { font-size: .92rem; font-weight: 600; line-height: 1.2; }
    .qs-foot { margin: 12px 0 0; color: #777; font-size: .82rem; }

    .nd-cal { text-align: center; white-space: nowrap; }
    .cal-btn {
      display: inline-flex; align-items: center; gap: 4px;
      padding: 4px 8px; font-size: .78rem; font-weight: 600;
      background: #f0f3f8; color: #1a3a8c; border: 1px solid #d6dcf0;
      border-radius: 4px; text-decoration: none;
      transition: background 0.15s, color 0.15s;
    }
    .cal-btn:hover { background: #1a73e8; color: #fff; border-color: #1a73e8; }
    .cal-btn svg { flex-shrink: 0; }
    @media (max-width: 600px) {
      .cal-btn span { display: none; }
      .cal-btn { padding: 6px; }
    }

    /* Calendar dropdown + Quick Start enhancements (17 May 2026) */
    .cal-dropdown { position: relative; display: inline-block; }
    .cal-menu {
      display: none; position: absolute; top: 100%; right: 0; z-index: 50;
      min-width: 160px; padding: 4px;
      background: #fff; border: 1px solid #cfd8e3; border-radius: 6px;
      box-shadow: 0 4px 12px rgba(0,0,0,.12);
      margin-top: 4px;
    }
    .cal-dropdown:hover .cal-menu,
    .cal-dropdown:focus-within .cal-menu,
    .cal-dropdown.cal-open .cal-menu { display: block; }
    .cal-menu a {
      display: block; padding: 7px 10px; font-size: .85rem;
      color: #1a3a8c; text-decoration: none; border-radius: 4px;
      white-space: nowrap;
    }
    .cal-menu a:hover, .cal-menu a:focus { background: #f0f3f8; outline: none; }

    .qs-feed-cta {
      display: grid;
      grid-template-columns: auto 1fr auto;
      gap: 14px; align-items: center;
      padding: 14px 16px; margin: 14px 0 18px;
      background: #fffaf0; border: 1px solid #f0d4a0;
      border-left: 4px solid #f0c040; border-radius: 6px;
    }
    .qs-feed-icon { font-size: 1.6rem; }
    .qs-feed-body { font-size: .92rem; line-height: 1.45; color: #4a4a4a; }
    .qs-feed-body strong { display: block; color: #1a3a8c; margin-bottom: 2px; }
    .qs-feed-actions { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
    .qs-feed-btn {
      padding: 7px 12px; border-radius: 4px; font-size: .85rem; font-weight: 600;
      text-align: center; text-decoration: none;
      border: 1px solid; transition: opacity .15s, transform .1s;
    }
    .qs-feed-btn:hover { transform: translateY(-1px); }
    .qs-feed-btn--primary  { background: #1a3a8c; color: #fff; border-color: #1a3a8c; }
    .qs-feed-btn--google   { background: #1a73e8; color: #fff; border-color: #1a73e8; }
    .qs-feed-btn--download { background: #fff;    color: #1a3a8c; border-color: #cfd8e3; }
    @media (max-width: 720px) {
      .qs-feed-cta { grid-template-columns: 1fr; }
      .qs-feed-actions { flex-direction: row; flex-wrap: wrap; }
      .qs-feed-btn { flex: 1 1 calc(50% - 6px); }
    }

    .qcb-item {
      padding: 9px 11px; border: 1px solid #cfd8e3; border-radius: 6px;
      background: #fff; transition: border-color .15s;
    }
    .qcb-item:hover { border-color: #1a73e8; }
    .qcb-head { margin-bottom: 5px; }
    .qcb-head .qcb-date { font-size: .76rem; font-weight: 700; color: #1a3a8c; opacity: .8; margin-right: 6px; }
    .qcb-head .qcb-name { font-size: .92rem; font-weight: 600; color: #1a3a8c; }
    .qcb-links { display: flex; gap: 4px; }
    .qcb-links a {
      flex: 1; padding: 4px 6px; font-size: .72rem; font-weight: 600;
      text-align: center; text-decoration: none; color: #1a3a8c;
      border: 1px solid #cfd8e3; border-radius: 3px; background: #f5f7fb;
    }
    .qcb-links a:hover { background: #1a73e8; color: #fff; border-color: #1a73e8; }

    /* ============================================================== */
    /* PHASE 1 REDESIGN — 17 May 2026                                  */
    /* Hero split layout, search/filter toolbar, brand-callout colours */
    /* ============================================================== */

    /* Hero two-column layout */
    .guide-hero--split {
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
      gap: 36px;
      align-items: center;
    }
    .guide-hero-text { min-width: 0; }
    @media (max-width: 880px) {
      .guide-hero--split { grid-template-columns: 1fr; gap: 24px; }
    }

    /* "Today in Bulgaria" hero card */
    .hero-today-card {
      background: rgba(255, 255, 255, 0.08);
      border: 1px solid rgba(255, 255, 255, 0.18);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      border-radius: 12px;
      padding: 22px 24px;
      color: #fff;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    }
    .htc-eyebrow {
      margin: 0 0 8px;
      font-size: .76rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #f0c040;
      font-weight: 700;
    }
    .htc-date {
      margin: 0 0 6px;
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.42rem;
      font-weight: 700;
      line-height: 1.18;
      color: #fff;
    }
    .htc-names {
      margin: 0 0 18px;
      font-size: .96rem;
      line-height: 1.42;
      color: rgba(255, 255, 255, 0.86);
      min-height: 1.2em;
    }
    .htc-cta-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .htc-btn {
      flex: 1 1 auto;
      padding: 9px 14px;
      border-radius: 6px;
      font-size: .82rem;
      font-weight: 700;
      text-align: center;
      text-decoration: none;
      transition: transform .1s, box-shadow .15s;
      white-space: nowrap;
    }
    .htc-btn:hover { transform: translateY(-1px); }
    .htc-btn--primary {
      background: #f0c040;
      color: #1a3a8c;
      box-shadow: 0 2px 0 #b8870c;
    }
    .htc-btn--secondary {
      background: rgba(255, 255, 255, 0.14);
      color: #fff;
      border: 1px solid rgba(255, 255, 255, 0.32);
    }
    .htc-btn--secondary:hover { background: rgba(255, 255, 255, 0.22); }

    /* Calendar toolbar (search / month jump / major toggle) */
    .cal-toolbar {
      background: #fff;
      border: 1px solid #d6dcf0;
      border-radius: 10px;
      padding: 14px 16px;
      margin: 0 0 18px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    }
    .ct-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 10px;
    }
    .ct-search-row { margin-bottom: 10px; }
    .ct-search {
      flex: 1 1 280px;
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 7px 11px;
      background: #f5f7fb;
      border: 1px solid #d6dcf0;
      border-radius: 6px;
      color: #6c7591;
    }
    .ct-search:focus-within {
      border-color: #1a73e8;
      background: #fff;
      box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.18);
    }
    .ct-search input {
      flex: 1;
      border: 0;
      outline: 0;
      background: transparent;
      font-size: .95rem;
      color: #1a3a8c;
      min-width: 0;
    }
    .ct-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      background: #f5f7fb;
      border: 1px solid #d6dcf0;
      border-radius: 6px;
      font-size: .85rem;
      color: #1a3a8c;
      cursor: pointer;
      user-select: none;
    }
    .ct-toggle input { margin: 0; cursor: pointer; }
    .ct-month-row {
      gap: 6px;
      overflow-x: auto;
      padding-bottom: 2px;
    }
    .ct-month-chip {
      flex: 0 0 auto;
      padding: 5px 11px;
      border: 1px solid #d6dcf0;
      border-radius: 999px;
      background: #fff;
      font-size: .8rem;
      font-weight: 600;
      color: #1a3a8c;
      cursor: pointer;
      transition: background .12s, color .12s, border-color .12s;
    }
    .ct-month-chip:hover { background: #f0f3f8; }
    .ct-month-chip.active {
      background: #1a3a8c;
      border-color: #1a3a8c;
      color: #fff;
    }
    .ct-status {
      margin: 8px 0 0;
      font-size: .78rem;
      color: #6c7591;
    }

    /* Brand-specific callouts (semantic colour bars) */
    .callout--mistake { border-left: 4px solid #1a3a8c; background: #f4f7ff; }
    .callout--dont    { border-left: 4px solid #c0392b; background: #fdf3f1; }
    .callout--custom  { border-left: 4px solid #2e7d32; background: #f1f8f2; }
    .callout--note    { border-left: 4px solid #f0c040; background: #fffaf0; }
    .callout--mistake, .callout--dont, .callout--custom, .callout--note {
      padding: 14px 16px;
      border-radius: 0 6px 6px 0;
      margin: 14px 0;
    }
    .callout--mistake .callout-title { color: #1a3a8c; }
    .callout--dont    .callout-title { color: #c0392b; }
    .callout--custom  .callout-title { color: #2e7d32; }
    .callout--note    .callout-title { color: #8a6500; }
    .callout-title {
      margin: 0 0 4px;
      font-weight: 700;
      font-size: .85rem;
      letter-spacing: .04em;
      text-transform: uppercase;
    }

  
    /* ============================================================ */
    /* V3 HERO — Scattered Constellation (17 May 2026)                */
    /* All rules scoped under .ndhero — nothing leaks                */
    /* ============================================================ */
    .ndhero {
      --nd-navy: #012169; --nd-navy-deep: #011550;
      --nd-red: #C8102E; --nd-gold: #f0c040; --nd-white: #ffffff;
      --nd-bg-green: #00966E; --nd-bg-red: #D62612;
      --nd-serif: 'Playfair Display', Georgia, serif;
      --nd-sans: 'Space Grotesk', 'Inter', system-ui, sans-serif;
      position: relative; width: 100%; min-height: 600px;
      overflow: hidden; isolation: isolate;
      background: var(--nd-navy); color: var(--nd-white);
      font-family: var(--nd-sans);
    }
    .ndhero__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
    .ndhero__grad {
      position: absolute; inset: 0;
      background:
        radial-gradient(120% 80% at 92% 12%, rgba(240,192,64,0.10), transparent 50%),
        radial-gradient(80% 100% at 0% 100%, rgba(200,16,46,0.10), transparent 60%),
        linear-gradient(135deg, #012a7c 0%, #012169 45%, #011550 100%);
    }
    .ndhero__sweep { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.14; }
    .ndhero__flourish-bg {
      position: absolute; top: 92px; right: -24px;
      font-family: var(--nd-serif); font-style: italic; font-size: 68px;
      color: var(--nd-gold); opacity: 0.10;
      white-space: nowrap; transform: rotate(-6deg); letter-spacing: 0.02em;
    }
    .ndhero__flourish-small {
      position: absolute; top: 32px; right: 320px;
      font-family: var(--nd-serif); font-style: italic; font-size: 20px;
      color: var(--nd-gold); opacity: 0.11;
      white-space: nowrap; transform: rotate(-2deg); letter-spacing: 0.02em;
    }
    .ndhero__icon { position: absolute; pointer-events: none; }
    .ndhero__icon svg { display: block; }
    .ndhero__icon--calendar { top: 92px; right: 78px; transform: rotate(-3deg); }
    .ndhero__icon--dome     { top: 24px; right: 24px; }
    .ndhero__icon--basil    { bottom: -28px; right: 40px; transform: rotate(-14deg); }
    .ndhero__icon--marten   { bottom: -10px; right: -20px; transform: rotate(-22deg); }
    .ndhero__inner {
      position: relative; z-index: 2;
      max-width: 1200px; margin: 0 auto; padding: 64px 56px;
      display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(360px, 1fr);
      gap: 56px; align-items: start; box-sizing: border-box;
    }
    .ndhero__eyebrow {
      font-family: var(--nd-sans); font-size: 11px;
      letter-spacing: 0.28em; text-transform: uppercase;
      font-weight: 600; color: var(--nd-gold);
      margin: 0 0 24px; display: inline-flex; align-items: center; gap: 12px;
    }
    .ndhero__eyebrow::before {
      content: ""; width: 28px; height: 1px; background: var(--nd-gold);
    }
    .ndhero__h1 {
      font-family: var(--nd-serif); font-weight: 700;
      font-size: 3.2rem; line-height: 1.02; letter-spacing: -0.02em;
      color: var(--nd-white); margin: 0 0 14px;
    }
    .ndhero__subtitle {
      font-family: var(--nd-serif); font-style: italic; font-weight: 400;
      font-size: 1.6rem; line-height: 1.18;
      color: rgba(255,255,255,0.86); margin: 0 0 28px; max-width: 22ch;
    }
    .ndhero__lead {
      font-family: var(--nd-serif); font-weight: 400;
      font-size: 1.05rem; line-height: 1.62;
      color: rgba(255,255,255,0.80); margin: 0 0 28px; max-width: 52ch;
    }
    .ndhero__byline {
      font-family: var(--nd-sans); font-size: 0.78rem;
      letter-spacing: 0.04em; color: rgba(255,255,255,0.62);
      margin: 0 0 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    }
    .ndhero__byline-author { color: rgba(255,255,255,0.92); font-weight: 500; }
    .ndhero__byline-sep    { color: var(--nd-gold); opacity: 0.7; }
    .ndhero__tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
    .ndhero__tags li {
      font-family: var(--nd-sans); font-size: 0.78rem; letter-spacing: 0.02em;
      color: rgba(255,255,255,0.88);
      background: rgba(1, 21, 80, 0.6);
      border: 1px solid rgba(240, 192, 64, 0.5);
      padding: 7px 12px; border-radius: 2px; white-space: nowrap;
    }
    .ndhero__today {
      position: relative; z-index: 3;
      background: linear-gradient(180deg, rgba(255,255,255,0.16), rgba(255,255,255,0.08));
      backdrop-filter: blur(16px) saturate(1.2);
      -webkit-backdrop-filter: blur(16px) saturate(1.2);
      border: 1px solid rgba(255,255,255,0.22);
      border-radius: 6px; padding: 32px 30px 28px;
      color: var(--nd-white);
      box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 30px 60px -20px rgba(0,0,0,0.45);
      max-width: 420px; justify-self: end; width: 100%;
    }
    .ndhero__today::before {
      content: ""; position: absolute; top: 0; left: 24px; right: 24px;
      height: 2px; background: var(--nd-gold);
    }
    .ndhero__today-eyebrow {
      font-family: var(--nd-sans); font-size: 10px;
      letter-spacing: 0.28em; text-transform: uppercase;
      font-weight: 700; color: var(--nd-gold); margin: 0 0 14px;
    }
    #ndDate {
      font-family: var(--nd-serif); font-weight: 600;
      font-size: 2rem; line-height: 1.05; letter-spacing: -0.015em;
      color: var(--nd-white); margin: 0 0 6px;
    }
    .ndhero__today-feast {
      font-family: var(--nd-serif); font-style: italic; font-weight: 400;
      font-size: 1.05rem; line-height: 1.35;
      color: rgba(255,255,255,0.80); margin: 0 0 20px; min-height: 1.35em;
    }
    .ndhero__celebrants {
      display: flex; flex-direction: column; gap: 4px;
      padding: 14px 0;
      border-top: 1px solid rgba(255,255,255,0.18);
      border-bottom: 1px solid rgba(255,255,255,0.18);
      margin: 0 0 22px;
    }
    .ndhero__celebrants-label {
      font-family: var(--nd-sans); font-size: 10px;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: rgba(255,255,255,0.55); font-weight: 600;
    }
    #ndNames {
      font-family: var(--nd-serif); font-size: 1.35rem; font-weight: 600;
      letter-spacing: -0.005em; color: var(--nd-red);
      text-shadow: 0 1px 0 rgba(0,0,0,0.18); min-height: 1.4em;
    }
    #ndCta { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
    .ndhero__btn {
      font-family: var(--nd-sans); font-size: 0.92rem; font-weight: 600;
      letter-spacing: 0.01em; padding: 12px 18px; border-radius: 3px;
      border: 1px solid transparent; cursor: pointer; text-decoration: none;
      display: inline-flex; align-items: center; justify-content: center; gap: 10px;
      transition: background 160ms cubic-bezier(0.22,1,0.36,1), border-color 160ms, transform 160ms;
    }
    .ndhero__btn--gold { background: var(--nd-gold); color: var(--nd-navy-deep); border-color: var(--nd-gold); }
    .ndhero__btn--gold:hover { background: #f6cd5b; transform: translateY(-1px); }
    .ndhero__btn--gold svg { transition: transform 160ms; }
    .ndhero__btn--gold:hover svg { transform: translateX(2px); }
    .ndhero__btn--ghost { background: transparent; color: var(--nd-white); border-color: rgba(255,255,255,0.45); }
    .ndhero__btn--ghost:hover { border-color: var(--nd-white); background: rgba(255,255,255,0.06); }
    .ndhero__today-meta {
      font-family: var(--nd-sans); font-size: 0.72rem; letter-spacing: 0.04em;
      color: rgba(255,255,255,0.5); display: flex; align-items: center; gap: 8px;
    }
    .ndhero__today-meta-dot {
      width: 6px; height: 6px; border-radius: 50%;
      background: var(--nd-bg-green);
      box-shadow: 0 0 0 3px rgba(0, 150, 110, 0.18);
      animation: ndhero-pulse 2.4s ease-in-out infinite;
    }
    @keyframes ndhero-pulse {
      0%, 100% { box-shadow: 0 0 0 3px rgba(0,150,110,0.18); }
      50%      { box-shadow: 0 0 0 6px rgba(0,150,110,0.06); }
    }
    @media (max-width: 768px) {
      .ndhero__inner { grid-template-columns: 1fr; padding: 40px 24px; gap: 32px; }
      .ndhero__h1 { font-size: 2.4rem; }
      .ndhero__subtitle { font-size: 1.25rem; }
      .ndhero__today { max-width: 100%; justify-self: stretch; }
      .ndhero__icon--calendar { right: 8px; top: 56px; }
      .ndhero__icon--calendar svg { width: 140px; height: 152px; }
      .ndhero__icon--dome { display: none; }
      .ndhero__icon--basil, .ndhero__icon--marten { opacity: 0.6; }
      .ndhero__flourish-bg { font-size: 44px; top: 56px; right: -40px; }
      .ndhero__flourish-small { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ndhero *, .ndhero *::before, .ndhero *::after {
        animation: none !important; transition: none !important;
      }
    }

    /* Month overview (V1 card grid) - Phase 2B (17 May 2026) - scoped under .ndmonths */
    .ndmonths { --nd-navy:#012169; --nd-navy-deep:#011550; --nd-red:#C8102E; --nd-gold:#f0c040; --nd-gold-ink:#8a6312; --nd-parchment:#F6F1E8; --nd-parchment-2:#EEE6D3; --nd-ink:#1C1B18; --nd-ink-2:#4a4640; --nd-ink-3:#6e6960; --nd-rule:#d8cdb6; --nd-serif:'Playfair Display',Georgia,serif; --nd-sans:'Space Grotesk','Inter',system-ui,sans-serif; background:var(--nd-parchment); padding:36px 16px 44px; font-family:var(--nd-sans); color:var(--nd-ink); box-sizing:border-box; width:100%; }
    .ndmonths__header { display:flex; align-items:flex-end; justify-content:space-between; gap:32px; padding-bottom:24px; margin-bottom:32px; border-bottom:1px solid var(--nd-rule); }
    .ndmonths__header-text { max-width:720px; }
    .ndmonths__kicker { font-family:var(--nd-sans); font-size:11px; letter-spacing:0.28em; text-transform:uppercase; font-weight:600; color:var(--nd-navy); margin:0 0 10px; }
    .ndmonths__title { font-family:var(--nd-serif); font-weight:700; font-size:2.2rem; line-height:1.08; letter-spacing:-0.015em; color:var(--nd-ink); margin:0 0 14px; }
    .ndmonths__legend { font-family:var(--nd-sans); font-size:0.88rem; line-height:1.55; color:var(--nd-ink-2); margin:0; max-width:64ch; }
    .ndmonths__swatch { display:inline-block; width:10px; height:10px; border-radius:2px; margin:0 4px 0 8px; vertical-align:-1px; }
    .ndmonths__swatch--huge { background:var(--nd-red); }
    .ndmonths__swatch--large { background:var(--nd-navy); }
    .ndmonths__swatch--medium { background:var(--nd-gold); }
    .ndmonths__swatch--small { background:#9b9890; }
    .ndmonths__jump { font-family:var(--nd-sans); font-size:0.82rem; font-weight:600; letter-spacing:0.02em; background:var(--nd-navy); color:#fff; border:1px solid var(--nd-navy); padding:10px 16px; border-radius:3px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; white-space:nowrap; transition:background 160ms,transform 160ms; }
    .ndmonths__jump:hover { background:var(--nd-navy-deep); transform:translateY(-1px); }
    .ndmonths__grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--nd-rule); border:1px solid var(--nd-rule); border-radius:4px; overflow:hidden; }
    @media (max-width:1440px) { .ndmonths__grid { grid-template-columns:repeat(3,1fr); } }
    @media (max-width:720px) { .ndmonths__grid { grid-template-columns:repeat(2,1fr); } }
    @media (max-width:460px) { .ndmonths__grid { grid-template-columns:1fr; } }
    .ndmonths__card { background:var(--nd-parchment); padding:20px 16px 22px; min-height:230px; display:flex; flex-direction:column; position:relative; transition:background 180ms; }
    .ndmonths__card:hover { background:var(--nd-parchment-2); }
    .ndmonths__card-head { display:flex; align-items:baseline; gap:10px; margin-bottom:10px; }
    .ndmonths__num { font-family:var(--nd-sans); font-feature-settings:'tnum' 1; font-size:11px; letter-spacing:0.18em; color:var(--nd-ink-3); font-weight:500; }
    .ndmonths__month { font-family:var(--nd-serif); font-weight:600; font-size:1.55rem; line-height:1; letter-spacing:-0.01em; color:var(--nd-navy); margin:0; flex:1; }
    .ndmonths__count { font-family:var(--nd-sans); font-feature-settings:'tnum' 1; font-size:10px; letter-spacing:0.16em; color:var(--nd-ink-3); border:1px solid var(--nd-rule); padding:2px 7px; border-radius:99px; }
    .ndmonths__headline { font-family:var(--nd-serif); font-style:italic; font-weight:400; font-size:0.9rem; line-height:1.4; color:var(--nd-gold-ink); margin:0 0 16px; min-height:2.6em; }
    .ndmonths__chips { list-style:none; padding:0; margin:auto 0 0; display:flex; flex-wrap:wrap; gap:6px; }
    .ndmonths__empty { margin:auto 0 0; font-family:var(--nd-serif); font-style:italic; font-size:0.80rem; line-height:1.5; color:var(--nd-ink-3); }
    .ndmonths__empty a { color:var(--nd-navy); text-decoration:underline; text-decoration-color:rgba(1,33,105,0.3); text-underline-offset:3px; transition:text-decoration-color 160ms; }
    .ndmonths__empty a:hover { text-decoration-color:var(--nd-navy); }
    .ndmonths__card.is-empty .ndmonths__month, .ndmonths__card.is-empty .ndmonths__headline { color:var(--nd-ink-3); }
    .ndmonths__chip { display:inline-flex; align-items:baseline; gap:6px; font-family:var(--nd-sans); font-size:0.78rem; font-weight:500; letter-spacing:0.01em; padding:5px 9px 5px 8px; border-radius:3px; border:1px solid transparent; text-decoration:none; white-space:nowrap; transition:transform 140ms,background 140ms,border-color 140ms; cursor:pointer; }
    .ndmonths__chip:hover { transform:translateY(-1px); }
    .ndmonths__chip-d { font-feature-settings:'tnum' 1; font-weight:700; letter-spacing:0.02em; }
    .ndmonths__chip-name { font-weight:500; }
    .ndmonths__chip--huge { background:rgba(200,16,46,0.09); border-color:rgba(200,16,46,0.3); color:var(--nd-red); }
    .ndmonths__chip--huge:hover { background:rgba(200,16,46,0.15); border-color:rgba(200,16,46,0.5); }
    .ndmonths__chip--large { background:rgba(1,33,105,0.07); border-color:rgba(1,33,105,0.25); color:var(--nd-navy); }
    .ndmonths__chip--large:hover { background:rgba(1,33,105,0.13); border-color:rgba(1,33,105,0.45); }
    .ndmonths__chip--medium { background:rgba(240,192,64,0.18); border-color:rgba(240,192,64,0.55); color:var(--nd-gold-ink); }
    .ndmonths__chip--medium:hover { background:rgba(240,192,64,0.30); border-color:rgba(240,192,64,0.85); }
    .ndmonths__chip--small { background:rgba(28,27,24,0.05); border-color:rgba(28,27,24,0.16); color:#57534B; }
    .ndmonths__chip--small:hover { background:rgba(28,27,24,0.09); border-color:rgba(28,27,24,0.3); }
    @media (max-width:720px) { .ndmonths__header { flex-direction:column; align-items:flex-start; } .ndmonths { padding:28px 16px 36px; } }
    @media (prefers-reduced-motion: reduce) { .ndmonths * { transition:none !important; animation:none !important; } }

  

    /* ============================================================ */
    /* Saints section (V1 two-tier) — Phase 2C (17 May 2026)         */
    /* Scoped under .ndsaints                                        */
    /* ============================================================ */
    .ndsaints {
      --nd-navy: #012169; --nd-navy-deep: #011550; --nd-red: #C8102E;
      --nd-gold: #f0c040; --nd-gold-ink: #8a6312;
      --nd-parchment: #F6F1E8; --nd-parchment-2: #EEE6D3;
      --nd-ink: #1C1B18; --nd-ink-2: #4a4640; --nd-ink-3: #6e6960;
      --nd-rule: #d8cdb6;
      --nd-serif: 'Playfair Display', Georgia, serif;
      --nd-sans: 'Space Grotesk', 'Inter', system-ui, sans-serif;
      background: var(--nd-parchment); padding: 36px 24px 44px;
      font-family: var(--nd-sans); color: var(--nd-ink);
      box-sizing: border-box; width: 100%;
    }
    .ndsaints__tier-head {
      padding-bottom: 20px; margin: 0 0 32px;
      border-bottom: 1px solid var(--nd-rule);
    }
    .ndsaints__heroes + .ndsaints__tier-head { margin-top: 64px; }
    .ndsaints__kicker {
      font-family: var(--nd-sans); font-size: 11px;
      letter-spacing: 0.28em; text-transform: uppercase;
      font-weight: 600; color: var(--nd-red); margin: 0 0 10px;
    }
    .ndsaints__title {
      font-family: var(--nd-serif); font-weight: 700;
      font-size: 2rem; line-height: 1.1; letter-spacing: -0.015em;
      color: var(--nd-ink); margin: 0; max-width: 36ch;
    }
    /* Horizontal card layout (17 May 2026, Adrian's redesign):
       icon on the left, text on the right reading naturally left-to-right.
       Previous design was 4-column vertical cards with very narrow text
       columns; this lays the hero out as 2-column grid of landscape cards.
       Stacks to single landscape-card column at tablet width, then to
       icon-on-top vertical only on phones. */
    .ndsaints__heroes {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;
    }
    @media (max-width: 879px) { .ndsaints__heroes { grid-template-columns: 1fr; } }
    .ndsaints__hero {
      background: var(--nd-parchment-2);
      border: 1px solid var(--nd-rule); border-radius: 4px;
      overflow: hidden; display: flex; flex-direction: row;
      transition: transform 200ms cubic-bezier(0.22,1,0.36,1), box-shadow 200ms, border-color 200ms;
    }
    .ndsaints__hero:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px -12px rgba(28,27,24,0.18);
      border-color: var(--nd-ink-3);
    }
    .ndsaints__hero-media {
      position: relative; background: var(--nd-parchment);
      padding: 18px; border-right: 1px solid var(--nd-rule);
      flex: 0 0 38%; max-width: 220px;
      display: flex; align-items: center; justify-content: center;
    }
    @media (max-width: 1180px) {
      .ndsaints__hero-media { flex-basis: 34%; max-width: 180px; padding: 14px; }
    }
    /* On phones, revert to icon-on-top stack so the body has full width */
    @media (max-width: 559px) {
      .ndsaints__hero { flex-direction: column; }
      .ndsaints__hero-media {
        flex-basis: auto; max-width: none;
        border-right: none; border-bottom: 1px solid var(--nd-rule);
      }
    }
    .ndsaints__plate {
      position: relative; width: 100%; aspect-ratio: 1 / 1;
      overflow: hidden; border-radius: 2px;
      background: linear-gradient(180deg, #ead7a8 0%, #d4b970 55%, #a07c2e 100%);
    }
    @media (max-width: 559px) {
      .ndsaints__plate { aspect-ratio: 4 / 3; }
    }
    .ndsaints__plate::before {
      content: attr(data-initial); position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--nd-serif); font-size: 96px; line-height: 1;
      font-weight: 700; color: rgba(1,33,105,0.85); z-index: 0;
      background: radial-gradient(closest-side at 50% 46%, rgba(255,243,200,0.85), rgba(240,192,64,0.15) 60%, transparent 78%);
    }
    .ndsaints__plate::after {
      content: ""; position: absolute; top: 14%; left: 50%;
      transform: translateX(-50%); width: 46%; aspect-ratio: 1;
      border-radius: 50%; border: 2px solid rgba(240,192,64,0.85);
      z-index: 0; pointer-events: none;
    }
    .ndsaints__plate img {
      position: relative; z-index: 1; display: block;
      width: 100%; height: 100%; object-fit: cover; object-position: center top;
    }
    .ndsaints__badge {
      position: absolute; top: 20px; left: 20px; z-index: 2;
      font-family: var(--nd-sans); font-size: 10px;
      letter-spacing: 0.22em; font-weight: 700;
      color: var(--nd-navy); background: var(--nd-gold);
      padding: 6px 11px; border-radius: 2px; text-transform: uppercase;
      box-shadow: 0 2px 0 rgba(28,27,24,0.08); white-space: nowrap;
    }
    .ndsaints__hero-body {
      padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1;
    }
    .ndsaints__feast {
      font-family: var(--nd-sans); font-size: 10px;
      letter-spacing: 0.26em; text-transform: uppercase;
      font-weight: 600; color: var(--nd-gold-ink); margin: 0 0 8px;
    }
    .ndsaints__heroname {
      font-family: var(--nd-serif); font-weight: 600;
      font-size: 1.45rem; line-height: 1.12; letter-spacing: -0.01em;
      color: var(--nd-navy); margin: 0 0 14px;
    }
    .ndsaints__story {
      font-family: var(--nd-sans); font-weight: 400;
      font-size: 0.92rem; line-height: 1.55;
      color: var(--nd-ink-2); margin: 0 0 18px; text-wrap: pretty;
    }
    .ndsaints__names {
      margin: auto 0 0; padding-top: 14px;
      border-top: 1px solid var(--nd-rule);
      display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
    }
    .ndsaints__names-label {
      font-family: var(--nd-sans); font-size: 10px;
      letter-spacing: 0.22em; text-transform: uppercase;
      font-weight: 700; color: var(--nd-ink-3);
    }
    .ndsaints__names-value {
      font-family: var(--nd-sans); font-size: 0.88rem; font-weight: 600;
      color: var(--nd-red); letter-spacing: 0.005em;
    }
    .ndsaints__compacts {
      display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
      background: var(--nd-rule); border: 1px solid var(--nd-rule);
      border-radius: 4px; overflow: hidden;
    }
    @media (max-width: 720px) { .ndsaints__compacts { grid-template-columns: 1fr; } }
    .ndsaints__compact {
      background: var(--nd-parchment); padding: 18px 20px;
      display: grid; grid-template-columns: 64px 1fr; gap: 16px;
      align-items: start;
      transition: background 180ms cubic-bezier(0.22,1,0.36,1);
    }
    .ndsaints__compact:hover { background: var(--nd-parchment-2); }
    .ndsaints__thumb {
      position: relative; width: 64px; height: 64px;
      overflow: hidden; border-radius: 2px;
      border: 1px solid var(--nd-rule);
      background: linear-gradient(180deg, #ead7a8 0%, #d4b970 55%, #a07c2e 100%);
    }
    .ndsaints__thumb::before {
      content: attr(data-initial); position: absolute; inset: 0;
      display: flex; align-items: center; justify-content: center;
      font-family: var(--nd-serif); font-size: 30px; line-height: 1;
      font-weight: 700; color: rgba(1,33,105,0.85); z-index: 0;
    }
    .ndsaints__thumb::after {
      content: ""; position: absolute; top: 10%; left: 50%;
      transform: translateX(-50%); width: 56%; aspect-ratio: 1;
      border-radius: 50%; border: 1.4px solid rgba(240,192,64,0.85);
      z-index: 0; pointer-events: none;
    }
    .ndsaints__thumb img {
      position: relative; z-index: 1; display: block;
      width: 100%; height: 100%; object-fit: cover; object-position: center top;
    }
    .ndsaints__compact-body { min-width: 0; }
    .ndsaints__compact-date {
      font-family: var(--nd-sans); font-size: 10px;
      letter-spacing: 0.22em; text-transform: uppercase;
      font-weight: 700; color: var(--nd-gold-ink); margin: 0 0 4px;
    }
    .ndsaints__compact-name {
      font-family: var(--nd-serif); font-weight: 600;
      font-size: 1.1rem; line-height: 1.15; letter-spacing: -0.005em;
      color: var(--nd-navy); margin: 0 0 6px;
    }
    .ndsaints__compact-story {
      font-family: var(--nd-sans); font-weight: 400;
      font-size: 0.86rem; line-height: 1.5;
      color: var(--nd-ink-2); margin: 0 0 10px; text-wrap: pretty;
    }
    .ndsaints__compact-names {
      margin: 0; display: flex; align-items: baseline;
      gap: 8px; flex-wrap: wrap;
    }
    .ndsaints__compact-names .ndsaints__names-value { font-size: 0.82rem; }
    @media (max-width: 720px) {
      .ndsaints { padding: 28px 16px 36px; }
      .ndsaints__title { font-size: 1.6rem; }
    }
    @media (prefers-reduced-motion: reduce) {
      .ndsaints * { transition: none !important; animation: none !important; }
    }

  

    /* ============================================================ */
    /* Sticky desktop contents rail — Phase 2D (17 May 2026)         */
    /* Hidden below 1180px viewport                                   */
    /* ============================================================ */
    .ndrail {
      position: fixed;
      top: 50%;
      right: 24px;
      transform: translateY(-50%);
      z-index: 40;
      width: 200px;
      padding: 16px 14px;
      background: #fff;
      border: 1px solid #d8cdb6;
      border-radius: 6px;
      box-shadow: 0 6px 22px -10px rgba(28,27,24,0.16);
      font-family: 'Space Grotesk','Inter',system-ui,sans-serif;
      transition: opacity 200ms ease;
    }
    @media (max-width: 1179px) { .ndrail { display: none; } }

    .ndrail__kicker {
      margin: 0 0 10px;
      padding-bottom: 8px;
      border-bottom: 1px solid #d8cdb6;
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      font-weight: 700;
      color: #C8102E;
    }
    .ndrail__list {
      list-style: none;
      padding: 0;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .ndrail__list a {
      display: flex;
      align-items: center;
      gap: 9px;
      padding: 6px 4px;
      font-size: 0.82rem;
      font-weight: 500;
      color: #4a4640;
      text-decoration: none;
      border-radius: 3px;
      transition: color 140ms, background 140ms;
    }
    .ndrail__list a:hover {
      color: #012169;
      background: #F6F1E8;
    }
    .ndrail__dot {
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #d8cdb6;
      flex-shrink: 0;
      transition: background 140ms, transform 140ms;
    }
    .ndrail__list a.is-active {
      color: #012169;
      font-weight: 700;
    }
    .ndrail__list a.is-active .ndrail__dot {
      background: #C8102E;
      transform: scale(1.4);
    }
    @media (prefers-reduced-motion: reduce) {
      .ndrail, .ndrail * { transition: none !important; }
    }

  
/* === Saint-icon lightbox (17 May 2026) === */
/* Open via .ndsaints__plate img / .ndsaints__thumb img click. */
.ndsaints__plate img, .ndsaints__thumb img {
  transition: transform 200ms ease;
}
.ndsaints__plate img:hover, .ndsaints__thumb img:hover {
  transform: scale(1.03);
}
.ndsaints__plate img:focus-visible, .ndsaints__thumb img:focus-visible {
  outline: 3px solid var(--nd-gold, #f0c040);
  outline-offset: 2px;
}
.nd-lightbox {
  position: fixed; inset: 0;
  background: rgba(28, 27, 24, 0.92);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  opacity: 0; pointer-events: none;
  transition: opacity 180ms ease;
  padding: 24px;
}
.nd-lightbox--open {
  opacity: 1; pointer-events: auto;
}
.nd-lightbox__figure {
  margin: 0;
  max-width: 100%; max-height: 100%;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.nd-lightbox__img {
  max-width: min(90vw, 900px);
  max-height: 80vh;
  width: auto; height: auto;
  display: block;
  border-radius: 4px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  cursor: zoom-out;
}
.nd-lightbox__caption {
  font-family: var(--nd-serif, Georgia, serif);
  color: #f7f2e6;
  font-size: 1.05rem;
  text-align: center;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  max-width: 90vw;
}
.nd-lightbox__close {
  position: absolute; top: 18px; right: 22px;
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.12);
  color: #fff; border: none; border-radius: 50%;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 150ms ease;
}
.nd-lightbox__close:hover, .nd-lightbox__close:focus-visible {
  background: rgba(255,255,255,0.22);
  outline: none;
}
@media (max-width: 559px) {
  .nd-lightbox { padding: 0; }
  .nd-lightbox__img { max-width: 100vw; max-height: 78vh; border-radius: 0; }
  .nd-lightbox__close { top: 12px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .nd-lightbox, .ndsaints__plate img, .ndsaints__thumb img { transition: none !important; }
}