@layer setup, wrapper, widgets;

@layer setup {
  :root {
    --ef-paper: #ffffff;
    --ef-text: #15171a;
    --ef-sub: #474d53;
    --ef-faint: #686f76;
    --ef-legal: #888e94;
    --ef-accent: #dc4d0a;
    --ef-accent-deep: #c04106;
    --ef-placeholder: #edeff1;
    --ef-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  *, *::before, *::after { box-sizing: border-box; }

  html { -webkit-text-size-adjust: 100%; }

  body {
    margin: 0;
    background: var(--ef-paper);
    color: var(--ef-text);
    font: 400 17px/1.5 var(--ef-stack);
    text-align: center;
    -webkit-font-smoothing: antialiased;
  }
}

@layer wrapper {
  .ef-body {
    padding: 28px 20px 40px;
  }

  .ef-wrap {
    max-width: 620px;
    margin-inline: auto;
  }

  .ef-foot {
    max-width: 620px;
    margin: 28px auto 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ef-legal);
  }
}

@layer widgets {
  .ef-title {
    margin: 0 0 12px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.4px;
  }

  .ef-deck {
    margin: 0 0 22px;
    font-size: 18px;
    line-height: 1.45;
    color: var(--ef-sub);
  }

  .ef-figure {
    margin: 0 0 24px;
  }

  .ef-photo {
    display: block;
    width: 300px;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    margin-inline: auto;
    border-radius: 12px;
    background: var(--ef-placeholder);
  }

  .ef-cta {
    display: block;
    padding: 17px 22px;
    border-radius: 10px;
    background: var(--ef-accent);
    color: #fff;
    font-size: 19px;
    font-weight: 700;
    text-decoration: none;
  }

  .ef-cta:hover,
  .ef-cta:active {
    background: var(--ef-accent-deep);
  }

  .ef-caption {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--ef-faint);
  }

  .ef-foot-note { margin: 0 0 1em; }

  .ef-foot-links { display: block; margin-bottom: 1em; }

  .ef-foot-corp { margin: 0; font-size: 11px; line-height: 1.6; }

  .ef-foot a { color: var(--ef-legal); }

  @media (min-width: 620px) {
    .ef-title { font-size: 38px; }
    .ef-deck { font-size: 20px; }

    .ef-cta {
      display: inline-block;
      min-width: 360px;
    }
  }
}