/* ---------- document page ----------
   Long legal text, first used for the Fundacja statute. It is set as a
   sheet of paper on the section's own colour: the page chrome (header,
   table of contents, back link) stays in the theme, and only the document
   itself flips to dark ink on cream, which reads better over thirteen
   paragraphs than cream on brown, and prints as what it is.

   The paper tokens are fixed rather than theme tokens, because the sheet
   should look the same whichever section links to it. */

.doc {
  --doc-top: clamp(16px, 3vw, 40px);
  --doc-paper: #f4ede2;
  --doc-ink: #2b1f1b;
  --doc-muted: #6b5a4f;
  --doc-accent: #7a5c35;
  --doc-rule: rgba(43, 31, 27, 0.14);
  padding: var(--doc-top) 0 clamp(64px, 8vw, 120px);
}

.doc-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}

/* table of contents, with the way back under it; the whole column stays
   pinned beside the sheet while the statute scrolls. Its sticky offset is
   exactly where it starts (header, the header's 20px margin, the top
   padding), so it is pinned from the first pixel instead of sliding a
   little way up before it catches. */

.doc-aside {
  position: sticky;
  top: calc(var(--header-h, 112px) + 20px + var(--doc-top));
}

.doc-toc__label {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-gold);
}

.doc-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-toc__link {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--color-line);
  font-size: 15px;
  line-height: 1.4;
}

.doc-toc__roman {
  color: var(--color-gold);
}

.doc-toc__title {
  color: var(--color-ink);
  text-wrap: balance;
}

.doc-toc__range {
  grid-column: 2;
  margin-top: 2px;
  font-size: 13px;
  color: var(--color-muted);
}

.doc-toc__link:hover .doc-toc__title {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* secondary button, drawn like .fd-btn--ghost on the Fundacja page */
.doc-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 24px;
  padding: 0 26px;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 540;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-ink);
  transition: background 0.25s ease, border-color 0.25s ease;
}

.doc-back:hover {
  border-color: var(--color-ink);
  background: rgba(244, 237, 226, 0.08);
}

/* the sheet */

.doc-sheet {
  padding: clamp(32px, 6vw, 88px) clamp(24px, 6vw, 96px);
  border-radius: 20px;
  background: var(--doc-paper);
  color: var(--doc-ink);
}

.doc-sheet > * {
  max-width: 760px;
  margin-inline: auto;
}

.doc-title {
  padding-bottom: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--doc-rule);
  text-align: center;
}

.doc-title h1 {
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 460;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.doc-title p {
  margin: 14px 0 0;
  font-size: 16px;
  color: var(--doc-muted);
}

.doc-chapter {
  padding-top: clamp(44px, 6vw, 64px);
}

.doc-chapter__label {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--doc-accent);
}

.doc-chapter__title {
  margin: 0;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* a paragraph: its § sits in a gutter, so the numbers form a column that
   can be scanned down the page */
.doc-par {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 16px;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--doc-rule);
}

.doc-par__num {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.7;
  color: var(--doc-accent);
  white-space: nowrap;
}

.doc-par__body {
  font-size: 17px;
  line-height: 1.7;
  text-wrap: pretty;
}

.doc-par__body p {
  margin: 0;
}

/* § 8 is the one paragraph the signed text gives a title of its own; the
   descendant selector outspecifies the margin reset on .doc-par__body p */
.doc-par__body .doc-par__subtitle {
  margin: 0 0 12px;
  font-weight: 600;
  color: var(--doc-ink);
}

.doc-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-list > li {
  display: grid;
  grid-template-columns: 2em minmax(0, 1fr);
  column-gap: 6px;
}

.doc-list > li + li {
  margin-top: 12px;
}

.doc-num {
  color: var(--doc-muted);
  font-variant-numeric: tabular-nums;
}

.doc-list--points {
  margin-top: 10px;
}

.doc-list--points > li {
  grid-template-columns: 2.4em minmax(0, 1fr);
}

.doc-list--points > li + li {
  margin-top: 4px;
}

.doc-signature {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: clamp(48px, 6vw, 72px);
  padding-top: 24px;
  border-top: 1px solid var(--doc-rule);
  font-size: 15px;
  color: var(--doc-muted);
}

.doc-signature p {
  margin: 0;
}

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .doc-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc-aside {
    position: static;
  }
}

@media (max-width: 640px) {
  /* the sheet runs edge to edge, so a phone keeps its width for the text */
  .doc-sheet {
    margin-inline: calc(var(--page-pad) * -1);
    padding-inline: 20px;
    border-radius: 0;
  }

  .doc-par {
    grid-template-columns: minmax(0, 1fr);
  }

  .doc-par__num {
    margin-bottom: 4px;
  }

  .doc-par__body {
    font-size: 16px;
  }
}

/* ---------- print ----------
   Only the document, black on white, with nothing split away from the
   heading it belongs to. */

@media print {
  .subpage-header,
  .drawer,
  .drawer-overlay,
  .uitint,
  .doc-aside {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
  }

  .doc {
    --doc-ink: #000;
    --doc-muted: #333;
    --doc-accent: #000;
    --doc-rule: #bbb;
    padding: 0;
  }

  .doc-layout {
    display: block;
  }

  .doc-sheet {
    padding: 0;
    background: none;
  }

  .doc-chapter__title,
  .doc-par__num {
    break-after: avoid;
  }

  .doc-list > li {
    break-inside: avoid;
  }
}