/* Article reading surface. Content and emphasis are selected by the editors. */
body[data-page="article"] {
  --article-red: #9c3529;
  --article-ink: #202822;
  --article-rule: #d7d2c8;
  --article-paper: #f5f1e9;
}

.article-intro {
  max-width: 1240px;
  padding-top: 20px;
  padding-bottom: 48px;
}
.article-masthead {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
  gap: clamp(36px, 5vw, 78px);
  align-items: start;
  padding: 18px 0 42px;
  border-bottom: 2px solid var(--article-ink);
}
.article-masthead-copy, .article-masthead-side { min-width: 0; }
.article-masthead-copy > .eyebrow {
  display: inline-block;
  margin: 0 0 17px;
  padding: 5px 10px;
  border-left: 3px solid var(--article-red);
  background: #f2e6df;
  color: #842e25;
  font-size: 12px;
  letter-spacing: .06em;
}
.article-intro .article-masthead h1 {
  max-width: 780px;
  margin: 0 0 20px;
  color: var(--article-ink);
  font-size: clamp(31px, 3.2vw, 44px);
  font-weight: 750;
  line-height: 1.42;
  letter-spacing: .015em;
  overflow-wrap: anywhere;
  word-break: auto-phrase;
  text-wrap: pretty;
}
.article-intro .article-masthead .article-summary {
  max-width: 710px;
  margin: 0;
  color: #465148;
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.95;
}
.article-byline {
  margin: 22px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--article-rule);
  color: #596259;
  font-size: 12px;
  line-height: 1.8;
}
.article-masthead-side { display: grid; gap: 18px; }
.article-intro .article-thesis {
  max-width: none;
  margin: 0;
  padding: 23px 25px 25px;
  background: #fff4a8;
  border: 1px solid #dfc963;
  border-left: 6px solid #bd3628;
  border-radius: 2px 12px 12px 2px;
  box-shadow: 5px 5px 0 #ebe3d3;
}
.article-intro .article-thesis > .eyebrow {
  display: block;
  margin: 0 0 10px;
  color: #9c2c22;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
}
.article-intro .article-thesis > p:last-child {
  margin: 0;
  color: #252419;
  font-size: clamp(19px, 1.55vw, 23px);
  font-weight: 800;
  line-height: 1.75;
}
.article-masthead-visual { margin: 0; }
.article-masthead-visual img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #ded9cf;
  border-radius: 3px;
  background: var(--article-paper);
}
.article-masthead-visual figcaption { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; color: #596259; font-size: 12px; }
.article-masthead-visual figcaption a { margin-left: auto; }
.article-masthead-visual a { color: #465b4d; text-underline-offset: .2em; }

/* A compact route to the exercise keeps the article itself near the top. */
.article-body .practice-cover {
  margin: 0 0 12px;
  padding: 20px 22px 18px;
  color: var(--article-ink);
  background: #e8efe8;
  border: 1px solid #c9d8cc;
  border-radius: 4px;
}
.article-body .practice-cover .practice-title {
  margin: 0 0 13px !important;
  color: #244f40;
  font-size: 15px !important;
  font-weight: 800;
  line-height: 1.5 !important;
  letter-spacing: .04em;
}
.article-body .practice-cover ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 13px 0 0;
  border-top: 1px solid #b6cbbd;
}
.article-body .practice-cover li { display: flex; flex-direction: row; gap: 9px; align-items: baseline; color: #253b30; font-size: 14px; line-height: 1.65; }
.article-body .practice-cover li span, .article-body .toc-list a, .article-body .article-section h2 { word-break: auto-phrase; }
.article-body .practice-cover li b { flex: 0 0 auto; color: #9c3529; font-size: 13px; font-variant-numeric: tabular-nums; }
.article-body .worksheet-download { padding: 10px 0 20px; border-bottom: 1px solid var(--article-rule); }
.article-body .worksheet-download strong { font-size: 14px; }
.article-body .worksheet-download p { margin: 3px 0 !important; color: #596259; }
.article-body .worksheet-download .button { min-height: 44px; padding: 9px 16px; font-size: 13px; }

.article-body .toc {
  margin: 30px 0 50px;
  padding: 20px 22px 13px;
  background: var(--article-paper);
  border: 1px solid #ded7ca;
  border-top: 3px solid var(--article-red);
  border-radius: 3px;
}
.article-body .toc-heading { display: block; padding: 0 0 10px; }
.article-body .toc-heading strong { color: var(--article-ink); font-size: 18px; }
.article-body .toc-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 24px;
  margin: 0;
  border-top: 1px solid #d7d0c4;
}
.article-body .toc-list li { min-width: 0; border-color: #d7d0c4; }
.article-body .toc-list a { grid-template-columns: 25px minmax(0, 1fr) 15px; gap: 9px; min-height: 56px; padding: 10px 2px; color: #253b30; font-size: 14px; }
.article-body .toc-number { width: auto; height: auto; color: var(--article-red); background: transparent; font-size: 12px; }
.article-body .toc-list a:hover { color: var(--article-red); text-decoration: underline; text-underline-offset: .2em; }

.article-body { max-width: 760px; color: var(--article-ink); }
.article-body .article-section { margin: 0 0 42px; padding: 0 0 38px; border-color: var(--article-rule); }
.article-body .article-section h2 {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
  margin: 0 0 22px;
  padding: 0 0 15px;
  border-bottom: 2px solid #3d5949;
  color: var(--article-ink);
  font-size: clamp(23px, 2.4vw, 30px);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.article-body .section-number {
  width: auto;
  height: auto;
  margin: 4px 0 0;
  padding: 0 0 8px;
  border-radius: 0;
  border-bottom: 3px solid #be4834;
  background: none;
  color: var(--article-red);
  font: 800 19px/1.2 var(--sans);
}
.article-body .article-section > p { margin: 0 0 1.15em; font-size: 17px; line-height: 2; }
.article-body .article-section > p:last-child { margin-bottom: 0; }
.article-body .article-figure, .article-body .article-example, .article-body .article-quote, .article-body .article-table { margin-block: 28px; }
.article-body .article-example, .article-body .article-quote, .article-body .article-callout { border-radius: 2px 8px 8px 2px; }
.article-body .article-table { border-color: #c8d0c6; border-radius: 3px; }
.article-body .article-table caption { background: #dfe9df; color: #233d2e; }
.article-body .article-table thead { background: #edf3eb; }
.article-body .article-table tbody tr:nth-child(even) { background: #f7f8f4; }
.article-body .article-reference-group { padding-top: 16px; border-top: 1px solid var(--article-rule); }
.article-body .article-references a { border-radius: 3px; }
.reading-aside { align-self: start; }
.related-panel { border-radius: 4px; }

@media (max-width: 800px) {
  .article-masthead { grid-template-columns: 1fr; gap: 23px; padding-bottom: 30px; }
  .article-intro { padding-top: 8px; padding-bottom: 30px; }
  .article-intro .article-masthead h1 { font-size: clamp(28px, 6.8vw, 37px); line-height: 1.46; }
  .article-masthead-side { gap: 15px; }
  .article-intro .article-thesis { padding: 19px 20px; }
  .article-intro .article-thesis > p:last-child { font-size: 19px; }
  .article-masthead-visual img { max-height: 380px; width: auto; max-width: 100%; }
  .article-body .practice-cover { padding: 17px; }
  .article-body .practice-cover ol { grid-template-columns: 1fr; gap: 7px; }
  .article-body .worksheet-download { display: flex; flex-wrap: wrap; }
  .article-body .worksheet-download .button { width: auto; margin: 0; }
  .article-body .toc { margin: 25px 0 38px; padding: 17px 17px 10px; }
  .article-body .toc-list { grid-template-columns: 1fr; }
  .article-body .article-section { margin-bottom: 34px; padding-bottom: 30px; }
  .article-body .article-section h2 { grid-template-columns: 33px minmax(0, 1fr); gap: 10px; font-size: 23px; }
  .article-body .section-number { font-size: 16px; }
  .article-body .article-section > p { font-size: 16px; line-height: 1.95; }
  .reading-aside { position: static; }
}
@media (forced-colors: active) {
  .article-intro .article-thesis { border: 2px solid CanvasText; box-shadow: none; }
  .article-body .practice-cover, .article-body .toc { border: 1px solid CanvasText; }
}