/* ============================================================ Busy Pastor Sermons — site stylesheet Direction: "The Pulpit Bible" (study-volume world; see surface brief .impeccable/surfaces/server-templates-pages-home-html.md). The site is a gilt-tooled book, not a storefront: deep leather ground, cream vellum content panels, gilt (gold) for titles and the primary action, sepia marginalia, tooled rules. Spectral for display, Source Serif 4 for body, Alegreya Sans for UI labels. Class hooks are shared with the html/templates — do not rename a class without updating the templates that use it. ============================================================ */ /* ============ Pulpit Bible tokens ============ */ :root { --leather: #2b1a13; /* deep oxblood-brown ground */ --leather-deep: #201310; /* darker cover edge */ --leather-mid: #3a241a; /* raised band on leather */ --vellum: #f4ead2; /* cream paper surface */ --vellum-soft: #efe3c6; /* quieter vellum panel */ --vellum-deep: #e6d7b4; /* panel edge */ --gilt: #c9a227; /* gold for rules, fills, primary CTA */ --gilt-bright: #e0b84c; --gilt-deep: #9a7a1c; --gilt-ink: #7d6118; /* gold-as-text on vellum (AA 4.88:1) */ --ink: #2b2118; /* ink on vellum */ --ink-soft: #4a3b2c; /* secondary ink on vellum */ --ink-faint: #6e5a43; /* faint ink on vellum */ --sepia: #6e5a43; /* marginalia text on vellum (AA 5.5:1) */ --white-on-leather: rgba(244, 234, 210, 0.92); --white-soft: rgba(244, 234, 210, 0.70); /* Typefaces. Self-hosted; see static/css/fonts.css for the @font-face rules and the metric-matched fallback faces. The middle name in each stack is that fallback — keep it, or the page reflows ~16% when the real face lands. */ --sans: "Alegreya Sans", "Alegreya Fallback", "Helvetica Neue", Arial, sans-serif; --serif-d: "Spectral", "Spectral Fallback", Georgia, serif; --serif-b: "Source Serif 4", "Source Serif Fallback", Georgia, serif; /* Type scale. Anchored on 17px body, then evenly stepped. Every font-size in this sheet resolves to one of these — the previous 27 arbitrary values (0.32px apart in places) let a price and a nav control render the same size. Expressed in rem so a reader's own font-size preference is honoured. Add a step here before you add a literal. */ --t-2xs: 0.78125rem; /* 12.5px micro-labels: kickers, captions, table heads */ --t-xs: 0.84375rem; /* 13.5px small meta: trust lines, card prices, notes */ --t-sm: 0.90625rem; /* 14.5px secondary: nav, metadata, marginalia, labels */ --t-md: 0.96875rem; /* 15.5px buttons */ --t-base: 1.0625rem; /* 17px body prose */ --t-lg: 1.1875rem; /* 19px ledes, h4 */ --t-xl: 1.3125rem; /* 21px h3, card titles, FAQ questions */ --t-2xl: 1.5625rem; /* 25px section headings, page price */ /* Above this the scale is fluid and lives in the h1/h2 rules: h1 clamp(2.1rem, 5vw, 3rem), h2 clamp(1.45rem, 3.5vw, 2.2rem). */ --radius-panel: 4px; --radius-card: 8px; --radius-pill: 9999px; --shadow-card: 0 1px 2px rgba(32, 19, 16, 0.18), 0 4px 12px rgba(32, 19, 16, 0.16); --shadow-gilt: 0 1px 2px rgba(32, 19, 16, 0.3); /* The reading measure, in rem — deliberately NOT in ch. `ch` is the width of a zero, so a measure written in ch changes width when the font swaps; 72ch actually rendered 83 characters on book pages, past the comfortable ceiling. 34.5rem holds ~65 characters at the body size. */ --measure: 34.5rem; } /* ============ Reset / base ============ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--serif-b); font-size: var(--t-base); line-height: 1.6; color: var(--white-on-leather); background: var(--leather); -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; } a { color: var(--gilt-ink); text-decoration: underline; text-underline-offset: 2px; } a:hover { color: var(--gilt-ink); } h1, h2, h3, h4, h5, h6 { font-family: var(--serif-d); font-weight: 600; line-height: 1.12; margin: 0 0 .5em; color: var(--ink); letter-spacing: -0.02em; /* balance the last line; break a long word rather than bleed the panel (the longest book title overflows its column at 320px) */ text-wrap: balance; overflow-wrap: break-word; } h1 { font-size: clamp(2.1rem, 5vw, 3rem); } h2 { font-size: clamp(1.45rem, 3.5vw, 2.2rem); letter-spacing: -0.025em; } h3 { font-size: var(--t-xl); } h4 { font-size: var(--t-lg); font-weight: 700; letter-spacing: -0.01em; } ::selection { background: var(--gilt); color: var(--leather); } /* themed browser surfaces — the parts the design did not draw */ * { scrollbar-width: thin; scrollbar-color: var(--gilt-deep) var(--leather-deep); } *::-webkit-scrollbar { width: 12px; } *::-webkit-scrollbar-track { background: var(--leather-deep); } *::-webkit-scrollbar-thumb { background: var(--gilt-deep); border-radius: 6px; border: 2px solid var(--leather-deep); } input, textarea, select { caret-color: var(--gilt); } :focus-visible { outline: 2px solid var(--gilt-ink); outline-offset: 2px; } a:focus-visible, button:focus-visible { outline: 2px solid var(--gilt-ink); outline-offset: 2px; } /* on leather surfaces a bright-gilt ring holds 3:1 non-text contrast */ .resources-band a:focus-visible, .resources-band button:focus-visible, .featured-hero a:focus-visible, .featured-hero button:focus-visible, .site-footer a:focus-visible, .site-footer button:focus-visible { outline-color: var(--gilt-bright); } /* ============ Layout — vellum page inside leather ============ */ .wrap { max-width: 78rem; margin: 0 auto; padding: 0 2rem; } .site-main { padding: 2.5rem 0 4rem; } .page { padding: 2.5rem 0 0; background: var(--vellum); color: var(--ink); border: 1px solid var(--gilt); border-radius: var(--radius-panel); padding: 2.25rem 2rem; box-shadow: var(--shadow-card); } .page h1, .page h2, .page h3, .page h4 { color: var(--ink); } .page p, .page li { color: var(--ink); } .page .lede { font-size: var(--t-lg); color: var(--ink-soft); max-width: 48ch; } /* ============ Masthead — gilt title block over vellum ============ */ .site-masthead { background: var(--vellum); border-bottom: 2px solid var(--gilt); } .masthead-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem clamp(1.5rem, 4vw, 2.5rem); } .site-title { font-family: var(--serif-d); font-weight: 700; font-size: var(--t-2xl); line-height: 1.05; color: var(--ink); text-decoration: none; letter-spacing: -0.02em; } .site-title:hover { color: var(--ink); } .site-title .title-rule { display: block; width: 3.25rem; height: 2px; background: var(--gilt); margin-top: .35rem; } /* gilt bookmark ribbon — the study-volume signature device */ .site-title { position: relative; } .site-title .title-ribbon { position: absolute; left: 0; top: 100%; width: 1.4rem; height: 1.1rem; margin-top: .35rem; background: var(--gilt-deep); border-radius: 0 0 3px 3px; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%); transform-origin: top; animation: ribbon-fill .6s cubic-bezier(.22,1,.36,1) .15s both; } @keyframes ribbon-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } } @media (prefers-reduced-motion: reduce) { .site-title .title-ribbon { animation: none; } } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--gilt); color: var(--leather); font-family: var(--sans); font-size: var(--t-sm); font-weight: 700; padding: .75rem 1.25rem; text-decoration: none; } .skip-link:focus { left: 0; } /* a:hover recolours every link gilt-ink, which on this gilt fill would be 2.4:1 — pin the leather text through the hover. */ .skip-link:hover { color: var(--leather); } .masthead-actions { display: flex; align-items: center; gap: .75rem; } .cart-link { font-family: var(--sans); font-size: var(--t-sm); font-weight: 700; color: var(--ink-soft); text-decoration: none; letter-spacing: .02em; } .cart-link:hover { color: var(--gilt-ink); } /* ============ Nav — gilt hairline on vellum ============ */ .site-nav { position: sticky; top: 0; z-index: 50; background: var(--vellum-soft); box-shadow: var(--shadow-card); } .site-nav.is-scrolled { box-shadow: 0 2px 3px rgba(32,19,16,.2); } .nav-inner { display: flex; align-items: center; justify-content: space-between; } .nav-menu { list-style: none; display: flex; gap: 1.5rem; margin: 0; padding: 0; } .nav-item { position: relative; } .nav-link { display: inline-block; padding: .9rem 0; font-family: var(--sans); font-size: var(--t-sm); font-weight: 700; line-height: 1.5; color: var(--ink); text-decoration: none; background: none; border: 0; cursor: pointer; letter-spacing: .02em; } .nav-link:hover, .nav-item.open > .nav-link { color: var(--gilt-ink); } .nav-drop { position: absolute; top: 100%; left: 0; min-width: 13rem; margin: 0; padding: .5rem; list-style: none; background: var(--vellum); border: 1px solid var(--gilt); border-radius: var(--radius-card); box-shadow: var(--shadow-card); display: none; } .nav-item.open .nav-drop { display: block; } .nav-drop a { display: block; padding: .5rem .9rem; font-family: var(--sans); font-size: var(--t-sm); font-weight: 500; color: var(--ink); text-decoration: none; border-radius: var(--radius-panel); } .nav-drop a:hover { background: var(--vellum-soft); color: var(--gilt-ink); } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .5rem; } .nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); margin: 5px 0; border-radius: 1px; } @media (max-width: 1024px) { .nav-toggle { display: block; } .nav-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--vellum); box-shadow: var(--shadow-card); padding: .5rem 2rem 1rem; } .nav-menu.is-open { display: flex; } .nav-link { width: 100%; text-align: left; padding: .75rem 0; } .nav-drop { position: static; box-shadow: none; border: 0; padding: 0 0 0 1rem; } .nav-item { border-bottom: 1px solid var(--vellum-deep); } .nav-item:last-child { border-bottom: 0; } } /* ============ Buttons — ribbon-pull + gilt rule ============ */ .buy-btn { display: inline-block; padding: 10px 20px; font-family: var(--sans); font-size: var(--t-md); font-weight: 700; color: var(--leather); background: var(--gilt); border-radius: var(--radius-pill); text-decoration: none; border: 1px solid var(--gilt); box-shadow: var(--shadow-gilt); transition: background .15s ease, transform .15s ease; letter-spacing: .02em; text-align: center; white-space: nowrap; } .buy-btn:hover { background: var(--gilt-bright); color: var(--leather); } .buy-btn:active { transform: scale(0.97); } .buy-btn.buy-btn-ghost { background: transparent; color: var(--gilt-ink); border-color: var(--gilt); box-shadow: none; } .buy-btn.buy-btn-ghost:hover { background: rgba(201,162,39,.12); color: var(--gilt-ink); } .buy-btn.buy-btn-dark { background: var(--leather); border-color: var(--leather); color: var(--vellum); } .buy-btn.buy-btn-dark:hover { background: var(--leather-mid); } .cart-btn { background: var(--leather); border-color: var(--leather); color: var(--vellum); box-shadow: none; } .cart-btn:hover { background: var(--leather-mid); color: var(--vellum); } .cart-btn:active { transform: scale(0.97); } /* ============ Featured hero — the book's title page, in leather ============ The site's strongest structural move is the full-bleed leather band with 2px gilt rules (the end band on .resources-band). The hero is that same move at the opening: the first thing a pastor meets is the title page of the book, not one more vellum panel. The cover keeps a vellum plate — a gilt frame needs a pastedown to be mounted on, and the caption reads as a plate legend. */ .featured-hero { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 3rem; align-items: center; background: var(--leather); color: var(--white-on-leather); /* full-bleed, escaping .wrap's padding — the .resources-band idiom. The inline padding re-aligns the band to the study panels' text column (.wrap's 2rem + the panel's 1px border + 2rem = 4rem inside the 78rem cap), so the title block sits on the same left axis as the letter and the bookstore below it. */ width: 100vw; margin-left: calc(50% - 50vw); padding: 3.5rem max(4rem, calc((100vw - 78rem) / 2 + 4rem)); border-top: 2px solid var(--gilt); border-bottom: 2px solid var(--gilt); } /* the title-page rule: a gilt hairline above and below the title block */ .hero-rule { border: 0; border-top: 2px solid var(--gilt); width: 6.5rem; margin: 0 0 1.75rem; } .hero-rule-foot { margin: 1.75rem 0 1.5rem; } .feature-copy h1 { color: var(--gilt-bright); font-weight: 700; font-size: clamp(2.4rem, 5.4vw, 4.5rem); line-height: 1.02; letter-spacing: -0.03em; max-width: 15ch; } .feature-copy .lede { font-size: var(--t-lg); font-weight: 400; color: var(--white-on-leather); margin: 1.25rem 0 0; max-width: 44ch; line-height: 1.6; } .feature-copy .feature-price { font-family: var(--serif-d); font-size: clamp(1.75rem, 3.2vw, 2.5rem); font-weight: 700; color: var(--vellum); margin: 1.1rem 0 0; line-height: 1.05; letter-spacing: -0.02em; } .feature-copy .feature-price small { font-family: var(--sans); font-size: var(--t-2xs); font-weight: 500; color: var(--white-soft); letter-spacing: .02em; } .feature-ctas { display: flex; justify-content: flex-start; gap: .75rem; flex-wrap: wrap; } .feature-copy .feature-note { font-family: var(--sans); font-size: var(--t-xs); color: var(--white-soft); margin: .85rem 0 0; } /* the ghost button's gilt-ink is a vellum colour and fails on leather, so it goes bright gilt here — exactly as the end band already does */ .featured-hero .buy-btn.buy-btn-ghost { background: transparent; border-color: var(--gilt); color: var(--gilt-bright); } .featured-hero .buy-btn.buy-btn-ghost:hover { background: rgba(201,162,39,.14); color: var(--gilt); } /* the plate: vellum pastedown, gilt-framed cover, legend beneath */ .feature-cover { background: var(--vellum-soft); padding: .9rem .9rem 1.15rem; box-shadow: var(--shadow-card); } .feature-cover img { display: block; width: 100%; border: 2px solid var(--gilt); border-radius: var(--radius-card); background: none; } .feature-cover .feature-title { font-family: var(--serif-d); font-size: var(--t-md); font-weight: 600; color: var(--gilt-ink); text-align: center; margin: .9rem auto 0; max-width: 34ch; letter-spacing: -0.01em; } /* the one authored moment: the gilt rule draws itself as the page opens */ .js .featured-hero .hero-rule { transform: scaleX(0); transform-origin: left; transition: transform .65s cubic-bezier(.22, 1, .36, 1) .2s; } .js .featured-hero.is-visible .hero-rule { transform: none; } @media (prefers-reduced-motion: reduce) { .js .featured-hero .hero-rule { transform: none; transition: none; } } @media (max-width: 900px) { /* minmax(0, 1fr), not 1fr: a bare 1fr floors the column at its content's min-content width and pushes the page wide on narrow screens. The band's inline padding is left alone here so the hero keeps lining up with the study panels below it. */ .featured-hero { grid-template-columns: minmax(0, 1fr); gap: 2rem; text-align: center; } .hero-rule { margin-inline: auto; } .js .featured-hero .hero-rule { transform-origin: center; } .feature-ctas { justify-content: center; } .feature-cover { max-width: 340px; margin: 0 auto; } .feature-cover img { margin: 0 auto; } } @media (max-width: 640px) { .feature-copy h1 { max-width: none; } } /* ============ Book grids — tooled vellum cards ============ */ /* Bookstore search: the box sits above the section pills; results drop directly below it as a vellum list. Keyboard navigation highlights with the is-active class; the box's combobox roles are in the markup. */ .bookstore-search { position: relative; max-width: 34rem; margin: 1.75rem 0 0; } .bookstore-search .form-label { display: block; margin-bottom: .4rem; } .bookstore-search .form-input { width: 100%; } .search-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 40; list-style: none; margin: .25rem 0 0; padding: .25rem 0; background: var(--vellum); border: 1px solid var(--gilt-deep); border-radius: var(--radius-panel); box-shadow: var(--shadow-card); max-height: 22rem; overflow-y: auto; } .search-results li { display: flex; align-items: baseline; gap: .6rem; padding: .5rem .9rem; } .search-results a { color: var(--ink); text-decoration: none; font-family: var(--serif-b); font-size: var(--t-base); } .search-results li.is-active { background: var(--vellum-soft); } .search-results li.is-active a { color: var(--gilt-ink); } .search-result-type { font-family: var(--sans); font-size: var(--t-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-faint); } .search-empty { color: var(--ink-faint); font-family: var(--sans); font-size: var(--t-sm); } /* Scripture index results: same vellum combobox as bookstore search, with the book list as small links under each sermon title. */ .search-results li.scripture-result { flex-direction: column; align-items: stretch; gap: 0; } .scripture-result-main { display: flex; align-items: baseline; gap: .6rem; } .scripture-result-ref { font-family: var(--sans); font-size: var(--t-2xs); color: var(--ink-faint); } .scripture-result-books { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; } .scripture-result-books a { font-family: var(--sans); font-size: var(--t-2xs); color: var(--gilt-ink); text-decoration: none; } .scripture-result-books a:hover { text-decoration: underline; } /* Scripture index entry-point links and the empty-state note. */ .scripture-link { font-family: var(--sans); font-size: var(--t-md); font-weight: 600; margin: .75rem 0 0; } .scripture-link a { color: var(--gilt-ink); text-decoration: underline; text-underline-offset: .15em; } .scripture-empty-note { font-family: var(--sans); font-size: var(--t-sm); color: var(--ink-faint); margin-top: .5rem; } .bookstore-menu { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.25rem 0 0; } .book-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1.5rem 1.25rem; } .book-card { text-align: center; background: var(--vellum); color: var(--ink); border: 1px solid var(--gilt); border-radius: 3px; box-shadow: none; padding: 1.25rem 1.25rem 1.5rem; transition: box-shadow .2s ease; position: relative; } .book-card:hover { box-shadow: 0 2px 3px rgba(32,19,16,.2), 0 6px 16px rgba(32,19,16,.2); } .book-card-link { position: absolute; inset: 0; border-radius: 3px; } .book-card .book-title, .book-card .buy-btn, .book-card .book-buy { position: relative; z-index: 1; } /* The catalog CTA is deliberately quiet: a small text link in gilt-ink (4.88:1 on vellum) under the title. One gold pill belongs to the chooser; a gold pill on every one of the 26 cards out-shouted it. */ .book-buy { display: inline-block; margin-top: .35rem; font-family: var(--sans); font-size: var(--t-sm); font-weight: 600; color: var(--gilt-ink); text-decoration: underline; text-underline-offset: .15em; transition: color .15s ease; } .book-buy:hover { color: var(--gilt); } .book-cover { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; border-radius: 3px; border: 1px solid var(--gilt-deep); box-shadow: none; background: var(--vellum-soft); } .book-title { font-family: var(--serif-d); font-size: var(--t-base); font-weight: 600; margin: .65rem 0 .15rem; color: var(--ink); letter-spacing: -0.015em; } .book-card:hover .book-title { color: var(--gilt-ink); } .book-price { font-family: var(--sans); font-size: var(--t-sm); font-weight: 700; color: var(--ink-soft); margin: 0 0 .6rem; } /* ============ Book page ============ */ .book-page { background: var(--vellum); color: var(--ink); border: 1px solid var(--gilt); border-radius: var(--radius-panel); padding: 2.5rem 2.5rem 2rem; box-shadow: var(--shadow-card); } .book-page .kicker { color: var(--sepia); } .book-headline { font-family: var(--serif-d); font-size: var(--t-xl); font-weight: 600; color: var(--gilt-ink); margin: -.4rem 0 1.25rem; letter-spacing: -0.015em; } .book-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 2.5rem; align-items: start; } .book-body { max-width: var(--measure); } .book-body p { color: var(--ink); } .book-sidebar { align-self: start; text-align: center; } .book-sidebar .book-cover { margin-bottom: 1rem; } .book-sidebar .book-price { font-family: var(--serif-d); font-size: var(--t-2xl); font-weight: 700; color: var(--ink); margin: .25rem 0 .75rem; text-align: center; } .book-price small { font-family: var(--sans); font-size: var(--t-2xs); font-weight: 500; color: var(--ink-faint); } .book-bullets { text-align: left; margin: 1rem 0; padding-left: 1.1rem; } .book-bullets li { margin: .3rem 0; color: var(--ink); } .book-buttons { display: flex; flex-direction: column; gap: .5rem; align-items: center; } .book-buttons .buy-trust { text-align: center; } .offer-kicker { margin-top: .5rem; } .book-proof { margin: 1.25rem 0 0; padding: 1rem 1rem .75rem; text-align: center; background: var(--vellum-soft); border: 1px solid var(--vellum-deep); border-radius: var(--radius-panel); } .book-proof blockquote { margin: 0 0 .5rem; font-family: var(--serif-b); font-style: italic; font-size: var(--t-sm); line-height: 1.5; color: var(--ink); } .book-proof figcaption { font-family: var(--sans); font-size: var(--t-2xs); font-weight: 500; color: var(--ink-faint); } /* gilt-deep here was 3.18:1 at 12.5px — below AA — and the stars were aria-hidden, so the rating was invisible to sighted users, assistive tech, and WCAG at once. gilt-ink is 4.88:1 (AA) and the markup now exposes them as text. */ .book-proof .stars { color: var(--gilt-ink); letter-spacing: .1em; } .buy-trust { margin: .1rem 0 0; font-family: var(--sans); font-size: var(--t-2xs); font-weight: 500; color: var(--ink-faint); letter-spacing: .02em; } /* The print and ebook editions are a real second purchase path, not a footnote: a labelled block of outlined pills. Buy PDF stays the only gold primary — the retailer links borrow the ghost-button language so the hierarchy still reads as one primary plus a grouped alternative. */ .store-row { margin-top: 1.5rem; padding: 1.1rem 1rem 1.15rem; background: var(--vellum-soft); border: 1px solid var(--vellum-deep); border-radius: var(--radius-panel); } .store-label { font-family: var(--sans); font-size: var(--t-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--gilt-ink); margin: 0 0 .7rem; } .store-links { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; } .store-link { display: inline-flex; align-items: center; justify-content: center; padding: .5rem .95rem; min-height: 44px; font-family: var(--sans); font-size: var(--t-sm); font-weight: 700; letter-spacing: .02em; color: var(--gilt-ink); background: transparent; border: 1px solid var(--gilt); border-radius: var(--radius-pill); text-decoration: none; white-space: nowrap; transition: background .15s ease, transform .15s ease; } .store-link:hover { background: rgba(201,162,39,.12); color: var(--gilt-ink); } .store-link:active { transform: scale(0.97); } .table-scroll { overflow-x: auto; margin-top: 1.5rem; } .reference-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--t-sm); background: var(--vellum-soft); border: 1px solid var(--vellum-deep); border-radius: var(--radius-card); overflow: hidden; } /* The caption is the section's one-line description for screen readers and snippet extractors. It must not add a visible line to the page, so it uses the standard visually-hidden clip pattern. */ .reference-table caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .reference-table th, .reference-table td { border-bottom: 1px solid var(--vellum-deep); padding: .6rem .75rem; text-align: left; color: var(--ink); } .reference-table tr:last-child td { border-bottom: 0; } .reference-table th { background: var(--vellum-soft); font-family: var(--sans); font-size: var(--t-2xs); font-weight: 700; color: var(--gilt-ink); } /* hand-annotation — the hovered row draws a gilt under-sweep like a marked line in a study copy */ .reference-table tbody tr { position: relative; } .reference-table tbody tr::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: .15rem; height: 1px; background: var(--gilt); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.22,1,.36,1); } .reference-table tbody tr:hover::after, .reference-table tbody tr:focus-within::after { transform: scaleX(1); } .reference-table tbody tr:hover td:first-child { color: var(--gilt-ink); } @media (max-width: 900px) { /* minmax(0, 1fr), not 1fr: a bare 1fr floors the column at its content's min-content width, and the reference table's is 257px, which pushed the whole page wide on a 320px screen. minmax(0,...) lets the column shrink and the table scroll inside .table-scroll instead. */ .book-layout { grid-template-columns: minmax(0, 1fr); } .book-body { order: 2; } .book-sidebar { order: 1; position: static; } } /* ============ Article / editorial — reading on vellum ============ */ .article { max-width: var(--measure); margin: 0 auto; background: var(--vellum); color: var(--ink); border: 1px solid var(--vellum-deep); border-radius: var(--radius-panel); padding: 2.5rem 2.5rem 2rem; box-shadow: var(--shadow-card); } .article-header { margin-bottom: 2rem; } /* An article's opening line when it announces the topic right under the h1 (the 40 Days guide and Hebrews outline previously put this in an ALL-CAPS h2 that repeated the page title). Demoted to a lead paragraph: the h1 owns the heading; this is a softer first line. */ .article-lead { font-family: var(--serif-b); font-size: var(--t-lg); font-weight: 500; color: var(--ink-soft); margin: 0 0 1rem; } .article-meta { font-family: var(--sans); font-size: var(--t-sm); font-weight: 500; color: var(--ink-faint); margin: .5rem 0 1rem; } .article-header img { border-radius: var(--radius-card); margin-top: 1rem; border: 1px solid var(--vellum-deep); box-shadow: var(--shadow-card); } .article-body { font-size: var(--t-base); color: var(--ink); } /* Inside a running article the hierarchy stays in the BODY serif. Spectral is the voice of the cover — masthead, hero, book and card titles. Setting an article's h2/h3/h4 in it put two unrelated serifs in one continuous document: a reader hit Spectral heading, Spectral subhead, Spectral drop cap, then Source Serif body, every few hundred words. An article now reads as one hand throughout, and the article page loads one serif, not two. */ .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6 { font-family: var(--serif-b); } .article-body > p:first-of-type::first-letter { font-family: var(--serif-b); font-size: 2.4em; font-weight: 700; float: left; line-height: .9; margin: .06em .1em 0 0; color: var(--gilt-ink); } .article-body img { border-radius: var(--radius-card); } .article-body a { color: var(--gilt-ink); } /* Free-resource download buttons embedded in article bodies as