.ab-document { max-width: 1280px; min-height: 70vh; margin: 0 auto; padding: 100px 40px 96px; }
.ab-document__article { max-width: 860px; }
.ab-document__header { margin-bottom: 40px; }
.ab-document__title { margin: 14px 0 0; font: 300 clamp(48px, 6vw, 80px)/1.04 "Newsreader", Georgia, serif; letter-spacing: -.025em; overflow-wrap: anywhere; }
.ab-document__title i { color: #3f5b2c; font-weight: inherit; }
.ab-document__content { max-width: 740px; overflow-wrap: anywhere; }
.ab-document__content h2 { margin: 40px 0 12px; font: 400 32px/1.2 "Newsreader", Georgia, serif; }
.ab-document__content h3 { margin: 26px 0 8px; font: 400 24px/1.25 "Newsreader", Georgia, serif; }
.ab-document__content p { margin: 0 0 18px; }
.ab-document__content :is(ul, ol) { padding-left: 24px; }
.ab-document__content a { color: #3f5b2c; text-underline-offset: 3px; }
.ab-document__placeholder { padding: 18px 22px; margin-bottom: 32px; border-left: 2px solid #f7b389; background: #fff; border-radius: 0 6px 6px 0; }
.ab-document__back { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; color: #3f5b2c; text-decoration: none; }
.ab-document__back:hover { text-decoration: underline; text-underline-offset: 4px; }
.ab-document__button { display: inline-flex; align-items: center; gap: 20px; padding: 12px 20px; background: #3f5b2c; color: #fff; border-radius: 4px; text-decoration: none; }
.ab-document__button:hover { background: #324923; }
.ab-document a:focus-visible { outline: 2px solid #3f5b2c; outline-offset: 5px; }
.ab-document--not-found { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.ab-document__error-copy > p { max-width: 44ch; margin: 26px 0; }
.ab-document__error-copy .ab-document__back { display: flex; width: fit-content; margin-top: 20px; }
.ab-document__error-art { position: relative; min-height: 390px; display: grid; place-items: center; }
.ab-document__error-art span { position: absolute; width: 240px; height: 240px; border-radius: 50%; background: #d8e9be; top: 0; left: 0; }
.ab-document__error-art span + span { width: 290px; height: 290px; background: #f7b389; top: 100px; left: auto; right: 0; }
.ab-document__error-art b { position: relative; font: 300 clamp(100px, 12vw, 180px)/1 "Newsreader", Georgia, serif; }
@media(max-width:767px) {
 .ab-document { padding: 56px 24px 64px; }
 .ab-document--not-found { grid-template-columns: minmax(0, 1fr); gap: 32px; }
 .ab-document__error-art { min-height: 220px; }
 .ab-document__error-art span { width: 160px; height: 160px; }
 .ab-document__error-art span + span { width: 180px; height: 180px; top: 40px; }
 .ab-document__header { margin-bottom: 30px; }
}

.ab-document a.ab-document__button {
  height: 48px;
  padding: 0 20px;
  gap: 8px;
  border: 1px solid rgba(35, 42, 34, .14);
  font: 400 15px/1 "Hanken Grotesk", Arial, sans-serif;
  letter-spacing: .03em;
  color: #fff;
  background: #3f5b2c;
  transition: background-color .25s ease;
}
.ab-document a.ab-document__button:hover,
.ab-document a.ab-document__button:focus-visible { color: #fff; background: #324923; }
.ab-document__button--return { margin-top: 30px; }
.ab-document a.ab-document__back { transition: color .25s ease; }
.ab-document a.ab-document__back:hover { color: #324923; }
.ab-document :is(.ab-document__button, .ab-document__back) svg { flex-shrink: 0; }

.ab-document__error-copy .ab-document__back svg {
  width: 28px;
  height: 28px;
  padding: 8px;
  border: 1px solid rgba(35, 42, 34, .14);
  border-radius: 50%;
  background: #fff;
  box-sizing: border-box;
}

.ab-document__error-copy .ab-document__button { min-width: 190px; justify-content: space-between; }
.ab-document__error-text { max-width: 44ch; margin: 26px 0; }