@layer core, frame, blocks;

@layer core {
  :root {
    --hc-sheet: #ffffff;
    --hc-ink: #141619;
    --hc-lead: #494f56;
    --hc-dim: #6a7178;
    --hc-foot: #8a9097;
    --hc-btn: #e2550e;
    --hc-btn-active: #c84808;
    --hc-tile: #edeff2;
    --hc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  }

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

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

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

@layer frame {
  .hc-page {
    padding: 28px 20px 40px;
  }

  .hc-box {
    max-width: 620px;
    margin-inline: auto;
  }

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

@layer blocks {
  .hc-h1 {
    margin: 0 0 12px;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.4px;
  }

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

  .hc-pic-wrap {
    margin: 0 0 24px;
  }

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

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

  .hc-action-link:hover,
  .hc-action-link:active {
    background: var(--hc-btn-active);
  }

  .hc-badge-line {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.4;
    color: var(--hc-dim);
  }

  .hc-foot-disc { margin: 0 0 1em; }

  .hc-foot-nav { display: block; margin-bottom: 1em; }

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

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

  @media (min-width: 620px) {
    .hc-h1 { font-size: 38px; }
    .hc-sub { font-size: 20px; }

    .hc-action-link {
      display: inline-block;
      min-width: 360px;
    }
  }
}