@layer components {
  .home {
    display: grid;
    gap: var(--space-8);
  }

  .home-hero__emblem {
    display: none;
  }

  /* Where the full measure, a gap, and the medallion all fit, the filigree
     mark fills the hero's empty right column as a counterweight to the copy —
     the one place the drawing renders large enough for its detail to read.
     Painted through a mask like the header mark, so the brass comes from the
     token in both themes. */
  @media (min-width: 61rem) {
    .home-hero {
      display: grid;
      grid-template-columns: minmax(0, var(--measure)) 1fr;
      gap: var(--space-6);
      align-items: center;
    }

    .home-hero__emblem {
      display: block;
      width: 15rem;
      height: 15rem;
      justify-self: end;
      background-color: var(--color-accent);
      /* Propshaft resolves url() against this file's logical path, and this
         file lives under components/ while the image sits at the asset root. */
      mask: url("/assets/vulcan-symbol-filigree-8cf60c54.svg") no-repeat center / contain;
    }
  }

  /* Balance keeps the headline from stranding its last word on a line of
     its own when it wraps. */
  .home-hero h1 {
    text-wrap: balance;
  }

  .home-hero p {
    margin-top: var(--space-3);
  }

  /* The hero's one action is a link, not a button: navigation should not
     dress as a form control, and a single action needs no primary/secondary
     pairing to establish priority. */
  .home-hero__action {
    margin-top: var(--space-4);
    font-size: var(--text-lg);
  }

  .home-hero__action a {
    text-decoration: none;
  }

  .home-hero__action a:hover {
    text-decoration: underline;
  }

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

  .home-tool {
    display: block;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: var(--space-4);
    color: var(--color-ink);
    text-decoration: none;
  }

  .home-tool:hover {
    border-color: var(--color-accent);
  }

  /* A tile label, not a section heading: the paragraph below sets the tighter
     gap a card this size wants. */
  .home-tool h2 {
    font-size: var(--text-lg);
    color: var(--color-accent);
    margin-bottom: 0;
  }

  .home-tool p {
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-ink-muted);
  }

  .home-evidence p + p {
    margin-top: var(--space-3);
  }

  .home-how__list {
    list-style: none;
    padding: 0;
    display: grid;
    gap: var(--space-2);
  }
}