/* Palette. Every themed token is a light-dark() pair, so the light and dark values live on adjacent lines and cannot drift apart. Which side is used is decided by `color-scheme` on :root: "light dark" follows the OS, and the [data-theme] overrides below pin it when the reader picks a mode. The plain declaration above each pair is the fallback for browsers without light-dark() (they stay on the light palette, as they did before). */ :root { color-scheme: light dark; --paper: #f5f0e6; --paper: light-dark(#f5f0e6, #171614); --paper-raised: #fffaf0; --paper-raised: light-dark(#fffaf0, #211f1c); --ink: #1d1b18; --ink: light-dark(#1d1b18, #f0e9de); --muted: #686057; --muted: light-dark(#686057, #b8aea1); --rule: #cfc3b1; --rule: light-dark(#cfc3b1, #50483f); --rule-strong: #a9947f; --rule-strong: light-dark(#a9947f, #76695c); --accent: #762d3b; --accent: light-dark(#762d3b, #c97986); --accent-strong: #5d1f2c; --accent-strong: light-dark(#5d1f2c, #e49aa6); --accent-soft: #e9d7d8; --accent-soft: light-dark(#e9d7d8, #3b262b); --success: #285d48; --success: light-dark(#285d48, #85c5aa); /* Text printed on an --accent fill: near-white on the dark red, near-black on the light red the dark theme uses. */ --on-accent: #fffaf3; --on-accent: light-dark(#fffaf3, #1a1613); --shadow: 0 16px 38px rgba(45, 35, 28, 0.12); --shadow: 0 16px 38px light-dark(rgba(45, 35, 28, 0.12), rgba(0, 0, 0, 0.34)); --shadow-soft: 0 7px 16px rgba(45, 35, 28, 0.16); --shadow-soft: 0 7px 16px light-dark(rgba(45, 35, 28, 0.16), rgba(0, 0, 0, 0.45)); --serif: Georgia, "Times New Roman", serif; --sans: "Segoe UI", Arial, sans-serif; font-synthesis: none; } /* Reader's explicit choice, set on by the inline script in base.html. No attribute means "auto" and the :root rule above follows the OS. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); text-underline-offset: 0.18em; } a:hover { color: var(--accent); } a:focus-visible, button:focus-visible, input:focus-visible, audio:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } img { display: block; max-width: 100%; } h1, h2, h3, p { margin-top: 0; } h1, h2, h3, .wordmark, .stat strong, .eyebrow { font-family: var(--serif); } h1 { font-size: clamp(2.75rem, 6vw, 5.6rem); font-weight: 400; line-height: 0.98; letter-spacing: -0.04em; margin-bottom: 1.4rem; } h2 { font-size: clamp(1.8rem, 3vw, 2.65rem); font-weight: 400; line-height: 1.08; letter-spacing: -0.025em; margin-bottom: 1.25rem; } h3 { font-size: 1.12rem; line-height: 1.24; } .shell { width: min(1180px, calc(100% - 48px)); margin-inline: auto; } .skip-link { position: fixed; z-index: 20; top: 12px; left: 12px; transform: translateY(-150%); padding: 0.6rem 0.9rem; background: var(--ink); color: var(--paper); } .skip-link:focus { transform: translateY(0); } .masthead { border-bottom: 1px solid var(--rule); } .masthead__inner { min-height: 78px; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .wordmark { display: inline-flex; align-items: center; gap: 0.6rem; font-size: 1.34rem; font-weight: 700; text-decoration: none; letter-spacing: -0.025em; } /* Square source; the shield reads best at masthead cap-height plus a little. */ .wordmark__mark { width: auto; height: 42px; flex: none; } .wordmark small { color: var(--accent); font-family: var(--sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-left: 0.45rem; vertical-align: 0.2rem; } .nav { display: flex; gap: clamp(0.8rem, 2.4vw, 1.8rem); font-size: 0.88rem; font-weight: 650; } .nav a { padding: 0.25rem 0; text-decoration: none; border-bottom: 2px solid transparent; } .nav a[aria-current="page"] { color: var(--accent); border-color: currentColor; } .masthead__tools { display: flex; align-items: center; gap: clamp(0.8rem, 2.4vw, 1.8rem); } /* Theme switch. Hidden until theme.js unhides it, so a reader without JavaScript never sees a control that cannot do anything. */ .theme-toggle { display: grid; place-items: center; width: 38px; height: 38px; padding: 0; flex: none; background: transparent; border: 1px solid var(--rule); color: var(--ink); cursor: pointer; } .theme-toggle[hidden] { display: none; } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* Show only the icon for the mode currently in force. */ .theme-toggle [data-icon="light"], .theme-toggle [data-icon="dark"] { display: none; } :root[data-theme="light"] .theme-toggle [data-icon="auto"], :root[data-theme="dark"] .theme-toggle [data-icon="auto"] { display: none; } :root[data-theme="light"] .theme-toggle [data-icon="light"], :root[data-theme="dark"] .theme-toggle [data-icon="dark"] { display: block; } .hero { padding: clamp(4.5rem, 9vw, 8.4rem) 0 clamp(3.5rem, 7vw, 6rem); display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.7fr); align-items: end; gap: clamp(3rem, 7vw, 7rem); } .eyebrow { color: var(--accent); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 1.1rem; } .hero__lede { max-width: 760px; font-family: var(--serif); font-size: clamp(1.16rem, 2vw, 1.42rem); line-height: 1.55; color: var(--muted); } .hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem 1.4rem; margin-top: 2rem; } .button { display: inline-flex; justify-content: center; align-items: center; min-height: 48px; padding: 0.72rem 1.15rem; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font-size: 0.88rem; font-weight: 750; text-decoration: none; } .button:hover { background: var(--accent-strong); color: var(--on-accent); } .button--quiet { background: transparent; color: var(--accent); } button.button { font-family: inherit; cursor: pointer; } /* Modal dialogs, opened via [data-modal-open]/modal.js. Native gives us focus trapping, Escape-to-close, and ::backdrop for free. */ .modal-trigger { border: none; background: none; padding: 0; color: var(--accent); font: inherit; font-weight: 750; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; } .modal-trigger:hover { color: var(--accent-strong); } dialog.modal { position: fixed; inset: 0; margin: auto; width: min(560px, calc(100vw - 2.4rem)); max-height: min(680px, calc(100vh - 4rem)); padding: 0; border: 1px solid var(--rule-strong); background: var(--paper-raised); color: var(--ink); box-shadow: var(--shadow); } dialog.modal::backdrop { background: rgba(20, 16, 12, 0.55); } .modal__panel { position: relative; padding: 2.2rem 2rem 2.4rem; overflow-y: auto; max-height: inherit; } .modal__panel h2 { max-width: 90%; margin-bottom: 1rem; font-size: 1.5rem; } .modal__panel h3 { margin-top: 1.6rem; margin-bottom: 0.5rem; font-family: var(--serif); font-size: 1.05rem; } .modal__panel ol { padding-left: 1.2rem; } .modal__panel li { margin-bottom: 0.5rem; } .modal__close { position: absolute; top: 0.9rem; right: 0.9rem; width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule); background: var(--paper); color: var(--ink); font-size: 1.3rem; line-height: 1; cursor: pointer; } .modal__close:hover { border-color: var(--accent); color: var(--accent); } .start-here-list { display: grid; gap: 1.1rem; padding-left: 1.4rem; font-family: var(--serif); font-size: 1.02rem; line-height: 1.5; } .start-here-list li::marker { font-weight: 750; color: var(--accent); } .start-here-time { display: block; margin-top: 0.15rem; color: var(--muted); font-family: var(--sans); font-size: 0.8rem; } .search-card { padding: 1.4rem; background: var(--paper-raised); border: 1px solid var(--rule); box-shadow: var(--shadow); } .search-card label { display: block; font-weight: 750; margin-bottom: 0.55rem; } .search-field { width: 100%; min-height: 48px; padding: 0.7rem 0.85rem; background: var(--paper); color: var(--ink); border: 1px solid var(--rule-strong); border-radius: 0; font: inherit; } .search-suggestion { display: grid; grid-template-columns: 42px 1fr; gap: 0.7rem; align-items: center; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--rule); text-decoration: none; } .search-suggestion img { width: 42px; aspect-ratio: 2 / 3; object-fit: cover; } .search-suggestion strong, .search-suggestion span { display: block; line-height: 1.25; } .search-suggestion span { margin-top: 0.15rem; color: var(--muted); font-size: 0.78rem; } .stat-strip { border-block: 1px solid var(--rule); } .stats { display: grid; grid-template-columns: repeat(4, 1fr); } .stat { padding: 1.45rem 1.1rem 1.45rem 0; border-right: 1px solid var(--rule); } .stat:not(:first-child) { padding-left: 1.4rem; } .stat:last-child { border-right: 0; } .stat strong, .stat span { display: block; } .stat strong { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 400; line-height: 1; } .stat span { margin-top: 0.35rem; color: var(--muted); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; } .section { padding: clamp(4rem, 8vw, 7rem) 0; } .section-heading { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 2rem; } .section-heading h2, .section-heading p { margin-bottom: 0; } .section-heading p { max-width: 430px; color: var(--muted); } .book-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(1.2rem, 2.5vw, 2.2rem) clamp(0.8rem, 2vw, 1.6rem); } .book-card { min-width: 0; } .book-card > a { text-decoration: none; } .book-cover { position: relative; display: grid; place-items: center; aspect-ratio: 2 / 3; background: #40342d; border: 1px solid rgba(20, 15, 12, 0.18); box-shadow: var(--shadow-soft); overflow: hidden; } .book-cover::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 8px 0 12px rgba(25, 18, 14, 0.12), inset 0 0 0 1px rgba(255, 255, 255, 0.08); } .book-cover img { width: 100%; height: 100%; object-fit: cover; } .book-cover--type { padding: 1rem; background: #315647; color: #f9f2df; text-align: center; } .book-cover--type span { font-family: var(--serif); font-size: clamp(1rem, 2vw, 1.4rem); line-height: 1.1; } .book-card h3 { margin: 0.9rem 0 0.2rem; font-size: 1rem; font-weight: 650; } .book-card p { margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.35; } /* "Featured this week" row labels + per-item editorial blurbs */ .shelf-label { margin: 1.8rem 0 1rem; font-size: 0.8rem; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .book-card p.book-card__blurb { margin-top: 0.5rem; font-family: var(--serif); font-size: 0.85rem; line-height: 1.5; color: var(--ink); } .browse-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); } .browse-card { min-height: 180px; padding: 1.7rem; background: var(--paper-raised); text-decoration: none; } .browse-card span { display: block; color: var(--accent); font-size: 0.75rem; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; } .browse-card strong { display: block; margin-top: 2rem; font-family: var(--serif); font-size: 1.75rem; font-weight: 400; } .browse-card p { margin: 0.4rem 0 0; color: var(--muted); font-size: 0.9rem; } .provenance { background: var(--accent-soft); border-block: 1px solid color-mix(in srgb, var(--accent) 30%, var(--rule)); } .provenance__inner { display: grid; grid-template-columns: 0.65fr 1.35fr; gap: clamp(2rem, 8vw, 8rem); padding-block: clamp(3.5rem, 7vw, 6rem); } .provenance p { max-width: 720px; font-family: var(--serif); font-size: 1.12rem; } .torrent-callout { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--rule); } .torrent-callout p { margin: 0; font-family: var(--serif); font-size: 1.25rem; } .footer { padding: 3rem 0; } .footer__inner { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 2rem; color: var(--muted); font-size: 0.82rem; } .footer__links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.7rem 1.2rem; } .breadcrumb { margin: 2rem 0 0; color: var(--muted); font-size: 0.78rem; } .breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0; margin: 0; list-style: none; } .breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 0.45rem; color: var(--rule-strong); } .detail-layout { display: grid; grid-template-columns: minmax(240px, 330px) minmax(0, 1fr); gap: clamp(3rem, 8vw, 7rem); padding: 2.7rem 0 5.5rem; } .detail-cover { position: sticky; top: 1.2rem; align-self: start; } .detail-cover .book-cover { box-shadow: var(--shadow); } .download-panel { margin-top: 1.2rem; padding: 1.2rem; border: 1px solid var(--rule); background: var(--paper-raised); } .download-panel h2 { margin-bottom: 0.25rem; font-family: var(--sans); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .download-panel > p { margin-bottom: 0.9rem; color: var(--muted); font-size: 0.78rem; } .download-list { display: grid; gap: 0.55rem; } .download-link { display: flex; justify-content: space-between; gap: 1rem; padding: 0.68rem 0.8rem; border: 1px solid var(--rule-strong); text-decoration: none; font-size: 0.82rem; font-weight: 750; } .download-link span:last-child { color: var(--muted); font-weight: 500; } .journal-article-label { display: grid; gap: 0.2rem; } .journal-article-label small { color: var(--muted); font-size: 0.72rem; font-weight: 500; } .book-kicker { color: var(--accent); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; } .book-title { max-width: 790px; margin-top: 0.65rem; font-size: clamp(2.8rem, 6vw, 5.5rem); } .byline { margin-bottom: 1rem; font-family: var(--serif); font-size: 1.35rem; } .metadata { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; padding-block: 0.8rem; border-block: 1px solid var(--rule); color: var(--muted); font-size: 0.78rem; } .metadata span:not(:last-child)::after { content: "·"; margin-left: 0.9rem; } .book-description { max-width: 720px; margin-top: 2.2rem; font-family: var(--serif); font-size: clamp(1.05rem, 1.4vw, 1.18rem); line-height: 1.78; } .book-description p:first-child::first-letter { float: left; color: var(--accent); font-size: 4.2rem; line-height: 0.75; padding: 0.18rem 0.45rem 0 0; } .description-source { max-width: 720px; margin-top: 0.6rem; font-size: 0.82rem; color: var(--muted, #6b6b6b); } .description-source a { color: inherit; } /* Per-book rights line: a named CC deed, or a plain status ("public domain", "licence not verified"). See generator/data.py: load_book_licenses. Currently unused: the box is commented out in book_detail.html until the licence data is refined. Kept so re-enabling needs no CSS work. */ .license-note { margin-top: 0.5rem; font-size: 0.82rem; color: var(--muted, #6b6b6b); } .license-note a { color: inherit; } /* "Further reading" pointer at the companion wiki (wiki.freecapitalists.org). */ .wiki-link { max-width: 720px; margin-top: 1.4rem; padding-left: 0.9rem; border-left: 3px solid var(--accent); font-size: 0.9rem; color: var(--muted, #6b6b6b); } .license-note { max-width: 720px; margin-top: 2.6rem; padding: 1.25rem 1.35rem; border-left: 4px solid var(--accent); background: var(--accent-soft); font-size: 0.88rem; } .more-books { padding-top: 4.5rem; border-top: 1px solid var(--rule); } .more-books .book-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Answer-engine lead sentence + fact table (book detail). The lead is one self-contained sentence; the table restates it as dt/dd rows with a stable per-row id, so an AI answer engine (or a human) can cite one fact directly. See docs/seo-backlog.md item 10 and generator/render.py:_book_answer_lead. */ .answer-lead { max-width: 720px; margin: 1rem 0 0; font-family: var(--serif); font-size: 1.05rem; font-weight: 600; } .fact-table { max-width: 720px; margin-top: 0.9rem; padding: 1rem 1.35rem; border: 1px solid var(--rule); background: var(--paper-raised); } .fact-table dl { margin: 0; } .fact-table dt, .fact-table dd { display: inline; margin: 0; } .fact-table dt { color: var(--muted, #6b6b6b); font-size: 0.82rem; } .fact-table dt::after { content: ": "; } .fact-table dd { font-weight: 700; font-size: 0.88rem; } .fact-table dd::after { content: ""; display: block; margin-bottom: 0.4rem; } /* "What's in it" chapter preview (book detail). A plain title list, not a link list -- see docs/specs/full-text-pages.md for why there is nothing to link to. */ .book-toc { max-width: 720px; margin-top: 2.2rem; padding: 1.25rem 1.35rem; border: 1px solid var(--rule); } .book-toc h2 { font-size: 0.95rem; } .book-toc__stats { margin: 0.2rem 0 0.9rem; color: var(--muted, #6b6b6b); font-size: 0.82rem; } .book-toc__list { display: grid; gap: 0.4rem; padding-left: 1.3rem; font-size: 0.92rem; } .book-toc__more { margin-top: 0.6rem; color: var(--muted, #6b6b6b); font-size: 0.82rem; font-style: italic; } /* Page number on a .book-toc row, present only when the chapter table came from a PDF outline (scripts/extract_book_structure.py) rather than the EPUB nav. Right-aligned against the row so a column of them scans as a column; matches .chapter-guide__page's weight and colour so the two tables read as one family. */ .book-toc__list li:has(.book-toc__page) { display: flex; gap: 0.75rem; align-items: baseline; justify-content: space-between; } .book-toc__page { flex: none; color: var(--muted, #6b6b6b); font-variant-numeric: tabular-nums; font-size: 0.78rem; } /* Edition note (book detail) -- which printing this archive actually serves, verified against that file's own copyright page. See docs/specs/book-guides.md. */ .edition-note { max-width: 720px; margin-top: 2.2rem; padding: 1.1rem 1.35rem; border-left: 3px solid var(--rule); background: var(--paper-raised); } .edition-note h2 { font-size: 0.95rem; } .edition-note p { margin: 0.5rem 0 0; font-size: 0.92rem; } .edition-note__source { color: var(--muted, #6b6b6b); font-size: 0.8rem; font-style: italic; } /* Companion course (book detail) -- the archive's own lecture series on this same book, matched on slug in data.link_companion_courses. */ .companion-course { max-width: 720px; margin-top: 2.2rem; padding: 1.1rem 1.35rem; border: 1px solid var(--rule); } .companion-course__lead { margin: 0.3rem 0 0; font-family: var(--serif); font-size: 1rem; } /* Chapter-by-chapter guide (book detail). Distinct from .book-toc, which is the unlinked EPUB-derived title list: these rows carry a page number, an original one-line gloss, and where one exists a link to the lecture covering them. */ .chapter-guide { max-width: 720px; margin-top: 2.6rem; } .chapter-guide__note { margin: 0.2rem 0 1rem; color: var(--muted, #6b6b6b); font-size: 0.82rem; } .chapter-guide__list { margin: 0; padding-left: 1.9rem; } .chapter-guide__part { list-style: none; margin: 1.2rem 0 0.6rem -1.9rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--rule); font-size: 0.78rem; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted, #6b6b6b); } .chapter-guide__part:first-child { margin-top: 0; } .chapter-guide__row { margin-bottom: 0.9rem; } .chapter-guide__title { margin: 0; font-weight: 700; font-size: 0.95rem; } .chapter-guide__page { margin-left: 0.5rem; color: var(--muted, #6b6b6b); font-weight: 400; font-size: 0.78rem; } .chapter-guide__gloss { margin: 0.15rem 0 0; font-size: 0.9rem; } .chapter-guide__lecture { margin: 0.25rem 0 0; font-size: 0.82rem; } .chapter-guide__lecture span { color: var(--muted, #6b6b6b); } /* Visible Q&A (book detail), mirrored into FAQPage structured data. */ .book-faq { max-width: 720px; margin-top: 2.6rem; } .book-faq__list { margin: 0.4rem 0 0; } .book-faq__list dt { margin-top: 1rem; font-weight: 750; font-size: 0.95rem; } .book-faq__list dd { margin: 0.25rem 0 0; font-size: 0.92rem; } /* Compact author card (book detail) -- same facts as the full /authors// page (portrait, life dates, bio), sized down for a sidebar-style block rather than the page-head treatment author_detail.html uses. */ .author-card { display: flex; align-items: flex-start; gap: 1rem; max-width: 720px; margin-top: 2.2rem; } .author-card .author-portrait--sm { flex: 0 0 auto; } .author-card .author-portrait--sm img { width: 64px; height: 64px; object-fit: cover; object-position: center top; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper-raised); } .author-card__text { min-width: 0; } .author-card__name { font-weight: 750; margin: 0.1rem 0 0.3rem; } .author-card__name .author-life { margin: 0; font-weight: 400; } .author-card__bio { color: var(--muted, #6b6b6b); font-size: 0.9rem; line-height: 1.55; } .series-header { display: grid; grid-template-columns: 1fr minmax(260px, 360px); gap: clamp(2rem, 7vw, 6rem); padding: 3rem 0 4rem; align-items: end; } .series-header h1 { max-width: 800px; margin-bottom: 1rem; } .series-intro { max-width: 760px; color: var(--muted); font-family: var(--serif); font-size: 1.18rem; } .series-facts { padding: 1.3rem; border: 1px solid var(--rule); background: var(--paper-raised); } .series-facts dl { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 1rem; margin: 0; font-size: 0.82rem; } .series-facts dt { color: var(--muted); } .series-facts dd { margin: 0; text-align: right; font-weight: 700; } .episode-section { padding: 0 0 5rem; } .episode-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 1rem; } .episode-toolbar h2, .episode-toolbar p { margin-bottom: 0; } .episode-toolbar p { color: var(--muted); font-size: 0.85rem; } .episode-list { margin: 0; padding: 0; border-top: 1px solid var(--rule-strong); list-style: none; } .episode { display: grid; grid-template-columns: 2.2rem minmax(220px, 1fr) minmax(250px, 0.8fr) auto; gap: 1.2rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); } .episode__number { color: var(--accent); font-family: var(--serif); font-size: 1.25rem; } .episode h3 { margin: 0 0 0.22rem; font-family: var(--sans); font-size: 0.94rem; } .episode__meta { color: var(--muted); font-size: 0.75rem; } .episode audio { width: 100%; height: 36px; } .episode__download { font-size: 0.78rem; font-weight: 750; } .unavailable { justify-self: start; padding: 0.3rem 0.55rem; background: var(--accent-soft); color: var(--accent); font-size: 0.72rem; font-weight: 750; } .availability-key { display: inline-flex; align-items: center; gap: 0.45rem; } .availability-key::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--success); } @media (max-width: 900px) { .hero, .series-header { grid-template-columns: 1fr; } .hero { gap: 2.5rem; } .book-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .browse-grid { grid-template-columns: repeat(2, 1fr); } .episode { grid-template-columns: 2rem minmax(0, 1fr) auto; } .episode audio, .episode .unavailable { grid-column: 2 / -1; } } @media (max-width: 720px) { .shell { width: min(100% - 30px, 1180px); } .masthead__inner { min-height: auto; padding: 1rem 0; align-items: flex-start; } .wordmark small { display: none; } .wordmark__mark { height: 34px; } .nav { max-width: 210px; justify-content: flex-end; flex-wrap: wrap; gap: 0.35rem 0.85rem; } .nav a:nth-child(6) { display: none; } .stats { grid-template-columns: repeat(2, 1fr); } .stat:nth-child(2) { border-right: 0; } .stat:nth-child(-n + 2) { border-bottom: 1px solid var(--rule); } .stat:nth-child(3) { padding-left: 0; } .book-grid, .more-books .book-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .browse-grid, .provenance__inner, .detail-layout { grid-template-columns: 1fr; } .browse-card { min-height: 140px; } .detail-layout { gap: 2.4rem; } .detail-cover { position: static; display: grid; grid-template-columns: minmax(120px, 0.75fr) minmax(165px, 1fr); gap: 1rem; } .download-panel { margin-top: 0; } .section-heading, .torrent-callout, .episode-toolbar, .footer__inner { align-items: flex-start; flex-direction: column; display: flex; } .footer__links { justify-content: flex-start; } .episode { gap: 0.75rem; } } @media (max-width: 430px) { body { font-size: 15px; } h1, .book-title { font-size: 2.65rem; } .hero { padding-top: 4rem; } .detail-cover { grid-template-columns: 1fr; } .detail-cover .book-cover { width: min(230px, 75vw); justify-self: center; } .episode { grid-template-columns: 1.5rem minmax(0, 1fr); } .episode__download, .episode audio, .episode .unavailable { grid-column: 2; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* ============================================================ Generator additions (index grids, journals, search, prose) Built on the approved mockup design system above. ============================================================ */ /* Typographic placeholder cover (missing scans). Color from slug hue. */ .book-cover--type { padding: 1rem; color: #f9f2df; text-align: center; } .book-cover--type span { font-family: var(--serif); font-size: clamp(1rem, 2vw, 1.35rem); line-height: 1.12; } .book-cover--type small { display: block; margin-top: 0.6rem; font-size: 0.72rem; letter-spacing: 0.02em; opacity: 0.82; } /* Page intro block for index + prose pages */ .page-head { padding: clamp(2.5rem, 5vw, 4rem) 0 1.5rem; } .page-head h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin-bottom: 1rem; } .page-head p { max-width: 720px; color: var(--muted); font-family: var(--serif); font-size: clamp(1.05rem, 1.6vw, 1.25rem); margin-bottom: 0; } .index-wrap { padding: 1rem 0 5rem; } .index-toolbar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule); color: var(--muted); font-size: 0.85rem; } /* Search results dropdown (shared with landing search-card) */ .search-results { margin-top: 0.9rem; display: none; } .search-results.is-open { display: block; } .search-results a { display: grid; grid-template-columns: auto 1fr; gap: 0.7rem; align-items: center; padding: 0.5rem 0.2rem; border-top: 1px solid var(--rule); text-decoration: none; } .search-results a:first-child { border-top: 0; } .search-results a[aria-selected="true"], .search-results a:hover { background: var(--accent-soft); } .type-badge { display: inline-block; padding: 0.12rem 0.4rem; background: var(--accent-soft); color: var(--accent); font-size: 0.62rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .search-results strong { display: block; font-size: 0.9rem; line-height: 1.2; } .search-results em { display: block; font-style: normal; color: var(--muted); font-size: 0.76rem; } .search-empty { padding: 0.6rem 0.2rem; color: var(--muted); font-size: 0.82rem; } /* Author pages: portrait, life dates, biography. The portrait sits beside the heading rather than above the works grid, so a bio never pushes the covers (the page's real payload) below the fold on a phone. */ .page-head--portrait { display: flex; align-items: flex-start; gap: clamp(1.2rem, 3vw, 2.2rem); /* Tighter than the shared .page-head: an author page carries a portrait, dates, a biography and a credit line above the covers, and the covers are what the reader came for. Every rem saved here is a cover row nearer the fold. */ padding-top: clamp(1.5rem, 3.5vw, 3rem); padding-bottom: 1rem; } .page-head__text { min-width: 0; } .author-portrait { flex: 0 0 auto; margin-top: 0.5rem; } .author-portrait img { width: clamp(88px, 12vw, 150px); height: clamp(88px, 12vw, 150px); object-fit: cover; object-position: center top; border-radius: 50%; border: 1px solid var(--rule); background: var(--paper-raised); } .author-life { font-family: var(--serif); font-style: italic; color: var(--muted); margin: -0.5rem 0 0.7rem; } .author-bio { max-width: 720px; font-family: var(--serif); font-size: clamp(1.02rem, 1.35vw, 1.15rem); line-height: 1.75; } .author-bio p + p { margin-top: 0.9rem; } .author-works-title { font-size: 1.1rem; margin: 1.7rem 0 1.1rem; padding-bottom: 0.7rem; border-bottom: 1px solid var(--rule); } .author-bio + .index-wrap, .wiki-link + .index-wrap, .page-head + .index-wrap { padding-top: 0; } /* Author index: a portrait-led starting shelf, progressive filters, surname letter rail, dense index rows, and a separate organisation block. */ .featured-authors { margin: 1.5rem 0 3rem; } .featured-authors__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); } .featured-author-card { min-width: 0; border-top: 1px solid var(--rule); background: var(--paper-raised); } .featured-author-card > a { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; gap: 0 0.9rem; height: 100%; padding: 0.8rem; text-decoration: none; } .featured-author-card__portrait { grid-row: 1 / 5; } .featured-author-card__portrait img { width: 88px; height: 88px; object-fit: cover; object-position: center top; border: 1px solid var(--rule); background: var(--paper); } .featured-author-card h3 { margin: 0; font-size: 1.08rem; line-height: 1.18; } .featured-author-card__life, .featured-author-card__count, .featured-author-card__bio { margin: 0; color: var(--muted); font-size: 0.76rem; line-height: 1.35; } .featured-author-card__bio { margin-top: 0.4rem; font-family: var(--serif); } .author-filter { margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--rule); background: var(--paper-raised); } .author-filter__groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 1rem; } .author-filter .filter-pills { align-content: start; } .author-rail { position: sticky; top: 0; z-index: 18; margin: 0 0 1rem; background: var(--paper); border-block: 1px solid var(--rule); } .author-rail ol { display: flex; justify-content: space-between; gap: 0.1rem; margin: 0; padding: 0; list-style: none; } .author-rail a { display: grid; place-items: center; min-width: 2rem; min-height: 2.6rem; color: var(--accent); font-family: var(--serif); font-weight: 700; text-decoration: none; } .author-rail a:hover { background: var(--paper-raised); } .author-rail a.is-empty { opacity: 0.28; pointer-events: none; } .author-letter { scroll-margin-top: 3.5rem; padding-top: 0.9rem; } .author-letter__head { margin: 0; padding-bottom: 0.45rem; border-bottom: 2px solid var(--ink); font-size: 1.65rem; } .author-columns { columns: 3 220px; column-gap: 2.5rem; padding: 0 0 1.8rem; } .author-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.05rem 0.65rem; break-inside: avoid; min-height: 3.1rem; padding: 0.55rem 0.35rem; border-bottom: 1px solid var(--rule); text-decoration: none; line-height: 1.3; } .author-row:hover { background: var(--paper-raised); color: var(--ink); } .author-row:hover .author-row__name { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 0.18em; } .author-row__name { font-family: var(--serif); font-size: 0.98rem; } .author-row__meta, .author-row__count { color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; } .author-row__meta { text-align: right; } .author-row__count { grid-column: 1 / -1; } .author-columns--sorted { padding-top: 0.9rem; } .author-orgs { margin: 2.5rem 0 5rem; padding-top: 1.6rem; border-top: 2px solid var(--ink); } .author-orgs h2 { margin-bottom: 0.4rem; font-size: 1.8rem; } .author-orgs > p { color: var(--muted); } .author-orgs__rows { padding-top: 0.5rem; } /* Author detail: course shelf plus grouped, crawlable lecture links. */ .author-media { margin: 4rem 0 5rem; padding-top: 2rem; border-top: 2px solid var(--ink); } .author-media__more { margin: 1.4rem 0 0; color: var(--muted); } .author-lecture-groups { margin-top: 2.5rem; scroll-margin-top: 1rem; } .author-lecture-group { padding: 1.1rem 0; border-top: 1px solid var(--rule); } .author-lecture-group h3, .author-lecture-group summary { margin: 0; font-family: var(--serif); font-size: 1.15rem; font-weight: 400; } .author-lecture-group summary { min-height: 44px; cursor: pointer; } .author-lecture-group h3 span, .author-lecture-group summary span { color: var(--muted); font-family: var(--sans); font-size: 0.75rem; } .author-lecture-group__course { margin: 0.6rem 0 0; color: var(--muted); font-size: 0.82rem; } .author-lecture-list { margin: 0.7rem 0 0; padding: 0; list-style: none; } .author-lecture-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.42rem 0; border-top: 1px solid var(--rule); font-size: 0.88rem; } .author-lecture-list li span { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; } /* Journal cards + index */ .journal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin: 1rem 0 5rem; } .journal-card { padding: 1.6rem; background: var(--paper-raised); text-decoration: none; min-height: 150px; } .journal-card strong { display: block; font-family: var(--serif); font-size: 1.4rem; font-weight: 400; line-height: 1.1; } .journal-card span { display: block; margin-top: 0.7rem; color: var(--muted); font-size: 0.82rem; } .journal-card em { font-style: normal; color: var(--accent); } /* Issue list (journal series page) */ .issue-list { margin: 0 0 4rem; padding: 0; list-style: none; border-top: 1px solid var(--rule-strong); } .issue-row { display: grid; grid-template-columns: 1fr auto auto; gap: 1.2rem; align-items: center; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); } .issue-row .issue-name { font-size: 0.95rem; } .issue-row .issue-size { color: var(--muted); font-size: 0.8rem; } .issue-row .download-link { padding: 0.4rem 0.7rem; } /* Lecture video */ .episode video { width: 100%; max-width: 320px; aspect-ratio: 16 / 9; background: #000; } .episode__handout { font-size: 0.75rem; font-weight: 650; } /* Prose pages (about, torrents) */ .prose { max-width: 720px; padding: 1rem 0 5rem; font-family: var(--serif); font-size: clamp(1.05rem, 1.4vw, 1.18rem); line-height: 1.78; } .prose h2 { font-size: 1.9rem; margin-top: 2.6rem; } .prose h3 { font-size: 1.25rem; margin-top: 2rem; margin-bottom: 0.4rem; } .prose ul { padding-left: 1.2rem; } .prose code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 0.85em; background: var(--paper-raised); padding: 0.1rem 0.35rem; border: 1px solid var(--rule); } .torrent-file-list { font-family: var(--sans); font-size: 0.92rem; } .torrent-group { margin-top: 1.6rem; font-family: var(--sans); } .torrent-group h3 { margin-bottom: 0.6rem; font-family: var(--sans); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .torrent-group .download-link { font-size: 0.9rem; } /* Degraded / unavailable notice on book pages */ .degraded-note { max-width: 720px; margin-top: 1.5rem; padding: 1rem 1.2rem; border-left: 4px solid var(--rule-strong); background: var(--paper-raised); font-family: var(--sans); font-size: 0.88rem; color: var(--muted); } .availability-note { margin: 0.6rem 0 0; color: var(--accent); font-size: 0.85rem; font-weight: 650; } /* Courses index: featured shelf + filter toolbar (docs/specs/courses-page.md). The filter chrome is shared with the books index, which uses the neutral .filter-* names on the same rules (docs/specs/books-page.md). Keep the two selector sets together: a change to one is a change to both. */ .featured-courses { margin: 1.5rem 0 2.5rem; } /* Filter toolbar. Rendered `hidden` server-side; assets/courses-filter.js reveals it once the filters can actually run, so a no-JS reader never sees a dead control. The bar pins to the top of the viewport, because the thing it filters is 182 cards long and the controls are useless once they have scrolled away. */ .course-stick-sentinel, .filter-stick-sentinel { height: 1px; margin-bottom: -1px; } .course-toolbar, .filter-bar { position: sticky; top: 0; z-index: 20; margin-bottom: 1.6rem; padding: 0.9rem 0 0.9rem; background: var(--paper); border-bottom: 1px solid var(--rule); transition: box-shadow 0.18s ease, padding 0.18s ease; } /* Pinned: pull the shadow out to the full page width so the grid scrolls under a solid edge rather than a floating rectangle. */ .course-toolbar.is-stuck, .filter-bar.is-stuck { padding-top: 0.7rem; padding-bottom: 0.7rem; box-shadow: 0 10px 22px -14px rgba(0, 0, 0, 0.5); } .course-toolbar.is-stuck::before, .filter-bar.is-stuck::before { content: ""; position: absolute; inset: 0 -50vw; z-index: -1; background: var(--paper); border-bottom: 1px solid var(--rule); } /* Search leads the bar: it is the highest-intent control and the only one that reaches both titles and speaker names. */ .course-search, .filter-search { position: relative; display: flex; align-items: center; margin-bottom: 0.85rem; border: 1px solid var(--rule-strong); background: var(--paper-raised); } .course-search:focus-within, .filter-search:focus-within { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .course-search__icon, .filter-search__icon { flex: none; width: 1.05rem; height: 1.05rem; margin-left: 0.8rem; color: var(--muted); } .course-search input[type="search"], .filter-search input[type="search"] { flex: 1 1 auto; min-width: 0; padding: 0.65rem 0.7rem; border: 0; background: none; color: var(--ink); font-family: var(--sans); font-size: 0.95rem; } .course-search input[type="search"]:focus-visible, .filter-search input[type="search"]:focus-visible { outline: 0; } .course-search input[type="search"]::-webkit-search-cancel-button, .filter-search input[type="search"]::-webkit-search-cancel-button { display: none; } .course-search__clear, .filter-search__clear { flex: none; padding: 0 0.5rem; border: 0; background: none; color: var(--muted); font-size: 1.25rem; line-height: 1; cursor: pointer; } .course-search__clear:hover, .filter-search__clear:hover { color: var(--accent); } .course-search__key, .filter-search__key { flex: none; margin-right: 0.6rem; padding: 0.08rem 0.4rem; border: 1px solid var(--rule); color: var(--muted); font-family: var(--sans); font-size: 0.72rem; } .course-search:focus-within .course-search__key, .filter-search:focus-within .filter-search__key { visibility: hidden; } .course-pills, .filter-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; } .pill { display: inline-flex; align-items: baseline; gap: 0.4rem; padding: 0.38rem 0.8rem; border: 1px solid var(--rule); background: var(--paper-raised); color: var(--ink); font-family: var(--sans); font-size: 0.82rem; cursor: pointer; text-decoration: none; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .pill:hover:not(:disabled) { border-color: var(--rule-strong); } /* The count is the point of the pill, so it stays legible on the filled state. */ .pill__n { color: var(--muted); font-size: 0.72rem; font-variant-numeric: tabular-nums; } .pill.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 650; } .pill.is-active .pill__n { color: color-mix(in srgb, var(--on-accent) 72%, transparent); } .pill.is-dead { opacity: 0.38; cursor: default; } .course-controls, .filter-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; } /* Label and value read as one object, so the row scans as "Speaker: Anyone" instead of three unlabelled dropdowns. */ .control { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.32rem 0.6rem; border: 1px solid var(--rule); background: var(--paper-raised); } .control:focus-within { border-color: var(--accent); } .control__label { color: var(--muted); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .control select { max-width: 15rem; padding: 0.12rem 1.1rem 0.12rem 0; border: 0; background: none; color: var(--ink); font-family: var(--sans); font-size: 0.85rem; appearance: none; cursor: pointer; } .control select:focus-visible { outline: 0; } .control::after { content: ""; position: absolute; right: 0.6rem; width: 0.42rem; height: 0.42rem; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: translateY(-0.12rem) rotate(45deg); pointer-events: none; } /* Active filters, one removable chip each: a three-facet state stays legible and can be undone a piece at a time rather than only all at once. */ .course-chips, .filter-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.8rem; } .chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.24rem 0.55rem; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent-strong); font-family: var(--sans); font-size: 0.78rem; cursor: pointer; } .chip:hover { background: var(--accent); color: var(--on-accent); } .chip__x { font-size: 1rem; line-height: 1; } .course-summary, .filter-summary { margin: 0.8rem 0 0; color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; } .course-empty, .filter-empty { margin: 0 0 1.6rem; padding: 1.1rem 1.3rem; border-left: 4px solid var(--accent); background: var(--paper-raised); } .course-empty__head, .filter-empty__head { margin: 0; font-family: var(--serif); font-size: 1.05rem; } .course-empty__hint, .filter-empty__hint { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.9rem; } .course-reset, .filter-reset { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-size: 0.85rem; font-weight: 650; text-decoration: underline; text-underline-offset: 0.18em; cursor: pointer; } .course-reset:hover, .filter-reset:hover { color: var(--accent-strong); } .course-controls .course-reset, .filter-controls .filter-reset { margin-left: auto; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .course-toolbar, .pill, .filter-bar { transition: none; } } /* Category tag on a filterable course card's meta line (courses index only; the landing page's coursecard calls render without it, see _macros.html) */ .course-tag { display: block; margin-top: 0.3rem; color: var(--accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } /* Recovered mises.org metadata on a course page: recording years and topics. See docs/specs/course-metadata.md. Every rule here is additive -- a course with no sidecar entry renders none of these elements at all. */ .topic-row { display: flex; flex-wrap: wrap; gap: 0.35rem 0.5rem; margin: 0.75rem 0 0; } .topic-row--episode { margin-top: 0.4rem; } .topic-tag { padding: 0.12rem 0.45rem; border: 1px solid var(--rule); border-radius: 2px; background: var(--paper-raised); color: var(--muted); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; } /* Only some course/lecture topics resolve to a /topics// hub (see COURSE_TOPIC_TO_BOOK_TOPIC in generator/render.py); those render as , the rest stay . The link variant gets the same hover/focus affordance as .pill so it reads as clickable. */ a.topic-tag:hover { border-color: var(--accent); color: var(--accent); } .episode__year { margin-left: 0.3rem; color: var(--accent); font-family: var(--serif); font-size: 0.9rem; font-weight: 400; } .episode__summary { max-width: 62ch; margin: 0.35rem 0 0; color: var(--muted); font-family: var(--serif); font-size: 0.85rem; } .series-provenance { max-width: 760px; margin: 0 0 4rem; color: var(--muted); font-size: 0.78rem; } @media (max-width: 900px) { .featured-authors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .featured-authors__grid { grid-auto-flow: column; grid-auto-columns: min(82vw, 320px); grid-template-columns: none; overflow-x: auto; padding-bottom: 0.7rem; scroll-snap-type: x mandatory; scrollbar-width: none; } .featured-authors__grid::-webkit-scrollbar { display: none; } .featured-author-card { scroll-snap-align: start; } .author-filter__groups { grid-template-columns: 1fr; } .author-columns { columns: 1; } .author-row { grid-template-columns: 1fr; min-height: 44px; padding-block: 0.65rem; } .author-row__meta { text-align: left; } .author-row__count { grid-column: 1; } .author-rail { overflow-x: auto; scrollbar-width: none; } .author-rail::-webkit-scrollbar { display: none; } .author-rail ol { justify-content: flex-start; width: max-content; } .author-rail a { min-width: 44px; min-height: 44px; } .author-lecture-list li { display: block; } .author-lecture-list li span { display: block; margin-top: 0.15rem; } .journal-grid { grid-template-columns: 1fr; } .issue-row { grid-template-columns: 1fr auto; } .issue-row .issue-size { grid-column: 1; } /* On a phone a pinned four-row toolbar would eat the results it filters, and the pills wrap to four lines. Unpin it and scroll the pills sideways instead. */ .course-toolbar, .filter-bar { position: static; } .course-pills, .filter-pills { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 0.35rem; scrollbar-width: none; } .course-pills::-webkit-scrollbar, .filter-pills::-webkit-scrollbar { display: none; } .pill { flex: none; } .control { flex: 1 1 auto; justify-content: space-between; } .control select { max-width: none; } .course-search__key, .filter-search__key { display: none; } .course-controls .course-reset, .filter-controls .filter-reset { margin-left: 0; flex: 1 1 100%; text-align: left; } } /* ---- Lecture pages and journal-issue pages ------------------------------- Two leaf page types added when the 2,728 recordings and 2,461 journal PDFs stopped being anchors inside their parent pages and got URLs of their own. Both reuse the existing page-head / download-panel / provenance furniture; only the player, the fact list and the prev/next pager are new. */ .lecture-meta { color: var(--muted); font-size: 0.9rem; margin-top: 0.35rem; } .lecture-meta a { color: inherit; } .lecture-player { margin: 1.5rem 0 0; } .lecture-player video, .lecture-player audio { width: 100%; border-radius: 10px; background: #000; } /* An audio element on a black field looks broken; give it the paper surface and a sane height instead of the browser default strip. */ .lecture-player audio { background: var(--surface, transparent); height: 46px; } .lecture-player .download-list { margin-top: 0.9rem; } .lecture-summary { margin-top: 1.25rem; } /* Prev/next. Two columns so "previous" stays left and "next" stays right even when only one of them exists (the template emits an empty span for the missing side). */ .lecture-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin: 2rem 0; } .lecture-pager__link { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.8rem 1rem; border: 1px solid var(--rule); border-radius: 10px; text-decoration: none; color: inherit; } .lecture-pager__link:hover { border-color: var(--accent); } .lecture-pager__link--next { text-align: right; } .lecture-pager__dir { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .lecture-pager__title { font-weight: 650; font-size: 0.95rem; } /* The journal-issue fact list: a two-column definition list of exactly what the filename yielded, so the page never implies it knows more than it does. */ .issue-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1.25rem; padding: 1rem clamp(0.75rem, 3vw, 1.5rem); margin: 0; } .issue-facts dt { font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); } .issue-facts dd { margin: 0; font-size: 0.95rem; } .issue-facts code { font-size: 0.85rem; word-break: break-all; } .issue-provenance { padding: 0 clamp(0.75rem, 3vw, 1.5rem) 1rem; margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.55; } .issue-kind { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-left: 0.4rem; } @media (max-width: 720px) { .lecture-pager { grid-template-columns: 1fr; } .lecture-pager__link--next { text-align: left; } .issue-facts { grid-template-columns: 1fr; gap: 0.1rem 0; } .issue-facts dd { margin-bottom: 0.6rem; } } /* Transcript link on a course page's episode row. Quiet by default: it is a second link to a page the title already links to, and only earns attention from a reader who wants the text rather than the recording. */ .episode__transcript { margin: 0.35rem 0 0; font-size: 0.82rem; } .episode__transcript a { color: var(--accent); } .episode__transcript span { color: var(--muted); } .episode__transcript span::before { content: "· "; } /* ---- Lecture transcripts ------------------------------------------------- docs/specs/lecture-transcripts.md. Prose that happens to be seekable: the paragraph is the unit a reader sees, the segment span is the unit the player syncs to, and neither should look like a caption file. assets/transcript.js adds .has-player, .is-active, .is-current, .is-searching and the hit classes; with JavaScript off none of them ever appear and this all degrades to a transcript with a timestamp beside each paragraph. */ /* On a transcript page the player follows the reader down the text, so clicking a passage plays it without scrolling back. Capped so it never eats the screen, and off entirely on short viewports where sticky furniture costs more than it gives. */ @media (min-height: 620px) { .has-transcript .lecture-player { position: sticky; top: 0; z-index: 5; padding-block: 0.6rem; background: var(--paper); } .has-transcript .lecture-player video { max-height: 42vh; object-fit: contain; } } .transcript { margin: 2.5rem 0 0; border-top: 1px solid var(--rule); padding-top: 1.25rem; } .transcript__head { align-items: baseline; } .transcript__stats { margin: 0; color: var(--muted); font-size: 0.85rem; white-space: nowrap; } .transcript__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-bottom: 1.25rem; } .transcript__search { position: relative; flex: 1 1 16rem; max-width: 26rem; } .transcript__search svg { position: absolute; left: 0.7rem; top: 50%; transform: translateY(-50%); width: 17px; height: 17px; color: var(--muted); pointer-events: none; } .transcript__search input { width: 100%; padding: 0.5rem 0.7rem 0.5rem 2.2rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper-raised); color: inherit; font: inherit; font-size: 0.92rem; } .transcript__search input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .transcript__matches { margin: 0; color: var(--muted); font-size: 0.85rem; min-width: 5rem; } .transcript__follow { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; color: var(--muted); font-size: 0.85rem; cursor: pointer; user-select: none; } .transcript__follow input { accent-color: var(--accent); } .transcript__body { font-family: var(--serif); font-size: 1.06rem; line-height: 1.75; } /* Clamp rather than hide: the whole transcript is in the DOM, only the first screenful is shown until asked. */ .transcript__body.is-clamped { max-height: 30rem; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); } .transcript__p { position: relative; margin: 0 0 1.15rem; padding-left: 4.2rem; scroll-margin-top: 48vh; } /* The timestamp is the paragraph's permalink and its play button at once, so it reads as a quiet marginal note until it is worth reaching for. */ .transcript__time { position: absolute; left: 0; top: 0.28em; font-family: var(--sans); font-size: 0.78rem; font-variant-numeric: tabular-nums; color: var(--muted); text-decoration: none; padding: 0.1rem 0.35rem; border-radius: 5px; border: 1px solid transparent; } .transcript__time:hover { color: var(--accent); border-color: var(--rule); background: var(--paper-raised); } .transcript.has-player .transcript__time::before { content: "\25B6"; font-size: 0.62em; margin-right: 0.3em; vertical-align: 0.1em; opacity: 0.55; } /* Only a page with a player makes a sentence clickable, so only there does one look clickable. */ .transcript.has-player .transcript__seg { cursor: pointer; border-radius: 3px; } .transcript.has-player .transcript__seg:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); } .transcript__seg.is-active { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); border-radius: 3px; } /* A rule in the gutter tracks playback down the page. Cheaper to read than tinting the whole paragraph, which fights the active-sentence highlight. */ .transcript__p.is-current::before { content: ""; position: absolute; left: 3.4rem; top: 0.35em; bottom: 0.15em; width: 2px; border-radius: 2px; background: var(--accent); } .transcript__p.is-current .transcript__time { color: var(--accent); } /* Search: misses fade out rather than disappear, so the shape of the talk and the position of the hits inside it stay legible while filtering. */ .transcript.is-searching .transcript__p.is-miss { opacity: 0.32; } .transcript__body mark { background: color-mix(in srgb, var(--accent) 22%, transparent); color: inherit; border-radius: 3px; padding: 0 0.1em; } .transcript__p.is-cursor mark { background: var(--accent); color: var(--on-accent); } .transcript__more { display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; width: 100%; margin-top: 0.9rem; padding: 0.7rem 1rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper-raised); color: inherit; font: inherit; font-size: 0.92rem; font-weight: 650; cursor: pointer; } .transcript__more:hover { border-color: var(--accent); color: var(--accent); } .transcript__more span { color: var(--muted); font-weight: 400; font-size: 0.85rem; } @media (max-width: 720px) { .transcript__p { padding-left: 0; } .transcript__time { position: static; display: inline-block; margin-right: 0.4rem; padding-inline: 0; } .transcript__p.is-current::before { left: -0.75rem; top: 0.2em; } .transcript__follow { margin-left: 0; } /* A phone screen has less to spare, so the sticky player takes less of it. */ .has-transcript .lecture-player video { max-height: 30vh; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }