/* Shared typography, reading layout, process course and controls. */
:root {
  --paper:#f5f1e8;
  --ink:#22221f;
  --muted:#6c6a61;
  --line:#d0ccbf;
  --accent:#e8cd2e;
  --yellow:#f2da40;
  --link:#685310;
  --surface:#ebe6da;
  --meta-surface:#f7edb6;
  --meta-ink:#625013;
  --panel-padding:clamp(20px,3vw,32px);
  font-family:Arial,'Segoe UI',sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.5;
  font-synthesis:none
}

* {
  box-sizing:border-box
}
body {
  margin:0
}
a {
  color:inherit;
  text-underline-offset:.19em;
  text-decoration-thickness:1px
}
a:hover {
  color:var(--link)
}
button,input {
  font:inherit;
  color:inherit
}
button,summary {
  cursor:pointer
}
button {
  min-height:44px
}
a,button,input,summary {
  touch-action:manipulation
}
:focus-visible {
  outline:2px solid var(--link);
  outline-offset:5px
}
[hidden] {
  display:none!important
}
h1,h2,h3,p,figure {
  margin:0
}
h1,h2,h3 {
  text-wrap:balance
}
h1,h2,h3 {
  line-height:1.08;
  letter-spacing:-.035em
}
h1 {
  font-size:clamp(36px,8.7vw,60px);
  font-weight:750;
  overflow-wrap:break-word
}
h2 {
  font-size:29px
}
h3 {
  font-size:23px
}
p {
  margin-bottom:1em
}
ul,ol {
  padding-left:1.3em
}
button {
  border-radius:0
}
.skip {
  position:fixed;
  top:-120px;
  left:12px;
  background:white;
  padding:12px;
  z-index:50
}
.skip:focus {
  top:12px
}
.masthead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 18px;
  padding:18px 0;
  border-bottom:1px solid var(--ink)
}
.wordmark {
  font-size:23px;
  font-weight:800;
  letter-spacing:-1.2px;
  text-decoration:none;
  white-space:nowrap
}
.wordmark span {
  font-weight:400
}
.wordmark i {
  font-style:normal;
  color:var(--link);
  margin-left:3px
}
.top-nav {
  display:flex;
  gap:14px;
  font-size:12px
}
.top-nav a {
  padding:12px 0;
  text-decoration:none;
  white-space:nowrap
}
.top-nav a[aria-current] {
  text-decoration:underline;
  text-decoration-thickness:2px
}
.site-footer {
  margin:65px 18px 0;
  border-top:1px solid var(--ink);
  padding:23px 0 32px;
  display:grid;
  gap:14px;
  font-size:13px
}
.site-footer>a:first-child {
  font-weight:700
}
.site-footer p {
  color:var(--muted);
  max-width:350px;
  margin:0
}
.site-footer>a:last-child {
  color:var(--muted)
}
main:focus {
  outline:none
}

.cover {
  background:var(--yellow);
  margin:20px 10px 0;
  padding:23px 16px 30px;
  position:relative;
  overflow:hidden
}
.cover-kicker {
  display:flex;
  flex-wrap:wrap;
  gap:3px 20px;
  font-size:11px;
  margin-bottom:26px
}
.cover h1 {
  font-size:clamp(35px,8.6vw,64px);
  letter-spacing:-.055em;
  line-height:1.02;
  max-width:1060px;
  position:relative;
  z-index:1
}
.wide-break {
  display:none
}
.cover-bottom {
  margin-top:30px;
  display:grid;
  gap:25px;
  position:relative;
  z-index:1
}
.cover-lead {
  font-size:21px;
  line-height:1.25;
  letter-spacing:-.03em;
  margin:0
}
.cover-lead em {
  font-style:normal
}
.cover-note {
  max-width:390px;
  font-size:15px
}
.cover-note>b {
  display:block;
  font-size:16px;
  margin-bottom:7px
}
.cover-note p {
  line-height:1.5;
  margin-bottom:20px
}
.start-link {
  display:inline-flex;
  align-items:center;
  gap:20px;
  font-weight:700;
  text-decoration:none;
  border-bottom:2px solid var(--ink);
  padding:8px 0;
  min-height:44px
}
.start-link span {
  font-size:24px
}
.cover-index {
  display:none
}

.syllabus,.how-to,.sources-page {
  margin:50px 18px 0
}
.section-heading {
  display:grid;
  gap:18px;
  margin-bottom:26px
}
.section-heading h2 {
  font-size:30px
}
.section-heading p {
  font-size:13px;
  line-height:1.6;
  margin:0
}
.quiet {
  font-size:12px;
  line-height:1.5;
  color:var(--muted)
}
.chapter-list {
  list-style:none;
  margin:0;
  padding:0
}
.chapter-list li {
  border-top:1px solid var(--line)
}
.chapter-list li:last-child {
  border-bottom:1px solid var(--ink)
}
.chapter-number {
  font-size:22px;
  font-weight:400;
  letter-spacing:-1px;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}
.chapter-row h3 {
  font-size:23px;
  line-height:1.14;
  letter-spacing:-.035em
}
.chapter-row p {
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
  margin:10px 0 0;
  max-width:580px
}
.chapter-arrow {
  font-size:24px;
  grid-row:1;
  grid-column:3
}
.how-to {
  display:grid;
  gap:23px;
  padding-top:12px
}
.how-to h2 {
  font-size:31px
}
.how-to p {
  font-size:16px;
  max-width:570px
}
.how-to a {
  font-size:14px;
  color:var(--link)
}

#reader-tools {
  position:sticky;
  top:0;
  z-index:20;
  background:var(--paper)
}
.reader-tools-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:4px 18px;
  border-bottom:1px solid var(--line)
}
.back-link {
  font-size:13px;
  text-decoration:none;
  padding:12px 0
}
#course-menu {
  font-size:13px
}
#course-menu summary {
  list-style:none;
  padding:12px 0;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:5px
}
#course-menu summary::-webkit-details-marker {
  display:none
}
#course-menu summary>span:last-child {
  margin-left:8px
}
#course-menu[open] summary>span:last-child {
  transform:rotate(180deg)
}
#menu-links {
  position:absolute;
  left:10px;
  right:10px;
  top:51px;
  max-height:75vh;
  max-height:75dvh;
  overflow:auto;
  background:var(--paper);
  border:1px solid var(--ink);
  box-shadow:0 12px 20px #2222;
  padding:10px
}
#menu-links a {
  display:flex;
  gap:14px;
  align-items:baseline;
  padding:13px 10px;
  text-decoration:none;
  border-bottom:1px solid var(--line);
  font-size:15px;
  line-height:1.25
}
#menu-links a:last-child {
  border-bottom:0
}
#menu-links a span {
  color:var(--muted);
  font-size:13px
}
#menu-links a[aria-current] {
  background:var(--yellow)
}
.reading-track {
  height:2px;
  background:var(--line)
}
#reading-fill {
  display:block;
  height:2px;
  background:var(--ink);
  width:0
}

.chapter {
  margin:0 18px
}
.chapter-header {
  padding:35px 0 30px;
  border-bottom:1px solid var(--ink)
}
.eyebrow {
  font-size:11px;
  letter-spacing:.045em;
  line-height:1.6;
  margin:0 0 18px
}
.chapter-header .eyebrow {
  display:flex;
  justify-content:space-between;
  gap:12px
}
.chapter-header .eyebrow>span {
  color:var(--muted);
  letter-spacing:0
}
.chapter-header h1 {
  max-width:950px;
  margin-bottom:23px
}
.standfirst {
  font-size:19px;
  line-height:1.5;
  letter-spacing:-.02em;
  max-width:720px;
  margin:0
}
.article-layout {
  display:grid
}
.contents {
  padding:22px 0 27px;
  border-bottom:1px solid var(--line);
  margin-bottom:28px
}
.contents summary {
  font-size:14px;
  font-weight:700;
  list-style:none;
  display:flex;
  justify-content:space-between;
  gap:10px;
  min-height:44px;
  align-items:center
}
.contents summary::-webkit-details-marker {
  display:none
}
.contents details[open] summary>span {
  transform:rotate(180deg)
}
.contents ol {
  margin:8px 0 0;
  padding-left:20px;
  font-size:14px
}
.contents li {
  padding:4px 0;
  color:var(--muted)
}
.contents a {
  display:block;
  padding:4px 0;
  text-decoration:none;
  color:var(--muted)
}
.contents a:hover,.contents a[aria-current] {
  color:var(--ink);
  text-decoration:underline
}
.article-body {
  min-width:0
}
.chapter-figure {
  padding:23px 17px;
  background:var(--yellow);
  margin-bottom:48px
}
.chapter-figure figcaption {
  font-size:20px;
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.03em;
  margin-bottom:25px
}
.figure-caption {
  font-size:12px!important;
  line-height:1.5;
  margin:22px 0 0;
  max-width:580px
}
.process-line {
  display:grid;
  grid-template-columns:1fr 20px 1fr;
  align-items:center;
  gap:12px 7px;
  font-size:14px;
  font-weight:700;
  line-height:1.25
}
.process-line>span {
  border-top:2px solid var(--ink);
  padding-top:12px
}
.process-line>b:nth-of-type(2) {
  display:none
}
.process-line>span:last-child {
  grid-column:1/-1
}
.process-line>b {
  font-size:22px
}
.return-line {
  margin-top:20px;
  border-top:1px dashed var(--ink);
  padding-top:12px;
  font-size:13px
}
.time-contrast {
  display:flex;
  gap:25px
}
.time-contrast>div {
  flex:1
}
.time-contrast strong {
  font-size:48px;
  letter-spacing:-3px;
  font-weight:500;
  line-height:1
}
.time-contrast strong span {
  font-size:18px;
  letter-spacing:-.5px;
  margin-left:4px
}
.time-contrast p {
  font-size:12px;
  margin:10px 0 0
}
.cause-map>b {
  font-size:24px
}
.cause-map ul {
  font-size:15px;
  margin-bottom:0
}
.cause-map li {
  margin:9px 0
}
.before-after {
  display:grid;
  gap:15px
}
.before-after>div {
  border-top:1px solid var(--ink);
  padding-top:10px
}
.before-after span {
  font-size:11px
}
.before-after p {
  font-size:17px;
  line-height:1.3;
  margin:8px 0 0
}
.pilot-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.pilot-grid b {
  font-size:11px;
  font-weight:400
}
.pilot-grid p {
  font-size:16px;
  line-height:1.2;
  margin:5px 0 0;
  font-weight:700
}
.equation {
  display:flex;
  align-items:baseline;
  gap:7px
}
.equation>span {
  flex:1;
  font-size:11px;
  line-height:1.35
}
.equation b {
  display:block;
  font-size:25px;
  white-space:nowrap;
  letter-spacing:-1px;
  margin-bottom:10px
}
.equation>strong {
  font-size:19px
}
.result-check {
  display:grid;
  gap:7px;
  font-size:19px;
  line-height:1.2
}
.result-check b {
  font-weight:400;
  font-size:17px
}

.text-section {
  position:relative;
  margin-bottom:58px;
  scroll-margin-top:78px
}
.section-number {
  font-size:13px;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
  margin-bottom:12px
}
.text-section>h2 {
  font-size:30px;
  max-width:680px;
  margin-bottom:20px
}
.part-lead {
  font-size:18px;
  line-height:1.5;
  margin:0 0 25px;
  font-weight:500
}
.prose {
  font-family:Georgia,'Times New Roman',serif;
  font-size:18px;
  line-height:1.65
}
.prose p {
  margin-bottom:1.2em
}
.prose h3 {
  font-family:Arial,'Segoe UI',sans-serif;
  font-size:24px;
  line-height:1.16;
  margin:33px 0 16px;
  letter-spacing:-.035em
}
.prose article {
  margin:0
}
.prose .panel {
  font-family:Arial,'Segoe UI',sans-serif;
  margin:30px 0
}
.prose .panel>h3 {
  margin-top:0
}
.prose .experiment {
  border-top:2px solid var(--ink);
  border-bottom:1px solid var(--line);
  padding:25px 0
}
.prose .eyebrow {
  display:block;
  font-size:11px;
  margin-bottom:15px
}
.flow {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:22px 0
}
.flow>div {
  display:flex;
  flex-direction:column;
  border-top:2px solid var(--line);
  padding-top:10px
}
.flow .waiting {
  border-color:var(--ink)
}
.flow small {
  font-size:12px;
  color:var(--muted)
}
.flow b {
  font-size:14px;
  line-height:1.3;
  margin:8px 0 16px
}
.flow strong {
  font-size:23px;
  font-weight:400;
  margin-top:auto
}
.insight {
  padding:18px;
  background:#e8e4d9;
  font-size:15px
}
.insight p {
  font-size:14px;
  margin:8px 0 0
}
.prose label {
  font-size:16px
}
.prose input[type=range] {
  width:100%;
  min-height:44px;
  accent-color:var(--ink)
}
.numbers {
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  margin:12px 0 20px
}
.numbers small {
  font-size:12px
}
.numbers b {
  display:block;
  font-size:27px;
  letter-spacing:-1px
}
.prose .muted {
  font-size:13px;
  color:var(--muted)
}

.quiz {
  border-top:2px solid var(--ink);
  padding-top:24px;
  margin-bottom:50px;
  scroll-margin-top:78px
}
.quiz h2 {
  font-size:26px;
  margin-bottom:23px
}
.quiz-options {
  display:grid;
  gap:9px
}
.quiz-options button {
  display:flex;
  align-items:baseline;
  gap:13px;
  text-align:left;
  padding:15px 12px;
  border:1px solid var(--line);
  background:transparent;
  font-size:15px;
  line-height:1.4
}
.quiz-options button span {
  color:var(--muted);
  font-size:12px
}
.quiz-options button:hover,.quiz-options button[aria-pressed=true] {
  border-color:var(--ink);
  background:var(--yellow)
}
.explain {
  font-size:14px;
  border:0;
  background:transparent;
  text-decoration:underline;
  text-underline-offset:4px;
  padding:12px 0;
  margin-top:8px
}
.feedback {
  font-size:16px;
  line-height:1.5;
  border-left:3px solid var(--ink);
  padding:4px 0 4px 18px;
  margin-top:20px
}
.takeaway {
  border-top:1px solid var(--ink);
  padding:26px 0 10px;
  scroll-margin-top:78px
}
.takeaway h2 {
  font-size:31px;
  margin-bottom:18px
}
.takeaway>p:not(.quiet):not(.eyebrow) {
  font-size:20px;
  line-height:1.45;
  letter-spacing:-.025em
}
.mark-read {
  padding:13px 17px;
  background:var(--ink);
  color:var(--paper);
  font-size:14px;
  border:1px solid var(--ink);
  margin:9px 0 12px
}
.mark-read[aria-pressed=true] {
  background:transparent;
  color:var(--ink)
}
.lesson-sources {
  margin-top:24px;
  color:var(--muted);
  font-size:13px
}
.lesson-sources h2 {
  font-size:15px;
  letter-spacing:0
}
.lesson-sources li {
  margin:9px 0
}
.chapter-pagination {
  margin:40px 0 0;
  border-top:1px solid var(--ink);
  display:grid;
  gap:28px;
  padding-top:22px
}
.chapter-pagination a {
  text-decoration:none
}
.previous {
  font-size:14px;
  max-width:270px
}
.chapter-pagination small {
  display:block;
  font-size:12px;
  font-weight:400;
  margin-bottom:7px;
  color:var(--muted)
}
.next {
  display:grid;
  grid-template-columns:1fr 35px;
  column-gap:10px;
  background:var(--yellow);
  padding:22px 18px
}
.next small {
  grid-column:1/-1;
  color:var(--ink)
}
.next b {
  font-size:26px;
  line-height:1.08;
  letter-spacing:-.04em
}
.next>span {
  font-size:30px;
  align-self:end
}

.sources-page h1 {
  margin:12px 0 24px
}
.source-intro {
  font-family:Georgia,serif;
  font-size:18px;
  line-height:1.65;
  max-width:680px;
  margin:32px 0
}
.bibliography {
  list-style:none;
  padding:0;
  margin:38px 0
}
.bibliography li {
  display:grid;
  grid-template-columns:26px 1fr;
  gap:12px;
  border-top:1px solid var(--line);
  padding:23px 0
}
.bibliography li>span {
  font-size:13px;
  color:var(--muted)
}
.bibliography h2 {
  font-size:21px;
  line-height:1.2;
  letter-spacing:-.03em
}
.bibliography p {
  font-size:15px;
  margin:12px 0 0;
  max-width:630px;
  color:var(--muted)
}
.noscript {
  margin:30px
}
section:focus,h1:focus {
  outline:none
}

@media(min-width:480px) {
  .masthead,.site-footer {
    margin-left:28px;
    margin-right:28px
  }
  .top-nav {
    font-size:14px;
    gap:24px
  }
  .cover {
    margin:25px 15px 0;
    padding:28px
  }
  .cover h1 {
    font-size:clamp(42px,8.5vw,76px)
  }
  .cover-kicker {
    font-size:13px
  }
  .cover-bottom {
    grid-template-columns:1fr 1fr;
    gap:28px
  }
  .cover-note {
    font-size:14px
  }
  .cover-lead {
    font-size:25px
  }
  .cover-index {
    display:block;
    position:absolute;
    right:25px;
    bottom:-16px;
    font-size:130px;
    line-height:1;
    letter-spacing:-10px;
    color:#2221;
    pointer-events:none
  }
  .chapter-arrow {
    grid-column:4
  }
  .chapter-row h3 {
    font-size:26px
  }
  .syllabus,.how-to,.sources-page {
    margin-left:28px;
    margin-right:28px
  }
  .chapter {
    margin:0 28px
  }
  .reader-tools-inner {
    padding-left:28px;
    padding-right:28px
  }
  .process-line {
    grid-template-columns:1fr 20px 1fr 20px 1fr
  }
  .process-line>b:nth-of-type(2) {
    display:block
  }
  .process-line>span:last-child {
    grid-column:auto
  }
  .chapter-figure {
    padding:27px
  }
  .time-contrast strong {
    font-size:64px
  }
  .equation b {
    font-size:38px
  }
  .equation>span {
    font-size:13px
  }
  .equation>strong {
    font-size:25px
  }
  .result-check {
    grid-template-columns:1fr 15px 1fr 15px 1fr;
    font-size:17px;
    gap:10px;
    align-items:center
  }

}

@media(min-width:800px) {
  .masthead,.site-footer {
    max-width:1304px;
    margin-left:44px;
    margin-right:44px
  }
  .masthead {
    padding:24px 0
  }
  .wordmark {
    font-size:29px
  }
  .cover {
    margin:30px 28px 0;
    padding:35px 38px 42px
  }
  .cover-kicker {
    margin-bottom:42px;
    gap:50px
  }
  .cover h1 {
    font-size:clamp(68px,7.9vw,108px);
    line-height:.98;
    letter-spacing:-.055em
  }
  .wide-break {
    display:block
  }
  .cover-bottom {
    margin-top:45px;
    grid-template-columns:1fr 1fr;
    gap:60px
  }
  .cover-lead {
    font-size:32px;
    line-height:1.2
  }
  .cover-note {
    max-width:400px;
    font-size:16px
  }
  .cover-note>b {
    font-size:19px
  }
  .cover-index {
    font-size:180px;
    bottom:-24px
  }
  .syllabus,.how-to,.sources-page {
    margin:80px 44px 0;
    max-width:1304px
  }
  .section-heading {
    grid-template-columns:1fr 1fr;
    align-items:end;
    gap:40px;
    margin-bottom:35px
  }
  .section-heading h2 {
    font-size:43px
  }
  .section-heading p {
    justify-self:end;
    font-size:14px
  }
  .chapter-number {
    font-size:30px
  }
  .chapter-row h3 {
    font-size:34px
  }
  .chapter-row p {
    font-size:15px;
    max-width:700px
  }
  .chapter-arrow {
    font-size:30px
  }
  .how-to {
    grid-template-columns:1fr 1fr;
    gap:50px
  }
  .how-to h2 {
    font-size:43px
  }
  .how-to p {
    font-size:18px
  }
  .site-footer {
    grid-template-columns:1fr 2fr 1fr;
    gap:40px;
    margin-top:90px
  }
  .site-footer>a:last-child {
    justify-self:end
  }
  .chapter {
    margin:0 44px;
    max-width:1304px
  }
  .chapter-header {
    padding:50px 0 45px
  }
  .chapter-header .eyebrow {
    justify-content:flex-start;
    gap:60px;
    font-size:13px
  }
  .chapter-header h1 {
    font-size:72px;
    line-height:1.01;
    letter-spacing:-.055em;
    max-width:1000px
  }
  .standfirst {
    font-size:23px;
    max-width:770px
  }
  .article-layout {
    grid-template-columns:180px minmax(0,720px);
    gap:35px;
    align-items:start;
    margin-top:36px
  }
  .contents {
    position:sticky;
    top:74px;
    border:0;
    margin:0;
    padding:0;
    max-height:calc(100vh - 100px);
    overflow:auto
  }
  .contents summary {
    pointer-events:none;
    font-size:12px;
    min-height:30px
  }
  .contents summary>span {
    display:none
  }
  .contents ol {
    padding-left:16px;
    font-size:13px;
    line-height:1.4
  }
  .contents a {
    padding:5px 0
  }
  .chapter-figure {
    margin-bottom:58px;
    padding:30px
  }
  .chapter-figure figcaption {
    font-size:25px
  }
  .text-section>h2 {
    font-size:39px;
    margin-bottom:23px
  }
  .part-lead {
    font-size:21px
  }
  .prose {
    font-size:20px;
    line-height:1.7
  }
  .prose h3 {
    font-size:28px;
    margin-top:38px
  }
  .text-section {
    margin-bottom:75px
  }
  .flow {
    grid-template-columns:repeat(4,1fr)
  }
  .quiz h2 {
    font-size:31px
  }
  .quiz-options button {
    font-size:17px;
    padding:18px
  }
  .chapter-pagination {
    grid-template-columns:1fr 2fr;
    gap:45px;
    align-items:start;
    margin-top:60px;
    padding-top:30px
  }
  .next {
    padding:27px
  }
  .next b {
    font-size:35px
  }
  .sources-page h1 {
    font-size:85px
  }
  .sources-page {
    max-width:970px
  }
  .bibliography h2 {
    font-size:26px
  }
  .bibliography li {
    grid-template-columns:50px 1fr;
    gap:18px
  }
  .bibliography p {
    font-size:17px
  }
  .reader-tools-inner {
    padding-left:44px;
    padding-right:44px;
    max-width:1392px;
    margin:auto
  }
  #menu-links {
    left:auto;
    right:44px;
    width:400px
  }
  .before-after {
    grid-template-columns:1fr 1fr;
    gap:24px
  }
  .chapter-header .eyebrow span {
    margin-left:0
  }

}

@media(min-width:1200px) {
  .masthead,.site-footer {
    margin-left:auto;
    margin-right:auto;
    width:calc(100% - 88px)
  }
  .cover {
    max-width:1336px;
    margin-left:auto;
    margin-right:auto;
    padding:42px 48px 50px
  }
  .cover h1 {
    font-size:102px
  }
  .cover-bottom {
    grid-template-columns:1fr 440px
  }
  .cover-index {
    right:35px;
    font-size:210px;
    bottom:-29px
  }
  .cover-lead {
    font-size:37px
  }
  .syllabus,.how-to,.sources-page {
    margin-left:auto;
    margin-right:auto;
    width:calc(100% - 88px)
  }
  .chapter {
    margin-left:auto;
    margin-right:auto;
    width:calc(100% - 88px)
  }
  .article-layout {
    grid-template-columns:240px minmax(0,740px);
    gap:75px
  }
  .chapter-header .standfirst {
    margin-left:315px
  }
  .chapter-header h1 {
    font-size:88px;
    max-width:1170px
  }
  .chapter-header {
    padding-bottom:48px
  }
  .contents {
    padding-right:25px
  }
  .contents ol {
    font-size:14px
  }
  .chapter-pagination {
    grid-template-columns:240px 1fr;
    gap:75px;
    max-width:1055px
  }
  .text-section .section-number {
    position:absolute;
    right:calc(100% + 22px);
    top:7px;
    white-space:nowrap
  }
  .time-contrast strong {
    font-size:85px
  }
  .chapter-figure {
    padding:33px
  }
  .source-intro {
    margin-left:110px
  }
  .bibliography {
    margin-left:110px
  }

}

@media(prefers-reduced-motion:no-preference) {
  a,button {
    transition:color .12s,background .12s
  }
  .chapter-row:hover .chapter-arrow {
    transform:translate(2px,-2px)
  }

}

.contents {
  scroll-margin-top:78px
}
.reader-tools-inner {
  gap:10px
}
.back-link {
  white-space:nowrap;
  font-size:12px
}

.process-line {
  grid-template-columns:1fr
}
.process-line>b {
  transform:rotate(90deg);
  justify-self:center;
  line-height:1
}
.process-line>b:nth-of-type(2) {
  display:block
}
.process-line>span:last-child {
  grid-column:auto
}

@media(min-width:480px) {
  .process-line {
    grid-template-columns:1fr 20px 1fr 20px 1fr
  }
  .process-line>b {
    transform:none
  }
  .back-link {
    font-size:13px
  }

}

.next {
  grid-template-columns:minmax(0,1fr) 30px
}
.next b {
  grid-column:1/-1;
  overflow-wrap:break-word
}
.next>span {
  grid-column:2
}

@media(min-width:800px) {
  .next b {
    grid-column:1
  }
  .next>span {
    grid-row:2
  }

}

@media print {
  .masthead,#reader-tools,.contents,.site-footer,.chapter-pagination,.mark-read,.quiz-options,.explain,.skip {
    display:none
  }
  .chapter {
    margin:0;
    width:auto
  }
  .chapter-header h1 {
    font-size:32pt
  }
  .article-layout {
    display:block
  }
  .article-body {
    max-width:none
  }
  .text-section .section-number {
    position:static
  }
  .prose {
    font-size:12pt
  }
  .chapter-figure {
    break-inside:avoid
  }
  .text-section>h2 {
    font-size:24pt
  }
  h2,h3 {
    break-after:avoid
  }
  .cover {
    background:white
  }
  .chapter-header .standfirst {
    margin-left:0
  }

}

/* Worked examples stay optional and work without JavaScript. */
.lesson-practice {
  margin:32px 0;
  padding:22px 18px;
  background:#ebe6da;
  border-top:2px solid var(--ink)
}

.prose .lesson-practice h3 {
  margin:0 0 16px;
  font-size:24px
}

.lesson-practice details,.extra-note {
  margin:20px 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:4px 0
}

.lesson-practice summary,.extra-note summary {
  font-family:Arial,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.45;
  padding:14px 0;
  cursor:pointer;
  font-weight:700
}

.lesson-practice details[open]>summary,.extra-note[open]>summary {
  margin-bottom:10px
}

.prose .practice-check {
  font-family:Arial,'Segoe UI',sans-serif;
  font-size:15px;
  line-height:1.55;
  margin:18px 0 0
}

.lesson-practice dt {
  font-weight:700;
  margin-top:14px
}
.lesson-practice dd {
  margin:4px 0 0
}

.table-scroll {
  max-width:100%;
  overflow-x:auto;
  margin:26px 0;
  font-family:Arial,'Segoe UI',sans-serif
}

.prose table {
  width:100%;
  border-collapse:collapse;
  font-size:15px;
  line-height:1.45;
  table-layout:fixed
}

.prose caption {
  text-align:left;
  font-weight:700;
  font-size:16px;
  padding:0 0 12px
}

.prose th,.prose td {
  padding:12px 9px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--line);
  overflow-wrap:anywhere
}

.prose th {
  background:#ebe6da
}
.prose li {
  margin-bottom:12px
}

@media(min-width:600px) {
  .lesson-practice {
    padding:28px
  }
  .prose table {
    font-size:16px
  }
  .prose th,.prose td {
    padding:14px 12px
  }

}

@media(max-width:359px) {
  .prose table {
    font-size:13px
  }
  .prose th,.prose td {
    padding:10px 5px
  }

}

@media print {
  .lesson-practice {
    break-inside:avoid
  }
  .table-scroll {
    overflow:visible
  }

}

.prose table {
  table-layout:auto
}
.prose th,.prose td {
  overflow-wrap:normal;
  hyphens:auto
}


/* One layout for lesson metadata at every breakpoint. */
.chapter-row {
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:10px 14px;
  text-decoration:none;
  padding:24px 0;
  align-items:start
}
.chapter-time {
  grid-column:2;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px 12px;
  font-size:13px;
  line-height:1.4;
  color:var(--muted);
  font-variant-numeric:tabular-nums
}
.read-badge {
  display:inline-flex;
  align-items:center;
  gap:5px;
  width:fit-content;
  max-width:100%;
  background:#f7edb6;
  color:#625013;
  font-family:Arial,sans-serif;
  font-size:12px;
  font-weight:500;
  line-height:1.4;
  padding:4px 8px;
  border-radius:4px;
  margin:0
}
.read-badge:empty {
  display:none
}
.chapter-time .duration {
  white-space:nowrap
}
.chapter-row>div {
  min-width:0
}
.chapter-row h3 {
  max-width:780px
}
.chapter-row:hover h3 {
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:5px
}
.next {
  grid-template-columns:minmax(0,1fr)
}
.next b {
  grid-column:1/-1;
  line-height:1.18
}
.quiet {
  font-size:13px;
  line-height:1.55
}
.lesson-practice,.chapter-figure {
  padding:var(--panel-padding)
}
.insight {
  padding:20px
}
.lesson-practice>:last-child,.chapter-figure>:last-child {
  margin-bottom:0
}
.takeaway:not(.meta-completion) {
  padding-top:28px
}
.mark-read {
  max-width:100%;
  line-height:1.45;
  text-align:left;
  border-radius:4px
}
.contents summary {
  line-height:1.5
}
.prose h3 {
  line-height:1.25
}
#menu-links {
  border-color:var(--line);
  border-radius:6px;
  box-shadow:0 12px 32px #222218
}
.quiz-options button {
  border-radius:4px
}
.chapter-pagination small {
  line-height:1.5
}
.next {
  border-radius:6px
}
.reader-tools-inner {
  min-height:54px
}
.reading-track,#reading-fill {
  height:3px
}

@media(min-width:600px) {
  .chapter-row {
    grid-template-columns:44px minmax(0,1fr) 128px;
    gap:20px
  }
  .chapter-time {
    grid-column:3;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    padding-top:5px
  }
  .chapter-row h3 {
    font-size:28px
  }

}

@media(min-width:1000px) {
  .chapter-row {
    grid-template-columns:64px minmax(0,1fr) 150px;
    padding:30px 0
  }
  .chapter-row h3 {
    font-size:32px
  }

}

/* Shared Proektovod identity, yellow course accent. */
.wordmark{display:inline-flex;align-items:center;gap:9px;font-size:24px;letter-spacing:-.045em}.wordmark img{width:34px;height:34px;flex:none}.top-nav{flex-wrap:wrap}.course-card-meta,.meta-cover{background:#f6dc56}.course-card-process{background:#f6dc56}
@media(max-width:600px){.masthead{flex-wrap:wrap;gap:18px}.top-nav{width:100%;justify-content:flex-start;gap:20px}.wordmark{font-size:22px}}

.wordmark{font-family:Arial,Helvetica,sans-serif;font-weight:700;line-height:1.1}