.manifesto-page { --charter-line: #b7baaa; }
.manifesto-page .masthead [aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }
.charter-hero { display: grid; grid-template-columns: 1.35fr .85fr; align-items: center; gap: 10%; max-width: 1250px; margin-inline: auto; padding: 88px 4% 94px; }
.document-name { font: 400 20px/1.4 var(--display); color: var(--stone); margin-bottom: 34px; }
.charter-heading h1 { font-size: clamp(52px, 6.05vw, 88px); line-height: 1.055; letter-spacing: -.045em; }
.charter-deck { max-width: 470px; font-size: 16px; line-height: 1.8; color: var(--stone); margin-top: 30px; }
.charter-heading .text-link { margin-top: 25px; }
.charter-portrait { width: 100%; max-width: 380px; justify-self: end; }
.portrait-frame { padding: 9px; background: #d4d2c4; border: 1px solid #a2a18b; border-radius: 200px 200px 3px 3px; }
.portrait-frame img { width: 100%; aspect-ratio: .72; height: auto; object-fit: cover; object-position: 50% center; border-radius: 200px 200px 1px 1px; }
.charter-portrait figcaption { font-size: 11px; text-align: center; line-height: 1.6; color: var(--stone); margin-top: 15px; }
.charter-body { display: grid; grid-template-columns: .65fr 1.5fr; gap: 10%; max-width: 1130px; margin-inline: auto; border-top: 1px solid var(--charter-line); padding: 78px 0 100px; }
.charter-margin { min-width: 0; }
.charter-index { position: sticky; top: 36px; display: flex; flex-direction: column; align-items: flex-start; }
.charter-index p { font: 400 20px/1.4 var(--display); margin-bottom: 22px; }
.charter-index a { display: block; padding-block: 9px; font-size: 13px; line-height: 1.6; color: var(--stone); }
.charter-index a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.charter-text { min-width: 0; }
.charter-text section { scroll-margin-top: 36px; }
.charter-text h2 { font-size: clamp(29px, 2.6vw, 38px); line-height: 1.22; letter-spacing: -.035em; text-wrap: balance; }
.charter-text p { font-size: 16px; line-height: 1.85; color: #4d584c; margin-top: 20px; }
.charter-text a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; overflow-wrap: anywhere; }
.charter-text a:is(:hover, :focus-visible) { color: #786638; text-underline-offset: 6px; }
.charter-history, .charter-sources { margin-top: 50px; padding-top: 40px; border-top: 1px solid var(--charter-line); }
.charter-sources strong { display: inline-block; color: var(--ink); font: 400 23px/1.4 var(--display); margin-bottom: 8px; }
.charter-sources p + p { margin-top: 30px; }
.charter-text .charter-note { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--charter-line); font-size: 14px; line-height: 1.75; color: var(--stone); }
.charter-note strong { color: var(--ink); font-weight: 500; }
.charter-preamble { padding-bottom: 14px; }
.charter-preamble h2 { font-size: clamp(36px, 3.2vw, 46px); }
.charter-preamble > p:first-of-type { margin-top: 28px; }
.charter-article { display: grid; grid-template-columns: 40px 1fr; gap: 20px; margin-top: 50px; padding-top: 40px; border-top: 1px solid var(--charter-line); }
.article-number { font: 400 20px/1.55 var(--display); color: #786638; }
.charter-closing { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 12%; padding: 76px 7%; color: var(--marble); background: var(--temple); }
.closing-inscription h2 { font-size: clamp(40px, 4.3vw, 66px); line-height: 1.12; }
.closing-inscription p { font: 400 18px/1.6 var(--display); color: #cfbd94; margin-top: 24px; }
.closing-invitation { max-width: 360px; }
.closing-invitation p { color: #bdc4b8; font-size: 14px; line-height: 1.8; margin-bottom: 20px; }
.closing-invitation .text-link { display: block; color: #dfcda9; margin-top: 12px; }
.closing-invitation .text-link:hover { color: var(--marble); }
@media (max-width: 1100px) {
  .charter-hero { padding: 64px 2% 74px; gap: 7%; }
  .charter-body { margin-inline: 2%; grid-template-columns: .7fr 1.8fr; gap: 7%; }
  .charter-heading h1 { font-size: clamp(48px, 6.2vw, 72px); }
  .document-name { margin-bottom: 25px; font-size: 18px; }
}
@media (max-width: 700px) {
  .manifesto-page .masthead { flex-wrap: wrap; gap: 4px 18px; padding-block: 16px 10px; }
  .manifesto-page .masthead nav { gap: 20px; }
  .manifesto-page .masthead nav a { display: flex; }
  .manifesto-page .masthead nav a:first-child { display: none; }
  .charter-hero { display: block; padding: 42px 4px 42px; }
  .document-name { font-size: 17px; margin-bottom: 24px; }
  .charter-heading h1 { font-size: clamp(43px, 10.5vw, 68px); max-width: 540px; }
  .charter-break { display: none; }
  .charter-deck { font-size: 15px; line-height: 1.75; margin-top: 24px; max-width: 360px; }
  .charter-heading .text-link { margin-top: 20px; }
  .charter-portrait { max-width: 275px; margin: 38px auto 0; }
  .portrait-frame img { aspect-ratio: .9; }
  .charter-body { display: block; padding: 30px 4px 54px; margin: 0; }
  .charter-index { position: static; display: flex; flex-flow: row wrap; gap: 4px 22px; padding-bottom: 30px; margin-bottom: 40px; border-bottom: 1px solid var(--charter-line); }
  .charter-index p { width: 100%; font-size: 19px; margin-bottom: 12px; }
  .charter-index a { padding-block: 11px; min-height: 44px; font-size: 12px; }
  .charter-text h2 { font-size: 30px; }
  .charter-preamble h2 { font-size: 35px; }
  .charter-text p { font-size: 15px; line-height: 1.85; margin-top: 18px; }
  .charter-article { grid-template-columns: 27px 1fr; gap: 12px; padding-top: 30px; margin-top: 36px; }
  .article-number { font-size: 18px; }
  .charter-closing { display: block; padding: 42px 24px 44px; margin-inline: -18px; }
  .closing-inscription h2 { font-size: clamp(37px, 9vw, 54px); }
  .closing-inscription p { font-size: 17px; margin-top: 20px; }
  .closing-invitation { margin-top: 32px; max-width: 400px; }
}
@media (max-width: 360px) {
  .charter-closing { margin-inline: -14px; padding-inline: 18px; }
  .charter-text h2 { font-size: 27px; }
  .charter-preamble h2 { font-size: 32px; }
  .charter-article { gap: 10px; grid-template-columns: 22px 1fr; }
}
@media print {
  .manifesto-page .masthead nav, .charter-margin, .charter-heading .text-link, .closing-invitation .text-link, .footer { display: none; }
  .charter-hero { padding-block: 30px; }
  .charter-body { display: block; max-width: 680px; padding-block: 30px; }
  .charter-article { break-inside: avoid; }
  .charter-closing { background: none; color: var(--ink); padding: 30px 0; }
  .closing-inscription p, .closing-invitation p { color: var(--ink); }
}