/* ==========================================================================
   Canonical typography
   --------------------------------------------------------------------------
   This is the single source of the site's body and heading type. It used to
   come from whichever legacy sheet a page happened to load, so approved pages
   disagreed with each other: stararts.css gave "Gill Sans" at 16px with Arial
   headings, textstwo.css gave Arial at 14.4px with Georgia headings, text.css
   gave system-ui. Gill Sans is not among the webfonts we load, so on 307 pages
   the body font only resolved on machines that happened to have it installed.

   Selectors are deliberately two elements deep (html body, html h1). The
   legacy sheets load AFTER this one, so a bare `body` here would lose to their
   `body`. 0-0-2 beats their 0-0-1, and stays correct once they are deleted.

   Tailwind utilities are 0-1-0 and still win, which is what we want: this sets
   the default, a page's own `text-4xl` or `font-mono` overrides it per element.
   ========================================================================== */

html body {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-size: 17px;
  line-height: 1.65;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html h1,
html h2,
html h3,
html h4,
html h5,
html h6 {
  font-family: "EB Garamond", Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}

/* The Star Art formulas and any other deliberately monospaced run keep their
   own face; EB Garamond must not inherit into them. */
/* ==========================================================================
   Named legacy classes
   --------------------------------------------------------------------------
   Unlike the styleN names, these carry meaning, so they move here rather than
   being translated away page by page. Each had up to three disagreeing
   definitions across text.css / textstwo.css / stararts.css - .names was 3em,
   2em and a clamp depending only on which sheet a page happened to load. The
   clamped textstwo versions were the modernized ones and are taken as
   canonical.

   Font-family is deliberately not set: these used to force Verdana or Georgia,
   which now fights the canonical type above. Selectors are `main .x` (0-1-1) so
   they beat the legacy sheets' bare `.x` (0-1-0) while those still load, and
   stay correct once they are gone.
   ========================================================================== */

main .names {
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.15;
  display: block;
  margin-bottom: 0.5rem;
}

main .letters {
  font-size: clamp(0.9rem, 3vw, 1.05rem);
  font-style: italic;
  display: block;
  margin-bottom: 0.5rem;
}

main .sequences {
  font-size: clamp(1.2rem, 4vw, 1.5rem);
  letter-spacing: 0.1em;
  text-align: center;
  display: block;
  margin: 0.5rem 0;
}

main .revealings {
  font-size: clamp(0.8rem, 2.5vw, 0.95rem);
  opacity: 0.8;
  display: block;
  margin-bottom: 1rem;
}

main .stararts {
  text-align: center;
  font-size: clamp(1.2rem, 4vw, 1.75rem);
  line-height: 1.3;
}

main .heartlings {
  clear: both;
  font-size: 1.25em;
  text-align: center;
}

main .centered { text-align: center; }
main .left     { text-align: left; }
main .right    { text-align: right; }
main .small    { font-size: 0.85em; }

main .copyright {
  font-size: 0.85em;
  color: #6a5acd;
  font-style: italic;
  text-align: right;
  margin-top: 1rem;
  padding-right: 0.5rem;
  line-height: 1.4;
}

html.dark main .copyright { color: #a9a0e8; }

/* Single-page classes, carried over as they were. */
main .e                  { border-top: 3em solid #2563eb; padding: 1em 15px 0 0; margin-right: 10px; text-align: justify; }
main .republicans        { color: #2f4f4f; font-weight: bold; }
html.dark main .republicans { color: #9ec4c4; }
main .mailchimpsignup    { border-left: 2px solid #2563eb; padding: 1em; }
main .maillist           { font-size: 1em; margin-top: 0.2em; margin-bottom: 1.2em; }
main .indicates-required { font-weight: bold; font-size: 90%; }

/* A reading container for rebuilt long-form pages. The house link treatment is
   a long Tailwind run repeated on every anchor; on a page with dozens of links
   that is more markup than text. Pages opt in with class="gwoe-prose". */
.gwoe-prose a {
  color: #9f1239;
  text-decoration: underline;
  text-decoration-color: #fecdd3;
  text-underline-offset: 4px;
}

.gwoe-prose a:hover { color: #881337; text-decoration-color: #9f1239; }

html.dark .gwoe-prose a { color: #fb7185; text-decoration-color: rgba(159, 18, 57, 0.5); }
html.dark .gwoe-prose a:hover { color: #fda4af; }

/* Proclamations. The page had these as magenta gradient boxes with white text;
   they are the one genuinely distinct voice on it, so they stay distinct - as
   an inverted panel in the house palette rather than a gradient. */
.gwoe-proclaim {
  background: #1c1917;
  color: #fafaf9;
  padding: 2.5rem 2rem;
  margin: 3rem 0;
  text-align: center;
  border-left: 3px solid #9f1239;
}

/* In dark mode the page itself is #0c0a09, so the panel has to sit lighter
   than the page rather than darker, or it stops reading as a panel. */
html.dark .gwoe-proclaim { background: #1c1917; border-left-color: #fb7185; box-shadow: inset 0 0 0 1px #292524; }
.gwoe-proclaim a { color: #fda4af; text-decoration-color: rgba(253, 164, 175, 0.5); }
.gwoe-proclaim a:hover { color: #fecdd3; }

/* `main p` justifies by default and lands on the paragraph directly, so it beats
   the panel's inherited centring. Restated here rather than left to the caller
   to remember a text-center class. */
.gwoe-proclaim p { text-align: center; hyphens: manual; }
.gwoe-proclaim .text-left p { text-align: left; }

/* Raw search-query logs: many short lines, closer to an index than to prose. */
.gwoe-querylog {
  columns: 2;
  column-gap: 2.5rem;
  font-size: 0.95rem;
  line-height: 1.7;
}

.gwoe-querylog p { margin: 0 0 0.35rem; break-inside: avoid; text-align: left; hyphens: manual; }

@media (max-width: 640px) { .gwoe-querylog { columns: 1; } }

/* Legacy lists and tables carry no class of their own. Tailwind's preflight
   strips list markers and table spacing, and the legacy sheets used to put them
   back (`ul { list-style-type: square }`, `body, td, th { margin: 1em }`).
   Scoped to unclassed elements so modernized pages keep their own utilities. */
main ul:not([class]),
main ol:not([class]) {
  list-style: revert;
  margin: revert;
  padding: revert;
}

main table:not([class]) {
  border-collapse: collapse;
  margin: 1.5rem 0;
}

main table:not([class]) td,
main table:not([class]) th {
  padding: 0.4rem 0.75rem;
  vertical-align: top;
  text-align: left;
}

/* Default reading measure.
   Unmodernized pages have no wrapper of their own - their width used to come
   from the legacy sheets' `body { margin: 1em }`, so dropping a sheet left the
   text running the full width of the window. This gives every page a measure.

   Modernized pages are unaffected: their own <article> is max-w-3xl (48rem)
   and centred, which is narrower than this, so it keeps winning. */
html main {
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2.5rem);
  padding-block: 1rem 3rem;
}

html pre,
html code,
html kbd,
html samp {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}


.star-art {
  border: 1px solid var(--hairline, #e5dfdd);
  border-left: 3px solid var(--gwoe-link);
  background: rgba(255, 255, 255, 0.55);
  padding: 2rem 1.75rem;
  margin: 0 0 3rem;
}


.dark .star-art {
  border-color: #2c2726;
  border-left-color: var(--gwoe-link);
  background: rgba(255, 255, 255, 0.02);
}


.star-art__name {
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.06em;
  margin: 0;
  text-align: center;
  text-wrap: balance;
}




main .star-art p {
  text-align: center;
  hyphens: manual;
}


.star-art-toc {
  border-top: 1px solid var(--hairline, #e5dfdd);
  border-bottom: 1px solid var(--hairline, #e5dfdd);
  padding: 1.5rem 0;
  margin: 0 0 3rem;
}


.dark .star-art-toc { border-color: #2c2726; }


.star-art-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}


.star-art-toc li { margin: 0; }


main p,
main dd {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}


main .grid p,
main .grid dd,
main .flex p,
main li p,
main td p,
main th p {
  text-align: left;
  hyphens: manual;
}


main .text-left p,
main .text-left dd {
  text-align: left;
}


main .text-center p,
main .text-center dd,
main figcaption,
main address,
main blockquote figcaption {
  text-align: center;
  hyphens: manual;
}


:root {
  --gwoe-link: #9f1239;       /* rose-800 */
  --gwoe-link-hover: #4c0519; /* rose-950 */
}


.dark {
  --gwoe-link: #fb7185;       /* rose-400 */
  --gwoe-link-hover: #fecdd3; /* rose-200 */
}


a {
  color: var(--gwoe-link);
  text-decoration: none;
}


a:hover {
  text-decoration: underline;
}


.gwo-beta-banner {
  margin: 0 0 1rem;
  background: linear-gradient(135deg, #1d3557, #355070);
  color: #f8f4ec;
  border-bottom: 4px solid #f4a261;
  box-shadow: 0 10px 24px rgba(29, 53, 87, 0.22);
}


.gwo-beta-banner__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: center;
  justify-content: center;
  width: min(1100px, calc(100% - 24px));
  margin: 0 auto;
  padding: 0.85rem 0;
  text-align: center;
  font-family: Verdana, Arial, sans-serif;
  font-size: 0.96rem;
  line-height: 1.5;
}


.gwo-beta-banner__inner strong {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffd6a5;
}


.quote {
  font-family: "Georgia", "Times New Roman", serif;
  font-size: clamp(1rem, 2.2vw + 0.5rem, 1.5rem); /* ~16px–24px */
  font-style: italic;
  color: #2c2c2c;
  line-height: 1.6;
  text-align: center;
  margin: 1.5rem auto;
  padding: 0 1rem;
  max-width: 60ch;
}


.gwo-page-title-serif {
  font-family: Georgia, "Times New Roman", serif;
}


.last-updated {
  color: rgb(168 162 158);
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* The stamp reads as a record of the page rather than part of it, so it sits
     to the right. Without this it inherited the body's left alignment.
     textstwo.css used to centre it on the pages that loaded that sheet, which
     is why the stamp sat differently from page to page; that sheet is gone. */
  text-align: right;
}


img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}


.header-section {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}


.intro-card {
  background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
  border-radius: 16px;
  padding: 2rem;
  margin: 2rem 0;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  border-left: 5px solid #c44569;
}


.intro-card p {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #2c3e50;
  margin: 0.5rem 0;
}


.intro-card a {
  color: #8b2635;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}


.intro-card a:hover {
  color: #c44569;
  border-bottom-color: #c44569;
}


.star-art-section {
  max-width: 1000px;
  margin: 4rem auto;
  padding: 0 1rem;
}


.star-art-header-card {
  background: linear-gradient(135deg, #8b2635 0%, #c44569 100%);
  border-radius: 20px;
  padding: 3rem 2rem;
  text-align: center;
  box-shadow: 0 15px 40px rgba(139, 38, 53, 0.4);
  margin-bottom: 2rem;
}


.star-art-name {
  font-size: 3rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
  font-family: Georgia, serif;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}


.star-art-subtitle {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  font-style: italic;
  margin: 0.5rem 0;
}


.star-art-letters {
  font-size: 1.8rem;
  font-weight: 600;
  color: #fff5f5;
  letter-spacing: 0.3em;
  margin-top: 1rem;
}


.star-art-poetry-card {
  background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
  border-radius: 20px;
  padding: 3rem 2.5rem;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
  border: 2px solid rgba(139, 38, 53, 0.1);
  margin-bottom: 2rem;
}


.star-art-poetry {
  font-size: 1.15rem;
  line-height: 2;
  color: #2c3e50;
  font-family: Georgia, serif;
  text-align: center;
  margin: 0;
}


.americans-voicings-page {
  --americans-ink: #243447;
  --americans-ink-soft: #536275;
  --americans-plum: #8b2d5f;
  --americans-plum-deep: #6f214a;
  --americans-gold: #d7b65f;
  --americans-cream: #fffaf1;
  --americans-surface: rgba(255, 255, 255, 0.92);
  --americans-line: rgba(111, 33, 74, 0.12);
  --americans-shadow: 0 18px 40px rgba(47, 58, 76, 0.12);
  box-sizing: border-box;
  margin: 0 auto 4rem;
  padding: clamp(1rem, 2.4vw, 2rem);
  color: var(--americans-ink);
  font-family: "Avenir Next", "Gill Sans", "Trebuchet MS", sans-serif;
  background: transparent;
}


.americans-voicings-page *,
.americans-voicings-page *::before,
.americans-voicings-page *::after {
  box-sizing: inherit;
}


.americans-voicings-page a {
  color: var(--americans-plum);
  text-decoration: none;
}


.americans-voicings-page a:hover,
.americans-voicings-page a:focus-visible {
  color: var(--americans-plum-deep);
}


.americans-voicings-sonic {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.75rem);
}


.americans-voicings-intro-card,
.americans-voicings-audio-card,
.americans-voicings-related-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}


.americans-voicings-intro-card {
  padding: clamp(1.4rem, 3vw, 2.5rem);
  background: transparent;
}


.americans-voicings-title {
  margin: 0 0 1rem;
  font-family: "Avenir Next", "Gill Sans", "Trebuchet MS", sans-serif;
  font-size: clamp(2rem, 4vw, 3.3rem);
  line-height: 1.1;
  letter-spacing: 0.01em;
  font-weight: 800;
  color: #7a1850;
  text-align: left;
}


.americans-voicings-intro-main,
.americans-voicings-message,
.americans-voicings-related-card p {
  margin: 0;
  font-size: clamp(1.05rem, 1.6vw, 1.26rem);
  line-height: 1.75;
  color: var(--americans-ink);
}


.americans-voicings-message {
  color: var(--americans-ink-soft);
}


.americans-voicings-highlight-box {
  margin: 1.4rem 0 1.2rem;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}


.americans-voicings-emphasis,
.americans-voicings-pronunciation,
.americans-voicings-etymology {
  margin: 0;
  font-size: clamp(1rem, 1.45vw, 1.15rem);
  line-height: 1.7;
}


.americans-voicings-pronunciation,
.americans-voicings-etymology {
  margin-top: 0.35rem;
  color: var(--americans-ink-soft);
}


.americans-voicings-eracism {
  color: var(--americans-plum-deep);
  letter-spacing: 0.08em;
}


.americans-voicings-audio-card {
  padding: clamp(1.35rem, 3vw, 2.2rem);
  background: transparent;
}


.americans-voicings-audio-header {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 1rem;
}


.americans-voicings-audio-duration {
  margin: 0;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: rgba(215, 182, 95, 0.16);
  color: var(--americans-plum-deep);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}


.americans-voicings-audio-warning {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1.15rem;
  padding: 0.95rem 1rem;
  border-radius: 1rem;
  background: rgba(255, 244, 220, 0.92);
  border: 1px solid rgba(215, 182, 95, 0.34);
  color: #6f4d13;
  font-size: 0.98rem;
  line-height: 1.6;
}


.americans-voicings-warning-icon {
  flex: 0 0 auto;
  margin-top: 0.1rem;
  color: #9a6510;
}


.americans-voicings-audio-controls {
  display: flex;
  gap: 0.85rem;
  flex-wrap: wrap;
  margin-top: 1.15rem;
}


.americans-voicings-audio-btn {
  appearance: none;
  border: 1px solid rgba(111, 33, 74, 0.16);
  border-radius: 999px;
  padding: 0.9rem 1.35rem;
  min-width: 8rem;
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}


.americans-voicings-audio-btn:hover,
.americans-voicings-audio-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 24px rgba(47, 58, 76, 0.12);
  border-color: rgba(111, 33, 74, 0.28);
  outline: none;
}


.americans-voicings-play-btn {
  background: linear-gradient(135deg, #8b2d5f, #b5487e);
  color: #ffffff;
}


.americans-voicings-audio-btn.is-playing {
  background: linear-gradient(135deg, #f4efe5, #fdf8ee);
  color: var(--americans-ink);
}


.americans-voicings-related-card {
  padding: 0.5rem 0 0;
  background: transparent;
  text-align: center;
}


.americans-voicings-star-link {
  font-weight: 800;
  border-bottom: 2px solid rgba(139, 45, 95, 0.22);
}


.americans-voicings-star-link:hover,
.americans-voicings-star-link:focus-visible {
  border-bottom-color: currentColor;
}


.americans-voicings-nowrap {
  white-space: nowrap;
}


@media (min-width: 900px) {.americans-voicings-intro-card {
    padding-right: 0.5rem;
  }


  }

@media (max-width: 640px) {
  .americans-voicings-page {
    width: calc(100vw - 1rem);
    margin-left: calc(50% - 50vw + 0.5rem);
    margin-right: calc(50% - 50vw + 0.5rem);
    padding: 0.7rem 0.35rem;
  }


  .americans-voicings-title {
    font-size: clamp(1.75rem, 7vw, 2.3rem);
  }


  .americans-voicings-intro-card,
.americans-voicings-audio-card {
    padding-left: 0.55rem;
    padding-right: 0.55rem;
  }


  .americans-voicings-intro-card,
.americans-voicings-audio-card,
.americans-voicings-related-card {
    border-radius: 0;
  }


  .americans-voicings-audio-controls {
    flex-direction: column;
  }


  .americans-voicings-audio-btn {
    width: 100%;
  }


  .americans-voicings-nowrap {
    white-space: normal;
  }

}

.copyright-card {
  background: linear-gradient(135deg, #ffe8e8 0%, #fff5f5 100%);
  border-radius: 15px;
  padding: 2rem;
  margin-top: 2rem;
  text-align: center;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}


.copyright-card p {
  font-size: 1.05rem;
  line-height: 1.8;
  color: #2c3e50;
  margin: 0.3rem 0;
}


.quote-text {
  font-size: 1.1rem;
  font-style: italic;
  color: #2c3e50;
  line-height: 1.8;
  margin-bottom: 0.5rem;
}


.quote-text a {
  color: #8b2635;
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}


.quote-text a:hover {
  color: #c44569;
  border-bottom-color: #c44569;
}


.quote-attribution {
  font-size: 1rem;
  color: #5a6c7d;
  font-weight: 600;
  margin-top: 0.5rem;
}


.signature {
  font-weight: 600;
  color: #2e7d32;
}


/* Responsive Design */
@media (max-width: 768px) {
  .header-section,
.star-art-section {
    margin: 2.5rem auto;
  }


  .intro-card,
.star-art-poetry-card {
    padding: 2rem;
  }


  .star-art-header-card {
    padding: 2.5rem 1.5rem;
  }


  .star-art-name {
    font-size: 2.5rem;
  }


  .star-art-letters {
    font-size: 1.5rem;
  }


  .star-art-poetry {
    font-size: 1.1rem;
  }

}

@media (max-width: 600px) {
  .header-section,
.star-art-section {
    margin: 2rem auto;
    padding: 0 0.75rem;
  }


  .intro-card,
.star-art-poetry-card {
    padding: 1.75rem;
    border-radius: 15px;
  }


  .star-art-header-card {
    padding: 2rem 1.25rem;
    border-radius: 15px;
  }


  .star-art-name {
    font-size: 2rem;
    letter-spacing: 0.1em;
  }


  .star-art-subtitle {
    font-size: 1rem;
  }


  .star-art-letters {
    font-size: 1.3rem;
    letter-spacing: 0.2em;
  }


  .star-art-poetry {
    font-size: 1rem;
    line-height: 1.8;
  }


  .intro-card p,
.quote-text {
    font-size: 1rem;
  }


  }

@media (max-width: 480px) {
  .star-art-name {
    font-size: 1.75rem;
    letter-spacing: 0.08em;
  }


  .star-art-letters {
    font-size: 1.15rem;
    letter-spacing: 0.15em;
  }

}html.dark body,
html.dark main {
  background-color: transparent;
  color: inherit;
}


.word-threads {
  max-width: 48rem;
  margin: 3rem auto 1rem;
  padding: 1.25rem 1.5rem 0;
  border-top: 1px solid rgba(120, 113, 108, 0.25);
  font-size: 0.9rem;
  line-height: 1.8;
  color: #78716c;
}


.word-threads__label {
  display: block;
  margin-bottom: 0.35rem;
  font-style: italic;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a8a29e;
}


html.dark .word-threads {
  border-top-color: rgba(168, 162, 158, 0.18);
  color: #a8a29e;
}


html.dark .word-threads__label {
  color: #78716c;
}


/* ---------------------------------------------------------------------------
   Tailwind's preflight loads on every page now, because the nav needs it. On
   the 56 pages that never set `tailwind: true` the body markup is plain HTML
   and was leaning on browser defaults, so preflight left it with no list
   markers, no indent and no link colour. Give those back, inside main only, so
   nothing here can reach a page that does use Tailwind utilities.
   --------------------------------------------------------------------------- */
.legacy-content main ul,
.legacy-content main ol {
  list-style: revert;
  margin: revert;
  padding: revert;
}

.legacy-content main a {
  color: #9f1239;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legacy-content main a:hover {
  color: #881337;
}

html.dark .legacy-content main a {
  color: #fb7185;
}

/* ---------------------------------------------------------------------------
   The Introduction-to-the-Lexigram call to action, which around a hundred Star
   Art pages carry. Defined once here rather than repeated as fifteen utility
   classes per page, so the look can be changed in one place.
   --------------------------------------------------------------------------- */
.lexigram-cta {
  display: flex;
  justify-content: center;
  margin: 2.5rem 0;
}

.lexigram-cta > a {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  border-radius: 0.375rem;
  background-color: #9f1239;
  color: #fff;
  font-size: 1.125rem;
  line-height: 1.4;
  text-decoration: none;
  transition: background-color 150ms ease;
}

.lexigram-cta > a:hover {
  background-color: #881337;
  color: #fff;
}

.lexigram-cta > a:focus-visible {
  outline: 2px solid #9f1239;
  outline-offset: 2px;
}

html.dark .lexigram-cta > a {
  background-color: #fb7185;
  color: #1c1917;
}

html.dark .lexigram-cta > a:hover {
  background-color: #fda4af;
  color: #1c1917;
}