/* ===== moved from page.php inline style block 1 ===== */
* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --ink: #3f2d2d;
      --deep: #4a2f2f;
      --soft: #6d5050;
      --muted: rgba(77, 57, 57, 0.72);
      --gold: #ffc107;
      --orange: #ffb347;
      --pink: #ff7eb3;
      --cream: #fff8ea;
      --line: rgba(255, 255, 255, 0.75);
      --shadow: 0 30px 80px rgba(153, 96, 73, 0.18);
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      min-height: 100vh;
      font-family: "Segoe UI", Arial, sans-serif;
      background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.9), transparent 35%),
        linear-gradient(135deg, #fff2b8 0%, #ffd6a5 35%, #ffb7c5 70%, #cdeffd 100%);
      color: var(--ink);
      overflow-x: hidden;
    }

    a {
      color: #9b5c28;
      text-decoration-thickness: 0.08em;
      text-underline-offset: 0.18em;
    }

    .sun {
      position: fixed;
      top: 45px;
      right: 55px;
      width: 130px;
      height: 130px;
      border-radius: 50%;
      background: radial-gradient(circle, #fff9b0, #ffd54f, #ff9800);
      box-shadow: 0 0 45px rgba(255, 193, 7, 0.8);
      animation: sunPulse 4s ease-in-out infinite;
      z-index: 0;
      pointer-events: none;
    }

    @keyframes sunPulse {
      0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 45px rgba(255, 193, 7, 0.8);
      }

      50% {
        transform: scale(1.06);
        box-shadow: 0 0 75px rgba(255, 193, 7, 1);
      }
    }

    .cloud {
      position: fixed;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 999px;
      filter: blur(0.2px);
      z-index: 0;
      animation: floatCloud linear infinite;
      pointer-events: none;
    }

    .cloud::before,
    .cloud::after {
      content: "";
      position: absolute;
      background: inherit;
      border-radius: 50%;
    }

    .cloud::before {
      width: 60px;
      height: 60px;
      top: -25px;
      left: 25px;
    }

    .cloud::after {
      width: 80px;
      height: 80px;
      top: -38px;
      right: 25px;
    }

    .cloud.one {
      width: 180px;
      height: 55px;
      top: 120px;
      left: -220px;
      animation-duration: 38s;
    }

    .cloud.two {
      width: 140px;
      height: 45px;
      top: 280px;
      left: -200px;
      animation-duration: 50s;
      opacity: 0.7;
    }

    .cloud.three {
      width: 210px;
      height: 60px;
      top: 430px;
      left: -260px;
      animation-duration: 62s;
      opacity: 0.55;
    }

    @keyframes floatCloud {
      from {
        transform: translateX(0);
      }

      to {
        transform: translateX(calc(100vw + 420px));
      }
    }

    .page {
      position: relative;
      z-index: 2;
      width: 100%;
      min-height: 100vh;
      padding: 40px 18px 86px;
      display: flex;
      align-items: flex-start;
      justify-content: center;
    }

    .card {
      width: min(980px, 100%);
      background: rgba(255, 255, 255, 0.68);
      backdrop-filter: blur(18px);
      border: 1px solid rgba(255, 255, 255, 0.75);
      border-radius: 38px;
      box-shadow:
        0 30px 80px rgba(153, 96, 73, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
      overflow: hidden;
      transform: translateY(20px);
      opacity: 0;
    }

    .card.is-visible {
      opacity: 1;
      transform: translateY(0);
      transition: transform 0.9s ease, opacity 0.9s ease;
    }

    .hero {
      position: relative;
      padding: 42px 42px 30px;
      text-align: center;
      background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.7), rgba(255, 235, 205, 0.5)),
        radial-gradient(circle at top, rgba(255, 255, 255, 0.9), transparent 60%);
    }

    .menu-button {
      position: absolute;
      top: 18px;
      right: 18px;
      z-index: 5;
      display: inline-grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border: 1px solid rgba(255, 255, 255, 0.92);
      border-radius: 50%;
      color: #704545;
      background: radial-gradient(circle at 35% 25%, #fff, #fff7fa 55%, #fceff6);
      box-shadow:
        0 8px 18px rgba(175,116,148,.10),
        inset 0 0 0 3px rgba(255,255,255,.62);
      cursor: pointer;
    }

    .menu-button span {
      display: block;
      width: 13px;
      height: 1.6px;
      margin: 1.5px 0;
      border-radius: 999px;
      background: currentColor;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 18px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.8);
      color: #9b5c28;
      font-size: 0.86rem;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      box-shadow: 0 10px 25px rgba(255, 165, 0, 0.15);
      margin-bottom: 20px;
    }

    .badge span {
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: var(--gold);
      box-shadow: 0 0 12px var(--gold);
    }

    h1 {
      font-family: "Segoe UI", Arial, sans-serif;
      font-size: clamp(2.2rem, 5vw, 4.8rem);
      line-height: 1;
      color: var(--deep);
      letter-spacing: -0.06em;
      margin: 0 auto 18px;
      font-weight: 900;
      max-width: 820px;
      text-wrap: balance;
    }

    .article-meta {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 8px;
      margin: -4px 0 16px;
      color: var(--muted);
      font-size: 0.92rem;
    }

    .article-meta span:not(:last-child)::after {
      content: " ·";
      margin-left: 6px;
    }


    .article-keywords {
      max-width: 720px;
      margin: -6px auto 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }

    .article-keywords-label {
      color: #9b5c28;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 0.72rem;
      line-height: 1;
    }

    .keyword-capsule {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 8px 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.82);
      border: 1px solid rgba(255, 255, 255, 0.95);
      box-shadow: 0 10px 22px rgba(255, 165, 0, 0.10);
      color: var(--soft);
      font-size: 0.82rem;
      line-height: 1.1;
      letter-spacing: 0.02em;
      white-space: nowrap;
    }

    @media (max-width: 700px) {
      .article-keywords {
        margin: -4px auto 16px;
        gap: 8px;
      }

      .article-keywords-label {
        width: 100%;
        text-align: center;
        margin-bottom: 2px;
        font-size: 0.64rem;
      }

      .keyword-capsule {
        padding: 7px 12px;
        font-size: 0.76rem;
      }
    }

    .subtitle {
      max-width: 720px;
      margin: 0 auto;
      font-size: clamp(1rem, 2vw, 1.25rem);
      color: var(--soft);
      line-height: 1.7;
    }

    .content {
      padding: 38px 48px 44px;
    }

    .quote-box {
      position: relative;
      padding: 34px;
      border-radius: 28px;
      background: rgba(255, 255, 255, 0.72);
      border: 1px solid rgba(255, 255, 255, 0.9);
      box-shadow: 0 18px 45px rgba(93, 56, 56, 0.08);
    }

    .quote-box::before {
      content: "“";
      position: absolute;
      top: -35px;
      left: 22px;
      font-size: 7rem;
      color: rgba(255, 171, 64, 0.28);
      font-family: "Segoe UI", Arial, sans-serif;
      line-height: 1;
    }

    .quote-box p,
    .quote-box li {
      position: relative;
      z-index: 2;
      max-width: 70ch;
      margin: 0 auto 20px;
      font-size: 1.05rem;
      line-height: 1.9;
      color: #4d3939;
    }

    .quote-box > p:first-of-type {
      font-size: 1.32rem;
      font-weight: 800;
      color: var(--ink);
    }

    .quote-box h2 {
      max-width: 70ch;
      margin: 34px auto 16px;
      color: #5d3434;
      font-family: "Segoe UI", Arial, sans-serif;
      font-size: clamp(1.45rem, 3vw, 2.15rem);
      line-height: 1.15;
      letter-spacing: -0.04em;
    }

    .quote-box h3 {
      max-width: 70ch;
      margin: 28px auto 14px;
      color: #5d3434;
      font-size: clamp(1.18rem, 2.3vw, 1.55rem);
    }

    .quote-box ol:not(.facts-list),
    .quote-box ul:not(.facts-list) {
      max-width: 700px;
      margin: 0 auto 24px;
      padding-left: 1.25rem;
      color: #4d3939;
    }

    .quote-box ol:not(.facts-list) li,
    .quote-box ul:not(.facts-list) li {
      margin-bottom: 12px;
      line-height: 1.8;
      font-size: clamp(1rem, 1.7vw, 1.06rem);
    }

    .warning-line {
      max-width: 70ch;
      padding: 20px;
      border-left: 5px solid var(--orange);
      background: linear-gradient(135deg, rgba(255, 245, 210, 0.95), rgba(255, 255, 255, 0.7));
      border-radius: 18px;
      margin: 26px auto;
      font-weight: 700;
      line-height: 1.8;
      color: #4d3939;
      box-shadow: 0 14px 34px rgba(120,70,55,.08);
    }

    .note-box {
      position: relative;
      max-width: 70ch;
      margin: 30px auto;
      padding: 24px 24px 24px 28px;
      border-radius: 24px;
      border: 1px solid rgba(240, 199, 134, 0.68);
      background: linear-gradient(135deg, rgba(255, 252, 242, 0.96), rgba(255, 246, 237, 0.88));
      box-shadow: 0 18px 40px rgba(120, 70, 55, 0.08);
      overflow: hidden;
    }

    .note-box::before {
      content: "";
      position: absolute;
      left: 14px;
      top: 18px;
      bottom: 18px;
      width: 5px;
      border-radius: 999px;
      background: linear-gradient(180deg, #ffc76b, #ff9a74);
    }

    .note-box p,
    .note-box li,
    .note-box ul,
    .note-box ol,
    .note-box h2,
    .note-box h3 {
      max-width: none;
    }

    .note-box p,
    .note-box li {
      margin: 0 0 14px;
      color: #4d3939;
      font-size: clamp(1rem, 1.65vw, 1.08rem);
      line-height: 1.85;
    }

    .note-box p:last-child,
    .note-box li:last-child,
    .note-box ul:last-child,
    .note-box ol:last-child {
      margin-bottom: 0;
    }

    .note-box__title {
      display: inline-flex;
      align-items: center;
      min-height: 32px;
      margin: 0 0 14px !important;
      padding: 7px 14px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.82);
      color: #9b5c28;
      font-size: 0.78rem !important;
      font-weight: 900 !important;
      line-height: 1.1 !important;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      box-shadow: 0 10px 24px rgba(255, 176, 88, 0.10);
    }

    .note-box--soft {
      background: linear-gradient(135deg, rgba(255,255,255,0.98), rgba(255,244,250,0.92));
      border-color: rgba(230, 196, 213, 0.75);
    }

    .note-box--soft::before {
      background: linear-gradient(180deg, #f1c8da, #ffb8c8);
    }

    .note-box--outline {
      background: rgba(255,255,255,0.62);
      border: 2px solid rgba(240, 199, 134, 0.88);
      box-shadow: 0 12px 30px rgba(120,70,55,.04);
    }

    .note-box--outline::before {
      background: linear-gradient(180deg, #ffd274, #f7bb62);
    }

    .final-line,
    .life-belongs {
      max-width: 70ch;
      text-align: center;
      margin: 34px auto 0;
      padding: 26px;
      border-radius: 26px;
      background: linear-gradient(135deg, #fff3b0, #ffd1dc);
      box-shadow: 0 18px 40px rgba(255, 145, 77, 0.22);
    }

    .final-line h2,
    .life-belongs h2 {
      font-size: clamp(1.8rem, 4vw, 3rem);
      color: #5d3434;
      margin: 0 0 10px;
      letter-spacing: -0.04em;
    }

    .final-line p,
    .life-belongs p {
      color: #704545;
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 0;
    }

    .facts-box {
      max-width: 760px;
      margin: 38px auto 0;
      padding: clamp(26px, 4vw, 36px);
      border-radius: 34px;
      background: linear-gradient(135deg, #fff2a8, #ffe7d8);
      box-shadow: 0 18px 40px rgba(255, 170, 100, 0.16);
      text-align: left;
    }

    .facts-box h2 {
      max-width: none;
      margin: 0 0 24px;
      color: #5b3340;
      text-align: center;
      font-family: "Segoe UI", Arial, sans-serif;
      font-size: clamp(2rem, 5vw, 3.6rem);
      line-height: 1.08;
      letter-spacing: -0.04em;
    }

    .facts-list {
      list-style: none;
      counter-reset: facts-counter;
      margin: 0;
      padding: 0;
      display: grid;
      gap: 20px;
    }

    .facts-list li {
      counter-increment: facts-counter;
      display: grid;
      grid-template-columns: 52px 1fr;
      gap: 16px;
      align-items: start;
      max-width: none;
      margin: 0;
      padding: 18px 18px 18px 16px;
      border-radius: 22px;
      background: rgba(255,255,255,0.34);
      color: #4b3b3b;
      font-size: clamp(1rem, 1.8vw, 1.08rem);
      line-height: 1.85;
      text-align: left;
    }

    .facts-list li::before {
      content: counter(facts-counter);
      display: grid;
      place-items: center;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      background: rgba(255,255,255,0.86);
      color: #7d4c2f;
      font-size: 1rem;
      font-weight: 800;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.92);
    }

    .article-image {
      position: relative;
      z-index: 2;
      max-width: 760px;
      margin: 0 auto 34px;
      padding: 10px;
      border-radius: 28px;
      background: linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,239,246,.82));
      border: 1px solid rgba(255,255,255,.9);
      box-shadow: 0 18px 44px rgba(120,70,55,.14), inset 0 1px 0 rgba(255,255,255,.9);
    }

    .article-image img {
      display: block;
      width: 100%;
      height: auto;
      max-height: 620px;
      object-fit: cover;
      border-radius: 22px;
      border: 4px solid rgba(255,255,255,.88);
    }

    .article-image figcaption {
      margin: 12px 8px 4px;
      color: rgba(77,57,57,.72);
      font-size: .92rem;
      line-height: 1.6;
      text-align: center;
      font-style: italic;
    }

    .article-image--portrait {
      max-width: 460px;
    }

    .article-image--portrait img {
      aspect-ratio: 4 / 5;
    }

    .article-gallery {
      max-width: 760px;
      margin: 34px auto;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .article-gallery .article-image {
      margin: 0;
    }

    .glossary-ref {
      display: inline;
      margin: 0;
      padding: 0 .08em;
      border: 0;
      border-bottom: 2px solid rgba(157,84,38,.36);
      color: #7e3f20;
      background: linear-gradient(180deg,transparent 62%,rgba(248,241,184,.85) 62%);
      cursor: pointer;
      font: inherit;
      line-height: inherit;
      text-align: inherit;
    }

    .petal {
      position: fixed;
      top: -20px;
      width: 14px;
      height: 14px;
      background: rgba(255, 126, 179, 0.45);
      border-radius: 60% 40% 60% 40%;
      z-index: 1;
      animation: fall linear forwards;
      pointer-events: none;
    }

    @keyframes fall {
      0% {
        transform: translateY(-30px) rotate(0deg);
        opacity: 0;
      }

      10% {
        opacity: 1;
      }

      100% {
        transform: translateY(105vh) rotate(360deg);
        opacity: 0;
      }
    }

    .footer {
      text-align: center;
      padding: 24px;
      color: rgba(77, 57, 57, 0.72);
      font-size: 0.95rem;
    }

    .footer a {
      color: #9b5c28;
      font-weight: 800;
    }

    /* Universal floating popup menu */
    .float-menu,
    .floating-menu {
      position: fixed !important;
      left: 50% !important;
      bottom: calc(18px + env(safe-area-inset-bottom)) !important;
      z-index: 70 !important;
      transform: translateX(-50%) !important;
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      gap: 10px !important;
      min-height: 44px !important;
      padding: 10px 22px !important;
      border: 1px solid rgba(239, 191, 216, 0.72) !important;
      border-radius: 999px !important;
      background: linear-gradient(135deg, rgba(255,255,255,0.94), rgba(255,240,248,0.90)) !important;
      color: #4a2f2f !important;
      box-shadow: 0 10px 30px rgba(145,81,117,0.16) !important;
      cursor: pointer !important;
      text-transform: uppercase !important;
      letter-spacing: 0.15em !important;
      font-size: 0.72rem !important;
      font-weight: 800 !important;
      backdrop-filter: blur(14px) !important;
    }

    .menu-backdrop,
    .js-menu-backdrop {
      position: fixed !important;
      inset: 0 !important;
      z-index: 99980 !important;
      background: rgba(35, 31, 39, 0.42) !important;
      backdrop-filter: blur(5px) !important;
    }

    .menu-panel,
    .js-menu-panel,
    .js-side-menu.menu-panel {
      position: fixed !important;
      left: 50% !important;
      right: auto !important;
      top: max(18px, env(safe-area-inset-top)) !important;
      bottom: calc(64px + env(safe-area-inset-bottom)) !important;
      width: min(92vw, 470px) !important;
      max-width: 470px !important;
      height: auto !important;
      min-height: 0 !important;
      display: block !important;
      padding: 18px !important;
      border-radius: 24px !important;
      border: 1px solid rgba(239,191,216,0.46) !important;
      background:
        linear-gradient(135deg, rgba(255,255,255,0.97), rgba(255,246,251,0.93)),
        radial-gradient(circle at top right, rgba(255,226,240,0.32), transparent 17rem) !important;
      box-shadow: 0 24px 70px rgba(68,39,55,0.22) !important;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      transform: translateX(-50%) translateY(110%) !important;
      opacity: 0 !important;
      visibility: hidden !important;
      pointer-events: none !important;
      transition:
        transform 230ms ease,
        opacity 180ms ease,
        visibility 180ms ease !important;
      z-index: 99990 !important;
    }

    .menu-panel.open,
    .menu-panel.is-open,
    .js-menu-panel.open,
    .js-menu-panel.is-open,
    .js-side-menu.menu-panel.open,
    .js-side-menu.menu-panel.is-open {
      transform: translateX(-50%) translateY(0) !important;
      opacity: 1 !important;
      visibility: visible !important;
      pointer-events: auto !important;
    }

    .menu-head {
      display: flex !important;
      justify-content: space-between !important;
      gap: 16px !important;
      align-items: center !important;
      margin-bottom: 12px !important;
    }

    .menu-kicker {
      color: #9b7d8d !important;
      text-transform: uppercase !important;
      letter-spacing: 0.22em !important;
      font-size: 0.66rem !important;
      font-weight: 700 !important;
      margin: 0 0 5px !important;
    }

    .menu-head h2 {
      color: #3f2d2d !important;
      font-size: 1.12rem !important;
      text-transform: uppercase !important;
      letter-spacing: 0.10em !important;
      margin: 0 !important;
      line-height: 1.2 !important;
    }

    .close-menu,
    .js-close-menu,
    .js-menu-close {
      display: grid !important;
      place-items: center !important;
      width: 34px !important;
      height: 34px !important;
      min-width: 34px !important;
      border: 1px solid rgba(239,191,216,0.62) !important;
      border-radius: 50% !important;
      background: white !important;
      color: #704545 !important;
      cursor: pointer !important;
      font-size: 1.25rem !important;
      line-height: 1 !important;
    }

    .menu-search {
      display: grid !important;
      grid-template-columns: auto 1fr !important;
      gap: 10px !important;
      align-items: center !important;
      padding: 11px 12px !important;
      margin: 0 0 14px !important;
      border-radius: 20px !important;
      border: 1px solid rgba(239,191,216,0.42) !important;
      background: linear-gradient(135deg, rgba(255,244,250,0.72), rgba(255,255,255,0.66)) !important;
    }

    .menu-search input {
      width: 100% !important;
      min-height: 38px !important;
      border: 1px solid rgba(239,191,216,0.48) !important;
      border-radius: 999px !important;
      padding: 0 14px !important;
      background: rgba(255,255,255,0.88) !important;
      color: #3f2d2d !important;
      outline: none !important;
      font-size: 0.9rem !important;
    }

    .menu-search small {
      grid-column: 1 / -1 !important;
      color: #8b687a !important;
      font-size: 0.76rem !important;
    }

    .menu-list,
    .profile-nav {
      display: grid !important;
      gap: 8px !important;
    }

    .menu-section,
    .nav-section-title {
      margin: 11px 0 4px !important;
      color: #9b7d8d !important;
      text-transform: uppercase !important;
      letter-spacing: 0.2em !important;
      font-size: 0.63rem !important;
      font-weight: 800 !important;
    }

    .menu-link,
    .profile-link {
      display: grid !important;
      grid-template-columns: auto 1fr !important;
      gap: 10px !important;
      align-items: center !important;
      min-height: 49px !important;
      padding: 9px 12px !important;
      border-radius: 18px !important;
      border: 1px solid rgba(221,192,207,0.58) !important;
      background: linear-gradient(135deg, rgba(255,255,255,0.86), rgba(255,248,252,0.72)) !important;
      text-decoration: none !important;
      color: #3f2d2d !important;
    }

    .menu-link i,
    .profile-link i {
      display: grid !important;
      place-items: center !important;
      width: 28px !important;
      height: 28px !important;
      border-radius: 11px !important;
      background: rgba(255,245,210,0.75) !important;
      font-style: normal !important;
      font-size: 0.95rem !important;
    }

    .menu-link strong,
    .profile-link strong {
      display: block !important;
      color: #3f2d2d !important;
      font-size: 0.9rem !important;
      line-height: 1.25 !important;
      font-weight: 850 !important;
    }

    .menu-link small,
    .profile-link small,
    .profile-link em {
      display: inline-flex !important;
      justify-self: start !important;
      width: fit-content !important;
      margin-top: 4px !important;
      padding: 3px 9px !important;
      border-radius: 999px !important;
      background: rgba(255,239,247,0.88) !important;
      color: #8b687a !important;
      text-transform: uppercase !important;
      letter-spacing: 0.12em !important;
      font-size: 0.56rem !important;
      font-style: normal !important;
      font-weight: 800 !important;
    }



    .js-menu-count {
      grid-column: 1 / -1 !important;
      color: #8b687a !important;
      font-size: 0.76rem !important;
      line-height: 1.3 !important;
      margin-top: 2px !important;
    }

    /* Latest article/date capsules inside popup menu */
    .menu-capsules {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 6px !important;
      align-items: center !important;
      margin-top: 6px !important;
    }

    .menu-topic-capsule,
    .menu-date-capsule {
      display: inline-flex !important;
      align-items: center !important;
      justify-content: center !important;
      width: fit-content !important;
      margin: 0 !important;
      padding: 4px 9px !important;
      border-radius: 999px !important;
      text-transform: uppercase !important;
      letter-spacing: 0.10em !important;
      font-size: 0.55rem !important;
      font-weight: 850 !important;
      line-height: 1.2 !important;
      font-style: normal !important;
    }

    .menu-topic-capsule {
      background: rgba(255,239,247,0.92) !important;
      color: #8b687a !important;
    }

    .menu-date-capsule {
      background: linear-gradient(135deg, rgba(255,243,184,0.96), rgba(255,226,205,0.92)) !important;
      color: #9b5c28 !important;
      border: 1px solid rgba(246, 198, 111, 0.38) !important;
      box-shadow: 0 8px 18px rgba(255, 177, 92, 0.08) !important;
    }

    .hidden,
    .is-hidden {
      display: none !important;
    }

    /* Glossary popup */
    .glossary-backdrop {
      position: fixed;
      z-index: 80;
      inset: 0;
      background: rgba(35, 37, 48, 0.58);
      backdrop-filter: blur(2px);
    }

    .glossary-modal {
      position: fixed;
      z-index: 90;
      left: 0;
      right: 0;
      bottom: 0;
      display: flex;
      justify-content: center;
      padding: 0;
      transform: translateY(105%);
      transition: transform .23s ease;
      pointer-events: none;
    }

    .glossary-modal.is-open {
      transform: translateY(0);
      pointer-events: auto;
    }

    .glossary-card {
      display: block;
      width: min(100%, 760px);
      max-height: min(78vh, 680px);
      overflow: auto;
      padding: clamp(22px, 5vw, 34px);
      border: 2px solid #e2c23a;
      border-bottom: 0;
      border-radius: 28px 28px 0 0;
      background: #fff9df;
      color: #873f18;
      box-shadow: 0 -20px 60px rgba(0,0,0,.18);
    }

    .glossary-content {
      width: 100%;
    }

    .glossary-header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 18px;
    }

    .glossary-header-left {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .glossary-icon {
      flex: 0 0 auto;
      font-size: 2rem;
      line-height: 1;
    }

    .glossary-header-left p {
      margin: 0;
      color: #a65a22;
      text-transform: uppercase;
      letter-spacing: .18em;
      font-weight: 900;
      font-size: .82rem;
      line-height: 1;
      white-space: nowrap;
    }

    .glossary-close {
      display: inline-grid;
      place-items: center;
      width: 68px;
      height: 68px;
      border: 1px solid rgba(210, 188, 201, 0.9);
      border-radius: 50%;
      background: rgba(255,255,255,0.65);
      color: #8b4a2d;
      cursor: pointer;
      font-size: 2.1rem;
      line-height: 1;
      flex: 0 0 auto;
    }

    .glossary-card h2 {
      margin: 0 0 16px;
      color: #873f18;
      font-size: clamp(2rem, 5vw, 3rem);
      line-height: 1.08;
      letter-spacing: -0.04em;
    }

    .glossary-rule {
      height: 2px;
      background: rgba(214, 164, 28, 0.42);
      margin-bottom: 24px;
    }

    .glossary-body p {
      color: #873f18;
      font-size: clamp(1.06rem, 2.2vw, 1.18rem);
      line-height: 1.8;
      margin: 0 0 20px;
    }

    @media (max-width: 700px) {
      .sun {
        width: 90px;
        height: 90px;
        top: 25px;
        right: 22px;
      }

      .page {
        padding: 22px 12px 84px;
      }

      .card {
        border-radius: 26px;
      }

      .hero {
        padding: 34px 22px 24px;
      }

      .menu-button {
        top: 14px;
        right: 14px;
        width: 38px;
        height: 38px;
      }

      .badge {
        padding: 9px 14px;
        font-size: 0.72rem;
        margin-bottom: 18px;
      }

      h1 {
        font-size: clamp(2.2rem, 10.5vw, 3.8rem);
      }

      .article-meta {
        font-size: 0.84rem;
        margin-bottom: 12px;
      }

      .subtitle {
        font-size: 0.98rem;
        line-height: 1.55;
      }

      .content {
        padding: 24px 16px 30px;
      }

      .quote-box {
        padding: 26px 20px;
        border-radius: 22px;
      }

      .note-box {
        margin: 24px auto;
        padding: 20px 18px 20px 22px;
        border-radius: 20px;
      }

      .note-box::before {
        left: 10px;
        top: 14px;
        bottom: 14px;
        width: 4px;
      }

      .note-box__title {
        font-size: 0.7rem !important;
        padding: 6px 12px;
      }

      .note-box p,
      .note-box li {
        font-size: 0.98rem;
        line-height: 1.8;
      }

      .quote-box::before {
        top: -28px;
        left: 16px;
        font-size: 5.5rem;
      }

      .quote-box p,
      .quote-box li {
        font-size: 0.98rem;
        line-height: 1.8;
      }

      .quote-box > p:first-of-type {
        font-size: 1.14rem;
      }

      .facts-box {
        padding: 22px 18px;
        border-radius: 28px;
      }

      .facts-box h2 {
        font-size: clamp(1.9rem, 8vw, 2.9rem);
        margin-bottom: 20px;
      }

      .facts-list {
        gap: 14px;
      }

      .facts-list li {
        grid-template-columns: 38px 1fr;
        gap: 12px;
        padding: 14px;
        font-size: 0.98rem;
        line-height: 1.7;
        border-radius: 18px;
      }

      .facts-list li::before {
        width: 34px;
        height: 34px;
        font-size: 0.92rem;
      }

      .article-gallery {
        grid-template-columns: 1fr;
      }

      .float-menu,
      .floating-menu {
        min-height: 40px !important;
        padding: 8px 18px !important;
        font-size: 0.68rem !important;
      }

      .menu-panel,
      .js-menu-panel,
      .js-side-menu.menu-panel {
        top: max(12px, env(safe-area-inset-top)) !important;
        bottom: calc(58px + env(safe-area-inset-bottom)) !important;
        width: min(94vw, 430px) !important;
        padding: 15px !important;
        border-radius: 22px !important;
      }

      .glossary-card {
        padding: 22px 18px 26px;
        border-radius: 24px 24px 0 0;
      }

      .glossary-header-row {
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;
      }

      .glossary-header-left {
        gap: 10px;
      }

      .glossary-icon {
        font-size: 1.85rem;
      }

      .glossary-header-left p {
        font-size: 0.72rem;
        letter-spacing: 0.16em;
      }

      .glossary-close {
        width: 56px;
        height: 56px;
        font-size: 1.9rem;
      }

      .glossary-card h2 {
        font-size: clamp(1.75rem, 7vw, 2.35rem);
        margin-bottom: 14px;
      }

      .glossary-body p {
        font-size: 1rem;
        line-height: 1.75;
        margin-bottom: 18px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation: none !important;
        transition: none !important;
      }
    }
  
    /* =========================================================
       FINAL TOP BADGE + UNIFORM FONT UPDATE
       ========================================================= */

    body,
    button,
    input,
    textarea,
    select,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    li,
    a,
    span,
    div,
    strong,
    em,
    small,
    time {
      font-family: "Segoe UI", Arial, sans-serif !important;
    }

    .site-returning-badge {
      position: fixed;
      top: max(14px, env(safe-area-inset-top));
      left: 50%;
      transform: translateX(-50%);
      z-index: 75;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      max-width: calc(100vw - 92px);
      min-height: 40px;
      padding: 10px 22px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.90);
      color: #a95f18;
      font-size: 0.86rem;
      font-weight: 850;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      white-space: nowrap;
      box-shadow:
        0 10px 25px rgba(255, 185, 60, 0.16),
        inset 0 1px 0 rgba(255,255,255,0.92);
      backdrop-filter: blur(12px);
      pointer-events: none;
    }

    .site-returning-badge span {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #ffc107;
      box-shadow: 0 0 12px rgba(255, 193, 7, 0.9);
      flex: 0 0 auto;
    }

    .hero {
      padding-top: 68px;
    }

    h1,
    .facts-box h2,
    .final-line h2,
    .life-belongs h2,
    .glossary-card h2,
    .quote-box h2 {
      font-family: "Segoe UI", Arial, sans-serif !important;
    }

    .quote-box::before {
      font-family: "Segoe UI", Arial, sans-serif !important;
      font-weight: 800;
    }

    @media (max-width: 700px) {
      .site-returning-badge {
        top: max(10px, env(safe-area-inset-top));
        min-height: 34px;
        padding: 8px 14px;
        max-width: calc(100vw - 86px);
        font-size: 0.68rem;
        letter-spacing: 0.07em;
      }

      .site-returning-badge span {
        width: 8px;
        height: 8px;
      }

      .hero {
        padding-top: 58px;
      }
    }

  
    /* =========================================================
       DESKTOP ARTICLE ALIGNMENT FIX
       Keeps headings, paragraphs and note boxes on the same grid.
       ========================================================= */
    @media (min-width: 701px) {
      .content {
        padding: 34px 34px 44px !important;
      }

      .quote-box {
        --article-width: 820px;
        padding: 34px 34px 40px !important;
      }

      .quote-box > p,
      .quote-box > h2,
      .quote-box > h3,
      .quote-box > h4,
      .quote-box > ul,
      .quote-box > ol,
      .quote-box > blockquote,
      .quote-box > .warning-line,
      .quote-box > .note-box,
      .quote-box > .final-line,
      .quote-box > .life-belongs,
      .quote-box > .facts-box,
      .quote-box > .article-image,
      .quote-box > .article-gallery {
        width: min(100%, var(--article-width));
        max-width: var(--article-width) !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box;
      }

      .quote-box > h2,
      .quote-box > h3,
      .quote-box > h4 {
        text-align: left;
      }

      .quote-box > p,
      .quote-box > ul,
      .quote-box > ol {
        text-align: left;
      }

      .quote-box ol:not(.facts-list),
      .quote-box ul:not(.facts-list) {
        padding-left: 1.25rem;
      }

      .quote-box ol:not(.facts-list) li,
      .quote-box ul:not(.facts-list) li {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

      .note-box,
      .warning-line {
        margin-top: 28px !important;
        margin-bottom: 28px !important;
      }

      .note-box p,
      .note-box li,
      .note-box ul,
      .note-box ol,
      .warning-line p,
      .warning-line li {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

      .facts-list li {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

      .article-image {
        margin-top: 0 !important;
        margin-bottom: 34px !important;
      }

      .article-gallery .article-image {
        width: 100% !important;
        max-width: none !important;
      }
    }

    @media (min-width: 1100px) {
      .card {
        width: min(1040px, 100%);
      }

      .quote-box {
        --article-width: 850px;
      }
    }

  
/* =========================================================
   GLOSSARY MODAL HEADING SIZE FIX
   ========================================================= */

.glossary-card h2,
.glossary-modal h2,
.glossary-note h2,
.glossary-popup h2,
.glossary-panel h2,
#glossaryModal h2,
.js-glossary-modal h2,
.js-glossary-card h2,
[data-glossary-modal] h2 {
  font-size: clamp(1.35rem, 2.7vw, 2.35rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.035em !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
  margin: 18px 0 14px !important;
}

.glossary-kicker,
.glossary-card .kicker,
.glossary-modal .kicker,
.glossary-note .kicker,
.glossary-popup .kicker,
#glossaryModal .kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 0.72rem !important;
  line-height: 1 !important;
  letter-spacing: 0.16em !important;
  white-space: nowrap !important;
}

.glossary-card,
.glossary-modal,
.glossary-note,
.glossary-popup,
.glossary-panel,
#glossaryModal,
.js-glossary-card,
.js-glossary-modal,
[data-glossary-modal] {
  max-width: min(760px, calc(100vw - 36px)) !important;
}

.glossary-card p,
.glossary-modal p,
.glossary-note p,
.glossary-popup p,
.glossary-panel p,
#glossaryModal p,
.js-glossary-modal p,
.js-glossary-card p,
[data-glossary-modal] p {
  font-size: clamp(0.98rem, 1.25vw, 1.08rem) !important;
  line-height: 1.75 !important;
}

@media (max-width: 700px) {
  .glossary-card h2,
  .glossary-modal h2,
  .glossary-note h2,
  .glossary-popup h2,
  .glossary-panel h2,
  #glossaryModal h2,
  .js-glossary-modal h2,
  .js-glossary-card h2,
  [data-glossary-modal] h2 {
    font-size: clamp(1.22rem, 6vw, 1.72rem) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.025em !important;
    margin: 14px 0 12px !important;
  }

  .glossary-card,
  .glossary-modal,
  .glossary-note,
  .glossary-popup,
  .glossary-panel,
  #glossaryModal,
  .js-glossary-card,
  .js-glossary-modal,
  [data-glossary-modal] {
    width: calc(100vw - 22px) !important;
    max-width: calc(100vw - 22px) !important;
    padding: 28px 20px 30px !important;
    border-radius: 24px !important;
  }

  .glossary-kicker,
  .glossary-card .kicker,
  .glossary-modal .kicker,
  .glossary-note .kicker,
  .glossary-popup .kicker,
  #glossaryModal .kicker {
    font-size: 0.62rem !important;
    letter-spacing: 0.14em !important;
  }

  .glossary-card p,
  .glossary-modal p,
  .glossary-note p,
  .glossary-popup p,
  .glossary-panel p,
  #glossaryModal p,
  .js-glossary-modal p,
  .js-glossary-card p,
  [data-glossary-modal] p {
    font-size: 0.96rem !important;
    line-height: 1.72 !important;
  }
}


/* =========================================================
   COMPACT GLOSSARY NOTE MODAL FIX
   - smaller heading
   - compact padding
   - no oversized rounded bottom corners
   - scrolls when content is long
   ========================================================= */

.glossary-card,
.glossary-modal,
.glossary-note,
.glossary-popup,
.glossary-panel,
#glossaryModal,
.js-glossary-card,
.js-glossary-modal,
[data-glossary-modal] {
  width: min(680px, calc(100vw - 28px)) !important;
  max-width: min(680px, calc(100vw - 28px)) !important;
  max-height: min(72vh, 560px) !important;
  padding: 24px 26px 26px !important;
  border-radius: 22px 22px 8px 8px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(141, 75, 36, 0.42) transparent !important;
}

.glossary-card::-webkit-scrollbar,
.glossary-modal::-webkit-scrollbar,
.glossary-note::-webkit-scrollbar,
.glossary-popup::-webkit-scrollbar,
.glossary-panel::-webkit-scrollbar,
#glossaryModal::-webkit-scrollbar,
.js-glossary-card::-webkit-scrollbar,
.js-glossary-modal::-webkit-scrollbar,
[data-glossary-modal]::-webkit-scrollbar {
  width: 7px !important;
}

.glossary-card::-webkit-scrollbar-track,
.glossary-modal::-webkit-scrollbar-track,
.glossary-note::-webkit-scrollbar-track,
.glossary-popup::-webkit-scrollbar-track,
.glossary-panel::-webkit-scrollbar-track,
#glossaryModal::-webkit-scrollbar-track,
.js-glossary-card::-webkit-scrollbar-track,
.js-glossary-modal::-webkit-scrollbar-track,
[data-glossary-modal]::-webkit-scrollbar-track {
  background: transparent !important;
}

.glossary-card::-webkit-scrollbar-thumb,
.glossary-modal::-webkit-scrollbar-thumb,
.glossary-note::-webkit-scrollbar-thumb,
.glossary-popup::-webkit-scrollbar-thumb,
.glossary-panel::-webkit-scrollbar-thumb,
#glossaryModal::-webkit-scrollbar-thumb,
.js-glossary-card::-webkit-scrollbar-thumb,
.js-glossary-modal::-webkit-scrollbar-thumb,
[data-glossary-modal]::-webkit-scrollbar-thumb {
  background: rgba(141, 75, 36, 0.38) !important;
  border-radius: 999px !important;
}

/* lightbulb + GLOSSARY NOTE row */
.glossary-kicker,
.glossary-card .kicker,
.glossary-modal .kicker,
.glossary-note .kicker,
.glossary-popup .kicker,
#glossaryModal .kicker {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  margin: 0 0 14px !important;
  font-size: 0.66rem !important;
  line-height: 1 !important;
  letter-spacing: 0.16em !important;
  white-space: nowrap !important;
}

/* glossary title */
.glossary-card h2,
.glossary-modal h2,
.glossary-note h2,
.glossary-popup h2,
.glossary-panel h2,
#glossaryModal h2,
.js-glossary-modal h2,
.js-glossary-card h2,
[data-glossary-modal] h2 {
  font-size: clamp(1.15rem, 2.25vw, 1.75rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.025em !important;
  margin: 0 0 12px !important;
  padding: 0 56px 12px 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  border-bottom: 1px solid rgba(198, 151, 56, 0.45) !important;
}

/* body text inside glossary note */
.glossary-card p,
.glossary-modal p,
.glossary-note p,
.glossary-popup p,
.glossary-panel p,
#glossaryModal p,
.js-glossary-modal p,
.js-glossary-card p,
[data-glossary-modal] p {
  font-size: 0.92rem !important;
  line-height: 1.65 !important;
  margin: 0 0 12px !important;
}

/* close button: smaller and less dominant */
.glossary-card .close,
.glossary-modal .close,
.glossary-note .close,
.glossary-popup .close,
.glossary-panel .close,
#glossaryModal .close,
.glossary-card button[aria-label*="Close"],
.glossary-modal button[aria-label*="Close"],
.glossary-note button[aria-label*="Close"],
.glossary-popup button[aria-label*="Close"],
.glossary-panel button[aria-label*="Close"],
#glossaryModal button[aria-label*="Close"],
.js-glossary-card button[aria-label*="Close"],
.js-glossary-modal button[aria-label*="Close"] {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
}

/* Mobile version */
@media (max-width: 700px) {
  .glossary-card,
  .glossary-modal,
  .glossary-note,
  .glossary-popup,
  .glossary-panel,
  #glossaryModal,
  .js-glossary-card,
  .js-glossary-modal,
  [data-glossary-modal] {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 66vh !important;
    padding: 20px 18px 22px !important;
    border-radius: 20px 20px 6px 6px !important;
  }

  .glossary-kicker,
  .glossary-card .kicker,
  .glossary-modal .kicker,
  .glossary-note .kicker,
  .glossary-popup .kicker,
  #glossaryModal .kicker {
    font-size: 0.58rem !important;
    letter-spacing: 0.14em !important;
    margin-bottom: 12px !important;
  }

  .glossary-card h2,
  .glossary-modal h2,
  .glossary-note h2,
  .glossary-popup h2,
  .glossary-panel h2,
  #glossaryModal h2,
  .js-glossary-modal h2,
  .js-glossary-card h2,
  [data-glossary-modal] h2 {
    font-size: clamp(1rem, 4.8vw, 1.34rem) !important;
    line-height: 1.14 !important;
    margin-bottom: 10px !important;
    padding-right: 48px !important;
    padding-bottom: 10px !important;
  }

  .glossary-card p,
  .glossary-modal p,
  .glossary-note p,
  .glossary-popup p,
  .glossary-panel p,
  #glossaryModal p,
  .js-glossary-modal p,
  .js-glossary-card p,
  [data-glossary-modal] p {
    font-size: 0.86rem !important;
    line-height: 1.58 !important;
  }

  .glossary-card .close,
  .glossary-modal .close,
  .glossary-note .close,
  .glossary-popup .close,
  .glossary-panel .close,
  #glossaryModal .close,
  .glossary-card button[aria-label*="Close"],
  .glossary-modal button[aria-label*="Close"],
  .glossary-note button[aria-label*="Close"],
  .glossary-popup button[aria-label*="Close"],
  .glossary-panel button[aria-label*="Close"],
  #glossaryModal button[aria-label*="Close"],
  .js-glossary-card button[aria-label*="Close"],
  .js-glossary-modal button[aria-label*="Close"] {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
}


/* =========================================================
   GLOSSARY POPUP FULL-WIDTH 3D NOTE FIX
   - wider modal
   - no visible bottom gap
   - shaded note / soft 3D effect
   - compact heading and scrollable content
   ========================================================= */

.glossary-card,
.glossary-modal,
.glossary-note,
.glossary-popup,
.glossary-panel,
#glossaryModal,
.js-glossary-card,
.js-glossary-modal,
[data-glossary-modal] {
  width: min(920px, calc(100vw - 28px)) !important;
  max-width: min(920px, calc(100vw - 28px)) !important;
  max-height: min(78vh, 620px) !important;
  padding: 26px 30px 28px !important;
  border-radius: 18px 18px 3px 3px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  background:
    linear-gradient(145deg, rgba(255, 250, 211, 0.98), rgba(255, 244, 185, 0.96) 44%, rgba(255, 250, 220, 0.98)) !important;
  border: 2px solid rgba(245, 191, 28, 0.95) !important;

  box-shadow:
    0 24px 55px rgba(70, 39, 20, 0.24),
    0 8px 20px rgba(148, 78, 30, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 10px 0 22px rgba(255, 255, 255, 0.22),
    inset -12px -12px 28px rgba(158, 93, 31, 0.08) !important;

  scrollbar-width: thin !important;
  scrollbar-color: rgba(141, 75, 36, 0.42) transparent !important;
}

/* subtle 3D paper glow */
.glossary-card::before,
.glossary-modal::before,
.glossary-note::before,
.glossary-popup::before,
.glossary-panel::before,
#glossaryModal::before,
.js-glossary-card::before,
.js-glossary-modal::before,
[data-glossary-modal]::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,0.50), transparent 32%),
    linear-gradient(180deg, rgba(255,255,255,0.18), transparent 44%) !important;
}

/* remove any extra inner bottom spacing from the last paragraph */
.glossary-card > *:last-child,
.glossary-modal > *:last-child,
.glossary-note > *:last-child,
.glossary-popup > *:last-child,
.glossary-panel > *:last-child,
#glossaryModal > *:last-child,
.js-glossary-card > *:last-child,
.js-glossary-modal > *:last-child,
[data-glossary-modal] > *:last-child {
  margin-bottom: 0 !important;
}

/* scrollbar */
.glossary-card::-webkit-scrollbar,
.glossary-modal::-webkit-scrollbar,
.glossary-note::-webkit-scrollbar,
.glossary-popup::-webkit-scrollbar,
.glossary-panel::-webkit-scrollbar,
#glossaryModal::-webkit-scrollbar,
.js-glossary-card::-webkit-scrollbar,
.js-glossary-modal::-webkit-scrollbar,
[data-glossary-modal]::-webkit-scrollbar {
  width: 7px !important;
}

.glossary-card::-webkit-scrollbar-track,
.glossary-modal::-webkit-scrollbar-track,
.glossary-note::-webkit-scrollbar-track,
.glossary-popup::-webkit-scrollbar-track,
.glossary-panel::-webkit-scrollbar-track,
#glossaryModal::-webkit-scrollbar-track,
.js-glossary-card::-webkit-scrollbar-track,
.js-glossary-modal::-webkit-scrollbar-track,
[data-glossary-modal]::-webkit-scrollbar-track {
  background: transparent !important;
}

.glossary-card::-webkit-scrollbar-thumb,
.glossary-modal::-webkit-scrollbar-thumb,
.glossary-note::-webkit-scrollbar-thumb,
.glossary-popup::-webkit-scrollbar-thumb,
.glossary-panel::-webkit-scrollbar-thumb,
#glossaryModal::-webkit-scrollbar-thumb,
.js-glossary-card::-webkit-scrollbar-thumb,
.js-glossary-modal::-webkit-scrollbar-thumb,
[data-glossary-modal]::-webkit-scrollbar-thumb {
  background: rgba(141, 75, 36, 0.38) !important;
  border-radius: 999px !important;
}

/* top row */
.glossary-kicker,
.glossary-card .kicker,
.glossary-modal .kicker,
.glossary-note .kicker,
.glossary-popup .kicker,
#glossaryModal .kicker {
  position: relative !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 0 14px !important;
  font-size: 0.68rem !important;
  line-height: 1 !important;
  letter-spacing: 0.18em !important;
  white-space: nowrap !important;
}

/* heading */
.glossary-card h2,
.glossary-modal h2,
.glossary-note h2,
.glossary-popup h2,
.glossary-panel h2,
#glossaryModal h2,
.js-glossary-modal h2,
.js-glossary-card h2,
[data-glossary-modal] h2 {
  position: relative !important;
  z-index: 2 !important;
  font-size: clamp(1.08rem, 2.15vw, 1.65rem) !important;
  line-height: 1.12 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 14px !important;
  padding: 0 58px 12px 0 !important;
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  color: #8f421d !important;
  border-bottom: 1px solid rgba(198, 151, 56, 0.48) !important;
}

/* body */
.glossary-card p,
.glossary-modal p,
.glossary-note p,
.glossary-popup p,
.glossary-panel p,
#glossaryModal p,
.js-glossary-modal p,
.js-glossary-card p,
[data-glossary-modal] p {
  position: relative !important;
  z-index: 2 !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  margin: 0 0 10px !important;
  color: #92451f !important;
}

.glossary-card p:last-child,
.glossary-modal p:last-child,
.glossary-note p:last-child,
.glossary-popup p:last-child,
.glossary-panel p:last-child,
#glossaryModal p:last-child,
.js-glossary-modal p:last-child,
.js-glossary-card p:last-child,
[data-glossary-modal] p:last-child {
  margin-bottom: 0 !important;
}

/* close button */
.glossary-card .close,
.glossary-modal .close,
.glossary-note .close,
.glossary-popup .close,
.glossary-panel .close,
#glossaryModal .close,
.glossary-card button[aria-label*="Close"],
.glossary-modal button[aria-label*="Close"],
.glossary-note button[aria-label*="Close"],
.glossary-popup button[aria-label*="Close"],
.glossary-panel button[aria-label*="Close"],
#glossaryModal button[aria-label*="Close"],
.js-glossary-card button[aria-label*="Close"],
.js-glossary-modal button[aria-label*="Close"] {
  position: absolute !important;
  z-index: 5 !important;
  top: 20px !important;
  right: 20px !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow:
    0 8px 18px rgba(82, 43, 30, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.88) !important;
}

/* mobile: full width but compact */
@media (max-width: 700px) {
  .glossary-card,
  .glossary-modal,
  .glossary-note,
  .glossary-popup,
  .glossary-panel,
  #glossaryModal,
  .js-glossary-card,
  .js-glossary-modal,
  [data-glossary-modal] {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    max-height: 74vh !important;
    padding: 20px 18px 20px !important;
    border-radius: 18px 18px 2px 2px !important;
  }

  .glossary-kicker,
  .glossary-card .kicker,
  .glossary-modal .kicker,
  .glossary-note .kicker,
  .glossary-popup .kicker,
  #glossaryModal .kicker {
    font-size: 0.58rem !important;
    letter-spacing: 0.15em !important;
    margin-bottom: 12px !important;
  }

  .glossary-card h2,
  .glossary-modal h2,
  .glossary-note h2,
  .glossary-popup h2,
  .glossary-panel h2,
  #glossaryModal h2,
  .js-glossary-modal h2,
  .js-glossary-card h2,
  [data-glossary-modal] h2 {
    font-size: clamp(1rem, 4.6vw, 1.28rem) !important;
    line-height: 1.13 !important;
    padding-right: 50px !important;
    padding-bottom: 10px !important;
    margin-bottom: 12px !important;
  }

  .glossary-card p,
  .glossary-modal p,
  .glossary-note p,
  .glossary-popup p,
  .glossary-panel p,
  #glossaryModal p,
  .js-glossary-modal p,
  .js-glossary-card p,
  [data-glossary-modal] p {
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
  }

  .glossary-card .close,
  .glossary-modal .close,
  .glossary-note .close,
  .glossary-popup .close,
  .glossary-panel .close,
  #glossaryModal .close,
  .glossary-card button[aria-label*="Close"],
  .glossary-modal button[aria-label*="Close"],
  .glossary-note button[aria-label*="Close"],
  .glossary-popup button[aria-label*="Close"],
  .glossary-panel button[aria-label*="Close"],
  #glossaryModal button[aria-label*="Close"],
  .js-glossary-card button[aria-label*="Close"],
  .js-glossary-modal button[aria-label*="Close"] {
    top: 18px !important;
    right: 18px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
}


/* =========================================================
   FINAL GLOSSARY POPUP FIX
   One box only, full mobile width, no right gap, better close button.
   Paste this after all other glossary CSS.
   ========================================================= */

/* The modal is only a wrapper. It must not look like a second box. */
.glossary-modal {
  position: fixed !important;
  z-index: 90 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: translateY(105%) !important;
  transition: transform .23s ease !important;
  pointer-events: none !important;
}

.glossary-modal.is-open {
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* This is the ONE visible note box. */
.glossary-card {
  position: relative !important;
  box-sizing: border-box !important;
  width: 100vw !important;
  max-width: 100vw !important;
  max-height: 74vh !important;
  margin: 0 !important;
  padding: 22px 24px 22px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  border: 2px solid rgba(229, 188, 16, 0.98) !important;
  border-bottom: 0 !important;
  border-radius: 20px 20px 0 0 !important;

  background:
    radial-gradient(circle at 18% 0%, rgba(255,255,255,0.78), transparent 34%),
    linear-gradient(145deg, #fffbea 0%, #fff5c9 48%, #fff9dd 100%) !important;

  box-shadow:
    0 -26px 60px rgba(34, 22, 14, 0.28),
    0 -8px 18px rgba(131, 76, 25, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -16px 26px rgba(129, 75, 26, 0.055) !important;

  color: #8c431d !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(140, 67, 29, 0.35) transparent !important;
}

/* Stop the inner content becoming a second box. */
.glossary-content {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* No accidental nested boxes inside the popup. */
.glossary-card .glossary-content,
.glossary-card .glossary-body,
.glossary-card .glossary-header-row {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Header row */
.glossary-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

.glossary-header-left {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.glossary-icon {
  font-size: 1.55rem !important;
  line-height: 1 !important;
  filter: drop-shadow(0 2px 2px rgba(120, 70, 20, 0.15)) !important;
}

.glossary-header-left p {
  margin: 0 !important;
  color: #9d5522 !important;
  text-transform: uppercase !important;
  letter-spacing: .17em !important;
  font-weight: 900 !important;
  font-size: .68rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Better close button */
.glossary-close {
  display: inline-grid !important;
  place-items: center !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(179, 123, 91, 0.36) !important;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,0.95), rgba(255,248,240,0.74) 58%, rgba(255,235,220,0.72) 100%) !important;
  color: #9b4b24 !important;
  cursor: pointer !important;
  font-size: 1.55rem !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  box-shadow:
    0 8px 18px rgba(93, 50, 30, 0.13),
    inset 0 1px 0 rgba(255,255,255,0.98) !important;
  flex: 0 0 auto !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.glossary-close:hover {
  transform: translateY(-1px) scale(1.03) !important;
  background:
    radial-gradient(circle at 35% 28%, #ffffff, #fff5ec 62%, #ffe6d6 100%) !important;
  box-shadow:
    0 10px 22px rgba(93, 50, 30, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.98) !important;
}

/* Compact title */
.glossary-card h2 {
  margin: 0 0 10px !important;
  padding: 0 0 10px !important;
  color: #8b3f1a !important;
  font-size: clamp(1.05rem, 4.2vw, 1.32rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.018em !important;
  border-bottom: 1px solid rgba(204, 158, 48, 0.48) !important;
  overflow-wrap: anywhere !important;
}

/* Single rule only, not double heavy lines */
.glossary-rule {
  height: 1px !important;
  margin: 0 0 14px !important;
  background: rgba(214, 164, 28, 0.48) !important;
}

/* Compact body text */
.glossary-body p {
  margin: 0 0 10px !important;
  color: #8b3f1a !important;
  font-size: .86rem !important;
  line-height: 1.58 !important;
}

.glossary-body p:last-child {
  margin-bottom: 0 !important;
}

/* Scrollbar */
.glossary-card::-webkit-scrollbar {
  width: 7px !important;
}

.glossary-card::-webkit-scrollbar-track {
  background: transparent !important;
}

.glossary-card::-webkit-scrollbar-thumb {
  background: rgba(140, 67, 29, 0.32) !important;
  border-radius: 999px !important;
}

/* Desktop: still wide, but not silly full-screen on very large monitors */
@media (min-width: 760px) {
  .glossary-card {
    width: min(920px, calc(100vw - 36px)) !important;
    max-width: min(920px, calc(100vw - 36px)) !important;
    padding: 26px 34px 28px !important;
    border-radius: 22px 22px 0 0 !important;
  }

  .glossary-card h2 {
    font-size: clamp(1.25rem, 2vw, 1.65rem) !important;
    line-height: 1.12 !important;
  }

  .glossary-body p {
    font-size: .94rem !important;
    line-height: 1.65 !important;
  }
}

/* Very small mobiles */
@media (max-width: 430px) {
  .glossary-card {
    padding: 18px 18px 20px !important;
    max-height: 76vh !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .glossary-icon {
    font-size: 1.35rem !important;
  }

  .glossary-header-left p {
    font-size: .58rem !important;
    letter-spacing: .14em !important;
  }

  .glossary-close {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    font-size: 1.35rem !important;
  }

  .glossary-card h2 {
    font-size: clamp(1rem, 5vw, 1.18rem) !important;
  }

  .glossary-body p {
    font-size: .82rem !important;
    line-height: 1.55 !important;
  }
}


/* =========================================================
   GLOSSARY POPUP CENTERED MODAL FIX
   Put this AFTER all older glossary CSS.
   - one visible note box
   - centred on desktop and mobile
   - no bottom docking
   - compact title/body
   - scrolls internally if long
   ========================================================= */

.glossary-modal {
  position: fixed !important;
  z-index: 90 !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: translateY(0) scale(.96) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .22s ease, transform .22s ease !important;
}

.glossary-modal.is-open {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* ONE visible note box only */
.glossary-card {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(920px, calc(100vw - 36px)) !important;
  max-width: min(920px, calc(100vw - 36px)) !important;
  max-height: min(74dvh, 620px) !important;
  margin: 0 auto !important;
  padding: 24px 28px 26px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  border: 2px solid rgba(229, 188, 16, 0.98) !important;
  border-radius: 20px !important;

  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.80), transparent 34%),
    linear-gradient(145deg, #fffbea 0%, #fff5c9 48%, #fff9dd 100%) !important;

  box-shadow:
    0 28px 70px rgba(21, 16, 12, .34),
    0 10px 24px rgba(131, 76, 25, .14),
    inset 0 1px 0 rgba(255,255,255,.96),
    inset 0 -16px 26px rgba(129, 75, 26, .055) !important;

  color: #8c431d !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(140, 67, 29, .35) transparent !important;
}

/* wrapper/content must stay transparent, no nested box */
.glossary-content,
.glossary-card .glossary-content,
.glossary-card .glossary-body,
.glossary-card .glossary-header-row {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* header row */
.glossary-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

.glossary-header-left {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.glossary-icon {
  font-size: 1.55rem !important;
  line-height: 1 !important;
  filter: drop-shadow(0 2px 2px rgba(120,70,20,.15)) !important;
}

.glossary-header-left p {
  margin: 0 !important;
  color: #9d5522 !important;
  text-transform: uppercase !important;
  letter-spacing: .17em !important;
  font-weight: 900 !important;
  font-size: .68rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* nicer close button */
.glossary-close {
  display: inline-grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(179,123,91,.34) !important;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.98), rgba(255,248,240,.78) 58%, rgba(255,235,220,.74) 100%) !important;
  color: #9b4b24 !important;
  cursor: pointer !important;
  font-size: 1.42rem !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  box-shadow:
    0 8px 18px rgba(93,50,30,.13),
    inset 0 1px 0 rgba(255,255,255,.98) !important;
  flex: 0 0 auto !important;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.glossary-close:hover {
  transform: translateY(-1px) scale(1.03) !important;
  background:
    radial-gradient(circle at 35% 28%, #fff, #fff5ec 62%, #ffe6d6 100%) !important;
}

/* compact heading */
.glossary-card h2 {
  margin: 0 0 10px !important;
  padding: 0 0 10px !important;
  color: #8b3f1a !important;
  font-size: clamp(1.16rem, 2vw, 1.65rem) !important;
  line-height: 1.14 !important;
  letter-spacing: -0.018em !important;
  border-bottom: 1px solid rgba(204,158,48,.48) !important;
  overflow-wrap: anywhere !important;
}

.glossary-rule {
  height: 1px !important;
  margin: 0 0 14px !important;
  background: rgba(214,164,28,.48) !important;
}

/* compact body */
.glossary-body p {
  margin: 0 0 10px !important;
  color: #8b3f1a !important;
  font-size: .92rem !important;
  line-height: 1.6 !important;
}

.glossary-body p:last-child {
  margin-bottom: 0 !important;
}

.glossary-card::-webkit-scrollbar {
  width: 7px !important;
}

.glossary-card::-webkit-scrollbar-track {
  background: transparent !important;
}

.glossary-card::-webkit-scrollbar-thumb {
  background: rgba(140,67,29,.32) !important;
  border-radius: 999px !important;
}

/* mobile centered modal */
@media (max-width: 700px) {
  .glossary-modal {
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
    height: 100dvh !important;
  }

  .glossary-card {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 72dvh !important;
    margin: 0 auto !important;
    padding: 18px 18px 20px !important;
    border-radius: 18px !important;
  }

  .glossary-icon {
    font-size: 1.35rem !important;
  }

  .glossary-header-left p {
    font-size: .58rem !important;
    letter-spacing: .14em !important;
  }

  .glossary-close {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    font-size: 1.32rem !important;
  }

  .glossary-card h2 {
    font-size: clamp(1rem, 4.9vw, 1.22rem) !important;
    line-height: 1.14 !important;
  }

  .glossary-body p {
    font-size: .84rem !important;
    line-height: 1.56 !important;
  }
}


/* =========================================================
   FINAL CENTERED 3D GLOSSARY NOTE FIX
   Paste AFTER all older glossary CSS.
   - centred popup
   - compact heading/body text
   - proper 3D shaded note
   - one visible box only
   - internal scroll when long
   ========================================================= */

.glossary-modal {
  position: fixed !important;
  z-index: 90 !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100dvh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: scale(.96) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .22s ease, transform .22s ease !important;
}

.glossary-modal.is-open {
  transform: scale(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.glossary-card {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(820px, calc(100vw - 36px)) !important;
  max-width: min(820px, calc(100vw - 36px)) !important;
  max-height: min(72dvh, 560px) !important;
  margin: 0 auto !important;
  padding: 24px 28px 24px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border: 2px solid rgba(226, 184, 22, .98) !important;
  border-radius: 22px !important;
  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.86) 0%, rgba(255,255,255,.38) 26%, transparent 42%),
    linear-gradient(145deg, #fffdf0 0%, #fff6c9 42%, #fff2b5 100%) !important;
  box-shadow:
    0 34px 78px rgba(17, 13, 10, .38),
    0 16px 34px rgba(100, 55, 18, .18),
    0 3px 0 rgba(120, 80, 20, .18),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 12px 0 24px rgba(255,255,255,.22),
    inset -14px -18px 34px rgba(123, 72, 20, .075) !important;
  color: #874018 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(132, 64, 24, .35) transparent !important;
}

.glossary-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,.34), transparent 34%),
    radial-gradient(circle at 92% 88%, rgba(143, 80, 22, .08), transparent 34%) !important;
}

.glossary-content,
.glossary-header-row,
.glossary-header-left,
.glossary-card h2,
.glossary-rule,
.glossary-body {
  position: relative !important;
  z-index: 2 !important;
}

.glossary-content,
.glossary-card .glossary-content,
.glossary-card .glossary-body,
.glossary-card .glossary-header-row {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.glossary-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

.glossary-header-left {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.glossary-icon {
  font-size: 1.42rem !important;
  line-height: 1 !important;
  filter:
    drop-shadow(0 2px 2px rgba(93, 55, 18, .18))
    drop-shadow(0 0 7px rgba(255, 217, 70, .22)) !important;
}

.glossary-header-left p {
  margin: 0 !important;
  color: #9b4f1e !important;
  text-transform: uppercase !important;
  letter-spacing: .17em !important;
  font-weight: 900 !important;
  font-size: .64rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.glossary-close {
  position: relative !important;
  z-index: 4 !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(158, 94, 62, .32) !important;
  background:
    radial-gradient(circle at 35% 25%, #ffffff 0%, #fff8ed 45%, #ffe8d6 100%) !important;
  color: #90441e !important;
  cursor: pointer !important;
  font-size: 1.36rem !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  box-shadow:
    0 9px 18px rgba(83, 48, 23, .16),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -4px 9px rgba(142, 79, 34, .08) !important;
  flex: 0 0 auto !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

.glossary-close:hover {
  transform: translateY(-1px) scale(1.04) !important;
  box-shadow:
    0 12px 24px rgba(83, 48, 23, .20),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -4px 9px rgba(142, 79, 34, .08) !important;
}

.glossary-card h2 {
  margin: 0 0 8px !important;
  padding: 0 0 10px !important;
  color: #873d17 !important;
  font-size: clamp(1.08rem, 1.85vw, 1.48rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.018em !important;
  font-weight: 850 !important;
  border-bottom: 1px solid rgba(205, 157, 42, .50) !important;
  overflow-wrap: anywhere !important;
}

.glossary-rule {
  height: 1px !important;
  margin: 0 0 14px !important;
  background: rgba(214, 164, 28, .44) !important;
}

.glossary-body p {
  margin: 0 0 9px !important;
  color: #8a401b !important;
  font-size: .88rem !important;
  line-height: 1.58 !important;
  font-weight: 450 !important;
}

.glossary-body p:last-child {
  margin-bottom: 0 !important;
}

.glossary-card::-webkit-scrollbar {
  width: 7px !important;
}

.glossary-card::-webkit-scrollbar-track {
  background: transparent !important;
}

.glossary-card::-webkit-scrollbar-thumb {
  background: rgba(132, 64, 24, .32) !important;
  border-radius: 999px !important;
}

@media (max-width: 700px) {
  .glossary-modal {
    align-items: center !important;
    justify-content: center !important;
    padding: 12px !important;
  }

  .glossary-card {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    max-height: 72dvh !important;
    padding: 18px 18px 18px !important;
    border-radius: 18px !important;
  }

  .glossary-icon {
    font-size: 1.28rem !important;
  }

  .glossary-header-left p {
    font-size: .56rem !important;
    letter-spacing: .14em !important;
  }

  .glossary-close {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 1.24rem !important;
  }

  .glossary-card h2 {
    font-size: clamp(.98rem, 4.55vw, 1.18rem) !important;
    line-height: 1.16 !important;
    margin-bottom: 8px !important;
    padding-bottom: 9px !important;
  }

  .glossary-rule {
    margin-bottom: 12px !important;
  }

  .glossary-body p {
    font-size: .8rem !important;
    line-height: 1.52 !important;
  }
}

@media (max-width: 390px) {
  .glossary-card {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    padding: 16px 16px 17px !important;
  }

  .glossary-card h2 {
    font-size: .98rem !important;
  }

  .glossary-body p {
    font-size: .78rem !important;
  }
}


/* =========================================================
   GLOSSARY NOTE BOTTOM-SLIDE 3D FIX
   Paste this AFTER all older glossary CSS.
   Restores the bottom slide-up behaviour, but keeps the
   improved 3D/shaded note look and compact text.
   ========================================================= */

/* The modal wrapper slides up from the bottom again */
.glossary-modal {
  position: fixed !important;
  z-index: 90 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  top: auto !important;

  width: 100vw !important;
  height: auto !important;
  min-height: 0 !important;

  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;

  padding: 0 12px !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;

  transform: translateY(110%) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transition: transform .28s cubic-bezier(.2,.8,.2,1) !important;
}

.glossary-modal.is-open {
  transform: translateY(0) !important;
  pointer-events: auto !important;
}

/* One visible sticky-note style box */
.glossary-card {
  position: relative !important;
  box-sizing: border-box !important;

  width: min(860px, calc(100vw - 24px)) !important;
  max-width: min(860px, calc(100vw - 24px)) !important;
  max-height: min(68dvh, 560px) !important;

  margin: 0 auto !important;
  padding: 24px 28px 24px !important;

  overflow-y: auto !important;
  overflow-x: hidden !important;

  border: 2px solid rgba(226, 184, 22, .98) !important;
  border-bottom: 0 !important;
  border-radius: 22px 22px 0 0 !important;

  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.40) 28%, transparent 44%),
    linear-gradient(145deg, #fffdf0 0%, #fff6c9 42%, #fff2b5 100%) !important;

  box-shadow:
    0 -34px 78px rgba(17, 13, 10, .34),
    0 -16px 34px rgba(100, 55, 18, .18),
    0 -3px 0 rgba(120, 80, 20, .16),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 12px 0 24px rgba(255,255,255,.22),
    inset -14px -18px 34px rgba(123, 72, 20, .075) !important;

  color: #874018 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(132, 64, 24, .35) transparent !important;
}

/* Soft shine/3D paper layer, not a second box */
.glossary-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,.34), transparent 34%),
    radial-gradient(circle at 92% 88%, rgba(143, 80, 22, .08), transparent 34%) !important;
}

.glossary-content,
.glossary-header-row,
.glossary-header-left,
.glossary-card h2,
.glossary-rule,
.glossary-body {
  position: relative !important;
  z-index: 2 !important;
}

/* Remove nested-box look */
.glossary-content,
.glossary-card .glossary-content,
.glossary-card .glossary-body,
.glossary-card .glossary-header-row {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Header row */
.glossary-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

.glossary-header-left {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.glossary-icon {
  font-size: 1.42rem !important;
  line-height: 1 !important;
  filter:
    drop-shadow(0 2px 2px rgba(93, 55, 18, .18))
    drop-shadow(0 0 7px rgba(255, 217, 70, .22)) !important;
}

.glossary-header-left p {
  margin: 0 !important;
  color: #9b4f1e !important;
  text-transform: uppercase !important;
  letter-spacing: .17em !important;
  font-weight: 900 !important;
  font-size: .64rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* Better close button */
.glossary-close {
  position: relative !important;
  z-index: 4 !important;

  display: inline-grid !important;
  place-items: center !important;

  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;

  border-radius: 50% !important;
  border: 1px solid rgba(158, 94, 62, .32) !important;

  background:
    radial-gradient(circle at 35% 25%, #ffffff 0%, #fff8ed 45%, #ffe8d6 100%) !important;

  color: #90441e !important;
  cursor: pointer !important;
  font-size: 1.36rem !important;
  line-height: 1 !important;
  font-weight: 400 !important;

  box-shadow:
    0 9px 18px rgba(83, 48, 23, .16),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -4px 9px rgba(142, 79, 34, .08) !important;

  flex: 0 0 auto !important;
  transition: transform .18s ease, box-shadow .18s ease !important;
}

.glossary-close:hover {
  transform: translateY(-1px) scale(1.04) !important;
  box-shadow:
    0 12px 24px rgba(83, 48, 23, .20),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -4px 9px rgba(142, 79, 34, .08) !important;
}

/* Compact heading */
.glossary-card h2 {
  margin: 0 0 8px !important;
  padding: 0 0 10px !important;

  color: #873d17 !important;
  font-size: clamp(1.08rem, 1.85vw, 1.48rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.018em !important;
  font-weight: 850 !important;

  border-bottom: 1px solid rgba(205, 157, 42, .50) !important;
  overflow-wrap: anywhere !important;
}

/* Single subtle rule */
.glossary-rule {
  height: 1px !important;
  margin: 0 0 14px !important;
  background: rgba(214, 164, 28, .44) !important;
}

/* Compact body */
.glossary-body p {
  margin: 0 0 9px !important;
  color: #8a401b !important;
  font-size: .88rem !important;
  line-height: 1.58 !important;
  font-weight: 450 !important;
}

.glossary-body p:last-child {
  margin-bottom: 0 !important;
}

/* Slim scrollbar */
.glossary-card::-webkit-scrollbar {
  width: 7px !important;
}

.glossary-card::-webkit-scrollbar-track {
  background: transparent !important;
}

.glossary-card::-webkit-scrollbar-thumb {
  background: rgba(132, 64, 24, .32) !important;
  border-radius: 999px !important;
}

/* Mobile: still slides from bottom, full width */
@media (max-width: 700px) {
  .glossary-modal {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    align-items: flex-end !important;
    justify-content: center !important;

    padding: 0 !important;
    height: auto !important;

    transform: translateY(110%) !important;
  }

  .glossary-modal.is-open {
    transform: translateY(0) !important;
  }

  .glossary-card {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 72dvh !important;

    margin: 0 !important;
    padding: 18px 18px 20px !important;

    border-left: 2px solid rgba(226, 184, 22, .98) !important;
    border-right: 2px solid rgba(226, 184, 22, .98) !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .glossary-icon {
    font-size: 1.28rem !important;
  }

  .glossary-header-left p {
    font-size: .56rem !important;
    letter-spacing: .14em !important;
  }

  .glossary-close {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 1.24rem !important;
  }

  .glossary-card h2 {
    font-size: clamp(.98rem, 4.55vw, 1.18rem) !important;
    line-height: 1.16 !important;
    margin-bottom: 8px !important;
    padding-bottom: 9px !important;
  }

  .glossary-rule {
    margin-bottom: 12px !important;
  }

  .glossary-body p {
    font-size: .8rem !important;
    line-height: 1.52 !important;
  }
}

@media (max-width: 390px) {
  .glossary-card {
    padding: 16px 16px 18px !important;
  }

  .glossary-card h2 {
    font-size: .98rem !important;
  }

  .glossary-body p {
    font-size: .78rem !important;
  }
}


/* =========================================================
   GLOSSARY BOTTOM-SLIDE HORIZONTAL CENTRE FIX
   Paste this at the VERY BOTTOM of page.php CSS or assets/css/page.css.
   Keeps the slide-up behaviour but centres the note horizontally.
   ========================================================= */

.glossary-modal {
  position: fixed !important;
  z-index: 9999 !important;

  top: auto !important;
  bottom: 0 !important;
  left: 50% !important;
  right: auto !important;

  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  min-height: 0 !important;

  display: block !important;
  padding: 0 !important;
  margin: 0 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;

  transform: translateX(-50%) translateY(110%) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transition: transform .28s cubic-bezier(.2,.8,.2,1) !important;
}

.glossary-modal.is-open {
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto !important;
}

.glossary-card {
  position: relative !important;
  box-sizing: border-box !important;

  width: min(860px, calc(100vw - 48px)) !important;
  max-width: min(860px, calc(100vw - 48px)) !important;
  max-height: min(68dvh, 560px) !important;

  margin-left: auto !important;
  margin-right: auto !important;
  margin-bottom: 0 !important;

  padding: 24px 28px 24px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;

  border: 2px solid rgba(226, 184, 22, .98) !important;
  border-bottom: 0 !important;
  border-radius: 22px 22px 0 0 !important;

  background:
    radial-gradient(circle at 16% 0%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.40) 28%, transparent 44%),
    linear-gradient(145deg, #fffdf0 0%, #fff6c9 42%, #fff2b5 100%) !important;

  box-shadow:
    0 -34px 78px rgba(17, 13, 10, .34),
    0 -16px 34px rgba(100, 55, 18, .18),
    0 -3px 0 rgba(120, 80, 20, .16),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 12px 0 24px rgba(255,255,255,.22),
    inset -14px -18px 34px rgba(123, 72, 20, .075) !important;

  color: #874018 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(132, 64, 24, .35) transparent !important;
}

.glossary-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(115deg, rgba(255,255,255,.34), transparent 34%),
    radial-gradient(circle at 92% 88%, rgba(143, 80, 22, .08), transparent 34%) !important;
}

.glossary-content,
.glossary-header-row,
.glossary-header-left,
.glossary-card h2,
.glossary-rule,
.glossary-body {
  position: relative !important;
  z-index: 2 !important;
}

.glossary-content,
.glossary-card .glossary-content,
.glossary-card .glossary-body,
.glossary-card .glossary-header-row {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.glossary-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
  padding: 0 !important;
}

.glossary-header-left {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
}

.glossary-icon {
  font-size: 1.42rem !important;
  line-height: 1 !important;
  filter:
    drop-shadow(0 2px 2px rgba(93, 55, 18, .18))
    drop-shadow(0 0 7px rgba(255, 217, 70, .22)) !important;
}

.glossary-header-left p {
  margin: 0 !important;
  color: #9b4f1e !important;
  text-transform: uppercase !important;
  letter-spacing: .17em !important;
  font-weight: 900 !important;
  font-size: .64rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.glossary-close {
  position: relative !important;
  z-index: 4 !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(158, 94, 62, .32) !important;
  background:
    radial-gradient(circle at 35% 25%, #ffffff 0%, #fff8ed 45%, #ffe8d6 100%) !important;
  color: #90441e !important;
  cursor: pointer !important;
  font-size: 1.36rem !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  box-shadow:
    0 9px 18px rgba(83, 48, 23, .16),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -4px 9px rgba(142, 79, 34, .08) !important;
  flex: 0 0 auto !important;
}

.glossary-card h2 {
  margin: 0 0 8px !important;
  padding: 0 0 10px !important;
  color: #873d17 !important;
  font-size: clamp(1.08rem, 1.85vw, 1.48rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.018em !important;
  font-weight: 850 !important;
  border-bottom: 1px solid rgba(205, 157, 42, .50) !important;
  overflow-wrap: anywhere !important;
}

.glossary-rule {
  height: 1px !important;
  margin: 0 0 14px !important;
  background: rgba(214, 164, 28, .44) !important;
}

.glossary-body p {
  margin: 0 0 9px !important;
  color: #8a401b !important;
  font-size: .88rem !important;
  line-height: 1.58 !important;
  font-weight: 450 !important;
}

.glossary-body p:last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 700px) {
  .glossary-modal {
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw !important;
    transform: translateX(-50%) translateY(110%) !important;
  }

  .glossary-modal.is-open {
    transform: translateX(-50%) translateY(0) !important;
  }

  .glossary-card {
    width: calc(100vw - 18px) !important;
    max-width: calc(100vw - 18px) !important;
    max-height: 72dvh !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding: 18px 18px 20px !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .glossary-icon {
    font-size: 1.28rem !important;
  }

  .glossary-header-left p {
    font-size: .56rem !important;
    letter-spacing: .14em !important;
  }

  .glossary-close {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 1.24rem !important;
  }

  .glossary-card h2 {
    font-size: clamp(.98rem, 4.55vw, 1.18rem) !important;
    line-height: 1.16 !important;
  }

  .glossary-body p {
    font-size: .8rem !important;
    line-height: 1.52 !important;
  }
}


/* =========================================================
   GLOSSARY CLEAN NOTE BACKGROUND FIX
   Paste this at the VERY BOTTOM after all older glossary CSS.
   Removes the white washed/radial shine patch but keeps a soft 3D note.
   ========================================================= */

.glossary-card {
  background:
    linear-gradient(145deg, #fff9dc 0%, #fff1b7 48%, #ffe89a 100%) !important;

  box-shadow:
    0 -30px 68px rgba(17, 13, 10, .30),
    0 -12px 28px rgba(100, 55, 18, .16),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -18px 34px rgba(126, 76, 18, .09),
    inset 10px 0 22px rgba(255,255,255,.12) !important;
}

/* Remove the large white overlay/shine that was causing the washed patch */
.glossary-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 38%),
    radial-gradient(circle at 92% 88%, rgba(143, 80, 22, .055), transparent 34%) !important;
}

/* Keep content readable above the subtle texture */
.glossary-content,
.glossary-header-row,
.glossary-header-left,
.glossary-card h2,
.glossary-rule,
.glossary-body {
  position: relative !important;
  z-index: 2 !important;
}


/* =========================================================
   GLOSSARY FINAL BALANCED 3D NOTE FIX
   Paste this at the VERY BOTTOM after all older glossary CSS.
   Restores shaded 3D sticky-note effect without the white wash.
   Keeps text compact and the note centred while sliding from bottom.
   ========================================================= */

.glossary-modal {
  position: fixed !important;
  z-index: 9999 !important;
  left: 50% !important;
  right: auto !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  transform: translateX(-50%) translateY(110%) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transition: transform .28s cubic-bezier(.2,.8,.2,1) !important;
}

.glossary-modal.is-open {
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto !important;
}

.glossary-card {
  position: relative !important;
  box-sizing: border-box !important;
  width: min(780px, calc(100vw - 44px)) !important;
  max-width: min(780px, calc(100vw - 44px)) !important;
  max-height: min(66dvh, 520px) !important;
  margin: 0 auto !important;
  padding: 20px 24px 22px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  border: 2px solid rgba(221, 177, 0, .98) !important;
  border-bottom: 0 !important;
  border-radius: 20px 20px 0 0 !important;
  background:
    linear-gradient(150deg, #fff9d7 0%, #fff1ad 48%, #ffe48a 100%) !important;
  box-shadow:
    0 -34px 72px rgba(30, 21, 12, .34),
    0 -15px 34px rgba(115, 66, 18, .20),
    0 -3px 0 rgba(145, 94, 16, .16),
    inset 0 1px 0 rgba(255,255,255,.88),
    inset 0 -18px 32px rgba(111, 67, 15, .12),
    inset 12px 0 22px rgba(255,255,255,.17),
    inset -16px 0 26px rgba(124, 74, 18, .07) !important;
  color: #833b16 !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(132, 64, 24, .38) transparent !important;
}

.glossary-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.22), rgba(255,255,255,0) 38%),
    linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,0) 36%, rgba(122,74,20,.055) 100%),
    radial-gradient(circle at 88% 92%, rgba(112,67,15,.08), transparent 36%) !important;
}

.glossary-card::after {
  content: "" !important;
  position: absolute !important;
  left: 5% !important;
  right: 5% !important;
  bottom: 0 !important;
  height: 18px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(180deg, transparent, rgba(91,54,18,.10)) !important;
}

.glossary-content,
.glossary-card .glossary-content,
.glossary-card .glossary-body,
.glossary-card .glossary-header-row {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.glossary-content,
.glossary-header-row,
.glossary-header-left,
.glossary-card h2,
.glossary-rule,
.glossary-body {
  position: relative !important;
  z-index: 2 !important;
}

.glossary-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
}

.glossary-header-left {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  min-width: 0 !important;
}

.glossary-icon {
  font-size: 1.32rem !important;
  line-height: 1 !important;
  filter:
    drop-shadow(0 2px 2px rgba(93,55,18,.20))
    drop-shadow(0 0 7px rgba(255,213,53,.26)) !important;
}

.glossary-header-left p {
  margin: 0 !important;
  color: #994a1a !important;
  text-transform: uppercase !important;
  letter-spacing: .17em !important;
  font-weight: 900 !important;
  font-size: .61rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.glossary-close {
  position: relative !important;
  z-index: 4 !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(150,86,54,.34) !important;
  background:
    radial-gradient(circle at 35% 24%, #fff 0%, #fff7e8 44%, #ffd9bd 100%) !important;
  color: #8d3f18 !important;
  cursor: pointer !important;
  font-size: 1.28rem !important;
  line-height: 1 !important;
  font-weight: 400 !important;
  box-shadow:
    0 9px 18px rgba(83,48,23,.18),
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -5px 9px rgba(142,79,34,.10) !important;
  flex: 0 0 auto !important;
}

.glossary-card h2 {
  margin: 0 0 7px !important;
  padding: 0 54px 9px 0 !important;
  color: #813714 !important;
  font-size: clamp(1rem, 1.65vw, 1.32rem) !important;
  line-height: 1.13 !important;
  letter-spacing: -0.015em !important;
  font-weight: 850 !important;
  border-bottom: 1px solid rgba(194,145,26,.48) !important;
  overflow-wrap: anywhere !important;
}

.glossary-rule {
  height: 1px !important;
  margin: 0 0 12px !important;
  background: rgba(212,161,28,.34) !important;
}

.glossary-body p {
  margin: 0 0 8px !important;
  color: #854018 !important;
  font-size: .82rem !important;
  line-height: 1.52 !important;
  font-weight: 450 !important;
}

.glossary-body p:last-child {
  margin-bottom: 0 !important;
}

.glossary-card::-webkit-scrollbar {
  width: 7px !important;
}

.glossary-card::-webkit-scrollbar-track {
  background: transparent !important;
}

.glossary-card::-webkit-scrollbar-thumb {
  background: rgba(132,64,24,.34) !important;
  border-radius: 999px !important;
}

@media (max-width: 700px) {
  .glossary-modal {
    left: 50% !important;
    right: auto !important;
    bottom: 0 !important;
    top: auto !important;
    width: 100vw !important;
    transform: translateX(-50%) translateY(110%) !important;
  }

  .glossary-modal.is-open {
    transform: translateX(-50%) translateY(0) !important;
  }

  .glossary-card {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: 70dvh !important;
    margin: 0 auto !important;
    padding: 16px 18px 18px !important;
    border-bottom: 0 !important;
    border-radius: 18px 18px 0 0 !important;
  }

  .glossary-header-row {
    margin-bottom: 9px !important;
  }

  .glossary-icon {
    font-size: 1.22rem !important;
  }

  .glossary-header-left p {
    font-size: .54rem !important;
    letter-spacing: .14em !important;
  }

  .glossary-close {
    width: 37px !important;
    height: 37px !important;
    min-width: 37px !important;
    font-size: 1.18rem !important;
  }

  .glossary-card h2 {
    font-size: clamp(.92rem, 4.15vw, 1.08rem) !important;
    line-height: 1.15 !important;
    padding-right: 46px !important;
    padding-bottom: 8px !important;
    margin-bottom: 7px !important;
  }

  .glossary-rule {
    margin-bottom: 10px !important;
  }

  .glossary-body p {
    font-size: .76rem !important;
    line-height: 1.48 !important;
  }
}


/* Safari close tap target only. No layout changes. */
#glossaryCloseButton,
.glossary-close,
.js-glossary-close,
[data-glossary-close="1"] {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
  z-index: 99999 !important;
}

#glossaryCloseButton span,
.glossary-close span {
  pointer-events: none !important;
}

.glossary-card::before,
.glossary-card::after {
  pointer-events: none !important;
}


/* =========================================================
   GLOSSARY CLEAR NOTE FIX
   Paste this at the VERY BOTTOM after all older glossary CSS.
   Fixes the glossary note appearing blurred/dim behind the overlay.
   ========================================================= */

/* Backdrop should dim the page only. No blur effect. */
.glossary-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 8000 !important;
  background: rgba(35, 37, 48, 0.52) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;
}

/* Modal must sit above the backdrop. */
.glossary-modal,
.js-glossary-modal {
  z-index: 9000 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* The visible note must be sharp, not affected by any blur/filter. */
.glossary-card {
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 9001 !important;
}

/* Decorative layers must not blur or block taps. */
.glossary-card::before,
.glossary-card::after {
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  pointer-events: none !important;
}

/* Keep all glossary text sharp and readable. */
.glossary-card,
.glossary-card *,
.glossary-content,
.glossary-body,
.glossary-body p,
.glossary-card h2,
.glossary-header-left p {
  text-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Keep the close button above everything and Safari-friendly. */
#glossaryCloseButton,
.glossary-close,
.js-glossary-close,
button.glossary-close,
button.js-glossary-close,
button[data-glossary-close="1"] {
  position: relative !important;
  z-index: 2147483647 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
  cursor: pointer !important;
}

#glossaryCloseButton span,
.glossary-close span,
.js-glossary-close span {
  pointer-events: none !important;
}


/* =========================================================
   GLOSSARY NO WHITE LAYER FIX
   Paste this at the VERY BOTTOM after all older glossary CSS.
   Removes the white/washed layer that appears behind glossary notes
   while keeping the existing note design.
   ========================================================= */

/* Backdrop should only dim the page. It must not create a white panel. */
.glossary-backdrop,
.js-glossary-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 8000 !important;
  background: rgba(35, 34, 39, 0.50) !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Remove any decorative white layer from the backdrop. */
.glossary-backdrop::before,
.glossary-backdrop::after,
.js-glossary-backdrop::before,
.js-glossary-backdrop::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* The modal wrapper must stay invisible. Only the note card should be visible. */
.glossary-modal,
.js-glossary-modal {
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Remove the white rectangle/washed overlay from the modal wrapper. */
.glossary-modal::before,
.glossary-modal::after,
.js-glossary-modal::before,
.js-glossary-modal::after {
  content: none !important;
  display: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Inner wrappers must not create a second white box. */
.glossary-content,
.glossary-card .glossary-content,
.glossary-card .glossary-body,
.glossary-card .glossary-header-row {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Keep the actual glossary note visible, sharp and above the dim layer. */
.glossary-card {
  position: relative !important;
  z-index: 9001 !important;
  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Keep the note's own 3D shading, but prevent it becoming a white panel behind the card. */
.glossary-card::before,
.glossary-card::after {
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Keep text and controls above the note texture. */
.glossary-content,
.glossary-header-row,
.glossary-header-left,
.glossary-card h2,
.glossary-rule,
.glossary-body,
.glossary-close,
.js-glossary-close {
  position: relative !important;
  z-index: 2 !important;
}


/* =========================================================
   PAGE ARTICLE TYPOGRAPHY ALIGNMENT FIX
   Paste this at the VERY BOTTOM after all older page.php CSS.
   Aligns h1/h2/h3, paragraphs, ul and ol neatly inside page.php.
   ========================================================= */

.quote-box {
  --article-copy-width: 780px;
}

/* Keep normal article content in one clean reading column */
.quote-box > h1,
.quote-box > h2,
.quote-box > h3,
.quote-box > h4,
.quote-box > h5,
.quote-box > h6,
.quote-box > p,
.quote-box > ul,
.quote-box > ol,
.quote-box > blockquote,
.quote-box > .note-box,
.quote-box > .soft-note,
.quote-box > .outline-note,
.quote-box > .final-box,
.quote-box > .image-grid,
.quote-box > figure {
  width: min(var(--article-copy-width), 100%) !important;
  max-width: min(var(--article-copy-width), 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Headings: same left edge as paragraphs/lists */
.quote-box h1,
.quote-box h2,
.quote-box h3,
.quote-box h4,
.quote-box h5,
.quote-box h6 {
  text-align: left !important;
  color: #553131 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.12 !important;
}

.quote-box h1 {
  font-size: clamp(2.05rem, 4.2vw, 3.8rem) !important;
  margin-top: 42px !important;
  margin-bottom: 20px !important;
}

.quote-box h2 {
  font-size: clamp(1.65rem, 3vw, 2.45rem) !important;
  margin-top: 42px !important;
  margin-bottom: 18px !important;
}

.quote-box h3 {
  font-size: clamp(1.28rem, 2.2vw, 1.78rem) !important;
  margin-top: 34px !important;
  margin-bottom: 14px !important;
}

.quote-box h4,
.quote-box h5,
.quote-box h6 {
  margin-top: 28px !important;
  margin-bottom: 12px !important;
}

/* Paragraph rhythm */
.quote-box p {
  text-align: left !important;
  margin-top: 0 !important;
  margin-bottom: 18px !important;
}

/* Lists: bullet/number sits close to text, not pushed too far inward */
.quote-box ul,
.quote-box ol {
  text-align: left !important;
  padding-left: 1.35rem !important;
  margin-top: 12px !important;
  margin-bottom: 28px !important;
  list-style-position: outside !important;
}

/* List items: clean spacing and readable wrapping */
.quote-box li {
  padding-left: 0.35rem !important;
  margin-bottom: 12px !important;
  line-height: 1.8 !important;
  color: #594141 !important;
}

.quote-box li::marker {
  color: #6b3d3d !important;
  font-weight: 800 !important;
}

/* Nested lists stay tidy */
.quote-box li ul,
.quote-box li ol {
  width: 100% !important;
  max-width: 100% !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;
  padding-left: 1.25rem !important;
}

/* References section: smaller, academic-looking list spacing */
.quote-box h2 + ul,
.quote-box h2 + ol {
  margin-top: 8px !important;
}

.quote-box h2 + ul li,
.quote-box h2 + ol li {
  margin-bottom: 10px !important;
}

/* Remove awkward huge indentation created by editor/browser defaults */
.quote-box ul ul,
.quote-box ol ol,
.quote-box ul ol,
.quote-box ol ul {
  margin-left: 0 !important;
}

/* Mobile alignment */
@media (max-width: 700px) {
  .quote-box {
    --article-copy-width: 100%;
  }

  .quote-box > h1,
  .quote-box > h2,
  .quote-box > h3,
  .quote-box > h4,
  .quote-box > h5,
  .quote-box > h6,
  .quote-box > p,
  .quote-box > ul,
  .quote-box > ol,
  .quote-box > blockquote,
  .quote-box > .note-box,
  .quote-box > .soft-note,
  .quote-box > .outline-note,
  .quote-box > .final-box,
  .quote-box > .image-grid,
  .quote-box > figure {
    width: 100% !important;
    max-width: 100% !important;
  }

  .quote-box h1 {
    font-size: clamp(1.85rem, 9vw, 2.55rem) !important;
    margin-top: 34px !important;
  }

  .quote-box h2 {
    font-size: clamp(1.45rem, 7.2vw, 2rem) !important;
    margin-top: 34px !important;
    margin-bottom: 14px !important;
  }

  .quote-box h3 {
    font-size: clamp(1.18rem, 5.8vw, 1.55rem) !important;
  }

  .quote-box ul,
  .quote-box ol {
    padding-left: 1.2rem !important;
    margin-bottom: 24px !important;
  }

  .quote-box li {
    padding-left: 0.25rem !important;
    margin-bottom: 10px !important;
    line-height: 1.72 !important;
  }
}


/* =========================================================
   DESKTOP ARTICLE LIST + HEADING ALIGNMENT FIX
   Paste this at the VERY BOTTOM after all older page.php CSS.
   This fixes desktop h1/h2/h3 + ul/ol alignment.
   ========================================================= */

@media (min-width: 701px) {
  .quote-box {
    --desktop-copy-width: 780px;
  }

  /* One shared desktop reading column */
  .quote-box > h1,
  .quote-box > h2,
  .quote-box > h3,
  .quote-box > h4,
  .quote-box > h5,
  .quote-box > h6,
  .quote-box > p,
  .quote-box > ul:not(.facts-list),
  .quote-box > ol:not(.facts-list),
  .quote-box > blockquote,
  .quote-box > figure,
  .quote-box > .note-box,
  .quote-box > .soft-note,
  .quote-box > .outline-note,
  .quote-box > .final-box,
  .quote-box > .warning-line,
  .quote-box > .life-belongs,
  .quote-box > .facts-box {
    width: min(var(--desktop-copy-width), 100%) !important;
    max-width: min(var(--desktop-copy-width), 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Headings line up with the same left edge as the body column */
  .quote-box > h1,
  .quote-box > h2,
  .quote-box > h3,
  .quote-box > h4,
  .quote-box > h5,
  .quote-box > h6 {
    text-align: left !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Override the old rule that centred every li and made references look indented */
  .quote-box > ul:not(.facts-list),
  .quote-box > ol:not(.facts-list) {
    padding-left: 1.05rem !important;
    margin-top: 10px !important;
    margin-bottom: 30px !important;
    list-style-position: outside !important;
  }

  .quote-box > ul:not(.facts-list) > li,
  .quote-box > ol:not(.facts-list) > li {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 12px !important;
    padding-left: 0.35rem !important;
    line-height: 1.78 !important;
    display: list-item !important;
  }

  /* References lists need to look academic, not like floating centred text */
  .quote-box h1 + ul,
  .quote-box h1 + ol,
  .quote-box h2 + ul,
  .quote-box h2 + ol,
  .quote-box h3 + ul,
  .quote-box h3 + ol {
    margin-top: 8px !important;
  }

  .quote-box h1 + ul > li,
  .quote-box h1 + ol > li,
  .quote-box h2 + ul > li,
  .quote-box h2 + ol > li,
  .quote-box h3 + ul > li,
  .quote-box h3 + ol > li {
    margin-bottom: 10px !important;
  }

  /* Nested lists stay inside the parent list and do not re-centre */
  .quote-box li > ul,
  .quote-box li > ol {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    padding-left: 1.15rem !important;
  }

  .quote-box li > ul > li,
  .quote-box li > ol > li {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* =========================================================
   STRONG DESKTOP REFERENCES / LIST ALIGNMENT FIX
   Paste this at the VERY BOTTOM after all older page.php CSS.
   This removes the large desktop list indentation.
   ========================================================= */

@media (min-width: 701px) {
  .quote-box {
    --desktop-copy-width: 780px;
  }

  /* Main article column */
  .quote-box > h1,
  .quote-box > h2,
  .quote-box > h3,
  .quote-box > h4,
  .quote-box > h5,
  .quote-box > h6,
  .quote-box > p,
  .quote-box > ul,
  .quote-box > ol,
  .quote-box > blockquote {
    width: min(var(--desktop-copy-width), 100%) !important;
    max-width: min(var(--desktop-copy-width), 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  /* Force headings to the same left edge */
  .quote-box > h1,
  .quote-box > h2,
  .quote-box > h3,
  .quote-box > h4,
  .quote-box > h5,
  .quote-box > h6 {
    text-align: left !important;
    padding-left: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /*
    Desktop list alignment:
    - remove browser/editor padding
    - draw our own bullet
    - text starts almost directly under heading
  */
  .quote-box > ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .quote-box > ul > li {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 1.35rem !important;
    margin-bottom: 10px !important;
    line-height: 1.78 !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  .quote-box > ul > li::before {
    content: "•" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: #6b3d3d !important;
    font-weight: 900 !important;
    line-height: 1.78 !important;
  }

  .quote-box > ul > li::marker {
    content: "" !important;
  }

  /* Numbered lists align tightly too */
  .quote-box > ol {
    list-style-position: outside !important;
    padding-left: 1.25rem !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .quote-box > ol > li {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0.2rem !important;
    margin-bottom: 10px !important;
    line-height: 1.78 !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  /* References section tighter spacing */
  .quote-box > h1 + ul,
  .quote-box > h2 + ul,
  .quote-box > h3 + ul,
  .quote-box > h1 + ol,
  .quote-box > h2 + ol,
  .quote-box > h3 + ol {
    margin-top: 8px !important;
  }

  /* Kill older centred-list rules anywhere inside article body */
  .quote-box li,
  .quote-box .article-body li,
  .article-body .quote-box li {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Nested lists remain tidy */
  .quote-box li > ul,
  .quote-box li > ol {
    width: 100% !important;
    max-width: 100% !important;
    margin: 8px 0 8px 0 !important;
    padding-left: 1.15rem !important;
  }
}

/* =========================================================
   FINAL PAGE.PHP REFERENCES ALIGNMENT FIX
   Keep this as the LAST block in /assets/css/page.css.

   Fixes the desktop References section where the text was
   collapsing into one-word-per-line columns.
   ========================================================= */

@media (min-width: 701px) {
  body:not(.admin) main.page .quote-box {
    --article-reference-width: 780px;
  }

  /*
    Keep article body content in one normal reading column.
    This overrides old grid/flex/list-item experiments.
  */
  body:not(.admin) main.page .quote-box > h1,
  body:not(.admin) main.page .quote-box > h2,
  body:not(.admin) main.page .quote-box > h3,
  body:not(.admin) main.page .quote-box > h4,
  body:not(.admin) main.page .quote-box > h5,
  body:not(.admin) main.page .quote-box > h6,
  body:not(.admin) main.page .quote-box > p,
  body:not(.admin) main.page .quote-box > blockquote,
  body:not(.admin) main.page .quote-box > ul,
  body:not(.admin) main.page .quote-box > ol,
  body:not(.admin) main.page .quote-box > div:not(.glossary-modal):not(.menu-panel):not(.menu-backdrop) {
    width: min(var(--article-reference-width), 100%) !important;
    max-width: min(var(--article-reference-width), 100%) !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  /*
    Lists must be normal block lists, not grid/flex.
    Reduced indentation, but readable.
  */
  body:not(.admin) main.page .quote-box > ol,
  body:not(.admin) main.page .quote-box ol {
    display: block !important;
    list-style: decimal outside !important;
    list-style-position: outside !important;
    counter-reset: none !important;

    width: min(var(--article-reference-width), 100%) !important;
    max-width: min(var(--article-reference-width), 100%) !important;
    min-width: 0 !important;

    padding-left: 1.45rem !important;
    padding-right: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 32px !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  body:not(.admin) main.page .quote-box > ul,
  body:not(.admin) main.page .quote-box ul {
    display: block !important;
    list-style: disc outside !important;
    list-style-position: outside !important;
    counter-reset: none !important;

    width: min(var(--article-reference-width), 100%) !important;
    max-width: min(var(--article-reference-width), 100%) !important;
    min-width: 0 !important;

    padding-left: 1.35rem !important;
    padding-right: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 32px !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  body:not(.admin) main.page .quote-box ol > li,
  body:not(.admin) main.page .quote-box ul > li {
    display: list-item !important;
    float: none !important;
    clear: none !important;

    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 11px !important;

    padding-left: 0.35rem !important;
    padding-right: 0 !important;

    line-height: 1.78 !important;
    text-align: left !important;

    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;

    columns: auto !important;
    column-count: auto !important;
    grid-template-columns: none !important;
    flex: none !important;
    box-sizing: border-box !important;
  }

  /*
    Remove the custom pseudo markers from previous fixes.
  */
  body:not(.admin) main.page .quote-box ol > li::before,
  body:not(.admin) main.page .quote-box ul > li::before {
    content: none !important;
    display: none !important;
  }

  body:not(.admin) main.page .quote-box ol > li::marker,
  body:not(.admin) main.page .quote-box ul > li::marker {
    color: #6b3d3d !important;
    font-weight: 900 !important;
  }

  /*
    If the editor placed each reference in a paragraph inside li,
    keep the paragraph full-width and readable.
  */
  body:not(.admin) main.page .quote-box li > p {
    display: inline !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  /*
    If old CSS targeted all children after a References heading,
    this restores sane full-width behaviour.
  */
  body:not(.admin) main.page .quote-box h1 ~ ol,
  body:not(.admin) main.page .quote-box h2 ~ ol,
  body:not(.admin) main.page .quote-box h3 ~ ol,
  body:not(.admin) main.page .quote-box h1 ~ ul,
  body:not(.admin) main.page .quote-box h2 ~ ul,
  body:not(.admin) main.page .quote-box h3 ~ ul,
  body:not(.admin) main.page .quote-box h1 ~ p,
  body:not(.admin) main.page .quote-box h2 ~ p,
  body:not(.admin) main.page .quote-box h3 ~ p {
    min-width: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

/* Mobile stays simple and readable. */
@media (max-width: 700px) {
  body:not(.admin) main.page .quote-box ol,
  body:not(.admin) main.page .quote-box ul {
    display: block !important;
    list-style-position: outside !important;
    padding-left: 1.25rem !important;
  }

  body:not(.admin) main.page .quote-box li {
    display: list-item !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
  }

  body:not(.admin) main.page .quote-box li::before {
    content: none !important;
    display: none !important;
  }
}

/* =========================================================
   FINAL FLOATING MENU BUTTON SLIGHTLY HIGHER
   Keep this as the LAST block in /assets/css/page.css.

   Moves the bottom MENU button up slightly so it does not sit
   too close to the browser bar.
   ========================================================= */

#pageFloatingMenuButton,
.float-menu,
.floating-menu,
.page-floating-menu {
  bottom: calc(40px + env(safe-area-inset-bottom)) !important;
}

@media (max-width: 700px) {
  #pageFloatingMenuButton,
  .float-menu,
  .floating-menu,
  .page-floating-menu {
    bottom: calc(98px + env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 390px) {
  #pageFloatingMenuButton,
  .float-menu,
  .floating-menu,
  .page-floating-menu {
    bottom: calc(94px + env(safe-area-inset-bottom)) !important;
  }
}

/* =========================================================
   FINAL SITE MENU BUTTON CLICK / OPEN STATE FIX
   Required for pages that include inc/site_menu.php without page.php scripts.
   ========================================================= */

#pageFloatingMenuButton,
.float-menu,
.floating-menu,
.page-floating-menu,
.js-menu-open,
.js-open-menu {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 2147483000 !important;
  touch-action: manipulation !important;
  -webkit-tap-highlight-color: transparent !important;
}

.menu-backdrop.open,
.menu-backdrop.is-open,
.js-menu-backdrop.open,
.js-menu-backdrop.is-open {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.menu-backdrop[hidden],
.js-menu-backdrop[hidden] {
  display: none !important;
}

.menu-panel[aria-hidden="false"],
.js-menu-panel[aria-hidden="false"],
.menu-panel.open,
.menu-panel.is-open,
.js-menu-panel.open,
.js-menu-panel.is-open {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.menu-open {
  overflow: hidden !important;
}

body.menu-open #pageFloatingMenuButton,
body.menu-open .float-menu,
body.menu-open .floating-menu,
body.menu-open .page-floating-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* =========================================================
   FINAL ARTICLES TOP BUTTON OPENS SITE MENU
   Keep this at bottom of /assets/css/page.css.
   ========================================================= */

.articles-top-menu-button,
#pageFloatingMenuButton,
.float-menu,
.floating-menu,
.page-floating-menu,
.js-menu-open,
.js-open-menu {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 2147483000 !important;
}

.menu-backdrop.open,
.menu-backdrop.is-open,
.js-menu-backdrop.open,
.js-menu-backdrop.is-open {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.menu-backdrop[hidden],
.js-menu-backdrop[hidden] {
  display: none !important;
}

.menu-panel[aria-hidden="false"],
.js-menu-panel[aria-hidden="false"],
.menu-panel.open,
.menu-panel.is-open,
.js-menu-panel.open,
.js-menu-panel.is-open {
  transform: translateX(-50%) translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.menu-open {
  overflow: hidden !important;
}

body.menu-open #pageFloatingMenuButton,
body.menu-open .float-menu,
body.menu-open .floating-menu,
body.menu-open .page-floating-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* Shared site menu now lives in /assets/css/site_menu.css. */