/* The house mark, wherever it stands. One knob — --seal-size — so a
   masthead, a pill, a sign-in door, and the front page can all wear the
   same star at their own scale. */
@layer components {

.seal {
  display: block;
  flex: none;
  inline-size: var(--seal-size, 1.4rem);
  block-size: var(--seal-size, 1.4rem);
}

/* Above a door: the mark, then the name under it. */
.seal--door {
  --seal-size: 3rem;
  margin: 0 auto 0.85rem;
}

/* Crowning the front page's hero, a little larger and a little brighter
   for having the whole page to itself. */
.seal--hero {
  --seal-size: 3.6rem;
  margin: 0 auto 1.1rem;
}

/* Inline in an eyebrow, riding with the small caps beside it. */
.seal--inline {
  --seal-size: 1.05rem;
  display: inline-block;
  vertical-align: -0.18em;
  margin-inline-end: 0.55rem;
}

}