/*
 * AlvaradoCSS — Homepage components
 *
 * This root-level stylesheet is loaded through _quarto.yml. Keeping it at the
 * project root preserves existing relative paths to images and pattern assets.
 */

/* =============================================================================
 * Homepage
 * ========================================================================== */

/* Limit the readable homepage width while allowing full-width background bands. */
.homepage {
  --homepage-border: var(--color-teal-border);
  --homepage-shadow: 0 1rem 2.5rem var(--color-burgundy-shadow-08);
  --homepage-surface: var(--color-white-surface-72);
  overflow: hidden;
}

.homepage h2 {
  margin-top: 0;
}

/*
 * Quarto 1.3 retains the homepage title in the document metadata but still
 * emits an unstyled title header when `title-block-style: none` is selected.
 * Hide that header only when it is immediately followed by the maintained
 * homepage container; the authored hero H1 continues to identify the page.
 */
#title-block-header:has(+ .homepage) {
  display: none;
}

/* Hero --------------------------------------------------------------------- */

.homepage-hero {
  position: relative;

  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(180px, 0.55fr);
  align-items: center;
  gap: clamp(2rem, 7vw, 6rem);
  width: min(1180px, calc(100% - 2rem));
  min-height: 28rem;
  margin: 0 auto;
  padding: clamp(2.75rem, 6vw, 4.75rem) 0;
  overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Homepage hero background texture
 * ------------------------------------------------------------------------- */

.homepage-hero::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  z-index: 0;

  /*
   * The SVG now draws the network directly in teal. Keep the texture at its
   * authored opacity instead of dimming the entire pseudo-element, which
   * preserves the intended hierarchy among strands, links, and nodes.
   */
  background-image:
    linear-gradient(90deg, var(--color-white-transparent) 82%, var(--color-white) 100%),
    radial-gradient(
      ellipse at 82% 50%,
      var(--color-teal-glow) 0%,
      var(--color-teal-glow-soft) 32%,
      var(--color-teal-transparent) 62%
    ),
    url("images/patterns/network-pattern-homepage.svg");
  background-repeat:
    no-repeat,
    no-repeat,
    repeat;
  background-position:
    right center,
    right center,
    right -120px center;
  background-size:
    cover,
    cover,
    1080px 315px;
  -webkit-mask-image:
    linear-gradient(
      90deg,
      var(--color-transparent) 0%,
      var(--color-transparent) 44%,
      var(--color-mask-black-18) 60%,
      var(--color-mask-black-65) 78%,
      var(--color-black) 92%
    );
  mask-image:
    linear-gradient(
      90deg,
      var(--color-transparent) 0%,
      var(--color-transparent) 44%,
      var(--color-mask-black-18) 60%,
      var(--color-mask-black-65) 78%,
      var(--color-black) 92%
    );
}

.homepage-hero > * {
  position: relative;
  z-index: 1;

  /* Lift the complete hero composition without changing document flow. */
  transform: translateY(-24px);
}

.homepage-eyebrow,
.homepage-post-language {
  margin-bottom: 0.85rem;
  color: var(--color-brand-burgundy);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  line-height: 1.4;
}

.homepage-icon-vertical-bar {
  display: inline-block;
  margin-right: 0.12em;
  color: var(--color-brand-pink);
  font-size: 1em;
  font-weight: 500;
  line-height: 1;
  vertical-align: 0.02em;
}

.homepage-hero h1 {
  margin-bottom: 1.25rem;
  font-size: clamp(2.8rem, 7vw, 5.6rem);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.homepage-hero h1::before {
  display: inline-block;
  width: .22em;
  height: .22em;
  margin-right: .18em;
  content: "";
  background: var(--color-brand-teal);
  transform: translateY(-.12em);
}

.homepage-hero-copy > p:not(.homepage-eyebrow) {
  max-width: 760px;
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  line-height: 1.55;
}

.homepage-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

.homepage-actions .btn-link {
  padding-right: 0.5rem;
  padding-left: 0.5rem;
}

/*
 * Keep the three hero actions visually distinct while placing all of them
 * within the website's standard burgundy-and-teal system. These rules are
 * deliberately scoped to `.homepage-actions` so Bootstrap buttons elsewhere
 * on the site retain their existing colors.
 */

/* Solid primary action: "My projects." */
.homepage-actions .btn-primary {
  border-color: var(--color-brand-burgundy);
  background-color: var(--color-brand-burgundy);
  color: var(--color-white);
}

.homepage-actions .btn-primary:hover,
.homepage-actions .btn-primary:focus {
  border-color: var(--color-brand-burgundy-dark);
  background-color: var(--color-brand-burgundy-dark);
  color: var(--color-white);
}

/* Outlined secondary action: "My services." */
.homepage-actions .btn-outline-primary {
  border-color: var(--color-brand-teal);
  color: var(--color-brand-teal);
}

.homepage-actions .btn-outline-primary:hover,
.homepage-actions .btn-outline-primary:focus {
  border-color: var(--color-brand-teal-deep);
  background-color: var(--color-brand-teal-deep);
  color: var(--color-white);
}

/* Text-link action: "Read my bio." */
.homepage-actions .btn-link {
  color: var(--color-brand-teal);
}

.homepage-actions .btn-link:hover,
.homepage-actions .btn-link:focus {
  color: var(--color-brand-pink);
}

/*
 * Keep direct contact destinations visually secondary to the hero buttons.
 * The email presentation mirrors the Contact page, while the adjacent GitHub
 * link provides a temporary route to the site owner's public profile.
 */
.homepage-contact-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1rem;
  font-size: 1rem;
}

.homepage-contact-links p {
  margin: 0;
}

.homepage-contact-links a {
  color: var(--color-brand-teal-dark);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.homepage-contact-links a:hover,
.homepage-contact-links a:focus {
  color: var(--color-brand-pink);
}

.homepage-contact-separator {
  color: var(--color-brand-burgundy);
}

.homepage-hero-mark img {
  display: block;
  width: min(100%, 300px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 1.2rem 1.6rem var(--color-burgundy-shadow-12));
}

/* Focus cards --------------------------------------------------------------- */

.homepage > h2,
.homepage > p,
.homepage-post-grid,
.homepage-focus-layout {
  width: min(1180px, calc(100% - 2rem));
  margin-right: auto;
  margin-left: auto;
}

.homepage > h2 {
  margin-bottom: 1.5rem;
  font-size: clamp(2rem, 4vw, 3rem);
}

.homepage-focus-layout {
  display: grid;
  grid-template-areas: "cards copy";
  grid-template-columns: minmax(0, 2fr) minmax(17rem, 0.85fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  margin-bottom: clamp(4rem, 8vw, 7rem);
}

.homepage-focus-copy {
  grid-area: copy;
  max-width: 24rem;
  justify-self: end;
}

.homepage-focus-copy > h2 {
  margin-bottom: 1.25rem;
  font-size: clamp(2rem, 3.6vw, 3rem);
}

.homepage-focus-copy > p {
  margin-bottom: 1.5rem;
  font-size: 1.08rem;
  line-height: 1.65;
}

.homepage-focus-copy > p:last-child {
  margin-bottom: 0;
}

.homepage-focus-grid {
  grid-area: cards;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0;
}

.homepage-focus-card {
  /*
   * Keep the services calm and scannable: the icon establishes the category,
   * while the compact centered copy gives every card a consistent rhythm.
   */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: clamp(1.35rem, 2.4vw, 1.85rem);
  border: 1px solid var(--homepage-border);
  border-radius: 0.5rem;
  background: var(--color-white-surface-80);
  box-shadow: 0 0.8rem 2rem var(--color-burgundy-shadow-08);
  text-align: center;
}

.homepage-focus-icon {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: var(--color-brand-aqua-soft);
  color: var(--color-brand-teal-dark);
  font-size: 1.45rem;
  line-height: 1;
}

.homepage-focus-icon > p {
  margin: 0;
}

.homepage-focus-card > section {
  width: 100%;
}

.homepage-focus-card h3 {
  margin: 0 0 0.75rem;
  color: var(--color-brand-burgundy);
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.3;
}

.homepage-focus-card p:last-child {
  margin-bottom: 0;
  font-size: 0.98rem;
  line-height: 1.55;
}

/* Selected-work band -------------------------------------------------------- */

.homepage-feature-band {
  position: relative;
  isolation: isolate;

  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.75fr);
  gap: clamp(2rem, 6vw, 5rem);
  margin-bottom: clamp(4rem, 8vw, 7rem);
  padding: clamp(3rem, 7vw, 5.5rem) max(1rem, calc((100% - 1180px) / 2));
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--color-brand-teal-light), var(--color-brand-teal-dark));
  color: var(--color-white);
}

/*
 * Place the mesh in a dedicated decorative layer. Keeping the SVG separate
 * from the base gradient makes its opacity easy to tune without dimming the
 * text, buttons, or translucent link panel.
 */
.homepage-feature-band::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background-image: url("images/patterns/homepage-feature-mesh.svg");
  background-position: center;
  background-repeat: repeat;
  background-size: 1200px 520px;
  opacity: 0.70;
}

/*
 * Establish an explicit stacking context for all authored content. This keeps
 * the decorative mesh behind interactive elements in every browser.
 */
.homepage-feature-band > * {
  position: relative;
  z-index: 1;
}

.homepage-feature-band h2,
.homepage-feature-band h3 {
  color: var(--color-white);

}

/* Give the principal Manifold heading its own gold accent while preserving
* white text for secondary headings inside the feature band.
*/
.homepage-feature-copy > h2 {
  /*
   * Treat the Manifold symbol and wordmark as one restrained identity lockup.
   * Flexbox keeps the icon vertically aligned with the heading while allowing
   * the complete lockup to wrap naturally on exceptionally narrow screens.
   */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  color: var(--color-brand-gold);
}

/*
 * Keep the Manifold symbol intentionally discreet. The SVG remains crisp at
 * every pixel density, while the fixed cap prevents it from competing with
 * the feature-band heading or the adjacent use-case panel.
 */
.homepage-feature-icon {
  display: block;
  width: clamp(1.75rem, 2.5vw, 2.25rem);
  height: auto;
  flex: 0 0 auto;
}

.homepage-feature-copy p {
  max-width: 760px;
  font-size: 1.12rem;
}

.homepage-feature-band .btn-primary {
  border-color: var(--color-black);
  background-color: #0a4248;
  color: var(--color-white);
}

.homepage-feature-band .btn-primary:hover,
.homepage-feature-band .btn-primary:focus {
  border-color: var(--color-brand-gold);
  background-color: #0a4248;
  color: var(--color-white);
}

.homepage-feature-band .btn-outline-primary {
  border-color: var(--color-brand-teal-dark);
  background-color: var(--color-brand-aqua-soft);
  color: #0a4248;
}

.homepage-feature-band .btn-outline-primary:hover,
.homepage-feature-band .btn-outline-primary:focus {
  border-color: var(--color-brand-gold);
  background-color: #fff3b2;
  color: #0a4248;
}

.homepage-feature-links {
  padding: 1.5rem;
  border: 1.2px solid var(--color-brand-gold);
  border-radius: 1rem;
  background: var(--color-white-overlay-10);
}

.homepage-feature-links ul {
  margin-bottom: 0;
  padding-left: 1.2rem;
}

.homepage-feature-links li + li {
  margin-top: 0.55rem;
}

/* Research agenda ----------------------------------------------------------- */

/*
 * Introduce the section with a restrained editorial paragraph rather than a
 * second card-like surface. The width matches the main homepage content rail,
 * while the shorter line length keeps the transition into the project panels
 * easy to scan.
 */
.homepage-agenda-intro,
.homepage-agenda {
  width: min(1180px, calc(100% - 2rem));
  margin-right: auto;
  margin-left: auto;
}

.homepage-agenda-intro {
  max-width: 820px;
  margin-bottom: 2rem;
  margin-left: max(1rem, calc((100% - 1180px) / 2));
  font-size: clamp(1.08rem, 1.8vw, 1.22rem);
  line-height: 1.65;
}

/*
 * Stack the projects vertically so their research questions retain a generous
 * reading width. A full-width editorial rhythm also distinguishes this section
 * from the compact expertise cards used earlier on the homepage.
 */
.homepage-agenda {
  display: grid;
  gap: 1.5rem;
  margin-bottom: clamp(4rem, 8vw, 7rem);
}

.homepage-agenda-item {
  position: relative;
  isolation: isolate;

  display: grid;
  grid-template-columns: minmax(7rem, 0.24fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  min-height: 20rem;
  padding: clamp(2.25rem, 5vw, 3.75rem);
  overflow: hidden;
  border: 1px solid var(--homepage-border);
  border-radius: 1rem;
  background: var(--color-white-surface-80);
  box-shadow: var(--homepage-shadow);
}

.homepage-agenda-item > * {
  position: relative;
  z-index: 1;
}

/*
 * Use the numeral as a quiet structural landmark. It is intentionally large
 * and translucent so it helps visitors scan the sequence without competing
 * with the project title.
 */
.homepage-agenda-number {
  align-self: start;
  color: rgba(135, 21, 72, 0.12);
  font-family: Sen, sans-serif;
  font-size: clamp(4.75rem, 9vw, 8.5rem);
  font-weight: 800;
  letter-spacing: -0.08em;
  line-height: 0.82;
}

.homepage-agenda-content {
  max-width: 860px;
}

.homepage-agenda-label,
.homepage-agenda-questions-label {
  margin-bottom: 0.7rem;
  color: var(--color-brand-teal-dark);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  line-height: 1.4;
}

.homepage-agenda-content > h3 {
  max-width: 32ch;
  margin-top: 0;
  margin-bottom: 1rem;
  color: var(--color-brand-burgundy);
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  letter-spacing: -0.025em;
  line-height: 1.12;
  text-wrap: balance;
}

.homepage-agenda-content > p:not(.homepage-agenda-label) {
  max-width: 760px;
  font-size: 1.05rem;
  line-height: 1.65;
}

/*
 * Separate the exploratory questions with structure rather than a colored
 * gradient. The white translucent surface and teal rule create hierarchy while
 * preserving a clean, editorial appearance.
 */
.homepage-agenda-questions {
  margin-top: 1.5rem;
  padding: clamp(1.15rem, 2.5vw, 1.6rem);
  border: 1px solid var(--color-teal-border);
  border-left: 3px solid var(--color-brand-teal);
  border-radius: 0 0.8rem 0.8rem 0;
  background: var(--color-white-surface-75);
}

.homepage-agenda-questions-label {
  color: var(--color-brand-burgundy);
}

.homepage-agenda-questions ul {
  margin-bottom: 0;
  padding-left: 1.25rem;
}

.homepage-agenda-questions li {
  padding-left: 0.2rem;
  line-height: 1.6;
}

.homepage-agenda-questions li::marker {
  color: var(--color-brand-teal);
}

.homepage-agenda-questions li + li {
  margin-top: 0.75rem;
}

/*
 * Collapse the number and copy into one column on narrow screens. The numeral
 * remains visible as a section cue but is reduced so it does not dominate the
 * mobile viewport.
 */
@media (max-width: 760px) {
  .homepage-agenda-intro {
    margin-right: 1rem;
    margin-left: 1rem;
  }

  .homepage-agenda-item {
    grid-template-columns: 1fr;
    gap: 1rem;
    min-height: 0;
  }

  .homepage-agenda-number {
    font-size: 4.5rem;
  }

}

/* Featured posts ------------------------------------------------------------ */

.homepage-post-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
  margin-bottom: clamp(4rem, 8vw, 7rem);
}

.homepage-post-card {
  overflow: hidden;
  border: 1px solid var(--homepage-border);
  border-radius: 1rem;
  background: var(--homepage-surface);
  box-shadow: var(--homepage-shadow);
}

.homepage-post-card > p:first-child {
  margin: 0;
}

.homepage-post-card img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 220ms ease;
}

.homepage-post-card > p:first-child a:hover img,
.homepage-post-card > p:first-child a:focus img {
  transform: scale(1.025);
}

.homepage-post-body {
  padding: clamp(1.35rem, 3vw, 2rem);
}

.homepage-post-body h3 {
  margin-top: 0;
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
}

.homepage-post-body h3 a {
  color: var(--color-black);
  text-decoration-color: var(--color-brand-pink);
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.16em;
}

.homepage-post-body h3 a:hover,
.homepage-post-body h3 a:focus {
  color: var(--color-brand-teal);
}

.homepage-post-body p:last-child {
  margin-bottom: 0;
}

/* Closing call to action ---------------------------------------------------- */

.homepage-closing {
  position: relative;
  isolation: isolate;

  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto clamp(4rem, 8vw, 7rem);
  padding: clamp(2rem, 5vw, 4rem);
  overflow: hidden;
  border: 0px solid var(--color-white);
  border-radius: 1rem;
  background: var(--color-white);
  text-align: center;
}

/*
 * Organic manifold curves enter from both sides while the SVG's internal
 * masks preserve a calmer central region for the closing copy and actions.
 */
.homepage-closing::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  pointer-events: none;
  background-image: url("images/patterns/homepage-closing-manifold.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.homepage-closing > * {
  position: relative;
  z-index: 1;
}

.homepage-closing p {
  max-width: 760px;
  margin-right: auto;
  margin-left: auto;
}

.homepage-closing .btn {
  margin: 0.35rem;
}

.homepage-closing .btn-primary {
  border-color: var(--color-brand-burgundy);
  background-color: var(--color-white);
  color: var(--color-brand-burgundy);
}

.homepage-closing .btn-primary:hover,
.homepage-closing .btn-primary:focus {
  border-color: var(--color-brand-teal-dark);
  background-color: var(--color-brand-aqua-soft);
  color: var(--color-brand-teal-dark);
}

/* Responsive behavior ------------------------------------------------------- */

@media (max-width: 900px) {
  .homepage-hero,
  .homepage-feature-band,
  .homepage-focus-layout {
    grid-template-columns: 1fr;
  }

  .homepage-focus-layout {
    grid-template-areas:
      "copy"
      "cards";
    align-items: start;
  }

  .homepage-focus-copy {
    max-width: 48rem;
    justify-self: start;
  }

  .homepage-hero {
    min-height: auto;
    padding: 3rem 0;
  }

  .homepage-hero > * {
    transform: none;
  }

  .homepage-hero::before {
    display: none;
  }

  .homepage-hero-mark {
    display: none;
  }

  .homepage-focus-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .homepage-focus-grid {
    grid-template-columns: 1fr;
  }

  .homepage-post-grid {
    grid-template-columns: 1fr;
  }

  .homepage-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .homepage-actions .btn {
    width: 100%;
  }

  .homepage-contact-links {
    align-items: flex-start;
    flex-direction: column;
  }

  .homepage-contact-separator {
    display: none;
  }
}

/* =============================================================================
 * Homepage VARONA launch
 * ========================================================================== */

/*
 * Center the standalone VARONA launch between The Manifold feature band and
 * the featured-post grid. The width follows the same 1180px content boundary
 * used by the surrounding homepage sections so the addition feels native to
 * the existing layout rather than like an unrelated embedded application.
 */
.homepage-varona-launch {
  width: min(1180px, calc(100% - 2rem));
  margin: 1.25rem auto clamp(4rem, 8vw, 7rem);
  text-align: center;
  font-size: 1rem;
}

/*
 * Customize only the manually authored level-three heading.
 * Keeping typography off the parent container prevents these properties from
 * changing the image caption generated by Quarto/Pandoc.
 */
.homepage-varona-launch > h3 {
  margin-top: 1rem;
  text-align: right;
  margin-bottom: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.1;
  color: var(--color-brand-teal-dark);
}

/*
 * Treat the complete logo as one large, accessible interaction target. The
 * inline-block wrapper allows the focus ring to follow the rounded logo area
 * and prevents the anchor from stretching across unused horizontal space.
 */
.homepage-varona-link {
  display: inline-block;
  max-width: min(100%, 540px);
  padding: 0.75rem;
  border: 2px solid transparent;
  border-radius: 1.25rem;
  line-height: 0;
  transition:
    border-color 180ms ease,
    background-color 180ms ease,
    transform 180ms ease;
}

/*
 * Keep the transparent source image crisp and responsive. A modest drop shadow
 * separates the mark from light backgrounds without adding a card surface that
 * would compete with VARONA's existing visual identity.
 */
.homepage-varona-logo {
  display: block;
  width: min(100%, 500px);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 1rem 1.5rem var(--color-burgundy-shadow-12));
}

/*
 * Use the established VARONA brand token for hover and keyboard-focus states.
 * The transform is intentionally restrained so the logo feels interactive
 * without becoming visually invasive.
 */
.homepage-varona-link:hover,
.homepage-varona-link:focus-visible {
  border-color: var(--color-brand-varona);
  background: var(--color-white-surface-72);
  transform: translateY(-3px);
}

/*
 * Preserve the browser's visible keyboard indication while integrating it with
 * the website's rounded component geometry.
 */
.homepage-varona-link:focus-visible {
  outline: 3px solid var(--color-brand-gold);
  outline-offset: 4px;
}

/* =============================================================================
 * Homepage Manifold navigation link
 * ========================================================================== */

/*
 * Compact branded navigation link for The Manifold.
 *
 * The link intentionally reuses the site's existing `.manifold-wordmark`
 * class so the gold small-caps treatment is defined in only one place.
 * This keeps future branding changes centralized and consistent.
 */
.homepage-manifold-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;

  padding: 0.45rem 0.9rem;

  border: 1px solid var(--color-brand-gold);
  border-radius: 999px;

  background: transparent;

  color: var(--color-white);
  font-size: 0.94rem;
  font-weight: 600;

  text-decoration: none;

  transition:
    background-color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
}

/*
 * Keep the SVG crisp and prevent flexbox from shrinking it when the link text
 * wraps on exceptionally narrow screens.
 */
.homepage-manifold-link-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/*
 * Use a restrained translucent gold surface on hover and keyboard focus. The
 * one-pixel lift signals interactivity without turning the link into a primary
 * call-to-action.
 */
.homepage-manifold-link:hover,
.homepage-manifold-link:focus-visible {
  background: rgba(255, 215, 0, 0.12);
  color: var(--color-white);
  text-decoration: none;
  transform: translateY(-1px);
}

/*
 * Preserve an unmistakable keyboard focus indicator outside the capsule.
 */
.homepage-manifold-link:focus-visible {
  outline: 2px solid var(--color-brand-gold);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(10, 66, 72, 0.35);
}

/*
 * Remove movement for visitors who request reduced motion while retaining the
 * border, background, and focus treatments.
 */
@media (prefers-reduced-motion: reduce) {
  .homepage-manifold-link {
    transition: none;
  }

  .homepage-manifold-link:hover,
  .homepage-manifold-link:focus-visible {
    transform: none;
  }
}