*{margin:0;padding:0;box-sizing:border-box}:root{--ink:#3f2d2d;--soft-ink:#6d5050;--muted:rgba(77,57,57,.72);--paper:rgba(255,255,255,.70);--orange:#ffb347;--pink:#ff7eb3;--shadow:0 30px 80px rgba(153,96,73,.18);--radius-xl:38px;--radius-lg:28px;--pill:999px}html{scroll-behavior:smooth}body{min-height:100vh;font-family:"Segoe UI",Arial,sans-serif;color:var(--ink);background:radial-gradient(circle at top left,rgba(255,255,255,.9),transparent 35%),linear-gradient(135deg,#fff2b8 0%,#ffd6a5 35%,#ffb7c5 70%,#cdeffd 100%);overflow-x:hidden}body.menu-open,body.glossary-open{overflow:hidden}a{color:inherit}button{font:inherit}.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,.8);animation:sunPulse 4s ease-in-out infinite;z-index:0}@keyframes sunPulse{0%,100%{transform:scale(1);box-shadow:0 0 45px rgba(255,193,7,.8)}50%{transform:scale(1.06);box-shadow:0 0 75px rgba(255,193,7,1)}}.cloud{position:fixed;background:rgba(255,255,255,.8);border-radius:var(--pill);z-index:0;animation:floatCloud linear infinite}.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:.7}.cloud.three{width:210px;height:60px;top:430px;left:-260px;animation-duration:62s;opacity:.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:28px 18px;display:flex;justify-content:center}.site-card{width:min(1040px,100%);background:var(--paper);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.75);border-radius:var(--radius-xl);box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.9);overflow:hidden;transform:translateY(20px);opacity:0}.site-card.is-visible{transform:none;opacity:1}.hero,.article-hero{position:relative;overflow:hidden;padding:18px 28px 26px;background:linear-gradient(135deg,rgba(255,255,255,.72),rgba(255,235,205,.48)),radial-gradient(circle at top,rgba(255,255,255,.9),transparent 60%)}.hero:before,.article-hero:before{content:"";position:absolute;left:-10%;right:-10%;top:0;height:92px;border-bottom-left-radius:50% 28%;border-bottom-right-radius:50% 28%;background:radial-gradient(ellipse at 50% -34%,rgba(255,255,255,.85),transparent 48%),linear-gradient(180deg,rgba(255,244,224,.78),rgba(255,238,244,.46),transparent);pointer-events:none}.hero>*,.article-hero>*{position:relative;z-index:1}.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px;padding:5px 8px 6px 13px;border:1px solid rgba(255,255,255,.58);border-radius:18px 18px 24px 24px;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,244,249,.2));box-shadow:inset 0 1px 0 rgba(255,255,255,.78)}.brand{color:#9b5c28;text-decoration:none;font-size:.64rem;font-weight:800;letter-spacing:.26em;text-transform:uppercase}.menu-button{display:inline-grid;place-items:center;width:28px;height:28px;border:1px solid rgba(255,255,255,.9);border-radius:50%;color:#704545;background:radial-gradient(circle at 35% 25%,#fff,#fff7fa 55%,#fceff6);box-shadow:0 5px 12px rgba(175,116,148,.08),inset 0 0 0 3px rgba(255,255,255,.62);cursor:pointer}.menu-button span{display:block;width:11px;height:1.35px;margin:1.1px 0;border-radius:var(--pill);background:currentColor}.hero-inner{max-width:100%;margin:22px auto 4px;text-align:center}.badge,.kicker,.filter{text-transform:uppercase}.badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:var(--pill);background:rgba(255,255,255,.8);color:#9b5c28;font-size:.66rem;font-weight:800;letter-spacing:.08em;box-shadow:0 10px 25px rgba(255,165,0,.15);margin-bottom:12px}.badge span{width:7px;height:7px;border-radius:50%;background:#ffc107;box-shadow:0 0 12px #ffc107}.home-title{max-width:none;width:100%;white-space:nowrap;margin:0 auto 12px;color:#4a2f2f;font-size:clamp(1.9rem,3vw,2.6rem);line-height:1.08;letter-spacing:-.045em}.subtitle{max-width:760px;margin:0 auto;color:var(--soft-ink);font-size:.92rem;line-height:1.55}.featured-section,.archive-section,.article-body,.glossary-index article{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);box-shadow:0 18px 45px rgba(93,56,56,.08)}.featured-section,.archive-section{margin:14px clamp(16px,3vw,26px) 0;padding:clamp(18px,3vw,26px);border-radius:var(--radius-lg)}.section-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:16px}.kicker,.filter{color:#9b5c28;font-size:.68rem;font-weight:800;letter-spacing:.16em}h2{color:#5d3434;font-size:clamp(1.25rem,2.25vw,1.75rem);line-height:1.1;letter-spacing:-.04em;text-wrap:balance}.featured-heading{align-items:center}.featured-tools{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto}.arrow-btn{display:inline-grid;place-items:center;width:38px;height:38px;border:0;border-radius:50%;color:#704545;background:rgba(255,255,255,.86);box-shadow:0 10px 22px rgba(93,56,56,.08);cursor:pointer;font-size:1.45rem;line-height:1}.sort-control{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:6px 10px;border-radius:999px;color:#704545;background:rgba(255,255,255,.86);box-shadow:inset 0 0 0 1px rgba(153,96,73,.08);font-size:.76rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.sort-control select{min-width:116px;border:0;outline:0;color:#5d3434;background:transparent;font:inherit;text-transform:none;letter-spacing:0;cursor:pointer}.featured-article{position:relative;display:grid;grid-template-columns:auto 1fr;gap:18px;min-height:148px;padding:clamp(18px,3vw,26px);border-radius:26px;background:linear-gradient(135deg,rgba(255,252,226,.95),rgba(255,255,255,.72));transition:opacity .22s ease,transform .22s ease}.featured-article.is-changing{opacity:0;transform:translateX(10px)}.quote-mark{color:rgba(255,171,64,.35);font-family:Georgia,serif;font-size:clamp(4rem,8vw,6rem);line-height:.82}.featured-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}.featured-meta span,.featured-meta time{display:inline-flex;align-items:center;min-height:28px;padding:6px 10px;border-radius:999px;color:#9b5c28;background:rgba(255,245,210,.95);font-size:.72rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em}.featured-article p{color:#4d3939;font-size:clamp(.94rem,1.35vw,1.04rem);line-height:1.75}.read-link{display:inline-flex;margin-top:18px;color:#9b5c28;font-weight:900;text-decoration:none}.read-link:after{content:"→";margin-left:8px}.featured-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;color:rgba(77,57,57,.72);font-size:.82rem;font-weight:700}.featured-dots{display:inline-flex;gap:6px}.featured-dot{width:8px;height:8px;border:0;border-radius:50%;background:rgba(112,69,69,.2);cursor:pointer}.featured-dot.is-active{background:linear-gradient(135deg,var(--orange),var(--pink));box-shadow:0 0 0 4px rgba(255,126,179,.12)}.archive-heading{align-items:center}.filter-row{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}.filter{border:0;border-radius:var(--pill);padding:9px 13px;color:#704545;background:rgba(255,255,255,.75);cursor:pointer;font-size:.72rem}.filter.is-active{color:white;background:linear-gradient(135deg,var(--orange),var(--pink))}.article-list{display:grid;gap:14px}.article-card-row{display:grid;grid-template-columns:minmax(120px,.42fr) minmax(0,1fr) auto;align-items:center;gap:18px;padding:18px;border-radius:22px;background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.86)}.article-date{display:grid;gap:4px;color:#704545}.article-date strong{font-size:1.05rem}.article-date small{color:var(--muted);font-weight:700}.article-main h3{color:#4a2f2f;font-size:clamp(1.05rem,2vw,1.28rem);line-height:1.2}.article-main p{margin-top:7px;color:var(--soft-ink);font-size:.94rem;line-height:1.55}.article-tag{justify-self:end;padding:8px 12px;border-radius:var(--pill);color:#9b5c28;background:rgba(255,245,210,.95);font-size:.74rem;font-weight:900;text-transform:uppercase;letter-spacing:.1em}.article-card{width:min(920px,100%)}.article-heading{max-width:760px;margin:34px auto 0;text-align:center}.article-heading h1{margin:0 auto 14px;color:#4a2f2f;font-size:clamp(2rem,5vw,3.8rem);line-height:1.02;letter-spacing:-.055em;text-wrap:balance}.article-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin:0 0 16px;color:var(--muted);font-size:.92rem}.article-meta span:not(:last-child):after{content:" ·"}.article-excerpt{max-width:680px;margin:0 auto;color:var(--soft-ink);line-height:1.7}.article-links{display:flex;justify-content:center;flex-wrap:wrap;gap:9px;margin-top:20px}.article-links a{padding:8px 13px;border-radius:var(--pill);color:#704545;background:rgba(255,255,255,.76);text-decoration:none;font-size:.84rem;font-weight:800}.article-body{max-width:760px;margin:18px auto 0;padding:clamp(24px,4vw,38px);border-radius:var(--radius-lg)}.article-body p{max-width:70ch;margin:0 auto 20px;color:#4d3939;font-size:clamp(1rem,1.55vw,1.08rem);line-height:1.85}.opening-line{font-size:clamp(1.15rem,2vw,1.34rem)!important;font-weight:800;color:var(--ink)!important}.article-body h2{max-width:70ch;margin:34px auto 16px;font-size:clamp(1.35rem,2.6vw,2rem)}.warning-line{max-width:70ch;margin:28px auto;padding:22px 24px;border-left:5px solid var(--orange);border-radius:18px;background:linear-gradient(135deg,rgba(255,245,210,.96),rgba(255,255,255,.78));color:#4d3939;font-size:clamp(1rem,2vw,1.08rem);line-height:1.8;font-weight:700;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,.68);background:linear-gradient(135deg,rgba(255,252,242,.96),rgba(255,246,237,.88));box-shadow:0 18px 40px rgba(120,70,55,.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,.82);color:#9b5c28;font-size:.78rem!important;font-weight:900!important;line-height:1.1!important;letter-spacing:.12em;text-transform:uppercase;box-shadow:0 10px 24px rgba(255,176,88,.1)}.note-box--soft{background:linear-gradient(135deg,rgba(255,255,255,.98),rgba(255,244,250,.92));border-color:rgba(230,196,213,.75)}.note-box--soft:before{background:linear-gradient(180deg,#f1c8da,#ffb8c8)}.note-box--outline{background:rgba(255,255,255,.62);border:2px solid rgba(240,199,134,.88);box-shadow:0 12px 30px rgba(120,70,55,.04)}.note-box--outline:before{background:linear-gradient(180deg,#ffd274,#f7bb62)}.facts-box,.life-belongs,.final-line{max-width:70ch;margin:34px auto;padding:clamp(22px,4vw,30px);border-radius:26px;background:linear-gradient(135deg,#fff5c9,#ffe0ea);box-shadow:0 18px 40px rgba(255,145,77,.16)}.facts-box ol{display:grid;gap:12px;margin-left:1.15rem;color:#704545;line-height:1.7}.life-belongs,.final-line{text-align:center}.life-belongs h2,.final-line h2{margin:0 auto 18px;font-size:clamp(1.65rem,4vw,2.55rem)}.life-belongs ul{display:grid;gap:8px;max-width:420px;margin:20px auto 26px;padding:0;list-style:none;text-align:left}.life-belongs li{position:relative;padding-left:26px;color:#704545;font-weight:700}.life-belongs li:before{content:"✦";position:absolute;left:0;color:#ff7eb3}.final-line p{margin:0;font-weight:700}.article-image{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}.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}.glossary-backdrop{position:fixed;z-index:80;inset:0;background:rgba(35,37,48,.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:grid;grid-template-columns:auto 1fr;gap:18px;width:min(100%,760px);max-height:min(78vh,720px);overflow:auto;padding:26px 28px 30px;border:2px solid #ebc940;border-bottom:0;border-radius:26px 26px 0 0;background:#fffbe4;color:#7d3d1b;box-shadow:0 -18px 60px rgba(41,28,37,.24)}.glossary-icon{padding-top:8px;font-size:1.55rem}.glossary-topline{display:flex;align-items:center;justify-content:space-between;gap:18px}.glossary-topline p{margin:0;color:#9d5426;text-transform:uppercase;letter-spacing:.28em;font-size:.95rem;font-weight:500}.glossary-close{width:38px;height:38px;border:0;color:#9d5426;background:transparent;cursor:pointer;font-size:2rem;line-height:1}.glossary-card h2{margin:6px 0 14px;color:#7d3d1b;font-size:clamp(1.35rem,3vw,2rem);line-height:1.18}.glossary-rule{height:1px;margin:0 0 16px;background:#ebc940}.glossary-body p{margin:0 0 1em;color:#7d3d1b;font-size:clamp(1rem,2.4vw,1.25rem);line-height:1.56}.glossary-index{display:grid;gap:16px;background:transparent;border:0;box-shadow:none}.glossary-index article{padding:22px;border-radius:22px}.glossary-index p{margin-bottom:0}.menu-backdrop{position:fixed;z-index:80;inset:0;background:rgba(35,37,48,.42);backdrop-filter:blur(5px)}.side-menu{position:fixed;z-index:90;inset:0 0 0 auto;width:min(86vw,360px);transform:translateX(104%);transition:transform .22s ease;pointer-events:none}.side-menu.is-open{transform:translateX(0);pointer-events:auto}.side-panel{min-height:100%;display:grid;align-content:start;gap:0;padding:28px;background:rgba(255,250,253,.98);box-shadow:-16px 0 44px rgba(68,39,55,.15)}.side-panel a{padding:14px 0;border-bottom:1px solid rgba(153,96,73,.18);color:#4a2f2f;text-decoration:none}.close-menu{justify-self:end;width:42px;height:42px;margin-bottom:18px;border:1px solid rgba(153,96,73,.18);border-radius:50%;color:#6f616c;background:white;cursor:pointer;font-size:1.6rem;line-height:1}.footer{text-align:center;padding:28px 20px 32px;color:var(--muted)}.footer a{color:#704545;font-weight:700}@media (min-width:780px){.glossary-modal{align-items:center;top:0;bottom:0;padding:34px;transform:translateY(0) scale(.96);opacity:0;transition:opacity .19s ease,transform .19s ease}.glossary-modal.is-open{opacity:1;transform:translateY(0) scale(1)}.glossary-card{width:min(720px,100%);max-height:min(72vh,640px);border-bottom:2px solid #ebc940;border-radius:24px}.glossary-body p{font-size:1rem}}@media(max-width:900px){.home-title{white-space:normal}.section-heading,.archive-heading,.featured-heading{flex-direction:column;align-items:stretch}.featured-tools{justify-content:space-between;width:100%}.sort-control{flex:1;justify-content:center}.article-card-row{grid-template-columns:1fr;align-items:start}.article-tag{justify-self:start}}@media(max-width:700px){.sun{width:90px;height:90px;top:25px;right:22px}.page{padding:22px 12px}.site-card{border-radius:26px}.hero,.article-hero{padding:18px 14px 28px}.hero:before,.article-hero:before{height:150px}.topbar{min-height:52px;padding:7px 8px 9px 13px}.brand{max-width:220px;font-size:.68rem;letter-spacing:.24em;line-height:1.35}.menu-button{width:42px;height:42px}.menu-button span{width:18px;height:2px;margin:1.8px 0}.hero-inner{margin-top:40px}.badge{padding:10px 16px;font-size:.72rem;margin-bottom:20px}.home-title{font-size:clamp(2rem,11vw,3.05rem);line-height:1.02}.subtitle{font-size:.98rem}.featured-section,.archive-section{margin-left:14px;margin-right:14px;padding:20px 16px;border-radius:24px}.featured-article{grid-template-columns:1fr;gap:8px;min-height:190px;padding:22px 18px}.quote-mark{line-height:.6}.article-heading{margin-top:40px}.article-heading h1{font-size:clamp(2rem,11vw,3.05rem)}.article-body{margin:14px 14px 0;padding:24px 18px}.warning-line{padding:20px 18px}.article-image{margin:0 auto 26px;padding:8px;border-radius:22px}.article-image img{max-height:420px;border-radius:18px}.glossary-card{grid-template-columns:1fr;gap:14px;padding:24px 22px 28px;border-radius:24px 24px 0 0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* =========================================================
   Weather home page, floating centre menu, cleaner glossary
   ========================================================= */

body.mode-day {
  background:
    radial-gradient(circle at 86% 12%, rgba(255, 235, 122, .62), transparent 12rem),
    radial-gradient(circle at top left, rgba(255, 255, 255, .92), transparent 35%),
    linear-gradient(135deg, #fff2b8 0%, #ffd6a5 34%, #ffb7c5 70%, #cdeffd 100%);
}

body.mode-night {
  color: #f8eef5;
  background:
    radial-gradient(circle at 84% 12%, rgba(255, 249, 211, .65), transparent 11rem),
    radial-gradient(circle at 15% 20%, rgba(141, 101, 190, .28), transparent 28rem),
    linear-gradient(135deg, #100f2d 0%, #251b4a 42%, #51365d 72%, #182f48 100%);
}

body.mode-loading {
  background:
    radial-gradient(circle at top left, rgba(255,255,255,.9), transparent 35%),
    linear-gradient(135deg, #fff2b8 0%, #ffd6a5 35%, #ffb7c5 70%, #cdeffd 100%);
}

.ambient-sky {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.sky-orb {
  position: fixed;
  top: 72px;
  right: clamp(28px, 8vw, 86px);
  width: clamp(88px, 10vw, 150px);
  height: clamp(88px, 10vw, 150px);
  border-radius: 50%;
  z-index: 0;
  transition: all .7s ease;
}

.mode-day .sky-orb,
.mode-loading .sky-orb {
  background: radial-gradient(circle at 42% 38%, #fff7a8 0%, #ffd54f 45%, #ff9800 100%);
  box-shadow: 0 0 48px rgba(255, 193, 7, .78), 0 0 110px rgba(255, 163, 26, .28);
  animation: sunPulse 4s ease-in-out infinite;
}

.mode-night .sky-orb {
  background:
    radial-gradient(circle at 34% 30%, #fffde3 0%, #fff3a8 45%, #d7c887 100%);
  box-shadow: 0 0 42px rgba(255, 250, 216, .78), 0 0 100px rgba(185, 201, 255, .22);
}

.mode-night .sky-orb::after {
  content: "";
  position: absolute;
  width: 72%;
  height: 72%;
  border-radius: 50%;
  top: 4%;
  left: 26%;
  background: #251b4a;
  box-shadow: inset 14px 0 24px rgba(255,255,255,.08);
}

.home-weather-card {
  width: min(980px, 100%);
}

.weather-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(18px, 3vw, 30px);
  min-height: 610px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,235,205,.48)),
    radial-gradient(circle at 95% 2%, rgba(255,220,93,.42), transparent 20rem);
}

.mode-night .weather-hero {
  background:
    linear-gradient(135deg, rgba(31, 25, 66, .78), rgba(64, 45, 88, .58)),
    radial-gradient(circle at 90% 4%, rgba(255, 249, 211, .22), transparent 22rem);
}

.weather-title-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: start;
  margin-top: clamp(28px, 5vw, 56px);
}

.weather-title-row h1 {
  margin: 10px 0 8px;
  color: #5d3434;
  font-size: clamp(2.4rem, 5vw, 4.1rem);
  line-height: .98;
  letter-spacing: -.06em;
}

.mode-night .weather-title-row h1,
.mode-night .subtitle,
.mode-night .brand {
  color: #fff4fb;
}

.weather-title-row .subtitle {
  max-width: 430px;
  margin: 0;
  text-align: left;
  font-size: clamp(.98rem, 1.6vw, 1.12rem);
}

.hero-controls {
  display: inline-flex;
  gap: 10px;
  margin-top: 50px;
}

.weather-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 22px;
}

.weather-pills span {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding: 7px 13px;
  border-radius: 999px;
  color: #704545;
  background: rgba(255,255,255,.72);
  font-size: .82rem;
  font-weight: 800;
}

.mode-night .weather-pills span,
.mode-night .topbar,
.mode-night .quote-card,
.mode-night .archive-section {
  background: rgba(255,255,255,.14);
  color: #fff6fb;
  border-color: rgba(255,255,255,.18);
}

.quote-slider {
  position: relative;
  margin-top: 10px;
}

.quote-card {
  min-height: 250px;
  display: grid;
  align-content: space-between;
  padding: clamp(22px, 4vw, 36px);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,246,251,.66)),
    radial-gradient(circle at 94% 90%, rgba(255,205,166,.28), transparent 8rem);
  box-shadow: 0 24px 60px rgba(93,56,56,.12);
}

.quote-card .featured-meta {
  margin-bottom: 24px;
}

.quote-card p {
  max-width: 620px;
  color: #4d3939;
  font-size: clamp(1.45rem, 3vw, 2.25rem);
  line-height: 1.3;
  font-weight: 900;
  letter-spacing: -.035em;
}

.mode-night .quote-card p {
  color: #fff6fb;
}

.quote-card .read-link {
  justify-self: end;
  min-height: 44px;
  align-items: center;
  padding: 10px 18px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--orange), var(--pink));
  box-shadow: 0 14px 28px rgba(255,126,179,.28);
}

.quote-card .read-link::after {
  content: "";
}

/* Floating menu fixed bottom centre */
.floating-menu {
  position: fixed;
  left: 50%;
  bottom: calc(18px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 70;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 170px;
  min-height: 54px;
  padding: 10px 24px;
  border: 2px solid rgba(239, 191, 216, .86);
  border-radius: 999px;
  background: rgba(255, 244, 250, .92);
  color: #4a2f2f;
  box-shadow: 0 16px 44px rgba(145, 81, 117, .22);
  text-transform: uppercase;
  letter-spacing: .22em;
  font-size: .96rem;
  font-weight: 500;
  cursor: pointer;
  backdrop-filter: blur(14px);
}

.floating-menu__icon {
  font-size: 1.15rem;
  letter-spacing: 0;
}

/* Menu overlay styled closer to profile pages screenshot */
.side-menu {
  width: min(100vw, 560px);
  inset: 0 auto 0 50%;
  transform: translate(-50%, 104%);
  padding: 24px 14px calc(86px + env(safe-area-inset-bottom));
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.side-menu.is-open {
  transform: translate(-50%, 0);
}

.side-panel {
  width: min(100%, 520px);
  max-height: calc(100vh - 46px);
  overflow: auto;
  border-radius: 28px;
  border: 1px solid rgba(239, 191, 216, .55);
  background: rgba(255,255,255,.94);
  box-shadow: 0 30px 90px rgba(35, 25, 35, .2);
}

.side-panel__top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 18px;
}

.side-kicker,
.nav-section-title {
  margin: 0 0 10px;
  color: #867985;
  text-transform: uppercase;
  letter-spacing: .28em;
  font-size: .78rem;
}

.side-panel__top h2 {
  color: #2e2530;
  font-size: clamp(1.25rem, 4vw, 1.75rem);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.menu-search {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin: 0 0 24px;
  padding: 16px 18px;
  border: 1px solid rgba(239, 191, 216, .5);
  border-radius: 24px;
  background: rgba(255, 244, 250, .65);
}

.menu-search span {
  font-size: 1.45rem;
}

.menu-search input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(239, 191, 216, .52);
  border-radius: 999px;
  padding: 0 18px;
  outline: 0;
  color: #2e2530;
  background: rgba(255,255,255,.85);
  font-size: 1rem;
}

.menu-search small {
  grid-column: 1 / -1;
  color: #70646e;
  font-size: .95rem;
}

.profile-nav {
  display: grid;
  gap: 10px;
}

.profile-link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: center;
  min-height: 64px;
  padding: 12px 16px;
  border: 1px solid rgba(221, 192, 207, .72);
  border-radius: 999px;
  color: #2e2530;
  background: rgba(255,255,255,.76);
  text-decoration: none;
}

.profile-link span {
  font-size: 1.45rem;
}

.profile-link strong {
  font-size: 1rem;
  font-weight: 500;
}

.profile-link em {
  grid-column: 2;
  justify-self: start;
  margin-top: 5px;
  padding: 4px 12px;
  border-radius: 999px;
  color: #7f6674;
  background: rgba(255, 239, 247, .9);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .68rem;
}

.profile-link.is-hidden {
  display: none;
}

/* Glossary popup: light bulb and note text on one line */
.glossary-card {
  grid-template-columns: 1fr;
}

.glossary-content {
  min-width: 0;
}

.glossary-topline {
  justify-content: flex-start;
  gap: 12px;
}

.glossary-topline::before {
  content: "💡";
  font-size: 1.55rem;
  line-height: 1;
}

.glossary-icon {
  display: none;
}

.glossary-close {
  margin-left: auto;
}

/* Mobile tuning */
@media (max-width: 700px) {
  .weather-hero {
    min-height: 720px;
    padding: 20px 16px 26px;
  }

  .weather-title-row {
    grid-template-columns: 1fr;
    margin-top: 34px;
  }

  .weather-title-row h1 {
    font-size: clamp(2.45rem, 13vw, 3.6rem);
  }

  .hero-controls {
    position: absolute;
    right: 18px;
    top: 132px;
    margin-top: 0;
  }

  .weather-pills span {
    font-size: .78rem;
  }

  .quote-card {
    min-height: 330px;
  }

  .quote-card p {
    font-size: clamp(1.45rem, 7vw, 2.05rem);
  }

  .floating-menu {
    min-width: 176px;
    min-height: 56px;
    font-size: .98rem;
  }

  .side-menu {
    padding-top: 14px;
  }

  .side-panel {
    max-height: calc(100vh - 28px);
    border-radius: 26px;
  }
}


/* =========================================================
   Compact friendly menu refinements
   ========================================================= */

/* Smaller floating menu button */
.floating-menu {
  min-width: 132px;
  min-height: 42px;
  padding: 8px 18px;
  gap: 9px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  border-width: 1.5px;
  border-color: rgba(239, 191, 216, .78);
  background:
    linear-gradient(180deg, rgba(255, 250, 253, .94), rgba(255, 240, 248, .90));
  color: #4a2f2f;
  box-shadow:
    0 10px 30px rgba(145, 81, 117, .16),
    inset 0 1px 0 rgba(255,255,255,.88);
  letter-spacing: .16em;
  font-size: .78rem;
  font-weight: 700;
}

.floating-menu__icon {
  font-size: .98rem;
}

/* Make overlay closer to main page card design */
.side-menu {
  width: min(100vw, 500px);
  padding: 18px 12px calc(68px + env(safe-area-inset-bottom));
}

.side-panel {
  width: min(100%, 470px);
  max-height: calc(100vh - 34px);
  padding: 20px;
  border-radius: 26px;
  border: 1px solid rgba(239, 191, 216, .46);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .94), rgba(255, 246, 251, .88)),
    radial-gradient(circle at top right, rgba(255, 226, 240, .38), transparent 18rem);
  box-shadow:
    0 24px 70px rgba(68, 39, 55, .17),
    inset 0 1px 0 rgba(255,255,255,.9);
}

/* Header spacing */
.side-panel__top {
  align-items: center;
  margin-bottom: 14px;
}

.side-kicker {
  margin: 0 0 6px;
  color: #9b7d8d;
  letter-spacing: .24em;
  font-size: .68rem;
  font-weight: 600;
}

.side-panel__top h2 {
  color: #3f2d2d;
  font-size: clamp(1.05rem, 3vw, 1.35rem);
  letter-spacing: .10em;
  line-height: 1.15;
}

/* Smaller, softer close button */
.close-menu {
  width: 36px;
  height: 36px;
  margin: 0;
  border-color: rgba(239, 191, 216, .62);
  color: #704545;
  background:
    radial-gradient(circle at 35% 25%, #fff, #fff7fa 55%, #fceff6);
  box-shadow: 0 8px 18px rgba(120, 70, 95, .08);
  font-size: 1.35rem;
}

/* Compact search card */
.menu-search {
  grid-template-columns: auto 1fr;
  gap: 10px;
  margin: 0 0 18px;
  padding: 12px 14px;
  border-color: rgba(239, 191, 216, .42);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 244, 250, .72), rgba(255, 255, 255, .66));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}

.menu-search span {
  font-size: 1.18rem;
}

.menu-search input {
  min-height: 40px;
  padding: 0 15px;
  border-color: rgba(239, 191, 216, .48);
  color: #3f2d2d;
  background: rgba(255,255,255,.86);
  font-size: .92rem;
}

.menu-search input::placeholder {
  color: rgba(77, 57, 57, .42);
}

.menu-search small {
  font-size: .82rem;
  color: rgba(77,57,57,.64);
}

/* Compact nav group titles */
.nav-section-title {
  margin: 14px 0 8px;
  color: #9b7d8d;
  letter-spacing: .22em;
  font-size: .66rem;
  font-weight: 700;
}

/* More user-friendly page rows */
.profile-nav {
  gap: 8px;
}

.profile-link {
  min-height: 52px;
  padding: 10px 14px;
  gap: 11px;
  border-radius: 19px;
  border-color: rgba(221, 192, 207, .58);
  background:
    linear-gradient(135deg, rgba(255,255,255,.84), rgba(255,248,252,.70));
  box-shadow:
    0 8px 20px rgba(93, 56, 56, .045),
    inset 0 1px 0 rgba(255,255,255,.78);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.profile-link:hover,
.profile-link:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 126, 179, .45);
  background:
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,240,248,.82));
  box-shadow:
    0 12px 26px rgba(93, 56, 56, .08),
    inset 0 1px 0 rgba(255,255,255,.86);
  outline: none;
}

.profile-link span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 12px;
  background: rgba(255, 245, 210, .75);
  font-size: 1.04rem;
}

.profile-link strong {
  color: #3f2d2d;
  font-size: .93rem;
  line-height: 1.28;
  font-weight: 650;
}

.profile-link em {
  margin-top: 4px;
  padding: 3px 10px;
  color: #8b687a;
  background: rgba(255, 239, 247, .88);
  letter-spacing: .13em;
  font-size: .58rem;
  font-weight: 700;
}

/* Keep menu readable without oversized rows on phones */
@media (max-width: 700px) {
  .floating-menu {
    min-width: 138px;
    min-height: 44px;
    padding: 8px 18px;
    font-size: .8rem;
    letter-spacing: .15em;
  }

  .side-menu {
    padding: 10px 10px calc(64px + env(safe-area-inset-bottom));
  }

  .side-panel {
    max-height: calc(100vh - 22px);
    padding: 18px;
    border-radius: 24px;
  }

  .side-panel__top h2 {
    font-size: 1.18rem;
  }

  .menu-search {
    padding: 11px 12px;
    margin-bottom: 16px;
  }

  .menu-search input {
    min-height: 38px;
    font-size: .9rem;
  }

  .profile-link {
    min-height: 50px;
    padding: 9px 12px;
    border-radius: 18px;
  }

  .profile-link strong {
    font-size: .91rem;
  }
}


.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;
}

@media (max-width: 700px) {
  .article-gallery {
    grid-template-columns: 1fr;
    margin: 26px auto;
  }
}


/* page.php light article override */
body.article-light-page {
  color: #3f2d2d;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 216, 102, 0.35), transparent 10rem),
    radial-gradient(circle at 10% 16%, rgba(255,255,255,0.92), transparent 24rem),
    linear-gradient(135deg, #fff8ee 0%, #fff1f6 45%, #ffe4ec 100%) !important;
}

body.article-light-page .travelling-moon,
body.article-light-page .sky-orb,
body.article-light-page .stars,
body.article-light-page .sea,
body.article-light-page .watchtower,
body.article-light-page .cloud {
  display: none !important;
}

body.article-light-page .brand,
body.article-light-page .site-brand,
body.article-light-page .article-brand,
body.article-light-page .topbar a,
body.article-light-page header a:first-child {
  color: #5d3434 !important;
  background: rgba(255,255,255,0.76) !important;
  border-radius: 999px !important;
  padding: 7px 14px !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}


/* FINAL page.php no-night-theme override */
body.article-light-page,
body.article-light-page.day,
body.article-light-page.night {
  color: #3f2d2d !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 216, 102, 0.28), transparent 10rem),
    radial-gradient(circle at 10% 16%, rgba(255,255,255,0.96), transparent 24rem),
    linear-gradient(135deg, #fffaf1 0%, #fff2f7 48%, #ffe7ee 100%) !important;
}

body.article-light-page .sky-orb,
body.article-light-page .travelling-moon,
body.article-light-page .stars,
body.article-light-page .sea,
body.article-light-page .watchtower,
body.article-light-page .cloud,
body.article-light-page [class*="moon"],
body.article-light-page [class*="star"],
body.article-light-page [class*="cloud"],
body.article-light-page [class*="sea"],
body.article-light-page [class*="watchtower"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

body.article-light-page .brand,
body.article-light-page .site-brand,
body.article-light-page .article-brand,
body.article-light-page .topbar a,
body.article-light-page header a:first-child {
  color: #5d3434 !important;
  background: rgba(255,255,255,0.88) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}


/* FINAL page.php light-only stylesheet override */
body.article-light-page,
body.article-light-page.day,
body.article-light-page.night {
  color: #3f2d2d !important;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 216, 102, 0.22), transparent 10rem),
    radial-gradient(circle at 10% 16%, rgba(255,255,255,0.96), transparent 24rem),
    linear-gradient(135deg, #fffaf1 0%, #fff2f7 48%, #ffe7ee 100%) !important;
}

body.article-light-page .sun,
body.article-light-page .sky-orb,
body.article-light-page .travelling-moon,
body.article-light-page .stars,
body.article-light-page .sea,
body.article-light-page .watchtower,
body.article-light-page .cloud,
body.article-light-page [class*="moon"],
body.article-light-page [class*="star"],
body.article-light-page [class*="cloud"],
body.article-light-page [class*="sea"],
body.article-light-page [class*="watchtower"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

body.article-light-page .brand,
body.article-light-page .site-brand,
body.article-light-page .article-brand,
body.article-light-page .topbar a,
body.article-light-page header a:first-child {
  color: #5d3434 !important;
  background: rgba(255,255,255,0.90) !important;
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}


/* =========================================================
   Universal popup menu - index.php design for all pages
   ========================================================= */

.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-width: auto !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;
}

.float-menu b,
.floating-menu__icon {
  font-size: 0.95rem !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

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

.menu-panel {
  position: fixed !important;
  z-index: 90 !important;
  left: 50% !important;
  top: 18px !important;
  bottom: calc(62px + env(safe-area-inset-bottom)) !important;
  width: min(92vw, 470px) !important;
  max-width: 470px !important;
  min-height: 0 !important;
  height: auto !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.95), rgba(255,246,251,0.90)),
    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.18) !important;
  overflow: auto !important;
  transform: translateX(-50%) translateY(110%) !important;
  transition: transform 230ms ease !important;
  pointer-events: none !important;
}

/* support both index JS (.open) and older shared JS (.is-open) */
.menu-panel.open,
.menu-panel.is-open {
  transform: translateX(-50%) translateY(0) !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 {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  margin: 0 !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 span {
  font-size: 1.15rem !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,
.profile-link > span:first-child:not(:last-child) {
  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;
}

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

@media (max-width: 700px) {
  .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;
  }

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


/* =========================================================
   FINAL MENU BLUR FIX
   Ensures popup panel appears above the blur overlay on page.php
   and every page using inc/site_menu.php.
   ========================================================= */

.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;
}

/* Force the menu to be a centred popup, never a right-side drawer */
.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;
  max-height: none !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;
}

/* Support both the old and new open classes */
.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;
}

/* Override any old side-drawer styles that may still be in cached CSS */
.side-menu,
.side-menu.is-open {
  right: 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;
  margin: 0 !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;
}

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

@media (max-width: 700px) {
  .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;
  }
}


/* Uniform site font override */
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;
}


/* Desktop article alignment fix */
@media (min-width: 701px) {
  .article-body,
  .quote-box {
    --article-width: 820px;
  }

  .article-body > p,
  .article-body > h2,
  .article-body > h3,
  .article-body > h4,
  .article-body > ul,
  .article-body > ol,
  .article-body > blockquote,
  .article-body > .warning-line,
  .article-body > .note-box,
  .article-body > .final-line,
  .article-body > .life-belongs,
  .article-body > .facts-box,
  .article-body > .article-image,
  .article-body > .article-gallery,
  .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;
  }

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

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

@media (min-width: 1100px) {
  .article-body,
  .quote-box {
    --article-width: 850px;
  }
}


/* 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;
}


.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;
}


/* =========================================================
   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;
  }
}


/* =========================================================
   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;
  }
}