/*
 * Ebenezer article: the single blog post template.
 *
 * One reading column (the rich text section's Reading width) carries the
 * body, the categories and share row, the newsletter band, and the previous
 * and next cards. The white header above runs wider, at the large container,
 * with the title at hero scale. Colors and type come from the Ebenezer
 * tokens in ebenezer-chrome/styles/base.css. The body copy
 * reuses the rich text section's prose rules through the
 * .acu-rich-text__content class; the component props that section sets on
 * its own wrapper are restated here on the body element.
 *
 * The legacy theme stylesheet still loads on posts, so a few rules below
 * re-assert the intended weights, transforms, and spacing against its
 * globals (bold links, uppercase h1, Bootstrap figure classes).
 */

.acu-article,
.acu-article *,
.acu-article *::before,
.acu-article *::after {
  box-sizing: border-box;
}

.acu-article {
  --acu-article-copy: var(--acu-midnight-purple);
  --acu-article-heading: var(--acu-wildcat-purple);
  --acu-article-muted: rgba(33, 23, 75, 0.72);
  --acu-article-rule: rgba(33, 23, 75, 0.15);
  --acu-article-accent: var(--acu-mesquite-red);
  --acu-article-link: var(--acu-midnight-purple);
  --acu-article-link-hover: var(--acu-vibrant-purple);
  --acu-article-surface: var(--acu-white);
  --acu-article-column: calc(var(--container-md) + (var(--space-xl) * 2));
  background-color: var(--acu-article-surface);
  color: var(--acu-article-copy);
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  width: 100%;
}

.acu-article__column {
  margin: 0 auto;
  max-width: var(--acu-article-column);
  padding: 0 var(--space-xl);
  width: 100%;
}

/* The header runs at the large container, wider than the reading column
   below it, so the hero-scale title has room to breathe. */
.acu-article__column--hero {
  max-width: calc(var(--container-lg) + (var(--space-xl) * 2));
}

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

.acu-article__header {
  padding-top: clamp(var(--space-xl), 4vw, var(--space-2xl));
}

.acu-article__breadcrumbs {
  margin-bottom: clamp(var(--space-lg), 3vw, var(--space-2xl));
}

/* Breadcrumb NavXT prints spans and anchors; the legacy hero stylesheet
   styles .breadcrumbs with 35px padding and a grey color, undone here. */
.acu-article__breadcrumbs .breadcrumbs {
  color: var(--acu-article-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  padding: 0;
}

.acu-article__breadcrumbs .breadcrumbs * {
  color: inherit;
}

.acu-article__breadcrumbs .breadcrumbs a {
  color: var(--acu-article-muted);
  font-weight: var(--font-regular);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-out);
}

.acu-article__breadcrumbs .breadcrumbs a:hover,
.acu-article__breadcrumbs .breadcrumbs a:focus-visible {
  color: var(--acu-article-link-hover);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.acu-article__breadcrumbs .breadcrumbs a:focus-visible {
  border-radius: 0.125rem;
  outline: 0.1875rem solid var(--acu-sky-blue);
  outline-offset: var(--space-2xs);
}

.acu-article__breadcrumbs .breadcrumbs .separator {
  margin: 0 var(--space-xs);
  opacity: 0.6;
}

.acu-article__breadcrumbs .breadcrumbs .current-item {
  color: var(--acu-article-copy);
  font-weight: var(--font-semibold);
}

.acu-article__eyebrow {
  align-items: center;
  color: var(--acu-article-copy);
  display: flex;
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  gap: var(--space-sm);
  letter-spacing: var(--tracking-widest);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-md);
  text-transform: uppercase;
}

.acu-article__eyebrow-icon {
  display: block;
  flex: 0 0 auto;
  height: 0.75rem;
  width: 1rem;
}

/* The eyebrow link and the ACU Online byline link read as their text until
   hovered. */
.acu-article__eyebrow-link,
.acu-article__author-link {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.acu-article__eyebrow-link:hover,
.acu-article__eyebrow-link:focus-visible,
.acu-article__author-link:hover,
.acu-article__author-link:focus-visible {
  color: var(--acu-article-link-hover);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.acu-article__eyebrow-link:focus-visible,
.acu-article__author-link:focus-visible {
  border-radius: 0.125rem;
  outline: 0.1875rem solid var(--acu-sky-blue);
  outline-offset: var(--space-2xs);
}

/* The legacy h1 is 50px uppercase at line-height 0.8; the article title is
   the design system's serif display, sentence case, at the Simple Header
   hero's scale (hero-simple.css), capped a step lower because post titles
   run long. */
.acu-article__title {
  color: var(--acu-article-heading);
  font-family: var(--font-serif);
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  font-weight: var(--font-bold);
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 0;
  text-transform: none;
  text-wrap: balance;
}

/* The byline and the Google button sit directly under the title; the rule
   closes the header above the narrower body. */
.acu-article__meta {
  align-items: center;
  border-bottom: 1px solid var(--acu-article-rule);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-lg);
  justify-content: space-between;
  margin-top: var(--space-lg);
  padding-bottom: clamp(var(--space-lg), 3vw, var(--space-xl));
}

.acu-article__byline {
  align-items: center;
  color: var(--acu-article-muted);
  display: flex;
  flex-wrap: wrap;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  gap: var(--space-xs);
  line-height: var(--leading-snug);
  margin: 0;
}

.acu-article__author {
  color: var(--acu-article-copy);
  font-weight: var(--font-bold);
}

.acu-article__date {
  font-weight: var(--font-regular);
}

/* The byline items wrap as units, each carrying its own separator, so a
   wrapped date never leaves a dot dangling at the end of a line. */
.acu-article__byline > * {
  white-space: nowrap;
}

.acu-article__byline > * + *::before {
  color: var(--acu-article-accent);
  content: "\2022";
  display: inline-block;
  margin-right: var(--space-xs);
}

.acu-article__preferred {
  display: flex;
  flex: 0 0 auto;
}

.acu-article__preferred:empty {
  display: none;
}

/* -------------------------------------------------------------------------
 * Body. The prose rules live in the rich text section's stylesheet; these
 * are the component props it expects, plus a reading size for long posts.
 * ---------------------------------------------------------------------- */

.acu-article__body {
  --acu-rich-text-copy: var(--acu-midnight-purple);
  --acu-rich-text-heading: var(--acu-wildcat-purple);
  --acu-rich-text-link: var(--acu-midnight-purple);
  --acu-rich-text-link-hover: var(--acu-vibrant-purple);
  --acu-rich-text-rule: rgba(33, 23, 75, 0.15);
  --acu-rich-text-quote: var(--acu-wildcat-purple);
  --acu-rich-text-quote-rule: var(--acu-citrus-orange);
  --acu-rich-text-muted-surface: rgba(33, 23, 75, 0.06);
  margin-top: clamp(var(--space-xl), 4vw, var(--space-2xl));
}

.acu-article__body.acu-rich-text__content {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
}

.acu-article__body.acu-rich-text__content p,
.acu-article__body.acu-rich-text__content ul,
.acu-article__body.acu-rich-text__content ol,
.acu-article__body.acu-rich-text__content blockquote {
  margin-bottom: var(--space-lg);
}

.acu-article__body.acu-rich-text__content h2 {
  margin-top: var(--space-2xl);
}

/* Legacy content wraps copy in inline font-weight spans and Google Docs
   styles; keep the measure's weight and size on them. */
.acu-article__body.acu-rich-text__content p > span[style*="font-weight: 400"] {
  font-weight: inherit;
}

/* Floated images only float once the column is wide enough for text to run
   beside them; the legacy stylesheet floats them from 576px. */
@media (max-width: 39.9375rem) {
  .acu-article__body.acu-rich-text__content .alignleft,
  .acu-article__body.acu-rich-text__content .alignright {
    float: none;
    margin-left: 0;
    margin-right: 0;
  }

  .acu-article__body.acu-rich-text__content .alignleft img,
  .acu-article__body.acu-rich-text__content .alignright img,
  .acu-article__body.acu-rich-text__content img.alignleft,
  .acu-article__body.acu-rich-text__content img.alignright {
    width: 100%;
  }
}

@media (min-width: 40rem) {
  .acu-article__body.acu-rich-text__content .alignleft,
  .acu-article__body.acu-rich-text__content .alignright {
    max-width: 50%;
  }
}

/* Video embeds keep their aspect ratio as the column narrows instead of
   letterboxing inside a fixed height. */
.acu-article__body.acu-rich-text__content iframe[src*="youtube.com"],
.acu-article__body.acu-rich-text__content iframe[src*="youtube-nocookie.com"],
.acu-article__body.acu-rich-text__content iframe[src*="vimeo.com"] {
  aspect-ratio: 16 / 9;
  height: auto;
  width: 100%;
}

.acu-article__pages {
  border-top: 1px solid var(--acu-rich-text-rule);
  font-size: var(--text-sm);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
}

.acu-article__pages p {
  margin: 0;
}

.acu-article__pages a {
  margin-left: var(--space-xs);
}

/* -------------------------------------------------------------------------
 * Categories and share
 * ---------------------------------------------------------------------- */

.acu-article__footer {
  margin-top: clamp(var(--space-xl), 4vw, var(--space-2xl));
}

.acu-article__footer > .acu-article__column {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg) var(--space-2xl);
  justify-content: space-between;
}

/* The rule is a full-width flex item so it spans the content, not the
   column's gutters. */
.acu-article__footer > .acu-article__column::before {
  background-color: var(--acu-article-rule);
  content: "";
  flex: none;
  height: 1px;
  width: 100%;
}

.acu-article__categories {
  align-items: baseline;
  display: flex;
  flex: 1 1 18rem;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-sm);
}

.acu-article__categories-label,
.acu-article__share-label {
  color: var(--acu-article-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: var(--leading-snug);
}

.acu-article__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.acu-article__chips li {
  margin: 0;
}

.acu-article__chip {
  border: 1px solid rgba(33, 23, 75, 0.3);
  border-radius: var(--radius-sm);
  color: var(--acu-article-copy);
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-snug);
  padding: var(--space-3xs) var(--space-sm);
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.acu-article__chip:hover,
.acu-article__chip:focus-visible {
  background-color: var(--acu-midnight-purple);
  border-color: var(--acu-midnight-purple);
  color: var(--acu-white);
  text-decoration: none;
}

.acu-article__chip:focus-visible {
  outline: 0.1875rem solid var(--acu-sky-blue);
  outline-offset: var(--space-2xs);
}

.acu-article__share {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.acu-article__share-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.acu-article__share-list li {
  align-items: center;
  display: flex;
  gap: var(--space-xs);
  margin: 0;
}

.acu-article__share-link {
  align-items: center;
  appearance: none;
  background-color: transparent;
  border: 1px solid rgba(33, 23, 75, 0.3);
  border-radius: var(--radius-full);
  color: var(--acu-article-copy);
  cursor: pointer;
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  margin: 0;
  padding: 0;
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
  width: 2.5rem;
}

.acu-article__share-link:hover,
.acu-article__share-link:focus-visible {
  background-color: var(--acu-midnight-purple);
  border-color: var(--acu-midnight-purple);
  color: var(--acu-white);
  text-decoration: none;
}

.acu-article__share-link:focus-visible {
  outline: 0.1875rem solid var(--acu-sky-blue);
  outline-offset: var(--space-2xs);
}

.acu-article__share-link.is-copied {
  background-color: var(--acu-canyon-green);
  border-color: var(--acu-canyon-green);
  color: var(--acu-white);
}

.acu-article__share-icon {
  display: block;
  height: 1.125rem;
  width: 1.125rem;
}

.acu-article__copy-status {
  color: var(--acu-article-muted);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  line-height: 1;
  white-space: nowrap;
}

.acu-article__copy-status:empty {
  display: none;
}

/* -------------------------------------------------------------------------
 * Previous and next
 * ---------------------------------------------------------------------- */

/* The cards are the last thing before the site footer, so the bottom margin
   keeps them off its dark band. */
.acu-article__nav {
  margin-bottom: clamp(var(--space-2xl), 5vw, var(--space-3xl));
  margin-top: clamp(var(--space-2xl), 5vw, var(--space-3xl));
}

.acu-article__nav-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.acu-article__nav-card {
  border: 1px solid var(--acu-article-rule);
  border-radius: var(--radius-md);
  color: var(--acu-article-copy);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
  padding: var(--space-lg);
  text-decoration: none;
  transition: border-color var(--motion-fast) var(--ease-out), box-shadow var(--motion-fast) var(--ease-out);
}

.acu-article__nav-card--next {
  text-align: right;
}

.acu-article__nav-card:hover,
.acu-article__nav-card:focus-visible {
  border-color: var(--acu-vibrant-purple);
  box-shadow: var(--shadow-sm);
  color: var(--acu-article-copy);
  text-decoration: none;
}

.acu-article__nav-card:focus-visible {
  outline: 0.1875rem solid var(--acu-sky-blue);
  outline-offset: var(--space-2xs);
}

.acu-article__nav-label {
  align-items: center;
  color: var(--acu-article-muted);
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  gap: var(--space-xs);
  letter-spacing: var(--tracking-wider);
  line-height: var(--leading-snug);
  text-transform: uppercase;
}

.acu-article__nav-card--next .acu-article__nav-label {
  justify-content: flex-end;
}

.acu-article__nav-icon {
  display: block;
  fill: var(--acu-article-accent);
  flex: 0 0 auto;
  height: 0.875rem;
  stroke: var(--acu-article-accent);
  stroke-width: 1;
  transition: transform var(--motion-base) var(--ease-out);
  width: 0.875rem;
}

.acu-article__nav-card--previous .acu-article__nav-icon {
  transform: rotate(180deg);
}

.acu-article__nav-card--previous:hover .acu-article__nav-icon,
.acu-article__nav-card--previous:focus-visible .acu-article__nav-icon {
  transform: rotate(180deg) translateX(var(--space-2xs));
}

.acu-article__nav-card--next:hover .acu-article__nav-icon,
.acu-article__nav-card--next:focus-visible .acu-article__nav-icon {
  transform: translateX(var(--space-2xs));
}

.acu-article__nav-title {
  color: var(--acu-article-heading);
  display: block;
  font-family: var(--font-serif);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

.acu-article__nav-card:hover .acu-article__nav-title,
.acu-article__nav-card:focus-visible .acu-article__nav-title {
  text-decoration: underline;
  text-decoration-thickness: 0.125rem;
  text-underline-offset: var(--space-2xs);
}

/* -------------------------------------------------------------------------
 * Newsletter band, after the categories and share row
 * ---------------------------------------------------------------------- */

.acu-article-newsletter {
  background-color: var(--acu-casual-cream);
  color: var(--acu-article-copy);
  margin-top: clamp(var(--space-xl), 4vw, var(--space-2xl));
  padding: clamp(var(--space-2xl), 5vw, var(--space-3xl)) 0;
  width: 100%;
}

.acu-article-newsletter__inner {
  align-items: center;
  display: grid;
  gap: var(--space-xl) var(--space-2xl);
  grid-template-columns: minmax(0, 1fr);
  margin: 0 auto;
  max-width: var(--acu-article-column);
  padding: 0 var(--space-xl);
  width: 100%;
}

.acu-article-newsletter__heading {
  color: var(--acu-article-heading);
  font-family: var(--font-serif);
  font-size: clamp(var(--text-3xl), 3.2vw, var(--text-4xl));
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  text-transform: none;
}

.acu-article-newsletter__description {
  color: var(--acu-article-muted);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  margin: var(--space-sm) 0 0;
}

.acu-article-newsletter__form {
  min-height: 3.5rem;
  min-width: 0;
}

/* Mailchimp for WordPress markup, fetched into #lazy-mc4wp-form. */
.acu-article-newsletter .mc4wp-form {
  margin: 0;
}

.acu-article-newsletter .mc4wp-form-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.acu-article-newsletter .mc4wp-form-fields p,
.acu-article-newsletter .mc4wp-form-fields > div {
  margin: 0;
}

/* The form's email field carries Bootstrap's w-100 and mb-3 utilities from
   the legacy band. Their !important margin would stretch the button to the
   field height plus the margin, so it is reset here with the same weight. */
.acu-article-newsletter .mc4wp-form-fields input[type="email"],
.acu-article-newsletter .mc4wp-form-fields input[type="text"],
.acu-article-newsletter .mc4wp-form-fields input[type="submit"],
.acu-article-newsletter .mc4wp-form-fields button[type="submit"] {
  margin: 0 !important;
}

.acu-article-newsletter .mc4wp-form-fields label {
  color: var(--acu-article-copy);
  display: block;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2xs);
}

.acu-article-newsletter .mc4wp-form input[type="email"],
.acu-article-newsletter .mc4wp-form input[type="text"] {
  appearance: none;
  background-color: var(--acu-white);
  border: 1px solid rgba(33, 23, 75, 0.3);
  border-radius: var(--radius-md);
  color: var(--acu-article-copy);
  flex: 1 1 14rem;
  font-family: var(--font-sans);
  font-size: var(--text-md);
  line-height: var(--leading-snug);
  min-height: 3.5rem;
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  width: 100%;
}

.acu-article-newsletter .mc4wp-form input[type="email"]:focus-visible,
.acu-article-newsletter .mc4wp-form input[type="text"]:focus-visible {
  border-color: var(--acu-midnight-purple);
  outline: 0.1875rem solid var(--acu-sky-blue);
  outline-offset: 0.125rem;
}

.acu-article-newsletter .mc4wp-form input[type="submit"],
.acu-article-newsletter .mc4wp-form button[type="submit"] {
  appearance: none;
  background-color: var(--acu-citrus-orange);
  border: 0;
  border-radius: var(--radius-md);
  color: var(--acu-midnight-purple);
  cursor: pointer;
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  line-height: var(--leading-snug);
  min-height: 3.5rem;
  padding: var(--space-sm) var(--space-lg);
  text-transform: none;
  transition: background-color var(--motion-fast) var(--ease-out);
}

.acu-article-newsletter .mc4wp-form input[type="submit"]:hover,
.acu-article-newsletter .mc4wp-form input[type="submit"]:focus-visible,
.acu-article-newsletter .mc4wp-form button[type="submit"]:hover,
.acu-article-newsletter .mc4wp-form button[type="submit"]:focus-visible {
  background-color: var(--acu-sunset-orange);
  color: var(--acu-midnight-purple);
}

.acu-article-newsletter .mc4wp-form input[type="submit"]:focus-visible,
.acu-article-newsletter .mc4wp-form button[type="submit"]:focus-visible {
  outline: 0.1875rem solid var(--acu-sky-blue);
  outline-offset: var(--space-2xs);
}

.acu-article-newsletter .mc4wp-response {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  margin-top: var(--space-sm);
}

.acu-article-newsletter .mc4wp-response p {
  margin: 0;
}

/* -------------------------------------------------------------------------
 * Breakpoints
 * ---------------------------------------------------------------------- */

@media (min-width: 48rem) {
  .acu-article-newsletter__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  }
}

@media (max-width: 63.9375rem) {
  .acu-article__column,
  .acu-article-newsletter__inner {
    padding-inline: var(--space-lg);
  }
}

@media (max-width: 47.9375rem) {
  .acu-article__title {
    line-height: 1.1;
  }

  .acu-article__meta {
    align-items: flex-start;
    flex-direction: column;
  }

  .acu-article__footer > .acu-article__column {
    flex-direction: column;
  }

  /* In the column direction the row flex-basis would become a height. */
  .acu-article__categories,
  .acu-article__share {
    flex: none;
  }

  .acu-article__nav-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .acu-article__nav-card--next {
    text-align: left;
  }

  .acu-article__nav-card--next .acu-article__nav-label {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .acu-article__breadcrumbs .breadcrumbs a,
  .acu-article__chip,
  .acu-article__share-link,
  .acu-article__nav-card,
  .acu-article__nav-icon,
  .acu-article-newsletter .mc4wp-form input[type="submit"],
  .acu-article-newsletter .mc4wp-form button[type="submit"] {
    transition: none;
  }
}

/* -------------------------------------------------------------------------
 * Print: the article alone. The site chrome, the share row, the newsletter
 * band, the previous and next cards, and the Google button serve the screen.
 * ---------------------------------------------------------------------- */

@media print {
  .site-masthead,
  .site-header,
  .site-footer,
  .skip-link,
  #cc-main,
  .acu-article__preferred,
  .acu-article__footer,
  .acu-article-newsletter,
  .acu-article__nav {
    display: none;
  }

  .acu-article {
    color: #000;
  }

  .acu-article__column,
  .acu-article__column--hero {
    max-width: none;
    padding: 0;
  }

  .acu-article__title {
    font-size: 2.25rem;
  }

  .acu-article__body.acu-rich-text__content {
    font-size: 11pt;
    line-height: 1.5;
  }

  .acu-article__body.acu-rich-text__content a {
    color: inherit;
  }

  .acu-article__body.acu-rich-text__content a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    word-break: break-all;
  }
}