* { box-sizing: border-box; } body { margin: 0; font-family: system-ui, sans-serif; color: #25485d; background: #f5f8fa; } a { color: #087f8c; } :focus-visible { outline: 3px solid #dca943; outline-offset: 3px; }
.public-document { max-width: 1100px; margin: auto; padding: 40px 28px; } header { padding-bottom: 24px; border-bottom: 1px solid #dce6ec; } header small { color: #668293; font-size: 10px; letter-spacing: .1em; } h1 { font-size: clamp(24px, 4vw, 36px); margin: 14px 0; } header p { color: #5f7b8d; } header span { font-size: 11px; color: #728999; }
.document-grid { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 40px; margin-top: 30px; } nav { display: flex; flex-direction: column; gap: 14px; font-size: 12px; align-self: start; position: sticky; top: 20px; } nav a { text-decoration: none; } article { background: white; border: 1px solid #e0e8ed; padding: 24px; border-radius: 16px; } section { scroll-margin-top: 20px; margin: 0 0 30px; } h2 { font-size: 17px; } p, li { font-size: 13px; line-height: 1.8; } #document-back { font-size: 12px; }
.document-embedded { background: #fff; } .document-embedded .public-document { padding: 24px; } .document-embedded .document-grid { grid-template-columns: 1fr; } .document-embedded nav { position: static; display: grid; grid-template-columns: 1fr 1fr; padding: 14px; border-radius: 12px; background: #f4f8fa; } .document-embedded nav strong { grid-column: 1 / -1; } .document-embedded article { padding: 0; border: 0; }
@media (max-width: 640px) { .public-document { padding: 24px 18px; } .document-grid { grid-template-columns: 1fr; gap: 24px; } nav { position: static; } article { padding: 18px; } .document-embedded .public-document { padding: 20px; } }