@layer components {
  /* One homepage box: the blog box's look, shared by every box type */
  .box {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    background: var(--color-surface);
    border: var(--border-w) solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-pop);
  }

  .box__title {
    margin: 0;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xl);
    color: var(--color-on-accent);
    background: var(--color-header-nav);
    border-bottom: var(--border-w) solid var(--color-border);
  }

  /* Floral title bar with a navy outline on the word */
  .box--bar-floral .box__title {
    background-image: var(--floral-pattern);
    background-size: var(--floral-pattern-size);
    -webkit-text-stroke: var(--logo-outline-w) var(--color-border);
    paint-order: stroke fill;
    text-shadow: var(--space-1) var(--space-1) 0 var(--color-border);
  }

  .box__body {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    padding: var(--space-4);
  }

  .box__oops {
    margin: 0;
    color: var(--color-ink-soft);
  }
}