/* Brand gold: bright on the app/dark surfaces, deep gold on paper surfaces. */
:root{--link-gold:#f4c766;--link-hover:#ffe3a1}
html[data-link-surface="light"]{--link-gold:#795400;--link-hover:#583c00}
.content,.links{--link-gold:#795400;--link-hover:#583c00}
.answer,html[data-link-surface="light"] .site-header,html[data-link-surface="light"] .cta-box{--link-gold:#f4c766;--link-hover:#ffe3a1}
/* Plain links only. Classed components own ALL their states; do not add global
   a:any-link / a:hover rules here. A text-only component may opt in with the
   sole class "text-link"; classless controls opt out with data-link-component.
   Role buttons and inline-styled controls are never implicitly opted in. */
html body a:is(:not([class]):not([style]),[class="text-link"]):not([role="button"]):not([data-link-component]) {
  color:var(--link-gold);text-underline-offset:3px;
}
html body a:is(:not([class]):not([style]),[class="text-link"]):not([role="button"]):not([data-link-component]):visited {color:var(--link-gold)}
html body a:is(:not([class]):not([style]),[class="text-link"]):not([role="button"]):not([data-link-component]):is(:hover,:focus-visible) {
  color:var(--link-hover);text-decoration:underline;
}
html body a:is(:not([class]):not([style]),[class="text-link"]):not([role="button"]):not([data-link-component]):focus-visible {
  outline:2px solid currentColor;outline-offset:3px;border-radius:2px;
}
.mj-pr-foot a{display:inline-flex;align-items:center;min-height:44px}
@media(prefers-color-scheme:dark){html[data-link-surface="auto"]{--link-gold:#f4c766;--link-hover:#ffe3a1}}
@media(prefers-color-scheme:light){html[data-link-surface="auto"]{--link-gold:#795400;--link-hover:#583c00}}