:root {
  color: #342817;
  background: #fffaf0;
  font-family:
    Inter,
    ui-rounded,
    "SF Pro Rounded",
    "SF Pro Display",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100svh;
  padding: calc(28px + env(safe-area-inset-top))
    calc(18px + env(safe-area-inset-right))
    calc(38px + env(safe-area-inset-bottom))
    calc(18px + env(safe-area-inset-left));
  background:
    radial-gradient(circle at 100% 0, #ffca4f52 0 12%, transparent 35%),
    radial-gradient(circle at 0 25%, #fff0b5 0 9%, transparent 30%),
    linear-gradient(180deg, #fffdf8 0%, #fff8e8 100%);
}

main {
  width: min(100%, 760px);
  margin: 0 auto;
}

.brand {
  display: flex;
  margin-bottom: 28px;
  align-items: center;
  gap: 14px;
}

.brand img {
  width: 58px;
  height: 58px;
  border: 2px solid #201b18;
  border-radius: 50%;
  box-shadow: 0 8px 24px #b46b1640;
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  color: #201b18;
  font-size: 20px;
}

.brand span {
  margin-top: 3px;
  color: #8a6a38;
  font-size: 13px;
}

article {
  padding: clamp(24px, 6vw, 48px);
  border: 1px solid #ead8b6;
  border-radius: 28px;
  background: #ffffffeb;
  box-shadow: 0 24px 70px #8d5f1820;
}

h1,
h2,
p,
ul {
  margin-block-start: 0;
}

h1 {
  margin-block-end: 10px;
  color: #201b18;
  font-size: clamp(32px, 8vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

.effective {
  margin-bottom: 30px;
  color: #8a6a38;
  font-size: 14px;
  font-weight: 700;
}

h2 {
  margin-top: 30px;
  margin-bottom: 10px;
  color: #6d430c;
  font-size: 20px;
  line-height: 1.25;
}

p,
li {
  color: #4b3b28;
  font-size: 16px;
  line-height: 1.68;
}

ul {
  padding-left: 22px;
}

a {
  color: #b65d00;
  font-weight: 700;
  text-underline-offset: 3px;
}

.links {
  display: flex;
  margin-top: 34px;
  flex-wrap: wrap;
  gap: 12px 22px;
  border-top: 1px solid #ead8b6;
  padding-top: 22px;
}

@media (max-width: 520px) {
  body {
    padding-inline: 12px;
  }

  article {
    border-radius: 22px;
  }
}