:root {
  --ink: #15221c;
  --forest: #123c2d;
  --green: #176b4d;
  --lime: #dff36b;
  --cream: #f7f5ee;
  --paper: #fffefa;
  --line: #dcded7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Arial, sans-serif; }
.site-header { width: min(960px, calc(100% - 48px)); height: 88px; margin: auto; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.site-header img { display: block; width: 156px; height: auto; }
.back-link { color: var(--green); font-size: 14px; font-weight: 650; text-decoration: none; }
.document { width: min(800px, calc(100% - 48px)); margin: 0 auto; padding: 78px 0 96px; }
.document > p:first-child strong { display: block; margin: 0 0 16px; color: var(--ink); font-size: clamp(44px, 7vw, 64px); line-height: 1; letter-spacing: -.05em; }
.document > p:nth-child(2) { margin: 0 0 32px; color: #5f6b65; font-size: 17px; }
.document h1 { margin: 52px 0 18px; color: var(--forest); font-size: 26px; line-height: 1.25; letter-spacing: -.025em; }
.document h2 { margin: 38px 0 16px; color: var(--forest); font-size: 20px; line-height: 1.3; letter-spacing: -.02em; }
.document h3 { margin: 34px 0 14px; color: var(--forest); font-size: 18px; }
.document p, .document li, .document td, .document th { color: #4e5b55; font-size: 15px; line-height: 1.72; }
.document ul, .document ol { padding-left: 24px; }
.document li { margin: 8px 0; }
.document table { width: 100%; margin: 22px 0; border-collapse: collapse; }
.document th, .document td { padding: 13px 14px; border: 1px solid var(--line); vertical-align: top; text-align: left; }
.document th { color: var(--forest); background: var(--cream); font-weight: 700; }
.document blockquote { margin: 28px 0; padding: 20px 24px; border-left: 4px solid var(--lime); background: var(--cream); }
.document blockquote p { margin: 0; color: var(--ink); font-size: 16px; }
.document a { color: var(--green); text-underline-offset: 3px; }
footer { display: flex; justify-content: space-between; gap: 24px; padding: 28px max(24px, calc((100% - 960px)/2)); color: #d6ded9; background: #0e2d22; font-size: 12px; }
footer a { color: white; text-decoration: none; }

@media (max-width: 560px) {
  .site-header { width: calc(100% - 28px); height: 70px; }
  .site-header img { width: 138px; }
  .document { width: calc(100% - 36px); padding: 52px 0 68px; }
  .document > p:first-child strong { font-size: 42px; }
  .document table { display: block; overflow-x: auto; }
  footer { flex-direction: column; }
}