/* Content pages emitted by the Python builder (not landings). */

.content-page {
  --ink: #183137;
  --muted: #718084;
  --paper: #f3eee6;
  --paper-deep: #e8dfd3;
  --line: rgba(24, 49, 55, 0.14);
  --accent: #b89267;
  --blue: #7f99a2;
  --blue-deep: #6f8992;
  --blue-soft: rgba(127, 153, 162, 0.16);
  --blue-wash: rgba(127, 153, 162, 0.08);
  color: var(--ink);
  background:
    radial-gradient(circle at 82% 12%, var(--blue-wash), transparent 32%),
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.6), transparent 34%),
    linear-gradient(180deg, #f6f1ea 0%, #f3eee6 100%);
}

.content-page a {
  color: inherit;
}

.page-grid {
  width: min(1310px, calc(100% - 64px));
  margin: 38px auto 54px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 70px;
  align-items: start;
}

.page-grid--single,
.page-grid--lesson {
  grid-template-columns: minmax(0, 1fr);
  max-width: 860px;
}

.content-column {
  min-width: 0;
}

.article-header {
  max-width: 860px;
}

.article-header__meta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 1em;
  margin: 0 0 22px;
}

.eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-size: 12px;
  line-height: 1.3;
  font-weight: 650;
}

/* Lesson pages: less “docs utility,” more series voice. */
.content-page--lesson .eyebrow {
  text-transform: none;
  letter-spacing: -0.01em;
  font-size: 16px;
  font-weight: 550;
  color: var(--blue-deep);
}

.article-header h1 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  font-weight: 680;
  text-wrap: balance;
}

.content-page--lesson .article-header h1 {
  font-size: clamp(30px, 3.4vw, 42px);
}

.article-level {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  white-space: nowrap;
  line-height: 1;
}

.article-level__prefix {
  color: var(--muted);
  font-size: 15px;
  font-weight: 550;
  letter-spacing: -0.01em;
}

.article-level__badge {
  padding: 0.28em 0.5em 0.24em;
  border-radius: 6px;
  background: rgba(127, 153, 162, 0.16);
  color: var(--blue-deep);
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
}

.article-level__badge:hover {
  background: rgba(127, 153, 162, 0.26);
  color: var(--ink);
}

.page-summary {
  box-sizing: border-box;
  margin: 22px 0 28px -12px;
  max-width: none;
  width: calc(100% + 34px);
  padding: 18px 22px 18px 20px;
  border-radius: 12px;
  border-left: 3px solid var(--accent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 50%),
    rgba(184, 146, 103, 0.12);
  box-shadow: inset 0 0 0 1px rgba(184, 146, 103, 0.22);
  color: var(--ink);
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.42;
  letter-spacing: -0.015em;
}

/* Lesson open: summary under the H1, not a callout panel. */
.content-page--lesson .page-summary {
  margin: 18px 0 0;
  max-width: 760px;
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: clamp(17px, 1.55vw, 19px);
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.meta-line {
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.hero-art {
  margin-top: 22px;
  min-height: 120px;
  max-height: 132px;
  border-radius: 8px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 64% 36%;
  background: #e8ded2;
}

.content-page--lesson .hero-art-slot {
  margin: 32px 0;
  padding: 0;
}

/* Decorative band: curves/lines on a soft field — not a meter-like fill strip. */
.content-page--lesson .hero-art {
  display: block;
  position: relative;
  margin: 0;
  min-height: 28px;
  max-height: 30px;
  border-radius: 8px;
  background:
    radial-gradient(ellipse 55% 140% at 78% 40%, rgba(47, 94, 104, 0.55), transparent 62%),
    radial-gradient(ellipse 48% 160% at 18% 110%, rgba(255, 255, 255, 0.38), transparent 60%),
    linear-gradient(160deg, #ece3d8 0%, #e6dbcf 48%, #d7e0e3 78%, #6f8f98 100%);
}

.content-page--lesson .hero-art__arc {
  position: absolute;
  inset: 0;
  background: transparent;
}

.content-page--lesson .hero-art__arc::before {
  width: 520px;
  height: 520px;
  border-width: 56px;
  left: -250px;
  top: -330px;
  border-color: rgba(255, 255, 255, 0.22);
}

.content-page--lesson .hero-art__panel,
.content-page--lesson .hero-art__shape {
  display: none;
}

.hero-art__flourish {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: none;
  pointer-events: none;
}

.content-page--lesson .hero-art__flourish {
  display: block;
}

.hero-art__stroke {
  fill: none;
  stroke-linecap: round;
}

.hero-art__stroke--warm {
  stroke: rgba(255, 255, 255, 0.62);
  stroke-width: 1.6;
}

.hero-art__stroke--cool {
  stroke: rgba(24, 49, 55, 0.22);
  stroke-width: 1.2;
}

.hero-art__stroke--fine {
  stroke: rgba(255, 255, 255, 0.42);
  stroke-width: 0.9;
}

.hero-art__ring {
  fill: none;
}

.hero-art__ring--left {
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 5;
}

.hero-art__ring--right {
  stroke: rgba(243, 238, 230, 0.48);
  stroke-width: 4;
}

.hero-art__arc {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(127, 153, 162, 0.18), transparent 55%),
    #ece3d8;
}

.hero-art__arc::before {
  content: "";
  position: absolute;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  border: 82px solid rgba(255, 255, 255, 0.36);
  left: -365px;
  top: -435px;
}

.hero-art__panel {
  background: linear-gradient(180deg, var(--blue), var(--blue-deep));
  position: relative;
  overflow: hidden;
}

.hero-art__shape {
  position: absolute;
  display: block;
  background: rgba(243, 238, 230, 0.22);
}

.hero-art__shape--circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  right: -18px;
  top: -22px;
  background: rgba(243, 238, 230, 0.18);
  box-shadow: inset 0 0 0 14px rgba(243, 238, 230, 0.12);
}

.hero-art__shape--bar {
  width: 54%;
  height: 10px;
  border-radius: 999px;
  left: 18%;
  bottom: 28%;
  background: rgba(243, 238, 230, 0.28);
}

.hero-art__shape--dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  left: 22%;
  top: 30%;
  background: rgba(243, 238, 230, 0.42);
}

.article-body {
  max-width: 865px;
  margin-top: 8px;
}

.article-body > h2 {
  margin: 0 0 15px;
  padding: 35px 0 0;
  border-top: 1px solid var(--line);
  font-size: 27px;
  letter-spacing: -0.035em;
  scroll-margin-top: 40px;
}

.article-body > h2:first-child {
  border-top: 0;
  padding-top: 20px;
}

/* Lesson pages: drop the hairline section rules; vary the breathing room. */
.content-page--lesson .article-body > h2 {
  border-top: 0;
  padding-top: 44px;
  margin: 0 0 12px;
  font-size: clamp(26px, 2.6vw, 32px);
}

.content-page--lesson .article-body > h2:first-child {
  padding-top: 28px;
}

.content-page--lesson .article-body > h2:nth-of-type(n + 3) {
  padding-top: 58px;
}

.content-page--lesson .article-body > h2:nth-of-type(n + 5) {
  padding-top: 70px;
}

/*
 * Art-band gutters must win over the H2 nth-of-type padding above.
 * Equal 32px above/below; strip the previous block's bottom margin so it
 * cannot stack on the slot's margin-top.
 */
.content-page--lesson .hero-art-slot + .article-body > h2:first-child,
.content-page--lesson .article-body > .hero-art-slot + h2 {
  padding-top: 0;
  margin-top: 0;
}

.content-page--lesson .article-body > p:has(+ .hero-art-slot),
.content-page--lesson .article-body > table:has(+ .hero-art-slot),
.content-page--lesson .article-body > ul:has(+ .hero-art-slot),
.content-page--lesson .article-body > ol:has(+ .hero-art-slot),
.content-page--lesson .article-body > blockquote:has(+ .hero-art-slot) {
  margin-bottom: 0;
}

/* Inline bands from <!-- art: band -->: same slim height, mirrored / cooler wash. */
.content-page--lesson .hero-art--inline {
  background:
    radial-gradient(ellipse 50% 150% at 22% 30%, rgba(47, 94, 104, 0.48), transparent 60%),
    radial-gradient(ellipse 42% 180% at 88% 120%, rgba(255, 255, 255, 0.34), transparent 58%),
    linear-gradient(20deg, #6f8f98 0%, #d7e0e3 28%, #e6dbcf 62%, #ece3d8 100%);
}

.content-page--lesson .hero-art--inline .hero-art__arc::before {
  left: auto;
  right: -240px;
  top: -300px;
}

.content-page--lesson .hero-art--inline .hero-art__stroke--warm {
  stroke: rgba(243, 238, 230, 0.7);
}

.content-page--lesson .hero-art--inline .hero-art__stroke--cool {
  stroke: rgba(24, 49, 55, 0.28);
}

.article-body > h3 {
  margin: 26px 0 10px;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.content-page--lesson .article-body > h3 {
  margin: 34px 0 10px;
  font-size: 20px;
  font-weight: 650;
  letter-spacing: -0.025em;
  color: var(--ink);
}

.article-body > p,
.article-body li {
  font-size: 17px;
  line-height: 1.63;
}

.content-page--lesson .article-body > p,
.content-page--lesson .article-body li {
  font-size: 18px;
  line-height: 1.65;
}

.article-body > p {
  margin: 0 0 18px;
  max-width: 760px;
}

.article-body > ul,
.article-body > ol {
  margin: 0 0 18px;
  padding: 0 0 0 1.2rem;
  display: grid;
  gap: 10px;
  max-width: 760px;
}

.article-body a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-body blockquote {
  margin: 8px 0 22px;
  max-width: 760px;
  padding: 16px 20px;
  border-radius: 12px;
  border-left: 3px solid var(--accent);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 50%),
    rgba(184, 146, 103, 0.12);
  box-shadow: inset 0 0 0 1px rgba(184, 146, 103, 0.22);
}

.article-body blockquote > p {
  margin: 0;
  max-width: none;
}

.article-body table {
  width: 100%;
  max-width: 760px;
  margin: 0 0 22px 14px;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 12px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 42%),
    var(--blue-wash);
  box-shadow: inset 0 0 0 1px rgba(127, 153, 162, 0.2);
  font-size: 16px;
  line-height: 1.45;
}

.article-body th,
.article-body td {
  padding: 11px 18px;
  text-align: left;
  vertical-align: top;
}

.article-body th {
  font-weight: 650;
  color: var(--ink);
  background: var(--blue-soft);
  border-bottom: 1px solid rgba(127, 153, 162, 0.22);
}

.article-body td {
  border-bottom: 1px solid rgba(24, 49, 55, 0.06);
}

.article-body tr:last-child td {
  border-bottom: 0;
}

/* Pair tables (VOTW + articles): shared soft panel. */
.content-page--votw .article-body table,
.content-page--articles .article-body table {
  width: 100%;
  max-width: 720px;
  margin: 10px 0 28px;
  padding: 12px 16px 14px;
  border-radius: 10px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 42%),
    var(--blue-wash);
  box-shadow: inset 0 0 0 1px rgba(127, 153, 162, 0.22);
  font-size: 17px;
  line-height: 1.5;
}

.content-page--votw .article-body > h3 + p + table,
.content-page--votw .article-body > h3 + table,
.content-page--articles .article-body > h3 + p + table,
.content-page--articles .article-body > h3 + table {
  margin-top: 2px;
}

.content-page--votw .article-body th,
.content-page--votw .article-body td,
.content-page--articles .article-body th,
.content-page--articles .article-body td {
  padding: 8px 28px 8px 4px;
  vertical-align: top;
}

.content-page--votw .article-body th,
.content-page--articles .article-body th {
  padding-bottom: 8px;
  background: none;
  border-bottom: 1px solid rgba(127, 153, 162, 0.28);
  color: var(--blue-deep);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.content-page--votw .article-body td,
.content-page--articles .article-body td {
  border-bottom: 0;
}

/* French | English: source strong, gloss quieter. */
.content-page--votw .article-body table.pair-table--example td:first-child,
.content-page--articles .article-body table.pair-table--example td:first-child {
  font-weight: 550;
  color: var(--ink);
}

.content-page--votw .article-body table.pair-table--example td:last-child,
.content-page--articles .article-body table.pair-table--example td:last-child {
  color: var(--muted);
  font-style: italic;
  font-weight: 400;
}

/* Incorrect | Correct: fix wins the eye. */
.content-page--votw .article-body table.pair-table--correction td:first-child,
.content-page--articles .article-body table.pair-table--correction td:first-child {
  color: var(--muted);
  font-weight: 400;
  font-style: italic;
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(24, 49, 55, 0.28);
}

.content-page--votw .article-body table.pair-table--correction td:last-child,
.content-page--articles .article-body table.pair-table--correction td:last-child {
  color: var(--ink);
  font-weight: 550;
  font-style: italic;
}

/* Same-language forms (e.g. conjugation): both columns match, no gloss styling. */
.content-page--votw .article-body table.pair-table--forms,
.content-page--articles .article-body table.pair-table--forms {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.45), transparent 50%),
    rgba(184, 146, 103, 0.1);
  box-shadow: inset 0 0 0 1px rgba(184, 146, 103, 0.22);
}

.content-page--votw .article-body table.pair-table--forms th,
.content-page--articles .article-body table.pair-table--forms th {
  border-bottom-color: rgba(184, 146, 103, 0.28);
  color: var(--accent);
}

.content-page--votw .article-body table.pair-table--forms td,
.content-page--articles .article-body table.pair-table--forms td {
  color: var(--ink);
  font-weight: 550;
  font-style: normal;
}

/* Shared catalog list: VOTW series index + what’s-new. */
.content-page .content-list {
  margin: 28px 0 48px;
  max-width: 760px;
  padding: 6px 22px 8px;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.35), transparent 48%),
    var(--blue-wash);
  box-shadow: inset 0 0 0 1px rgba(127, 153, 162, 0.22);
}

.content-page .content-list + .article-body {
  margin-top: 0;
}

.content-page .content-list ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.content-page .content-list__item {
  position: relative;
  margin: 0;
  padding: 16px 0 16px 1.35rem;
  border-bottom: 1px solid rgba(127, 153, 162, 0.22);
}

.content-page .content-list__item:last-child {
  border-bottom: 0;
}

.content-page .content-list__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.45em;
  width: 0.42em;
  height: 0.42em;
  border-radius: 50%;
  background: var(--blue-deep);
}

.content-page .content-list__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75em 1.5em;
  flex-wrap: nowrap;
}

.content-page .content-list__link {
  display: inline-block;
  text-decoration: none;
  color: var(--blue-deep);
  min-width: 0;
  flex: 1 1 auto;
}

.content-page .content-list__link:hover .content-list__title,
.content-page .content-list__link:focus-visible .content-list__title {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 0.14em;
}

.content-page .content-list__link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.content-page .content-list__title {
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 650;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.content-page .content-list__date {
  flex: 0 0 auto;
  margin-left: auto;
  text-align: right;
  color: var(--ink);
  font-size: 16px;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  line-height: 1.3;
  white-space: nowrap;
}

.content-page .content-list__kind {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 550;
}

.content-page .content-list__summary {
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
  max-width: 36em;
}

.article-end {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px 48px;
  align-items: start;
  justify-content: space-between;
  margin-top: 56px;
  padding: 36px 0 0;
  border-top: 1px solid var(--line);
  max-width: 760px;
}

.article-end__block--follow {
  justify-self: end;
  min-width: 140px;
}

.article-end__block h2 {
  margin: 0 0 18px;
  font-size: 20px;
  letter-spacing: -0.02em;
  font-weight: 600;
}

.article-end .mini-card-list {
  gap: 8px;
  width: 270px;
}

.article-end .mini-card {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 14px;
  border-radius: 9px;
  border-left: 3px solid var(--blue);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 50%),
    var(--blue-soft);
  box-shadow: inset 0 0 0 1px rgba(127, 153, 162, 0.34);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.article-end .mini-card:hover,
.article-end .mini-card:focus-visible {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), transparent 50%),
    rgba(127, 153, 162, 0.28);
  box-shadow: inset 0 0 0 1px rgba(127, 153, 162, 0.48);
}

.article-end .mini-card h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.3;
}

.article-end .mini-card:hover h3 {
  color: var(--ink);
}

.article-end .social-links {
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 0;
}

.sidebar {
  border-left: 1px solid var(--line);
  padding-left: 48px;
}

/* Drop the sidebar so its first heading lines up with the article H1. */
.page-grid--align-sidebar-title .sidebar {
  margin-top: calc(12px * 1.3 + 22px);
}

.page-grid--align-sidebar-title .sidebar > .sidebar-block:first-child {
  padding-top: 0;
}

.sidebar-block {
  padding: 10px 0 36px;
  border-bottom: 1px solid var(--line);
}

.sidebar-block + .sidebar-block {
  padding-top: 36px;
}

.sidebar-block h2 {
  margin: 0 0 22px;
  font-size: 23px;
  letter-spacing: -0.025em;
}

.newsletter-block {
  border-bottom: 0;
}

.toc {
  display: grid;
  gap: 16px;
}

.toc a {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.45;
  padding-left: 16px;
  border-left: 2px solid transparent;
  opacity: 0.78;
  text-decoration: none;
}

.toc a:hover {
  opacity: 1;
}

.mini-card-list {
  display: grid;
  gap: 20px;
}

.mini-card {
  display: grid;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}

.mini-card h3 {
  margin: 0;
  font-size: 16px;
  line-height: 1.35;
}

.mini-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.mini-card:hover h3 {
  color: var(--blue-deep);
}

.social-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 8px;
}

.social-links a {
  color: var(--blue-deep);
  font-size: 18px;
  font-weight: 550;
  line-height: 1.3;
  text-decoration: none;
}

.social-links a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 1050px) {
  .page-grid {
    grid-template-columns: 1fr;
  }

  .sidebar {
    border-left: 0;
    padding-left: 0;
  }
}

@media (max-width: 720px) {
  .page-grid {
    width: min(100% - 32px, 100%);
    margin: 24px auto 42px;
  }

  .article-header h1 {
    font-size: clamp(26px, 7vw, 36px);
  }

  .content-page--lesson .article-header h1 {
    font-size: clamp(28px, 7.5vw, 38px);
  }

  .article-end {
    grid-template-columns: 1fr;
    gap: 32px;
    margin-top: 44px;
    padding-top: 28px;
  }

  .article-end__block--follow {
    justify-self: start;
  }

  .page-summary {
    font-size: 16px;
  }

  .hero-art {
    grid-template-columns: 55% 45%;
    min-height: 100px;
    max-height: 112px;
  }

  .content-page--lesson .hero-art {
    display: block;
    min-height: 26px;
    max-height: 28px;
  }

  .article-body > h2 {
    font-size: 24px;
  }
}