/* Resources hub and article pages. Loaded after site.css. */

/* Article layout: reading column with a contents list on wide screens */
.article-head { padding-bottom: 24px; }
.article-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 64px; }
.article-back { margin-bottom: 28px; font-size: 15px; }
.article-back a { color: var(--muted); text-decoration: none; }
.article-back a::before { content: "\2039\00a0"; }
.article-back a:hover { color: var(--accent); }
.article-head h1 { max-width: 16ch; }
.article-head .lead { max-width: 640px; }
.article-body { padding-bottom: 96px; }
.article-main { min-width: 0; max-width: 700px; }
.article-side { display: none; }

@media (min-width: 1040px) {
  .article-grid { grid-template-columns: 240px minmax(0, 700px); }
  .article-head .article-main { grid-column: 2; }
  .article-side { display: block; }
  .article-toc { position: sticky; top: 104px; padding-top: 10px; }
}

.article-toc__title { font-weight: 600; color: var(--ink); font-size: 15px; margin-bottom: 10px; }
.article-toc ol { list-style: none; margin: 0; padding: 0; }
.article-toc li { margin: 0; }
.article-toc a { display: block; padding: 7px 12px; border-radius: 5px; color: var(--muted); text-decoration: none; font-size: 15px; line-height: 1.4; }
.article-toc a:hover { color: var(--accent); background: var(--paper); }

.article-main > h2:first-child { margin-top: 0.6em; }
.prose .article-list li { margin-bottom: 0.7em; }
.prose strong { color: var(--ink); font-weight: 600; }

/* Example emails: set like a letter on paper */
.email-example { background: var(--paper); border-radius: 8px; padding: 26px 30px 10px; margin: 0 0 28px; font-size: 17px; line-height: 1.65; }
.email-example + .email-example { margin-top: 0; }
.email-label { font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.email-subject { color: var(--muted); font-size: 15px; padding-bottom: 0; margin-bottom: 18px; }
@media (max-width: 640px) {
  .email-example { padding: 20px 18px 6px; margin-left: -4px; margin-right: -4px; }
}

/* Checklist: square box marker, item heading then a short explanation */
.prose ul.checklist { list-style: none; padding: 0; margin: 0 0 1.4em; }
.prose ul.checklist li { position: relative; padding: 12px 0 12px 40px; margin: 0; }
.prose ul.checklist li:nth-child(even) { background: transparent; }
.prose ul.checklist li::before { content: ""; position: absolute; left: 2px; top: 20px; width: 18px; height: 18px; border: 2px solid var(--accent); border-radius: 3px; background: #fff; }
.prose ul.checklist li strong { display: block; margin-bottom: 2px; }

/* End note */
.article-end { padding: 64px 0 72px; }
.article-end__title { font-size: clamp(24px, 2.6vw, 30px); }
.article-end p { max-width: 600px; }

/* Resources hub */
.hub-title { margin-bottom: 0.3em; }
.hub-intro { max-width: 620px; color: var(--text); }
.hub-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding-bottom: 104px; }
@media (min-width: 900px) {
  .hub-list { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: stretch; }
}
.hub-card { display: flex; flex-direction: column; text-decoration: none; color: var(--text); background: var(--paper); padding: 40px 36px 34px; }
.hub-card--major { background: var(--deep); color: var(--deep-text); }
.hub-card__title { font-family: var(--head); font-weight: 650; letter-spacing: -0.02em; color: var(--ink); font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; margin-bottom: 16px; max-width: 22ch; }
.hub-card--major .hub-card__title { color: #fff; font-size: clamp(28px, 3.2vw, 42px); }
.hub-card__text { font-size: 17px; line-height: 1.6; margin-bottom: 28px; max-width: 46ch; }
.hub-card__more { margin-top: auto; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.hub-card--major .hub-card__more { color: #fff; }
.hub-card:hover .hub-card__more { color: var(--accent-hover); }
.hub-card--major:hover .hub-card__more { color: var(--accent-soft); }
@media (max-width: 640px) {
  .hub-card { padding: 28px 22px 26px; }
}
@media (max-width: 640px) {
  .hub-list { padding-bottom: 64px; }
  .article-body { padding-bottom: 64px; }
}