@layer components {
  .box {
    --padding-block: var(--box-padding-block, var(--block-space));
    --padding-inline: var(--box-padding-inline, var(--inline-space-double));
    --background: var(--box-background, linear-gradient(var(--color-ink-weakest)), var(--noise));

    padding: var(--padding-block) var(--padding-inline);

    background: var(--background);
    background-blend-mode: hard-light;
    border-radius: var(--radius);

    &:where(.padder) {
      --box-padding-inline: 0;
    }
  }

  .box__title {
    font-size: var(--text-large);
  }

  .box > * {
    --child-radius: calc(var(--radius) - var(--padding-block));
  }

  .box--lit {
    position: relative;
    box-shadow: var(--shadow);

    &::after {
      content: "";
      position: absolute;
      inset: 0;
      box-shadow: inset 0 0.2em 0.1em -0.1em var(--lightsource);
      border-radius: var(--radius);
      pointer-events: none;
    }
  }

  .box--card {
    padding: 0.75rem;
    transition-property: transform;

    &:hover {
      transform: translateY(-2px);
    }
  }
}