/* Reading modes: paper, ink and one red for marks. No stream colours; the parts are named, not painted. */
:root {
  --paper: #f6f1e7;
  --wash: #ede5d4;
  --ink: #1d1c22;
  --muted: #59554d;
  --rule: #d6ccb9;
  --mark: #9a2d22;
  --serif: 'Noto Serif Bengali', serif;
  --sans: 'Noto Sans Bengali', system-ui, sans-serif;
  --top: 3.25rem;
  --measure: 38rem;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #16161b;
    --wash: #202027;
    --ink: #e8e2d4;
    --muted: #aca595;
    --rule: #383842;
    --mark: #f08a7a;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1.125rem/1.9 var(--serif); }
h1, h2, h3, h4, h5 { font-family: var(--serif); font-weight: 700; line-height: 1.35; margin: 0; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration-color: var(--rule); text-underline-offset: .22em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--mark); outline-offset: 2px; border-radius: 2px; }
[id] { scroll-margin-top: calc(var(--top) + 1rem); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
kbd { font: 600 .85em var(--sans); border: 1px solid var(--rule); border-radius: 4px; padding: 0 .3em; }

/* Shared small type */
.eyebrow, .label, .crumb, .meta, .col-h, .group-h { font-family: var(--sans); color: var(--muted); }
.eyebrow { font-size: .85rem; font-weight: 600; margin: 0 0 .5rem; color: var(--mark); }
.label { font-size: .8rem; font-weight: 600; margin: 1.75rem 0 .5rem; }
.crumb { font-size: .85rem; font-weight: 600; margin: 0 0 .75rem; line-height: 1.5; }
.years { font: 700 1.5rem/1.25 var(--serif); color: var(--mark); margin: 0 0 .2rem; }
.sub { font: italic 400 1rem/1.5 Georgia, 'Times New Roman', serif; color: var(--muted); margin: .3rem 0 0; }
.context { color: var(--muted); margin: .25rem 0 1.25rem; }
.mark { color: var(--mark); font-weight: 700; }
.draft { font: 600 .68rem/1.5 var(--sans); color: var(--mark); border: 1px solid currentColor; border-radius: 3px; padding: 0 .35em; margin-inline-start: .35em; vertical-align: .2em; white-space: nowrap; }
.yrs { font: 400 .8rem var(--sans); color: var(--muted); white-space: nowrap; }
blockquote { margin: 1.25rem 0; padding: 0 0 0 1rem; border-left: 3px solid var(--mark); }
blockquote p { font-size: 1.05rem; line-height: 1.85; margin: 0 0 .35rem; }
blockquote footer { font: 400 .85rem/1.5 var(--sans); color: var(--muted); }
.more a { font: 600 .9rem var(--sans); }

/* The original's own furniture: page breaks, sub-headings, figures, verse, epigraphs */
.pg-mark { display: flex; align-items: center; gap: .75rem; font: 400 .75rem var(--sans); color: var(--muted); margin: 1.75rem 0; }
.pg-mark::before, .pg-mark::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.sub-h { font-size: 1.15rem; margin: 2rem 0 .75rem; }
h5.sub-h { font-size: 1.05rem; }
.orig-fig { margin: 1.75rem 0; padding: .8rem 1rem 1rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--wash); }
.orig-fig figcaption { font: 600 .75rem var(--sans); color: var(--muted); margin-bottom: .5rem; }
/* The drawing as printed: black on white, multiplied onto the paper. On a phone it keeps a
   readable size and scrolls sideways rather than shrinking its labels away. */
.fig-img { overflow-x: auto; }
.fig-img img { display: block; width: min(var(--w), max(100%, 30rem)); height: auto; margin: 0 auto; mix-blend-mode: multiply; }
@media (prefers-color-scheme: dark) { .fig-img img { filter: invert(1); mix-blend-mode: screen; opacity: .86; } }
.verse p { margin: 0 0 1.4rem; }
.epi { text-align: center; font-style: italic; margin: 0; }
.epi + p:not(.epi) { margin-top: 1.5rem; }
.term { text-decoration: underline dotted var(--muted); text-decoration-thickness: 1.5px; text-underline-offset: .3em; }

/* Top bar: the document, and the five modes */
.top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: var(--top); padding: 0 16px; background: var(--paper); border-bottom: 1px solid var(--rule); font: 400 .9rem/1 var(--sans); }
.home { font-weight: 600; text-decoration: none; white-space: nowrap; }
.home span { font-weight: 400; color: var(--muted); }
.modes { display: flex; min-width: 0; gap: .2rem; overflow-x: auto; scrollbar-width: none; }
.modes::-webkit-scrollbar { display: none; }
.modes a { padding: .45rem .7rem; border-radius: 999px; text-decoration: none; white-space: nowrap; color: var(--muted); }
.modes a:hover { color: var(--ink); }
.modes a[aria-current] { background: var(--ink); color: var(--paper); }
@media (max-width: 760px) { .home span { display: none; } .top { gap: .5rem; } .modes a { padding: .45rem .42rem; font-size: .84rem; } }
/* The live site's bar: only PRI's logo, a white disc so its own white ground reads as part of it. */
.logo { display: block; flex: none; border-radius: 50%; }
.logo img { display: block; width: 40px; height: 40px; border-radius: 50%; background: #fff; object-fit: cover; }

/* ---------- Chooser ---------- */
.chooser { max-width: 62rem; margin: 0 auto; padding: 3rem 16px 5rem; }
.chooser h1 { font-size: clamp(2rem, 5vw, 3rem); }
.lede { font-size: 1.15rem; max-width: 42rem; }
.mode-list { list-style: none; padding: 0; margin: 2.5rem 0; display: grid; gap: 1rem; }
@media (min-width: 760px) { .mode-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mode-list a { display: block; height: 100%; padding: 1.25rem 1.4rem 1.1rem; border: 1px solid var(--rule); border-radius: 10px; text-decoration: none; }
.mode-list a:hover { border-color: var(--ink); }
.thumb { display: block; width: 120px; height: 72px; margin-bottom: .9rem; fill: none; stroke: var(--muted); stroke-width: 1.5; }
.thumb .on { stroke: var(--mark); }
.thumb text { fill: var(--muted); stroke: none; font: 500 14px var(--serif); }
.thumb text.big { fill: var(--ink); font-size: 18px; font-weight: 700; }
.mode-list .n { font: 700 1.1rem var(--serif); color: var(--mark); margin-right: .5rem; }
.mode-list h2 { display: inline; font-size: 1.35rem; }
.mode-list p { margin: .6rem 0 0; font-size: 1rem; line-height: 1.8; }
.mode-list .for { font: 400 .85rem/1.6 var(--sans); color: var(--muted); }
.old { font: 400 .9rem var(--sans); color: var(--muted); }

/* ---------- 1. Horizontal: leaves side by side ---------- */
.mode-horizontal { height: 100vh; height: 100dvh; display: grid; grid-template-rows: var(--top) minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); overflow: hidden; }
.mode-horizontal .top { position: static; }
.deck { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.deck::-webkit-scrollbar { display: none; }
.leaf { flex: 0 0 100%; height: 100%; overflow-y: auto; scroll-snap-align: start; scroll-snap-stop: always; padding: 2.25rem 16px 4rem; }
.spread { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; max-width: 72rem; margin: 0 auto; }
.verso h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
.verso .brief p { font-size: 1.05rem; }
.to-text { font: 600 .85rem var(--sans); color: var(--muted); border-top: 1px solid var(--rule); padding-top: 1rem; margin: 2rem 0 0; }
.recto > .label:first-child { margin-top: 0; }
@media (min-width: 1000px) {
  .leaf { padding-top: 3rem; }
  .spread { grid-template-columns: minmax(0, 24rem) minmax(0, var(--measure)); gap: 0; justify-content: center; }
  .verso { padding-right: 3.5rem; }
  .recto { border-left: 1px solid var(--rule); padding-left: 3.5rem; }
  .to-text { display: none; }
}
@media (max-width: 999px) { .recto { border-top: 1px solid var(--rule); padding-top: 1.5rem; } .to-text { display: none; } }
.cover-leaf { max-width: 48rem; margin: 0 auto; }
.cover-leaf h1 { font-size: clamp(2rem, 6vw, 3.2rem); }
.hint { font: 400 .95rem/1.7 var(--sans); color: var(--muted); }
.toc { list-style: none; padding: 0; margin: 2.25rem 0 0; columns: 2 18rem; column-gap: 3rem; }
.toc > li { break-inside: avoid; margin-bottom: 1.4rem; }
.toc-part { font: 600 .85rem var(--sans); color: var(--muted); }
.toc ol { list-style: none; padding: 0; margin: .3rem 0 0; }
.toc ol li { line-height: 1.5; margin: .45rem 0; }
.takeaway-leaf { max-width: 40rem; margin: 0 auto; padding-top: 2rem; }
.takeaway-leaf h2 { font-size: clamp(1.5rem, 4vw, 2rem); margin-bottom: 1.5rem; }
.takeaway-leaf ol { padding-left: 1.4rem; margin: 0; }
.takeaway-leaf li { margin-bottom: 1.1rem; font-size: 1.1rem; }
.strip { display: flex; align-items: center; gap: .6rem; padding: .45rem 16px; border-top: 1px solid var(--rule); background: var(--paper); font-family: var(--sans); }
.step { flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--rule); background: transparent; color: var(--ink); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.step:hover { border-color: var(--ink); }
.ticks { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; list-style: none; margin: 0; padding: 4px 2px; overflow-x: auto; scrollbar-width: none; }
.ticks::-webkit-scrollbar { display: none; }
.ticks li { flex: none; }
.ticks a { position: relative; display: block; width: clamp(8px, 2.2vw, 30px); height: 12px; border-radius: 2px; background: var(--rule); }
.ticks a.end { width: 6px; background: var(--muted); opacity: .45; }
.ticks a:hover { background: var(--muted); }
.ticks a[aria-current] { background: var(--ink); opacity: 1; }
.tick-part { font-size: .8rem; font-weight: 600; color: var(--mark); padding: 0 .2rem 0 .5rem; }
.count { flex: none; font-size: .85rem; color: var(--muted); min-width: 4.5rem; text-align: center; }

/* ---------- 2. The brief ---------- */
.brief-wrap { display: grid; gap: 3rem; max-width: 70rem; margin: 0 auto; padding: 0 16px; }
.side-toc { display: none; }
@media (min-width: 1000px) {
  .brief-wrap { grid-template-columns: 15rem minmax(0, 40rem); justify-content: center; }
  .side-toc { display: block; position: sticky; top: var(--top); align-self: start; max-height: calc(100vh - var(--top)); overflow-y: auto; padding: 3rem 0 2rem; font: 400 .85rem/1.5 var(--sans); }
}
.side-toc .label { margin-top: 0; }
.side-toc ol { list-style: none; padding: 0; margin: 0; }
.side-toc > ol > li { margin-bottom: 1rem; font-weight: 600; }
.side-toc li li { font-weight: 400; margin: .35rem 0 .35rem .8rem; color: var(--muted); }
.side-toc a { text-decoration: none; }
.side-toc a:hover { color: var(--ink); text-decoration: underline; }
.doc { padding: 3rem 0 6rem; min-width: 0; }
.doc-head h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.meta { font-size: .9rem; line-height: 1.7; }
.doc-note { font-size: 1rem; color: var(--muted); border-left: 3px solid var(--rule); padding-left: 1rem; }
.part { margin-top: 4.5rem; }
.part-h { font-size: clamp(1.5rem, 4vw, 1.9rem); display: flex; align-items: baseline; gap: .75rem; padding-bottom: .75rem; border-bottom: 2px solid var(--ink); margin-bottom: 2rem; }
.group-h { font-size: 1rem; font-weight: 600; margin: 2.75rem 0 1.5rem; }
.group-h span { font-weight: 400; }
.chapter { margin: 0 0 2.75rem; padding-bottom: 2.25rem; border-bottom: 1px solid var(--rule); }
.chapter .years { font-size: 1.1rem; }
.chapter h4 { font-size: 1.4rem; }
.chapter header { margin-bottom: 1rem; }
.takeaways { background: var(--wash); padding: 1.5rem 1.75rem; border-radius: 8px; }
.takeaways h3 { font-size: 1.15rem; margin-bottom: .9rem; }
.takeaways ol { margin: 0; padding-left: 1.25rem; }
.takeaways li { margin-bottom: .8rem; }
@media print {
  .top, .side-toc, .more { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .brief-wrap { display: block; max-width: none; padding: 0; }
  .part { break-before: page; margin-top: 0; }
  .chapter { break-inside: avoid; }
  .takeaways { background: none; border: 1px solid #999; }
}

/* ---------- 3. Annotated edition ---------- */
.annot { max-width: calc(var(--measure) + 32px); margin: 0 auto; padding: 3rem 16px 6rem; }
.annot-head .note-intro { font-size: 1rem; color: var(--muted); }
.toc-box, .annot .toc { columns: auto; }
details.toc { margin-top: 1.5rem; border: 1px solid var(--rule); border-radius: 8px; padding: .6rem 1rem; font-family: var(--sans); font-size: .95rem; }
details.toc summary { cursor: pointer; font-weight: 600; }
details.toc > ol { list-style: none; padding: 0; margin: 1rem 0 .5rem; }
details.toc > ol > li { margin-bottom: .9rem; font-weight: 600; }
details.toc li li { font-weight: 400; margin: .3rem 0 .3rem .8rem; line-height: 1.5; }
.annot .part-h { margin-top: 4rem; }
.annot .group-h { margin-top: 3rem; }
.ch { margin-top: 3.5rem; }
.ch-head h4 { font-size: 1.5rem; }
.ch-head { margin-bottom: 1.5rem; }
.note { font: 400 .87rem/1.7 var(--sans); color: var(--muted); }
.note p { margin: 0 0 .6rem; }
.note b { color: var(--ink); font-weight: 600; }
.brief-note .label { margin: 0 0 .35rem; color: var(--mark); }
.brief-note p { color: var(--ink); }
.pg { font: 400 .75rem var(--sans); color: var(--muted); }
@media (max-width: 1139px) {
  .row { display: flex; flex-direction: column; }
  .pg { order: -1; display: flex; align-items: center; gap: .75rem; margin: 1.5rem 0; }
  .pg::before, .pg::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
  .note { order: 2; margin: -.4rem 0 1.2rem; padding-left: .8rem; border-left: 2px solid var(--rule); }
  .brief-note { order: 3; margin: 1.25rem 0 0; padding: 1rem 1.1rem; border: 0; border-radius: 8px; background: var(--wash); }
}
@media (min-width: 1140px) {
  .annot { max-width: calc(5rem + var(--measure) + 21rem + 32px); padding-left: calc(16px + 5rem); padding-right: calc(16px + 21rem); }
  .row { position: relative; }
  .note { float: right; clear: right; width: 17.5rem; margin: .35rem -21rem 1rem 0; }
  .brief-note { padding-top: .2rem; border-top: 2px solid var(--mark); }
  .pg { position: absolute; left: -5rem; top: .45rem; width: 3.75rem; text-align: right; }
}

/* ---------- 4. The time grid ---------- */
.tl { max-width: 82rem; margin: 0 auto; padding: 3rem 16px 6rem; }
.tl-head { max-width: 46rem; }
.tl-head h1, .rupok-head h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 1rem; }
.grid-wrap { overflow-x: auto; margin: 2rem -16px 0; padding: 0 16px 1rem; }
.grid { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 66rem; font-family: var(--sans); table-layout: fixed; }
.grid th, .grid td { vertical-align: top; text-align: left; padding: .7rem .5rem; border-top: 1px solid var(--rule); }
.grid thead th { font: 700 1.05rem var(--serif); border-top: 0; border-bottom: 2px solid var(--ink); white-space: nowrap; }
.grid thead th a { text-decoration: none; }
.grid thead th:first-child, .grid tbody th { width: 11rem; }
@media (max-width: 760px) { .grid { min-width: 58rem; } .grid thead th:first-child, .grid tbody th { width: 7.5rem; font-size: .82rem; } }
.grid tbody th { position: sticky; left: 0; z-index: 1; background: var(--paper); font: 600 .9rem/1.5 var(--sans); padding-right: 1rem; }
.lane-sub { display: block; font-weight: 400; color: var(--muted); font-size: .8rem; }
.cell-card { display: block; padding: .5rem .65rem; margin-bottom: .45rem; border: 1px solid var(--rule); border-radius: 6px; background: var(--wash); text-decoration: none; line-height: 1.45; }
.cell-card:hover { border-color: var(--ink); }
.cell-card .years { display: block; font: 600 .78rem/1.5 var(--sans); color: var(--mark); margin: 0; }
.cell-card .t { font: 500 .92rem/1.5 var(--serif); }
.empty { color: var(--rule); font-size: 1.4rem; line-height: 1; padding-left: .6rem; }
.grid-note { font: 400 .9rem/1.7 var(--sans); color: var(--muted); max-width: 46rem; }
.section-h { font-size: 1.7rem; margin: 4.5rem 0 0; }
.era { margin-top: 2.5rem; }
.era-h { position: sticky; top: var(--top); z-index: 2; background: var(--paper); font-size: 1.45rem; color: var(--mark); padding: .6rem 0; border-bottom: 2px solid var(--ink); margin-bottom: 1.5rem; }
.syn { display: grid; gap: 1.5rem 2.5rem; }
@media (min-width: 900px) { .syn { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.col-h { font-size: .85rem; font-weight: 600; border-bottom: 1px solid var(--rule); padding-bottom: .4rem; margin: 0 0 1rem; }
.syn-card { margin-bottom: 1.75rem; border-radius: 8px; }
.syn-card:target { outline: 2px solid var(--mark); outline-offset: .75rem; }
.syn-card .years { font-size: 1rem; }
.syn-card h4 { font-size: 1.15rem; margin-bottom: .6rem; }
.syn-card .brief p { font-size: .98rem; line-height: 1.85; }
.running, .empty-note { font: 400 .85rem/1.6 var(--sans); color: var(--muted); }
.coda-note { color: var(--muted); max-width: 46rem; }
.coda-grid { display: grid; gap: 1rem 2.5rem; }
@media (min-width: 900px) { .coda-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 5. Metaphors ---------- */
.rupok-page { max-width: 46rem; margin: 0 auto; padding: 3rem 16px 6rem; }
.rupok-index ol { list-style: none; padding: 0; margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: .1rem 1.4rem; }
.rupok-index a { font: 700 clamp(1.15rem, 3vw, 1.5rem)/1.7 var(--serif); text-decoration: none; }
.rupok-index a:hover { color: var(--mark); }
.rupok { margin-top: 4rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.rupok h2 { font-size: clamp(1.8rem, 6vw, 2.6rem); }
.rupok h2 + .where { margin-top: 1.25rem; }
.where .label { margin: 0 0 .15rem; }
.ruler { display: block; width: 100%; height: auto; margin-bottom: 1.25rem; }
.r-line { stroke: var(--rule); stroke-width: 2; }
.r-part { stroke: var(--muted); stroke-width: 1; }
.r-dot { fill: var(--mark); }
.r-label { font: 400 15px var(--sans); fill: var(--muted); }

/* ---------- 6. Together: eras as boxes, summary beside the full text ---------- */
.tg { max-width: 76rem; margin: 0 auto; padding: 3rem 16px 6rem; }
.tg-head { max-width: 46rem; }
.tg-head h1 { font-size: clamp(2rem, 5vw, 2.8rem); }
.tg-head .pdf a { font: 600 .95rem var(--sans); }
.tg .grid-wrap { margin-top: 2.5rem; }
.tg-era { margin-top: 4.5rem; }
.tg-era .era-h { display: flex; align-items: baseline; gap: 1rem; margin-bottom: 1.25rem; }
/* Beside the years, while a chapter is under the bar: its stream and group.
   One line always, so the bar never changes height. */
.era-h .now { display: flex; flex: 1 1 0; min-width: 0; font: 600 .9rem/1.5 var(--sans); color: var(--muted); }
.era-h .now[hidden] { display: none; }
.now > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.now > * + *::before { content: "·"; margin: 0 .45em; font-weight: 400; }
.now .mark { flex: none; }
/* A phone gives the stream its own line under the years, wrapping rather than cut. The line
   stays even while empty, so the bar keeps one height and the text under it never jumps. */
@media (max-width: 759px) {
  .tg-era .era-h.has-now { display: grid; grid-template-rows: auto minmax(1.2rem, auto); padding-bottom: .45rem; }
  .era-h.has-now .now { grid-area: 2 / 1; display: block; font-size: .8rem; line-height: 1.5; }
  .era-h.has-now .now > * { display: inline; white-space: normal; overflow: visible; }
  .era-h.has-now ~ .tg-ch { scroll-margin-top: calc(var(--top) + 4.5rem); }
}
.era-map { display: grid; gap: .25rem 2.5rem; font: 400 .92rem/1.6 var(--sans); }
@media (min-width: 900px) { .era-map { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.era-map .col-h { margin-bottom: .4rem; }
.era-map ul { list-style: none; padding: 0; margin: 0 0 1rem; }
.era-map li { margin: .25rem 0; }
.era-map .running, .era-map .empty-note { font-size: .85rem; }
.tg-ch { display: grid; gap: 1.75rem; padding-top: 2.25rem; margin-top: 1.5rem; border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--top) + 3.5rem); }
.tg-era > .era-h + .tg-ch { border-top: 0; margin-top: 0; padding-top: .5rem; }
.tg-brief h3 { font-size: clamp(1.4rem, 3.5vw, 1.85rem); }
.tg-brief .brief p { font-size: 1.02rem; line-height: 1.85; }
.tg-sum > .label { margin-top: 1.4rem; }
.tg-text > .label:first-child { margin-top: 0; }
.tg-ch:target .tg-brief h3 { color: var(--mark); }
/* Word notes: the meaning sits under the paragraph where the underlined word first appears. */
.word-note { font: 400 .88rem/1.7 var(--sans); color: var(--muted); margin: -.4rem 0 1.4rem; padding-left: .9rem; border-left: 2px solid var(--rule); }
.word-note p { margin: 0 0 .4rem; }
.word-note p:last-child { margin-bottom: 0; }
.word-note b { color: var(--ink); font-weight: 600; margin-inline-end: .3em; }
/* One column: the chapter's title, then the original text, then the summary. */
@media (max-width: 1039px) {
  .tg-brief { display: contents; }
  .tg-text { order: 1; max-width: var(--measure); }
  .tg-sum { order: 2; background: var(--wash); border-radius: 8px; padding: 1.25rem 1.25rem .4rem; }
  .tg-sum > .label { margin-top: 0; }
}
@media (min-width: 1040px) {
  .tg-ch { grid-template-columns: minmax(0, 1fr) minmax(0, var(--measure)); gap: 0; }
  .tg-brief { padding-right: 3rem; }
  .tg-text { border-left: 1px solid var(--rule); padding-left: 3rem; }
}
/* The summary stays beside a long chapter while the window is tall enough to hold it. */
@media (min-width: 1040px) and (min-height: 820px) {
  .tg-brief { position: sticky; top: calc(var(--top) + 3.75rem); align-self: start; }
}
.tg-take { display: grid; gap: 1rem 2.5rem; }
@media (min-width: 900px) { .tg-take { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tg-take ol { padding-left: 1.25rem; margin: 0; }
.tg-take li { margin-bottom: .8rem; font-size: 1rem; line-height: 1.8; }
.tg .coda-note { margin-bottom: 0; }