/* Public learning pages - editorial companion to the Omelet homepage. */
.learn-page {
  color: var(--ink, #171918);
  background: var(--paper, #f3f4ef);
}
.learn-main,
.learn-footer {
  width: min(1440px, calc(100% - 128px));
  margin-inline: auto;
}
.learn-page .eyebrow,
.learn-page .number {
  display: block;
  margin: 0;
  color: var(--muted, #686d69);
  font-size: var(--type-label,14px);
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.learn-page .eyebrow::before { display: none; }
.learn-page .eyebrow > span { margin-inline: 12px; color: #a2a69f; }
.learn-page a { color: inherit; text-underline-offset: .25em; }
.learn-page :is(a, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--ink, #171918);
  outline-offset: 5px;
  box-shadow: 0 0 0 7px var(--accent, #bba7e8);
}
.learn-curriculum {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--layout-gap,32px);
  padding-bottom: var(--section-space,56px);
}
.curriculum-aside {
  padding-top: 25px;
  border-top: 1px solid var(--ink, #171918);
}
.curriculum-aside h2 { font-size: var(--type-body,18px); font-weight: 500; letter-spacing: -.03em; }
.curriculum-aside p { margin: 20px 0 0; font-size: var(--type-compact,17px); color: var(--muted, #686d69); line-height: var(--leading-body,1.65); }
.course {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--flow-medium,20px);
  padding: var(--row-space,20px) 0;
  border-top: 1px solid var(--line, #d4d6d0);
}
.course:first-child { border-color: var(--ink, #171918); }
.course + .course { padding-top: var(--row-space,20px); }
.course .number {
  color: var(--ink, #171918);
  font-size: 32px;
  white-space: nowrap;
  min-width: 2ch;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.065em;
}
.course h2 { max-width: 700px; margin: 0; font-size: clamp(26px, 2.35vw, 35px); font-weight: 500; line-height: 1.4; letter-spacing: -.055em; }
.course h2 a { text-decoration: none; }
.course h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; }
.course p { max-width: 670px; margin: var(--flow-small,12px) 0 var(--flow-medium,20px); color: var(--muted, #686d69); font-size: var(--type-compact,17px); line-height: var(--leading-body,1.65); }
.course .text-link { display: inline-flex; gap: var(--flow-medium,20px); align-items: center; min-height:44px; padding: 8px 0; border: 0; color: var(--ink, #171918); font-size: var(--type-action,16px); font-weight: 500; text-decoration: none; }
.course .text-link span { font-size: 21px; transition: transform .2s ease; }
.course .text-link:hover span { transform: translate(2px, -2px); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: var(--layout-gap,32px); color: var(--muted, #686d69); font-size: var(--type-caption,14px); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs > span[aria-hidden] { opacity: .5; }
.article-layout { display: grid; grid-template-columns: 176px minmax(0, 820px); gap: var(--layout-gap,32px); padding-block: var(--layout-gap,32px) var(--section-space,56px); }
.article-sidebar { align-self: start; position: sticky; top: 125px; padding-top: 21px; border-top: 1px solid var(--line, #d4d6d0); }
.article-sidebar .number { font-size: var(--type-label,14px); }
.article-sidebar .number span { margin-left: 7px; }
.article-sidebar nav { display: grid; gap: 0; margin-top: var(--flow-small,12px); }
.article-sidebar nav a { display: block; padding: 13px 0; color: var(--muted, #686d69); font-size: var(--type-action,16px); line-height: var(--leading-body,1.65); letter-spacing: -.025em; text-decoration: none; }
.article-sidebar nav a[aria-current] { color: var(--ink, #171918); font-weight: 600; }
.article-sidebar nav a[aria-current]::before { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 8px 2px 0; background: var(--ink, #171918); }
.article-sidebar nav a:hover { text-decoration: underline; }
.article { min-width: 0; max-width: 820px; }
.article-header { padding-bottom: var(--layout-gap,32px); border-bottom: 1px solid var(--line, #d4d6d0); }
.article h1 { margin: 25px 0 0; font-size: clamp(40px, 4.05vw, 60px); font-weight: 500; line-height: 1.25; letter-spacing: -.065em; }
.article .dek { margin: 29px 0 0; color: var(--muted, #686d69); font-size: 20px; line-height: var(--leading-body,1.65); letter-spacing: -.025em; }
.article .meta { margin: 29px 0 0; color: var(--muted, #686d69); font-size: var(--type-label,14px); letter-spacing: .025em; }
.article section { margin-top: var(--layout-gap,32px); }
.article h2 { margin: 0 0 var(--flow-medium,20px); font-size: clamp(25px, 2.1vw, 29px); font-weight: 500; line-height: 1.45; letter-spacing: -.05em; }
.article h3 { margin: var(--layout-gap,32px) 0 var(--flow-small,12px); font-size: 21px; font-weight: 500; letter-spacing: -.03em; }
.article p { margin: 0; font-size: var(--type-body,18px); line-height: var(--leading-body,1.65); letter-spacing: -.015em; }
.article p + p { margin-top: var(--flow-small,12px); }
.article ul,
.article ol { margin: 20px 0; padding-left: 23px; font-size: var(--type-body,18px); line-height: var(--leading-body,1.65); }
.article li + li { margin-top: 10px; }
.article strong { font-weight: 600; }
.article blockquote { margin: 30px 0; padding: 8px 0 8px 24px; border-left: 2px solid var(--ink, #171918); color: var(--ink, #171918); font-size: 24px; font-weight: 400; line-height: 1.65; letter-spacing: -.04em; }
.example-box { margin: var(--flow-medium,20px) 0; padding: var(--flow-medium,20px); background: #eaebe8; border: 0; }
.example-box .eyebrow { margin-bottom: 12px; color: #545a50; }
.example-box p { font-size: var(--type-compact,17px); }
.table-wrap { max-width: 100%; margin-block: 28px; overflow-x: auto; overscroll-behavior-inline: contain; }
.article table { width: 100%; min-width: 420px; border-collapse: collapse; margin: 0; font-size: var(--type-compact,17px); line-height: var(--leading-body,1.65); }
.article th { padding: 12px 18px 12px 0; border-bottom: 1px solid var(--ink, #171918); text-align: left; font-weight: 600; vertical-align: top; }
.article td { padding: 17px 18px 17px 0; border-bottom: 1px solid var(--line, #d4d6d0); vertical-align: top; }
.article :is(th, td):first-child { width: 29%; }
.article .exercise { margin-top: var(--layout-gap,32px); padding-top: var(--flow-medium,20px); border-top: 1px solid var(--ink, #171918); }
.exercise h2::before { content: '↗'; margin-right: 12px; }
.article details { margin-top: var(--flow-medium,20px); padding-block: var(--row-space,20px); border-top: 1px solid var(--line, #d4d6d0); border-bottom: 1px solid var(--line, #d4d6d0); }
.article summary { cursor: pointer; min-height:44px; padding:8px 12px 8px 0; font-size: var(--type-compact,17px); font-weight: 500; line-height: 1.7; }
.article details > div { margin-top: 19px; }
.article details p { color: var(--muted, #686d69); font-size: var(--type-compact,17px); }
.article-next { display: flex; justify-content: space-between; gap: var(--layout-gap,32px); margin-top: var(--layout-gap,32px); padding-top: var(--flow-medium,20px); border-top: 1px solid var(--line, #d4d6d0); font-size: var(--type-action,16px); }
.article-next a { display:inline-flex; align-items:center; min-height:44px; padding-block: 8px; text-decoration: none; }
.article-next a:hover { text-decoration: underline; }
.article-next a:last-child { margin-left: auto; }
.learn-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 25px; padding-block: 34px 36px; border-top: 1px solid var(--line, #d4d6d0); }
.learn-footer nav { display: flex; gap: 25px; }
.learn-footer nav a { font-size: var(--type-navigation,16px); text-decoration: none; }
.learn-footer nav a:hover { text-decoration: underline; }
.learn-footer p { margin: 0; color: var(--muted, #686d69); font-size: var(--type-label,14px); }
@media (max-width: 1100px) {
  .learn-main, .learn-footer { width: calc(100% - 80px); }
  .article-layout { grid-template-columns: 176px minmax(0, 1fr); gap: var(--layout-gap,32px); }
  .course { grid-template-columns: 45px minmax(0, 1fr); gap: 20px; }
  .course .number { font-size: 31px; }
  .article h1 { font-size: 45px; }
}
@media (max-width: 760px) {
  .learn-main, .learn-footer { width: calc(100% - 40px); }
  .learn-curriculum { grid-template-columns: 1fr; gap: var(--layout-gap,24px); padding-bottom: var(--section-space,40px); }
  .curriculum-aside { display: grid; grid-template-columns: 1fr 2fr; gap: 8px 26px; padding-top: 20px; }
  .curriculum-aside h2 { grid-row: span 2; }
  .curriculum-aside p { margin-top: 0; font-size: var(--type-action,16px); }
  .course { grid-template-columns: 34px minmax(0, 1fr); gap: 16px; padding-bottom: var(--row-space,20px); }
  .course + .course { padding-top: var(--row-space,20px); }
  .course .number { margin-top: 3px; font-size: 24px; }
  .course h2 { font-size: 25px; }
  .course p { margin-block: 16px 16px; font-size: var(--type-compact,17px); }
  .breadcrumbs { margin-top: 30px; font-size: var(--type-label,14px); }
  .article-layout { display: flex; flex-direction: column; gap: 0; padding-block: var(--layout-gap,24px) var(--section-space,40px); }
  .article-sidebar { position: static; order: 2; margin-top: var(--layout-gap,24px); padding-top: var(--flow-medium,20px); width: 100%; }
  .article-sidebar nav { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 10px; }
  .article-sidebar nav a { font-size: var(--type-label,14px); line-height: 1.75; }
  .article-sidebar nav a[aria-current]::before { display: none; }
  .article-header { padding-bottom: 29px; }
  .article h1 { margin-top: 23px; font-size: 36px; line-height: 1.3; }
  .article .dek { margin-top: 23px; font-size: 18px; }
  .article .meta { margin-top: 24px; font-size: var(--type-label,14px); }
  .article section { margin-top: var(--layout-gap,24px); }
  .article h2 { margin-bottom: 17px; font-size: 25px; }
  .article p, .article ul, .article ol { font-size: var(--type-compact,17px); }
  .article blockquote { margin-block: 25px; padding-left: 18px; font-size: 22px; }
  .example-box { padding: 22px; }
  .example-box p { font-size: var(--type-compact,17px); }
  .article table { font-size: var(--type-action,16px); }
  .article .exercise { margin-top: var(--layout-gap,24px); padding-top: var(--flow-medium,20px); }
  .article-next { margin-top: var(--layout-gap,24px); }
  .learn-footer { gap: 22px; padding-block: 28px 30px; }
  .learn-footer p { flex-basis: 100%; }
}
@media (max-width: 380px) {
  .curriculum-aside { grid-template-columns: 1fr; gap: 15px; }
  .curriculum-aside h2 { grid-row: auto; }
  .article h1 { font-size: 33px; }
  .article-sidebar nav { grid-template-columns: 1fr; gap: 0; }
}
@media (prefers-reduced-motion: reduce) { .course .text-link span { transition: none; } }
@media print {
  .site-header, .learn-footer, .article-sidebar, .breadcrumbs, .article-next, .skip { display: none; }
  .learn-page { background: white; color: black; }
  .learn-main { width: 100%; max-width: none; }
  .article-layout { display: block; padding: 0; }
  .article { max-width: none; }
  .article h1 { font-size: 30pt; }
  .article h2 { font-size: 20pt; break-after: avoid; }
  .article section { margin-top: 24pt; }
  .example-box, .exercise { break-inside: avoid; }
  .table-wrap { overflow: visible; }
  .article details > div { display: block; }
}

/* The experiment keeps the lesson navigation useful without reserving a wide empty rail.
   Explicit scope is needed because the shared contract is loaded after this stylesheet. */
body.comparison-site.readable-layout .article-layout {
  grid-template-columns:176px minmax(0,1fr);
  gap:var(--layout-gap);
  padding-block:var(--layout-gap) var(--section-space);
}
body.comparison-site.readable-layout .article-sidebar nav a { font-size:var(--type-action); line-height:1.5; min-height:44px; }
body.comparison-site.readable-layout .article section { margin-top:var(--layout-gap); }
body.comparison-site.readable-layout .article section:first-child { margin-top:0; }
@media(max-width:760px) {
  body.comparison-site.readable-layout .article-sidebar { margin-top:var(--layout-gap); }
}