/* Symbol Mirror — shared chrome, one source of truth.
 *
 * Every page links this LAST in <head>, after its own inline <style>, so these
 * rules win on equal specificity and the ported tools stop each carrying a
 * private copy of the page top, the divider, the help button and the footer.
 *
 * Nothing here restyles a tool's own working surface — only the furniture
 * around it: page head, divider, the two head buttons, the footer, and the
 * reading sizes of body text.
 *
 * Solid colour only, and solid means the gold itself. The ornament had been
 * #C39A47; flattening that against the abyss produced an olive,
 * which is drift, not a flat equivalent. The line and the mark are the house
 * gold #C39A47 and are not to be dimmed.
 */

/* ---------- 1 · the page top ---------- */
/* Same block on every tool: centred title, one line of orientation, then the
   two head buttons, then the divider. */
.page-head,
.headerBar,
.tool-embed--name .page-head{
  position:relative !important;
  width:min(760px,100%) !important;
  margin:var(--s4,40px) auto var(--s4,40px) !important;
  padding:0 0 34px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:14px !important;
  text-align:center !important;
  border-bottom:0 !important;
  box-shadow:none !important;
}

.page-head h1,
.headerBar h1{
  font-family:var(--f-head,"Alegreya",Georgia,serif) !important;
  font-style:italic !important;
  font-weight:500 !important;
  font-size:clamp(40px,6vw,62px) !important;
  line-height:1.05 !important;
  margin:0 !important;
  color:var(--parchment-lt,#F7EED9) !important;
  text-wrap:balance;
}

/* The one orientation line, whatever each tool happens to call it. */
.page-head p,
.page-head .subtitle,
.page-head .orientationNote,
.headerBar .orientationNote,
.page-head-copy .orientationNote{
  font-family:var(--f-body,"Newsreader",Georgia,serif) !important;
  font-style:normal !important;
  font-weight:400 !important;
  font-size:18px !important;
  line-height:1.6 !important;
  color:var(--parchment,#E4D3AF) !important;
  max-width:58ch !important;
  margin:0 auto !important;
  text-align:center !important;
}
.page-head .orientationNote p,
.headerBar .orientationNote p,
.page-head-copy .orientationNote p{margin:0 0 6px !important}
.page-head .orientationNote p:last-child,
.headerBar .orientationNote p:last-child,
.page-head-copy .orientationNote p:last-child{margin-bottom:0 !important}

.page-head-copy{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:14px !important;
  width:100% !important;
  text-align:center !important;
}

/* ---------- 2 · the divider ---------- */
/* One ornament, one geometry, one colour, on every page top. */
.page-head::after,
.headerBar::after,
.tool-embed--name .page-head::after,
.sm-rule::after{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  bottom:0 !important;
  width:calc((78px * 2) + (12px * 2) + 6px) !important;
  max-width:68vw !important;
  height:20px !important;
  transform:translateX(-50%) !important;
  display:block !important;
  border:0 !important;
  box-shadow:none !important;
  pointer-events:none !important;
  background:
    linear-gradient(90deg,#C39A47,#C39A47) left 50% / 78px 2px no-repeat,
    linear-gradient(90deg,#C39A47,#C39A47) right 50% / 78px 2px no-repeat !important;
}
.page-head::before,
.headerBar::before,
.tool-embed--name .page-head::before,
.sm-rule::before{
  content:"" !important;
  position:absolute !important;
  left:50% !important;
  bottom:6px !important;
  width:6px !important;
  height:6px !important;
  transform:translateX(-50%) rotate(45deg) !important;
  display:block !important;
  border:0 !important;
  background:#C39A47 !important;
  box-shadow:none !important;
  pointer-events:none !important;
  z-index:1 !important;
}
/* Card + Card carried the ornament as its own element. Fold it into the
   page-head version above rather than drawing a second, different one. */
.page-head-rule{display:none !important}

/* A standalone divider for section breaks that are not page tops. */
.sm-rule{
  position:relative;
  height:20px;
  margin:var(--s5,64px) auto;
  width:100%;
}

/* ---------- 3 · the two head buttons ---------- */
/* "What does this tool do?" and the tip button sit side by side, same row,
   same size, on every tool. */
.head-actions{
  display:flex !important;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:0 auto;
}

.help-button,
.help-question-link,
.help-link-primary,
#helpBtn,
.sm-btn{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:11px 22px !important;
  font-family:var(--f-menu,"Cormorant Garamond",Georgia,serif) !important;
  font-weight:600 !important;
  font-size:13px !important;
  letter-spacing:.2em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  cursor:pointer !important;
  border-radius:var(--r-control,4px) !important;
  color:var(--parchment,#E4D3AF) !important;
  background:transparent !important;
  border:1px solid var(--turquoise-deep,#1E728F) !important;
  box-shadow:none !important;
  position:static !important;
  width:auto !important;
}
.help-button:hover,
.help-question-link:hover,
.help-link-primary:hover,
#helpBtn:hover,
.sm-btn:hover,
.help-button:focus,
.help-question-link:focus,
.help-link-primary:focus,
#helpBtn:focus,
.sm-btn:focus{
  color:var(--parchment-lt,#F7EED9) !important;
  border-color:var(--turquoise,#1E9BC6) !important;
}
/* Keyboard focus is marked on :focus as well as :focus-visible — the tools set
   focus in script when a dialog closes, and that has to show. The three ported
   pages each wrote `outline:none !important` on their own copy of this button,
   so the selectors below match their weight and win on source order. */
.help-button:focus,
.help-button:focus-visible,
.help-question-link:focus,
.help-question-link:focus-visible,
.help-link-primary:focus,
.help-link-primary:focus-visible,
#helpBtn:focus,
#helpBtn:focus-visible,
#helpBtn.help-question-link:focus,
#helpBtn.help-question-link:focus-visible,
.headerBar #helpBtn.help-question-link:focus,
.headerBar #helpBtn.help-question-link:focus-visible,
.headerBar.calendarPageHead #helpBtn.help-question-link:focus,
.headerBar.calendarPageHead #helpBtn.help-question-link:focus-visible,
.tool-embed--name .help-question-link:focus,
.tool-embed--name .help-question-link:focus-visible,
.sm-btn:focus,
.sm-btn:focus-visible,
.tip-cta:focus,
.tip-cta:focus-visible{
  outline:2px solid var(--cheiro-light-gold,#F2DCA3) !important;
  outline-offset:3px !important;
}

/* The tip button. Gold, filled — the only filled button in the chrome, so it
   reads as the one thing being asked for. Above the fold on every page. */
.tip-cta{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:11px 24px !important;
  font-family:var(--f-menu,"Cormorant Garamond",Georgia,serif) !important;
  font-weight:600 !important;
  font-size:13px !important;
  letter-spacing:.2em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  cursor:pointer !important;
  border-radius:var(--r-control,4px) !important;
  color:var(--abyss,#061F2E) !important;
  background:var(--gold,#C39A47) !important;
  border:1px solid var(--gold,#C39A47) !important;
  box-shadow:none !important;
}
.tip-cta:hover,
.tip-cta:focus-visible{
  background:var(--cheiro-light-gold,#F2DCA3) !important;
  border-color:var(--cheiro-light-gold,#F2DCA3) !important;
  color:var(--abyss,#061F2E) !important;
}
.tip-note{
  font-family:var(--f-body,"Newsreader",Georgia,serif);
  font-size:15px;
  font-style:italic;
  color:var(--parchment,#E4D3AF);
  margin:0;
}

/* Secondary aids ("Find a card by birthday", "Find a card from a name") stay
   quiet links, but at a readable size and with a real hit area. */
.help-link{
  font-family:var(--f-menu,"Cormorant Garamond",Georgia,serif) !important;
  font-weight:600 !important;
  font-size:13px !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:var(--turquoise,#1E9BC6) !important;
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.help-link:hover{color:var(--cheiro-light-gold,#F2DCA3) !important}

/* ---------- 4 · the footer ---------- */
/* turquoise-deep on abyss is 3.10:1 — under AA for 13px text. The footer
   uses the lighter turquoise, which is 5.28:1. */
.foot,
.sm-foot{
  margin-top:var(--s6,96px) !important;
  text-align:center !important;
  font-family:var(--f-menu,"Cormorant Garamond",Georgia,serif) !important;
  font-size:13px !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:var(--turquoise,#1E9BC6) !important;
}
.foot a,
.sm-foot a{
  color:var(--turquoise,#1E9BC6) !important;
  text-decoration:none !important;
  display:inline-flex !important;
  align-items:center !important;
  min-height:44px !important;
  padding-inline:10px !important;
}
.foot a:hover,
.sm-foot a:hover{color:var(--cheiro-light-gold,#F2DCA3) !important}
.foot .tip,
.sm-foot .tip{color:var(--gold,#C39A47) !important}
.foot .tip:hover,
.sm-foot .tip:hover{color:var(--cheiro-light-gold,#F2DCA3) !important}
/* The way in is a gold mark sitting with the social icons - the same size and
   hit area, a shape that is not a network's logo, and no label. */
.foot .egg,
.sm-foot .egg,
.foot-social .egg{color:var(--gold,#C39A47) !important; letter-spacing:0 !important}
.foot .egg:hover,
.sm-foot .egg:hover,
.foot-social .egg:hover{color:var(--cheiro-light-gold,#F2DCA3) !important}

/* ---------- 5 · reading sizes ---------- */
/* The whole site was set a step small for a large display. Body copy and the
   labelled read-outs move up; nothing inside a canvas or a legend is touched. */
.help-panel p,
.help-section p,
.help-panel li{font-size:17px !important; line-height:1.6 !important}
.help-section h2,
.help-section h3{font-size:14px !important}
.help-close{font-size:13px !important; min-height:44px !important}

/* Calendar pinned its help button to the corner of the header bar; it now sits
   in the shared actions row with everything else. */
.headerBar #helpBtn,
.head-actions #helpBtn,
.head-actions .help-button{
  position:static !important;
  top:auto !important;
  right:auto !important;
  margin:0 !important;
}

@media (max-width:700px){
  .page-head,
  .headerBar,
  .tool-embed--name .page-head{
    margin:var(--s3,24px) auto var(--s3,24px) !important;
    padding-bottom:30px !important;
    gap:12px !important;
  }
  .page-head h1,
  .headerBar h1{font-size:34px !important}
  .page-head p,
  .page-head .subtitle,
  .page-head .orientationNote,
  .headerBar .orientationNote,
  .page-head-copy .orientationNote{font-size:16px !important}
  .head-actions{width:100%}
}

.head-actions--start{justify-content:flex-start !important}

/* ---------- 6 · the help dialog ---------- */
/* One dialog on all four tools. Solid parchment, one hairline, no blur, no
   shadow, no translucent fill. Selectors carry the id so they outrank the
   copies each ported tool shipped with. */
.help-modal[hidden],
#helpModal.help-modal[hidden],
#helpModal.help-modal[role="dialog"][hidden]{display:none !important}

.help-modal,
#helpModal.help-modal,
#helpModal.help-modal[role="dialog"]{
  position:fixed !important;
  inset:0 !important;
  z-index:10000 !important;
  display:grid !important;
  place-items:center !important;
  padding:24px !important;
  isolation:isolate !important;
}
.help-backdrop,
#helpModal .help-backdrop{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  /* A dialog used to sit on a translucent scrim. Solid colour is the rule, and
     a solid scrim deletes the page behind it, so there is no scrim: the panel
     stands on its own hairline and the page stays where the reader left it. */
  background:transparent !important;
  backdrop-filter:none !important;
}
.help-panel,
#helpModal .help-panel{
  position:relative !important;
  z-index:1 !important;
  width:min(600px,100%) !important;
  max-height:min(78vh,660px) !important;
  overflow:auto !important;
  overscroll-behavior:contain !important;
  padding:64px 28px 28px !important;
  color:var(--ink,#171717) !important;
  background:var(--parchment-lt,#F7EED9) !important;
  border:1px solid #C39A47 !important;
  border-radius:var(--r-panel,12px) !important;
  clip-path:none !important;
  box-shadow:none !important;
  text-align:left !important;
  font-family:var(--f-body,"Newsreader",Georgia,serif) !important;
}
.help-section,
#helpModal .help-section,
.help-section p,
#helpModal .help-section p,
.help-section h2,
#helpModal .help-section h2,
.help-section h3,
#helpModal .help-section h3{text-align:left !important}
/* The panel is parchment. Anything the ported pages coloured for the dark
   ground - bold runs naming a button, list items, small print - was parchment
   on parchment and read as a hole in the sentence. */
.help-panel,
.help-panel p,
.help-panel li,
.help-panel strong,
.help-panel b,
.help-panel em,
.help-panel h2,
.help-panel h3,
.help-panel h4,
.help-panel span:not(.sr),
.help-panel code,
#helpModal .help-panel strong,
#calendarModal .help-panel strong{color:var(--ink,#171717) !important}
/* A suit keeps its colour. The blanket ink rule above painted the hearts and
   diamonds in the birthday chart black, which is simply the wrong card. */
.help-panel .suit-red,
.help-panel .card-suit-red,
.cal-card .suit-red,
#calendarModal .suit-red,
#calendarModal .card-suit-red{color:var(--suit-red,#B72A22) !important}
.help-panel .suit-black,
.help-panel .card-suit-black,
.cal-card .suit-black,
#calendarModal .suit-black,
#calendarModal .card-suit-black{color:var(--ink,#171717) !important}
.help-panel strong,
.help-panel b{font-weight:700 !important}
.help-section + .help-section,
#helpModal .help-section + .help-section{
  margin-top:18px !important;
  padding-top:16px !important;
  border-top:1px solid #C39A47 !important;
}
.help-section h2,
#helpModal .help-section h2,
.help-section h3,
#helpModal .help-section h3{
  margin:0 0 8px !important;
  font-family:var(--f-menu,"Cormorant Garamond",Georgia,serif) !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:.16em !important;
  line-height:1.25 !important;
  text-transform:uppercase !important;
  color:var(--turquoise-deep,#1E728F) !important;
  text-shadow:none !important;
}
.help-section p,
#helpModal .help-section p{
  margin:0 0 8px !important;
  font-size:17px !important;
  line-height:1.6 !important;
  color:#171717 !important;
}
.help-section p:last-child,
#helpModal .help-section p:last-child{margin-bottom:0 !important}
.help-close,
#helpModal .help-close{
  position:absolute !important;
  top:16px !important;
  right:16px !important;
  min-width:80px !important;
  min-height:44px !important;
  padding:10px 16px !important;
  border:1px solid var(--turquoise-deep,#1E728F) !important;
  border-radius:var(--r-control,4px) !important;
  background:transparent !important;
  color:var(--turquoise-deep,#1E728F) !important;
  cursor:pointer !important;
  font-family:var(--f-menu,"Cormorant Garamond",Georgia,serif) !important;
  font-size:13px !important;
  font-weight:600 !important;
  letter-spacing:.16em !important;
  line-height:1 !important;
  text-transform:uppercase !important;
  clip-path:none !important;
  box-shadow:none !important;
}
/* The close control is reached by keyboard when the dialog opens, so it takes
   a plain :focus ring as well — :focus-visible alone left it unmarked. */
.help-close:hover,
#helpModal .help-close:hover,
.help-close:focus,
#helpModal .help-close:focus,
.help-close:focus-visible,
#helpModal .help-close:focus-visible{
  color:var(--suit-red,#B72A22) !important;
  border-color:var(--suit-red,#B72A22) !important;
}
.help-close:focus,
#helpModal .help-close:focus{
  outline:2px solid var(--cheiro-light-gold,#F2DCA3) !important;
  outline-offset:3px !important;
}

/* ---------- 7 · out-specifying the three private copies ---------- */
/* Calendar drew the help control as a gold italic underlined link, Name as a
   bare button, Card + Card as a bordered chip. It is one control now, so these
   selectors match the heaviest of the three and win on source order. */
.head-actions .help-button,
.head-actions .help-question-link,
.head-actions .help-link,
.head-actions .help-link-primary,
.head-actions #helpBtn,
#helpBtn.help-question-link,
.headerBar #helpBtn.help-question-link,
.headerBar.calendarPageHead #helpBtn.help-question-link,
.tool-embed--name .help-question-link,
.cc-form .help-link-primary{
  position:static !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  width:auto !important;
  max-width:100% !important;
  min-width:0 !important;
  min-height:44px !important;
  margin:0 !important;
  padding:11px 22px !important;
  border:1px solid var(--turquoise-deep,#1E728F) !important;
  border-radius:var(--r-control,4px) !important;
  clip-path:none !important;
  background:transparent !important;
  box-shadow:none !important;
  color:var(--parchment,#E4D3AF) !important;
  cursor:pointer !important;
  font-family:var(--f-menu,"Cormorant Garamond",Georgia,serif) !important;
  font-size:13px !important;
  font-style:normal !important;
  font-weight:600 !important;
  letter-spacing:.2em !important;
  line-height:1 !important;
  text-align:center !important;
  text-decoration:none !important;
  text-transform:uppercase !important;
  transform:none !important;
}
.head-actions .help-button:hover,
.head-actions .help-question-link:hover,
.head-actions .help-link-primary:hover,
.head-actions #helpBtn:hover,
#helpBtn.help-question-link:hover,
#helpBtn.help-question-link:focus-visible,
.headerBar #helpBtn.help-question-link:hover,
.headerBar.calendarPageHead #helpBtn.help-question-link:hover{
  color:var(--parchment-lt,#F7EED9) !important;
  background:transparent !important;
  border:1px solid var(--turquoise,#1E9BC6) !important;
  text-decoration:none !important;
}
/* The tip button must not inherit the quiet outline from .help-link. */
.head-actions .tip-cta{
  color:var(--abyss,#061F2E) !important;
  background:var(--gold,#C39A47) !important;
  border:1px solid var(--gold,#C39A47) !important;
  font-style:normal !important;
  text-decoration:none !important;
  line-height:1 !important;
}
.head-actions .tip-cta:hover{
  color:var(--abyss,#061F2E) !important;
  background:var(--cheiro-light-gold,#F2DCA3) !important;
  border-color:var(--cheiro-light-gold,#F2DCA3) !important;
}

/* Name sat its whole embed on a clamped top margin, so its title started
   ~90px lower than the other three. The page head owns that spacing now. */
.tool-embed--name{margin-top:0 !important}

/* Dense read-outs that were still set for a small screen. */
.batch-output-table{font-size:15px !important}
.cc-context-help,
.cc-funnel-foot,
.cc-domains-sub{font-size:15px !important}

/* The two-person legend swatch had both halves painted parchment: "P1" sat at
   2.26 on the gold, "P2" was parchment on parchment and simply not there.
   Ink on both, and the gold half flattened off its .9 alpha. */
.splitKey{
  background:linear-gradient(180deg,#C39A47 0 50%,#F7EED9 50% 100%) !important;
  border:1px solid #C39A47 !important;
  font-size:9px !important;
}
.splitKey,
.splitKey span{color:var(--ink,#171717) !important;
  font-family:var(--f-menu,"Cormorant Garamond",Georgia,serif) !important}
/* The moon separator and the legend keys had no family of their own and fell
   back to Times. Three serifs, no fourth. */
.moonSlash,
.legend span,
.legendItem span{font-family:var(--f-menu,"Cormorant Garamond",Georgia,serif)}

/* ---------- 8 · touch targets ---------- */
/* Every control a finger has to hit clears 44px on a phone. The tools shipped
   several at 34-38px. Links inside running prose keep their own size. */
@media (max-width:760px){
  button,
  .btn,
  a.btn,
  a.tip-cta,
  input[type="button"],
  input[type="submit"]{
    min-height:44px !important;
  }
}

/* ---------- 9 · one close control ---------- */
/* Five dialogs across four tools drew their own: parchment on parchment here,
   turquoise outline there, red when focused. One control now, and because the
   panels behind it are sometimes parchment and sometimes abyss, it carries its
   own abyss plate so it looks identical on both. */
.help-close,
#helpModal .help-close,
#calendarModal .help-close,
.closeBtn,
.modalHeader .closeBtn,
#closeModal,
#closeInfoModal{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:44px !important;
  padding:11px 22px !important;
  font-family:var(--f-menu,"Cormorant Garamond",Georgia,serif) !important;
  font-weight:600 !important;
  font-size:13px !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  text-decoration:none !important;
  color:var(--parchment-lt,#F7EED9) !important;
  background:var(--abyss,#061F2E) !important;
  border:1px solid var(--turquoise-deep,#1E728F) !important;
  border-radius:var(--r-control,4px) !important;
  box-shadow:none !important;
  cursor:pointer !important;
  width:auto !important;
}
.help-close:hover,
#helpModal .help-close:hover,
#calendarModal .help-close:hover,
.closeBtn:hover,
.modalHeader .closeBtn:hover,
#closeModal:hover,
#closeInfoModal:hover,
.help-close:focus,
#helpModal .help-close:focus,
#calendarModal .help-close:focus,
.closeBtn:focus,
#closeModal:focus,
#closeInfoModal:focus,
.help-close:focus-visible,
#helpModal .help-close:focus-visible,
.closeBtn:focus-visible{
  color:var(--cheiro-light-gold,#F2DCA3) !important;
  background:var(--abyss,#061F2E) !important;
  border-color:var(--cheiro-light-gold,#F2DCA3) !important;
}
.help-close:focus,
#helpModal .help-close:focus,
.closeBtn:focus,
#closeModal:focus,
#closeInfoModal:focus{
  outline:2px solid var(--cheiro-light-gold,#F2DCA3) !important;
  outline-offset:3px !important;
}

/* ---------- 10 · the two social links ---------- */
/* They existed on the Magic Squares page and nowhere else. Same footer row as
   everything else now: gold, 44px of hit area, no fill. */
.foot-social{
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  margin-inline-start:6px !important;
}
.foot .social,
.sm-foot .social,
.foot-social .social{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-width:44px !important;
  min-height:44px !important;
  padding:0 !important;
  color:var(--gold,#C39A47) !important;
}
.foot-social .social svg{width:17px; height:17px; display:block}
.foot .social:hover,
.sm-foot .social:hover,
.foot-social .social:hover{color:var(--cheiro-light-gold,#F2DCA3) !important}

/* ---------- 11 · skip to content ---------- */
/* The plain pages carry this rule in sm.css; the ported tools have their own
   stylesheets and had no skip link at all. One definition here so every page
   in the site starts the same way for a keyboard. */
.skip{
  position:absolute !important; inset-inline-start:-9999px; top:0; z-index:50;
  background:var(--parchment-lt,#F7EED9); color:var(--ink,#171717);
  padding:10px 16px; border-radius:var(--r-control,6px);
  font-family:var(--f-menu,"Newsreader",Georgia,serif);
  letter-spacing:.16em; text-transform:uppercase; font-size:13px;
  min-height:44px; display:inline-flex; align-items:center;
  text-decoration:none;
}
.skip:focus{inset-inline-start:var(--s2,16px); top:var(--s2,16px)}

/* The copyright line the magic squares page has always carried. It was the
   only page with it, the same way it was once the only page with the social
   icons. Same fix: state it here, so every footer has it. Spacing matches
   that page's own rule so the two do not read as different lines.

   Gold, not the footer's turquoise. In turquoise it sat in the middle of the
   link row and read as one more link. Gold is what the tip already uses, so
   the line separates from the links without introducing a colour. */
.foot .foot-copy,
.sm-foot .foot-copy{
  margin-top:8px !important;
  letter-spacing:.08em !important;
  color:var(--gold,#C39A47) !important;
}
