/* 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; } .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)); } /* "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; } /* 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 (compact columns) */ .author-columns { columns: 3 220px; column-gap: 2.5rem; padding: 1rem 0 5rem; } .author-columns a { display: block; break-inside: avoid; padding: 0.35rem 0; text-decoration: none; font-size: 0.95rem; } .author-columns a span { color: var(--muted); font-size: 0.8rem; } /* 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) { .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; } .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) { .journal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .author-columns { columns: 1; } .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; } }