/* Essay page (/writing/your-funnel-was-built-in-1898/).
   Adds what a long read needs on top of site.css: the reading progress line, the state of the table of
   contents, lists and emphasis inside the text, the end-mark and the closing rows. Nothing here changes
   the shared system; every rule is scoped to this page's own classes. */

@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}

/* reading progress: a 2px onyx line under the sticky header, added to it by essay.js */
.progress{position:absolute;left:0;top:100%;width:100%;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}

/* table of contents in the left rail */
.toc{max-width:21em}
.toc a{display:block;color:var(--ink2);line-height:1.35}
.toc a[aria-current]{color:var(--ink);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}

/* between phone and desktop the text takes all eight content columns, so the measure stays comfortable */
@media (min-width:801px) and (max-width:1100px){.essay{grid-column:5/13}}

/* the text: old-style figures in running text, real lists, emphasis, links */
.essay .prose>p,.essay .prose>ul,.essay .prose>ol{font-variant-numeric:oldstyle-nums}
.essay .prose em{font-style:italic}
.essay .prose strong{font-weight:600}
.essay .prose>p a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.essay .prose>p a:hover{text-decoration-thickness:2px}
.essay .prose>ul,.essay .prose>ol{margin:0 0 1.1em;display:grid;gap:.4em}
.essay .prose>ul>li{position:relative;padding-left:1.25em}
.essay .prose>ul>li::before{content:"";position:absolute;left:.1em;top:.62em;width:.34em;height:.34em;background:var(--ink)}
.essay .prose>ol{counter-reset:n}
.essay .prose>ol>li{position:relative;padding-left:1.7em;counter-increment:n}
.essay .prose>ol>li::before{content:counter(n);position:absolute;left:0;top:.28em;font-family:var(--f);font-size:.76em;font-weight:800;font-variant-numeric:lining-nums tabular-nums}
/* an ordinary quotation (the heavy blockquote of site.css is kept for the one pull quote) */
.essay .prose .quoted{margin:0 0 1.1em;padding-left:1em;border-left:2px solid var(--ink);font-style:italic}

/* the end-mark: the point, at a size that reads as a full stop to the whole essay */
.endmark{width:.44em;height:.44em;margin-left:.12em}

/* the wheel inside the text */
.rich .hint{margin:-8px 0 16px}
.rich .more{margin-top:12px}

/* closing rows */
.next{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px}
.postmeta{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:10px 28px;margin-top:28px;padding-top:14px;border-top:1px solid var(--line)}
.share{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;font-size:15px}
.share .said{color:var(--ink)}
.totop{margin-top:28px;font-size:15px}