@layer ses.main {
  #root {
    background: linear-gradient(var(--ses-color-brand-rice), var(--ses-color-brand-white));
    color: var(--ses-color-brand-eggplant);
    display: grid;
    inline-size: 100%;
    min-block-size: 100dvb;
    place-items: center;
    place-content: center;
    text-align: center;
    padding: var(--ses-spacing-lg);
    gap: var(--ses-spacing-lg);
  }

  :is(h1, h2, h3, h4, h5, h6) {
    font-family: var(--ses-font-family-heading);
    font-weight: var(--ses-font-weight-bold);
  }

  :is(p, span) {
    max-inline-size: 70ch;
    font-size: var(--ses-font-size-lg);
    line-height: var(--ses-line-height-relaxed);
  }

  :is(a, a:link, a:visited) {
    color: var(--ses-color-brand-plum);
    font-family: var(--ses-font-family-body-italic);
    text-underline-offset: 20%;
    transition: text-underline-offset var(--ses-motion-duration-fast) ease,
      color var(--ses-motion-duration-fast) ease;
  }

  :is(a:hover, a:active) {
    color: var(--ses-color-brand-eggplant);
  }

  :is(a:hover) {
    text-underline-offset: 25%;
  }

  :is(a:focus-visible) {
    outline: 2px solid currentColor;
    outline-offset: 0.25em;
  }

  .ses-logo {
    inline-size: clamp(250px, 30vw, 300px);
    block-size: auto;
  }


  .visually-hidden {
    position: absolute;
    display: inline-block;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    border: none;
    clip: rect(0 0 0 0);
  }
}