/* Responsive article and documentation layout shared by the public legacy pages. */

.content-main {
  min-height: 62vh;
  padding: clamp(34px, 6vw, 72px) 0 clamp(70px, 9vw, 116px);
  background:
    radial-gradient(circle at 92% 4%, rgba(47, 121, 105, 0.11), transparent 22rem),
    linear-gradient(180deg, #f8f5ed 0, #fffefa 22rem);
}

.content-wrap { max-width: 960px; }

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 28px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 680;
}

.breadcrumbs a { color: var(--jade); text-underline-offset: 3px; }
.breadcrumbs span[aria-hidden] { color: #9cacA8; }

.context-note {
  margin-bottom: 24px;
  padding: 18px 21px;
  color: #28423c;
  background: var(--jade-pale);
  border: 1px solid #c5ded7;
  border-left: 5px solid var(--jade);
  border-radius: 12px;
}

.context-note-history {
  background: #fbf3dc;
  border-color: #ead8a7;
  border-left-color: var(--gold);
}

.context-note strong { color: var(--forest); }
.context-note p { margin: 3px 0 0; color: inherit; font-size: 0.92rem; }
.context-note a { color: var(--forest); font-weight: 750; text-underline-offset: 3px; }

.legacy-article {
  padding: clamp(27px, 5vw, 62px);
  color: var(--ink);
  background: rgba(255, 254, 250, 0.98);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: 0 20px 60px rgba(18, 58, 52, 0.09);
  overflow-wrap: anywhere;
}

.legacy-article h1,
.legacy-article h2,
.legacy-article h3,
.legacy-article h4 {
  color: var(--forest) !important;
  font-style: normal !important;
  text-align: left !important;
}

.legacy-article h1 {
  max-width: 790px;
  margin: 0 0 30px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.35rem, 6vw, 4.4rem);
  font-weight: 650;
  letter-spacing: -0.045em;
}

.legacy-article h2 {
  margin: 2.3em 0 0.65em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.55rem, 3.5vw, 2.25rem);
  letter-spacing: -0.025em;
}

.legacy-article h3 { margin: 2em 0 0.55em; font-size: 1.25rem; }
.legacy-article h4 { margin: 1.7em 0 0.45em; font-size: 1.05rem; }

.legacy-article p,
.legacy-article li,
.legacy-article dd,
.legacy-article dt,
.legacy-article span {
  color: inherit !important;
  line-height: 1.72 !important;
}

.legacy-article p { margin: 0 0 1.15em; font-size: clamp(1rem, 1.4vw, 1.08rem) !important; }
.legacy-article li { margin: 0.38em 0; font-size: 1rem !important; }
.legacy-article ul, .legacy-article ol { margin: 0.8em 0 1.5em; padding-left: 1.5em; }
.legacy-article li::marker { color: var(--jade); font-weight: 800; }

.legacy-article a {
  color: #176657 !important;
  font-weight: 650;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.legacy-article a:hover, .legacy-article a:focus-visible { color: #0c443a !important; }
.legacy-article strong, .legacy-article b { color: #173c35; }
.legacy-article hr { margin: 2.2rem 0; border: 0; border-top: 1px solid var(--line); }

.legacy-article img {
  max-width: 100%;
  height: auto;
  margin-block: 0.6rem;
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(18, 58, 52, 0.12);
}

.legacy-article a > img { transition: transform 160ms ease, box-shadow 160ms ease; }
.legacy-article a:hover > img { transform: translateY(-2px); box-shadow: 0 13px 34px rgba(18, 58, 52, 0.18); }

.legacy-article table {
  display: block;
  max-width: 100%;
  margin: 1.5rem 0;
  overflow-x: auto;
  border-spacing: 0;
  border-collapse: collapse;
  -webkit-overflow-scrolling: touch;
}

.legacy-article th, .legacy-article td {
  padding: 10px 12px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.legacy-article th { color: var(--forest); background: var(--jade-pale); }
.legacy-article blockquote {
  margin: 1.8rem 0;
  padding: 1rem 1.3rem;
  color: #344a45;
  background: var(--cream);
  border-left: 4px solid var(--gold);
}

.resource-list {
  display: grid;
  gap: 12px;
  padding-left: 0 !important;
  list-style: none;
}

.resource-list li {
  display: grid;
  gap: 3px;
  margin: 0;
  padding: 16px 18px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 11px;
}

.resource-list li > a { font-size: 1.06rem; }
.resource-list li > span { color: var(--muted) !important; font-size: 0.94rem; }

.article-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  margin-top: 28px;
  padding: 26px clamp(22px, 4vw, 34px);
  color: white;
  background: var(--forest);
  border-radius: 18px;
  box-shadow: 0 16px 38px rgba(18, 58, 52, 0.17);
}

.article-next div { display: flex; flex-direction: column; }
.article-next span { color: #9dcbc1; font-size: 0.74rem; font-weight: 820; letter-spacing: 0.1em; text-transform: uppercase; }
.article-next strong { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.2rem, 2.5vw, 1.65rem); }
.article-next .button { flex: 0 0 auto; color: var(--forest); background: white; border-color: white; box-shadow: none; }

@media (max-width: 700px) {
  .content-main { padding-top: 25px; }
  .content-wrap { width: min(calc(100% - 24px), var(--wrap)); }
  .legacy-article { border-radius: 15px; }
  .legacy-article h1 { font-size: clamp(2rem, 11vw, 3.1rem); }
  .article-next { align-items: stretch; flex-direction: column; }
  .article-next .button { width: 100%; }
}

@media print {
  .site-header, .site-footer, .breadcrumbs, .article-next, .context-note { display: none; }
  .content-main, .legacy-article { padding: 0; background: white; border: 0; box-shadow: none; }
  .legacy-article a { color: black !important; }
}