/* generated by tools/build.js - edit src/, not this file */ /* fonts.css */ /* Self-hosted. Generated by tools/fetch-fonts.js - do not edit. * * These used to come from fonts.googleapis.com, which meant two extra * origins and two round trips ahead of first paint. The unicode-range * splits are Google's own, so a page of English never downloads the * accented ranges, and font-display:swap means the text is readable in the * fallback face while the real one arrives rather than invisible. */ /* latin-ext */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/cormorant-garamond-400-latin-ext-cfa9a397.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/cormorant-garamond-400-latin-d80df8ff.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/cormorant-garamond-400-latin-ext-cfa9a397.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/cormorant-garamond-400-latin-d80df8ff.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Gentium Book Plus'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/gentium-book-plus-400i-latin-ext-eddfadc5.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Gentium Book Plus'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/gentium-book-plus-400i-latin-daa21400.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Gentium Book Plus'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/gentium-book-plus-400-latin-ext-46b8923c.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Gentium Book Plus'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/gentium-book-plus-400-latin-dd5d2902.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Gentium Book Plus'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/gentium-book-plus-700-latin-ext-001e63c2.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Gentium Book Plus'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/gentium-book-plus-700-latin-b151cf21.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-400-latin-ext-34b9c504.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/inter-400-latin-3100e775.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-400-latin-ext-34b9c504.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/inter-400-latin-3100e775.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin-ext */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-400-latin-ext-34b9c504.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/inter-400-latin-3100e775.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* tokens.css */ /* FALLBACK FACES THAT TAKE UP THE SAME ROOM. * * A webfont arriving is a reflow. font-display:swap shows a system face first * and then replaces it, and because the two have different widths every line * re-wraps: measured on a throttled connection, the topic pages scored a * layout shift of 0.099 at 1239ms, entirely from this. Preloading fixes it on * a fast connection - the font is there before first paint - and cannot fix it * on a slow one, where the swap simply happens later. * * So the fallback is made to occupy the space the real face will. The ratios * are MEASURED, on a canvas, against the actual files: * * Gentium Book Plus is 92.73% of Georgia width, 101.25% of Times * Inter is 106.19% of Arial's width, 107.99% of Segoe UI * * and the overrides are those metrics divided by the size-adjust, because an * override is a share of the ADJUSTED em rather than of the declared size. * Gentium's ascent is 1.10em, and 1.10 / 0.9273 is 118.62%. * * The result is that the swap changes the shapes and not the layout. */ @font-face { font-family: 'Prose Fallback'; src: local('Georgia'), local('Times New Roman'), local('Times'), local('serif'); /* Re-measured for Gentium Book Plus. These numbers belong to one specific * typeface and are worthless the moment it changes: the previous set was EB * Garamond own, and carrying them over would have quietly restored the * shift the whole exercise removed. */ size-adjust: 92.73%; ascent-override: 118.62%; descent-override: 39.90%; line-gap-override: 0%; } @font-face { font-family: 'Inter Fallback'; src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Segoe UI'), local('sans-serif'); size-adjust: 106.19%; ascent-override: 91.35%; descent-override: 22.60%; line-gap-override: 0%; } /* Design tokens. Two themes: the dark ground the site has always had, and a * parchment light theme, because long theological prose reads better on warm * paper and dark was previously the only option. * * The light theme is opt-in via prefers-color-scheme and overridable by an * explicit data-theme, so a reader's choice always wins over the OS. */ :root { color-scheme: dark; /* Not neutral black. A trace of indigo, because the ground of an icon and * the ground of a night sky are both warm-dark rather than grey-dark, and * the gold has nothing to sit against on true black. */ --bg: #08080f; --bg-sunk: #05050a; --bg-card: #12121a; --bg-card-hover: #1a1a28; --bg-raised: #171724; --border: #2a2a3a; --border-strong: #3a3a4e; --text: #d8d4cc; --text-strong: #ffffff; --text-muted: #9a959f; --gold: #d4a850; --gold-bright: #e9c476; --gold-dim: #a07830; --gold-glow: rgba(212, 168, 80, 0.15); --on-gold: #0a0a0f; --accent: #6a8caf; --danger: #c97a7a; --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.35); --shadow-float: 0 20px 60px rgba(0, 0, 0, 0.55); /* Two typefaces with two jobs, and the split is the whole visual argument: * the SERIF is for everything you READ, the SANS for everything you OPERATE. * Prose, titles, quotations and the day's commemoration are set in Garamond; * buttons, counts, tabs and labels are Inter, small and letterspaced, so the * machinery stays quiet and the text carries the page. Setting the body in a * UI sans is most of why this read as an application rather than a book. */ /* THREE FACES, THREE JOBS. * * --serif is Gentium Book Plus, which SIL drew for scripture and for * scholarly linguistic work. It carries full polytonic Greek, which is the * accentuation patristic Greek actually uses, and its moderate contrast * holds up on a dark ground where a high-contrast face goes spindly. * * --display is Cormorant Garamond, and ONLY for things set large: the * wordmark, the page titles, the day's commemoration. It is the most * beautiful of the faces considered at that size and far too delicate * below it. Google's build carries no Greek, which is the other reason it * is confined to titles - and the titles here are English. * * --sans is Inter, for the machinery: buttons, counts, small capitals. */ --serif: 'Gentium Book Plus', 'Prose Fallback', Georgia, 'Times New Roman', serif; --display: 'Cormorant Garamond', 'Gentium Book Plus', 'Prose Fallback', Georgia, serif; --sans: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* A hairline of gold leaf. Used in place of a border almost everywhere: a * box has four edges and says "widget", a rule has one and says "page". */ --rule: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 45%, transparent) 18%, color-mix(in srgb, var(--gold) 45%, transparent) 82%, transparent); --rule-soft: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold) 20%, transparent), transparent); --radius: 12px; --radius-sm: 8px; --radius-pill: 999px; --topbar-h: 64px; --measure: 66ch; --step: 4px; --gap: 16px; --pad-page: 24px; --motion-fast: 150ms; --motion: 250ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* The light palette's three ink values were darkened after measuring them, * and the measurements are the reason rather than taste: * * --text-muted cleared 4.5:1 on the page ground and missed it on --bg-sunk, * which is the ground the hero and every sunken panel use. 4.42:1 there. A * token has to pass on every surface it lands on, not on the one it was * picked against. * * --gold as body text on --bg-sunk came to 4.23:1. * * --gold-bright INVERTS between the themes. On the dark ground "bright" * means lighter, because lighter is more legible there; on parchment the * emphatic gold has to be the DARKER one. Carrying the dark theme's sense of * the word across is what left the current-section marker and the active * category sitting at 3.31:1. */ @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) { color-scheme: light; --bg: #f5f0e6; --bg-sunk: #ebe4d6; --bg-card: #fffdf8; --bg-card-hover: #fffaf0; --bg-raised: #fffdf8; --border: #ded3bd; --border-strong: #c9bb9f; --text: #33302a; --text-strong: #14120f; --text-muted: #5f5a4f; --gold: #7a5616; --gold-bright: #5f4310; --gold-dim: #6d4e18; --gold-glow: rgba(138, 100, 32, 0.12); --on-gold: #fffdf8; --accent: #3f6288; --shadow-card: 0 6px 18px rgba(74, 60, 34, 0.10); --shadow-float: 0 20px 50px rgba(74, 60, 34, 0.22); } } :root[data-theme='light'] { color-scheme: light; --bg: #f5f0e6; --bg-sunk: #ebe4d6; --bg-card: #fffdf8; --bg-card-hover: #fffaf0; --bg-raised: #fffdf8; --border: #ded3bd; --border-strong: #c9bb9f; --text: #33302a; --text-strong: #14120f; --text-muted: #5f5a4f; --gold: #7a5616; --gold-bright: #5f4310; --gold-dim: #6d4e18; --gold-glow: rgba(138, 100, 32, 0.12); --on-gold: #fffdf8; --accent: #3f6288; --shadow-card: 0 6px 18px rgba(74, 60, 34, 0.10); --shadow-float: 0 20px 50px rgba(74, 60, 34, 0.22); } @media (max-width: 768px) { :root { --topbar-h: 52px; --pad-page: 16px; } } /* base.css */ /* Reset, document defaults, and the accessibility primitives the old build had * none of: a skip link, a visible focus ring, and a reduced-motion switch that * actually stops the two infinite animations. */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } /* The root is raised from the browser default of 16px, which lifts every * rem-based size on the site by the same proportion rather than leaving the * labels behind while the prose grows. * * EB Garamond has a small x-height - that is what makes it beautiful for long * prose and what makes it read smaller than a UI sans at the same nominal * size. Setting the body in it without raising the size made the whole site * harder to read than the Inter it replaced. */ html { font-size: 17px; -webkit-text-size-adjust: 100%; } body { background: var(--bg); color: var(--text); /* The serif is the default and the sans is the exception, which is the * reverse of how this started. Everything below that needs to look like a * control asks for var(--sans) by name. */ font-family: var(--serif); font-size: 1.16rem; line-height: 1.68; overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; } h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.16; color: var(--text-strong); } h1 { letter-spacing: -0.012em; } p { text-wrap: pretty; } /* Anything that is operated rather than read. Small, letterspaced, quiet. */ button, input, select, textarea, .topbar-link, .cat-btn, .cat-count, .card-cat, .card-importance, .search-trigger, .nav-toggle, .breadcrumb, .section-desc, .graph-btn, .legend-item, .legend-toggle, .topbar-discord { font-family: var(--sans); } /* A rule of gold leaf, as an element. */ .rule { height: 1px; border: 0; background: var(--rule-soft); } a { color: var(--gold); text-underline-offset: 2px; } img, svg, canvas { max-width: 100%; display: block; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: none; cursor: pointer; } ul, ol { list-style: none; } /* One ring everywhere, on keyboard focus only, so it never fights the mouse. */ :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px; } .skip-link { position: absolute; left: 8px; top: -64px; z-index: 400; background: var(--gold); color: var(--on-gold); padding: 10px 18px; border-radius: var(--radius-sm); font-weight: 600; text-decoration: none; transition: top var(--motion-fast) var(--ease); } .skip-link:focus { top: 8px; } .visually-hidden:not(:focus):not(:active) { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } [hidden] { display: none !important; } .lede { font-size: 1.125rem; color: var(--text); max-width: var(--measure); } .section-note { color: var(--text-muted); font-size: 0.875rem; margin-top: var(--gap); max-width: var(--measure); } .btn-primary, .btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 13px 30px; border-radius: var(--radius-pill); font-weight: 600; font-size: 0.9375rem; text-decoration: none; cursor: pointer; transition: transform var(--motion) var(--ease), box-shadow var(--motion) var(--ease), background var(--motion) var(--ease), border-color var(--motion) var(--ease); } .btn-primary { background: linear-gradient(135deg, var(--gold-bright), var(--gold-dim)); color: var(--on-gold); border: 1.5px solid transparent; } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px var(--gold-glow); } .btn-secondary { background: transparent; color: var(--gold); border: 1.5px solid var(--gold-dim); } .btn-secondary:hover { background: var(--gold-glow); border-color: var(--gold); } /* THE FOOTER. * * It was a centred paragraph followed by two rows of underlined links joined * by middots. Measured on a phone, each link was about twenty pixels tall and * a few pixels from its neighbour - roughly half the forty-four pixel target * that a thumb needs, with nothing to separate the site's own pages from its * legal ones. * * So: one column, three bands. What the site IS, where else to go, and the * legal pair kept apart from the rest because it is a different kind of link. * The navigation is a wrapping grid of real buttons rather than a sentence * made of links. */ footer { margin-top: auto; padding: 44px var(--pad-page) 40px; border-top: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted); font-size: 0.8125rem; } .footer-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 26px; align-items: center; text-align: center; } .footer-mark { display: flex; flex-direction: column; align-items: center; gap: 10px; } /* Drawn, not typed. The Orthodox cross at U+2626 is absent from the faces this * site loads, so a character reference fell back to a Latin cross - the one * mark on the page that must not be wrong. */ /* .cross sets color: inherit and is loaded after this file, so a single class * here ties and loses. Two classes take it back. */ .cross.footer-cross { width: 26px; height: 26px; color: var(--gold); opacity: 0.9; } .footer-blurb { max-width: 46ch; line-height: 1.6; } .footer-blurb b { color: var(--text); font-weight: 600; } .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .footer-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1px solid var(--border); border-radius: 999px; color: var(--text); text-decoration: none; font-size: 0.875rem; transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease; } .footer-nav a:hover { color: var(--gold-bright); border-color: var(--gold); background: var(--gold-glow); } .footer-nav a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px; padding-top: 4px; border-top: 1px solid var(--border); width: 100%; max-width: 460px; } .footer-legal a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text-muted); text-decoration: none; font-size: 0.78125rem; } .footer-legal a:hover { color: var(--gold); text-decoration: underline; } /* While a bottom sheet is open the page behind it must not scroll. */ body.sheet-open { overflow: hidden; } /* A SCROLLBAR YOU CAN ACTUALLY CATCH. * * It was eight pixels wide with a thumb the same colour as every border on the * page, which made it both hard to see and hard to hit: on Saints & Church * Fathers, 46 topics deep, the thumb was a faint sliver and the only practical * way down the page was to keep flicking. * * Fourteen pixels with a four-pixel transparent border gives a ten-pixel bar * inside a wider hit area, so the pointer catches it before it looks like it * should. The thumb is lighter than the track it sits on rather than the same * value as the page furniture, it never shrinks below forty pixels however * long the page is, and it takes the gold on grab so a drag is obviously a * drag. `scrollbar-color` gives Firefox the same two colours, since it has no * ::-webkit pseudo-elements. */ * { scrollbar-color: var(--border-strong) transparent; } ::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border: 4px solid transparent; background-clip: content-box; border-radius: 999px; min-height: 40px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; } ::-webkit-scrollbar-thumb:active { background: var(--gold-dim, var(--gold)); background-clip: content-box; } ::-webkit-scrollbar-corner { background: transparent; } /* The old build ran a 4s glow and a 2s node pulse forever, for everyone. * Honour the preference: stop motion, keep meaning. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* shell.css */ /* Masthead, index and the reading column. * * What this replaces read as a webmail client, and for structural reasons * rather than stylistic ones: a permanent left rail of sixteen folders with * unread-style count pills, a wide input-shaped search field across the top, * and a row of plain text actions on the right. That is the inbox layout, * almost element for element. * * So each piece keeps its job and changes what it is: * * - the bar becomes a MASTHEAD. A wordmark, a hairline of gold, and the * sections set as small-caps running heads rather than as buttons. * - the rail becomes an INDEX. No panel, no fill, no pills; each category * carries the same colour it has on the map, and the whole thing folds * away so the reading column can have the page. * - the search stops pretending to be a text field, because it never was * one: it opens a palette. */ #topbar { position: sticky; top: 0; z-index: 100; height: var(--topbar-h); display: flex; align-items: center; gap: 14px; padding: 0 var(--pad-page); background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(14px); } /* A rule, not a border. It fades out at both ends instead of ruling off a box, * which is the difference between a page and a panel. */ #topbar::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule-soft); } .topbar-brand { font-family: var(--display); font-size: 1.28rem; letter-spacing: 0.02em; color: var(--gold); text-decoration: none; white-space: nowrap; flex-shrink: 0; display: inline-flex; align-items: center; gap: 9px; } .topbar-brand span { /* No opacity. At 10px this was 2.95:1 on the dark theme and 1.99:1 on the * light one - a subtitle nobody with ordinary eyes could read. Quiet is a * colour choice, not a transparency. */ color: var(--text-muted); font-family: var(--sans); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.16em; margin-left: 10px; } .topbar-brand-name { opacity: 1 !important; font-family: var(--display) !important; font-size: 1.28rem !important; text-transform: none !important; letter-spacing: 0.02em !important; margin-left: 0 !important; } /* The cross is drawn, so it inherits the text colour and scales with the * surface rather than depending on a font that contains U+2626. */ .cross { display: block; color: inherit; } .cross-brand { width: 18px; height: 18px; flex-shrink: 0; } .cross-nav { width: 13px; height: 13px; margin: 0 auto; } /* It used to be 420px of bordered, filled, placeholder-bearing box, which is * to say it looked exactly like the compose field it is not. It is a control * now: it says what it does and gets out of the way. */ .search-trigger { flex: 0 1 auto; /* A flex item's min-width defaults to auto, so without this the label's * intrinsic width stops the bar ever shrinking and the whole header pushes * the page sideways on a phone. Measured: 302px of overflow at 390px. */ min-width: 0; max-width: 270px; display: flex; align-items: center; gap: 10px; background: none; border: 1px solid transparent; color: var(--text-muted); padding: 6px 13px; border-radius: var(--radius-pill); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; text-align: left; transition: color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); } .search-trigger:hover { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 30%, transparent); } .search-trigger-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .search-trigger-key { font-family: var(--sans); font-size: 0.625rem; letter-spacing: 0.06em; border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--text-muted); flex-shrink: 0; } .topbar-actions { display: flex; align-items: center; gap: 2px; margin-left: auto; } .topbar-link { position: relative; color: var(--text-muted); text-decoration: none; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; padding: 8px 11px; white-space: nowrap; transition: color var(--motion-fast) var(--ease); } .topbar-link:hover { color: var(--gold); } /* The current section is marked with a stroke of gold beneath it, the way a * running head is marked in a printed book, rather than with a filled pill. */ .topbar-link[aria-current="page"] { color: var(--gold-bright); } .topbar-link[aria-current="page"]::after { content: ''; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 1px; background: var(--gold); } .topbar-discord { display: inline-flex; align-items: center; gap: 7px; margin-left: 8px; padding: 6px 13px; border: 1px solid var(--border); border-radius: var(--radius-pill); color: var(--text-muted); text-decoration: none; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; transition: color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); } .topbar-discord:hover { border-color: var(--gold-dim); color: var(--gold); } /* Wide screens keep the worded pill; the mark is for the phone bar. */ .discord-mark { display: none; } .topbar-discord-dot { width: 6px; height: 6px; border-radius: 50%; background: #3fb950; box-shadow: 0 0 7px #3fb950; flex-shrink: 0; } .nav-toggle { border: 1px solid transparent; border-radius: var(--radius-pill); padding: 6px 12px; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--text-muted); transition: color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); } .nav-toggle:hover { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 30%, transparent); } .nav-toggle[aria-expanded="true"] { color: var(--gold); } #content { display: flex; align-items: flex-start; flex: 1; min-height: 0; } #sidebar { width: 252px; min-width: 252px; align-self: stretch; /* No panel and no fill. It is an index set in the margin, not a rail bolted * to the side of an application. */ background: none; border-right: none; padding: 24px 0 24px 4px; position: sticky; top: var(--topbar-h); max-height: calc(100vh - var(--topbar-h)); overflow-y: auto; /* Not "thin": Firefox has no ::-webkit pseudo-elements, so this is the only * width it obeys, and thin is the narrow bar this change exists to undo. */ scrollbar-width: auto; } /* The rail had a six-pixel bar of its own, thinner still than the page's. */ #sidebar::-webkit-scrollbar { width: 12px; } #sidebar::-webkit-scrollbar-thumb { background: var(--border-strong); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; min-height: 36px; } #sidebar::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; } /* Folded away, the reading column gets the whole page. A permanent rail on * every route is most of what made this feel like an application. */ #content.index-folded #sidebar { display: none; } #sidebar-scrim { display: none; } @media (max-width: 900px) { #sidebar-scrim { display: block; } } /* THE CATEGORY'S OWN FACE, BEHIND ITS NAME. * * Sixteen rows of text with a coloured dot beside each read as a filter * control. Each row now carries the icon of its most important topic - Pascha * for the calendar, Mount Athos for monasticism, the Ladder for the ascetical * texts - blurred past recognition into colour. It is a 48 pixel JPEG stretched * across the row, so the blur is the upscale and nothing is filtered at * runtime; the whole set is 29KB inside the stylesheet, fetched once. * * Three things had to be true or it looks like a stain, which the first * attempt did: * * Icons are DARK. Tempera on wood, gold ground, centuries of varnish - laid * at low opacity over a dark page they turn to mud. Saturation and contrast * are pushed hard so what survives is colour rather than dimness. * * The label must stay legible in both themes, so the art is laid from the * right and faded to nothing before it reaches the words. Under the text * there is only the page's own background. That is why the gradient is * written with --bg: it follows the parchment theme without a second rule. * * The count sits at the right, on top of the brightest part, so it gets a * scrim of its own rather than a text-shadow - a shadow on a number this * small reads as a printing error. * * The category's own colour is mixed over the art, which ties the sixteen * together as a set and keeps a dim icon from disappearing. */ .cat-btn { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-sm); } .cat-btn::before { content: ''; position: absolute; inset: 0; z-index: -2; background-image: var(--cat-art); background-size: 150% 150%; background-position: center; /* A little blur on top of the upscale, because a 48px square stretched * across a wide short row smears horizontally, and the smear is the one * part of this that looks accidental. */ filter: saturate(1.5) contrast(1.05) brightness(1.1) blur(3px); opacity: 0.26; transition: opacity var(--motion) var(--ease); } .cat-btn::after { content: ''; position: absolute; inset: 0; z-index: -1; background: /* the label's own clear ground, fading out across the middle */ linear-gradient(to right, var(--bg) 0%, var(--bg) 62%, color-mix(in srgb, var(--bg) 62%, transparent) 78%, color-mix(in srgb, var(--bg) 44%, transparent) 92%, color-mix(in srgb, var(--bg) 70%, transparent) 100%), /* and the category's colour over the whole of it */ linear-gradient(to right, transparent 52%, color-mix(in srgb, var(--cat, var(--gold)) 16%, transparent) 100%); } .cat-btn:hover::before { opacity: 0.44; } .cat-btn.active::before { opacity: 0.40; } @media (prefers-reduced-motion: reduce) { .cat-btn::before { transition: none; } } .sidebar-title { font-family: var(--sans); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-muted); padding: 0 20px 14px; margin-bottom: 8px; position: relative; } .sidebar-title::after { content: ''; position: absolute; left: 20px; right: 20px; bottom: 6px; height: 1px; background: var(--rule-soft); } .cat-btn { display: flex; align-items: center; gap: 12px; padding: 7px 20px; font-size: 0.8125rem; line-height: 1.35; color: var(--text-muted); text-decoration: none; border-left: 2px solid transparent; transition: color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); } .cat-btn:hover { color: var(--text-strong); } .cat-btn:hover .cat-dot { transform: scale(1.4); } .cat-btn.active { color: var(--gold-bright); border-left-color: var(--gold); } /* THE EMOJI ICONS ARE GONE, and their absence is the point. * * They came from the data - a scroll, a scale, a candle, a palette, a folded * pair of hands - rendered by whichever colour emoji font the machine happened * to have. Sixteen different illustrators, none of them consulted, sitting * next to an Orthodox cross that most fonts do not carry at all and substitute * as stacked bars. * * What replaces them is the one mark that already means something here: the * category's own colour, which is the colour that category has on the map. * Learn it in the index and you can read it in the galaxy. */ .cat-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; background: currentColor; box-shadow: 0 0 8px currentColor; opacity: 0.92; transition: transform var(--motion-fast) var(--ease); } .cat-icon { display: flex; width: 13px; justify-content: center; flex-shrink: 0; } .cat-count { margin-left: auto; font-size: 0.6875rem; font-variant-numeric: tabular-nums; color: var(--text-muted); /* The count sits over the brightest part of the art, so it gets a small * scrim of the page background rather than a text-shadow - a shadow on a * number this size reads as a printing fault. */ /* 62% left the count at 4.41:1 in dark and 4.38:1 in light, measured on the * rendered pixels - under the 4.5:1 that text this size needs. The art is * brightest exactly where the number sits, so the scrim has to be nearly * solid. */ background: color-mix(in srgb, var(--bg) 92%, transparent); border-radius: 999px; padding: 2px 7px; position: relative; } #main { flex: 1; min-width: 0; padding: calc(var(--pad-page) + 14px) calc(var(--pad-page) + 8px); } #main:focus { outline: none; } .section-header { font-family: var(--display); font-size: 2.1rem; color: var(--gold); margin-bottom: 10px; letter-spacing: -0.008em; } /* A CATEGORY'S OWN PAGE GETS THE SAME FACE, WITH ROOM TO BREATHE. * * The sidebar row can only afford a glow at one end. Here the art can be a * band behind the title - still the same 48 pixel thumbnail, still no runtime * blur beyond a little smoothing - reaching out past the reading measure to * the edges of the column, and falling away downward so the topic list below * starts on clean ground. * * The title is gold on a dark page, or dark gold on parchment, and it has to * stay that way: the art is masked to fade out where the words are, and never * rises above a quarter opacity. */ .section-header[data-cat] { position: relative; isolation: isolate; padding: 26px 22px 22px; margin-left: -22px; margin-right: -22px; border-radius: var(--radius); overflow: hidden; } .section-header[data-cat]::before { content: ''; position: absolute; inset: 0; z-index: -2; background-image: var(--cat-art); background-size: 130% 130%; background-position: center 40%; filter: saturate(1.5) contrast(1.05) blur(4px); opacity: 0.24; } .section-header[data-cat]::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 30%, transparent) 0%, color-mix(in srgb, var(--bg) 72%, transparent) 62%, var(--bg) 100%), linear-gradient(to right, color-mix(in srgb, var(--cat, var(--gold)) 14%, transparent) 0%, transparent 72%); } @media (max-width: 640px) { .section-header[data-cat] { margin-left: 0; margin-right: 0; padding: 20px 16px 16px; } } .section-desc { color: var(--text-muted); font-size: 0.8125rem; margin-bottom: 30px; max-width: 62ch; } .section-page { max-width: var(--measure); } .section-page > * + * { margin-top: var(--gap); } .breadcrumb { display: flex; gap: 10px; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.13em; color: var(--text-muted); margin-bottom: 18px; } .breadcrumb a { color: var(--text-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--gold); } /* The old build hid the sidebar entirely below 768px, which left sixteen * categories and 203 topics as one undifferentiated list with no way to * filter. It is a disclosure panel here instead, not a deletion. */ /* An icon carries the word on a phone, and the word carries the icon * everywhere else. * * "SUGGEST" and "CATEGORIES" in letterspaced small capitals take about 200px * of a 390px bar between them, which is most of the room the wordmark needs. * The marks are DRAWN, not emoji - a plus for suggesting and three ruled lines * for the index - so they inherit the text colour, scale with the bar, and do * not depend on whichever colour emoji font the machine happens to have. * * The word is never deleted, only hidden: the button keeps an aria-label and * the text stays in the markup, so a screen reader and a crawler read the same * thing at every width. */ .tb-icon { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; display: none; } .topbar-link-button, .nav-toggle, .topbar-link-icon { display: inline-flex; align-items: center; gap: 7px; } @media (max-width: 900px) { /* The sections collapse away on a phone - except the prayer, which is the * one thing on this site somebody might open every day and which was * otherwise reachable only from a button on the home page. It keeps its * place as a komboskini: a ring of eight knots with the cross at the join. */ .topbar-link:not(.topbar-link-button):not(.topbar-link-icon) { display: none; } .topbar-link-icon { display: inline-flex; align-items: center; padding: 9px 11px; } .tb-icon { display: block; } .tb-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Square, and big enough for a finger. */ .topbar-link-button, .nav-toggle { padding: 9px 11px; justify-content: center; } /* THE SLOT BESIDE CATEGORIES WAS EMPTY, AND THE SERVER IS THE POINT. * * The Discord link used to be hidden outright on a phone, because it was a * pill of uppercase text too wide for the bar. As a mark it costs the same * room as the others and puts the community one tap away on the device * people actually carry - which is where a link to 191 people belongs. */ .topbar-discord { display: inline-flex; position: relative; margin-left: 0; padding: 9px 11px; border: none; gap: 0; } .topbar-discord .discord-mark { display: block; } /* The presence dot becomes a badge on the mark rather than a bullet before * a word that is no longer shown. */ .topbar-discord .topbar-discord-dot { position: absolute; top: 6px; right: 7px; margin: 0; } #content { flex-direction: column; } /* THE CATEGORY INDEX IS A SHEET OVER THE MAP, NOT A BLOCK ABOVE IT. * * It was position: static and display: block when open, so it took its place * in the document flow and pushed everything below it off the screen. On the * map that was ruinous: you tapped Categories to filter the graph and the * graph disappeared, leaving a bare list and the layout buttons stranded * below it. The one thing you were choosing FOR was the thing you could no * longer see. * * As a bottom sheet it covers the lower part of the screen and the map stays * visible above it, which is also why it stops at 68vh rather than filling * the viewport. It slides rather than appears, because a panel that arrives * from the edge explains where it came from and how to send it back. */ #sidebar { position: fixed; left: 0; right: 0; bottom: 0; /* The wide-screen rule sets top: var(--topbar-h) for the sticky rail, and * that declaration still applies here. With both top and bottom set, top * wins the placement and the sheet hangs from the header instead of * rising from the floor - which is what it did. */ top: auto; z-index: 60; width: auto; min-width: 0; max-height: 68vh; overflow-y: auto; -webkit-overflow-scrolling: touch; display: block; border: 1px solid var(--border); border-bottom: none; border-radius: 18px 18px 0 0; background: var(--bg-card); box-shadow: 0 -16px 44px rgba(0, 0, 0, 0.55); padding: 18px var(--pad-page) calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateY(101%); visibility: hidden; transition: transform 0.24s ease, visibility 0s linear 0.24s; } #sidebar.open { transform: translateY(0); visibility: visible; transition: transform 0.24s ease, visibility 0s; } /* The grab handle. Decorative, but it is what tells a thumb that the panel * is a sheet and has an edge. */ #sidebar::before { content: ''; display: block; width: 38px; height: 4px; margin: -6px auto 14px; border-radius: 999px; background: var(--border-strong, var(--border)); } /* Nothing behind the sheet should be reachable while it is open. */ #sidebar-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; transition: opacity 0.24s ease, visibility 0s linear 0.24s; } #sidebar-scrim.open { opacity: 1; visibility: visible; transition: opacity 0.24s ease, visibility 0s; } .search-trigger { max-width: none; } .search-trigger-key { display: none; } /* The subtitle only. Not the name: :not() is load-bearing here, because the * name is also a span and a bare rule hides the brand entirely. */ .topbar-brand span:not(.topbar-brand-name) { display: none; } } /* Below this width the brand, the search field, the two buttons and the * category toggle cannot share one line without the header pushing the page * sideways. So the bar wraps: identity and controls on top, search beneath. */ @media (max-width: 560px) { #topbar { height: auto; flex-wrap: wrap; padding-top: 9px; padding-bottom: 9px; row-gap: 8px; } .search-trigger { order: 10; flex-basis: 100%; justify-content: center; } #theme-toggle { display: none; } /* ONE ROW OF ICONS, NOT TWO. * * .topbar-actions and .nav-toggle both carried margin-left: auto, so each * was pushed to the right independently and a gap opened between them. Once * the Discord mark joined the row there was no longer width for all of it, * and Categories wrapped onto a line of its own: measured at 360px the * header was 140px tall and in three rows. * * Dropping the second auto margin puts Categories immediately after the rest * and makes the five one group - so the plus, third of five, sits in the * middle of it. Two pixels off each icon buys the room back: * * 360px header Categories on the icon row * before 140px no * after 96px yes */ /* #topbar sets gap: 14px between its own children, and .nav-toggle is one of * them while the other four live inside .topbar-actions with a 2px gap. That * left Categories floating apart from the group it belongs to. */ .nav-toggle { margin-left: -12px; } .topbar-link-icon, .topbar-link-button, .nav-toggle, .topbar-discord { padding: 9px 9px; } } /* Narrower than most phones, the wordmark is what has to give. The cross still * names the site and still goes home, and the alternative was shrinking the * icons below the size a thumb can hit. */ @media (max-width: 345px) { .topbar-brand-name { display: none; } } /* category-art.css */ /* GENERATED by tools/category-art.js - edit that, not this. * * One blurred thumbnail per category, as a custom property. Each is a * 48x48 JPEG of the category's most important illustrated topic; * the blur is the upscale, so nothing is filtered at runtime. */ [data-cat="theology"] { --cat-art: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAwICQsJCAwLCgsODQwOEh4UEhEREiUbHBYeLCcuLisnKyoxN0Y7MTRCNCorPVM+QkhKTk9OLztWXFVMW0ZNTkv/2wBDAQ0ODhIQEiQUFCRLMisyS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0v/wAARCAAwADADASIAAhEBAxEB/8QAGAABAAMBAAAAAAAAAAAAAAAABAIDBQH/xAAtEAACAQMDAgUDBAMAAAAAAAABAgMEERIAITFBYQUTIlGRcYHwFDKh0SOx8f/EABcBAAMBAAAAAAAAAAAAAAAAAAIDBAH/xAAcEQADAQEAAwEAAAAAAAAAAAAAAQIRIRIxQSL/2gAMAwEAAhEDEQA/AMXwunnqKtS9SM1bLCxHG+x7afVnypQplGV7knjf/g0fw5lgfzpTjZCQoBAubc3P5fU47zB2uzyXGRuP56fT76RFKn0C00uC38yQKTOscINs7+o8221YlRURSosMskisPQS/7r9R86L+l/UU/lrv6gysxJEbDax+Tt01OnwNEYvMijMQxXIb3PW/tfp20HlttLMDU5Cb3REk1XHECJWDX3BPH2vfUqY1BxWR7bGTIoDiepHfj+dRjVHlGKRyPlzY6K1ZJEkySRhJomzLA7EW3AJ+h0V2ppSkZEtrWwySSysYXiLM7tlfcg3vt231fHLJHJlGmLPsNiSbDr+dNcqazGvhKsQVIDnbi1idXwyqZ/LdkYHcC179rfnOp2u6Uv1mB4pZmLMMs3W7MBta4v8ATcD40gOrnFEAUkWK/ua9r9um300kUhqZCsMiZJGGzucWB2P8bC2rRRrRRpYs5V7Eqp49/b4A05OM59Jv39Ko6uNR5cqMjBsGvtlt03N+Do9SsUVNI8tOolkJ9RQ2xO127i53502JXdFka3mxt1XcIR00fxi6QuIf8oRQXDk9GB2He1tTe60plc8TONHIJpJvRGlziW2z9W5B+550ylicvGpOciXUWTp0uemtN6QSNDG65RhcjmRcMdse25+dXzxhVjp6eyJI/qZRkVHudvsCT86aA6DRKWMhLIcDiXxtcdddqnLRoGkOQuWPG1jx76jXwjwtHqIZZGVrhUxyubgcAc8/1qDMvitAKaSRoKvHIcBrWuCLdrbaB+Wp5xG8xrejm8KqGmPluEJUgXI3sRxv7DWf4tQTU9OxGJBezggHIfPcfGtTwSeqWikp6mV2aIWWy4tjtYn4I/L6R4sEankZkV5EYYqxsCCev+/76scGTfT/2Q=="); } [data-cat="history"] { --cat-art: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAwICQsJCAwLCgsODQwOEh4UEhEREiUbHBYeLCcuLisnKyoxN0Y7MTRCNCorPVM+QkhKTk9OLztWXFVMW0ZNTkv/2wBDAQ0ODhIQEiQUFCRLMisyS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0v/wAARCAAwADADASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAAAwQFAAIB/8QALxAAAgIBAwIEBAUFAAAAAAAAAQIDESEABBIxQRNRgaEFcZGxIiMyYcEUFdHh8f/EABcBAAMBAAAAAAAAAAAAAAAAAAECAwD/xAAcEQEAAwACAwAAAAAAAAAAAAABAAIRAzESIUH/2gAMAwEAAhEDEQA/AF9urmO5ls31Ix299NxxHwuXKmPcUPXU7az+JEgSUhiTdjBo+fTXr7gF0hW2d8Keo5E/51EvrkzXDZRSZN6gAlJByy3QIPfQpfh0aTrIpvj27aQ+Go9GcSJNEka1xPn1xV4rvp7bTHxXZwwR8jHvptTuDN6nUEJRijKeQa7GATWu90kYXw0hXlfJVzRbrejMshldrVlRhaA0ems8kck4kKFkj8x1N+3z0BZmsieFuN3Gzo6qvIuWvtj9tEl2UokhYShW5K6kIMV+1Z89HgbixjnAVycxIORqu4rz06k6RoZXHLgQCvEgkeuD/Gk8gc+Snipv2IxuYluNnkLKFu7GOuO2jl02cimJHJC2ga6vv6dNVtqYpXaL+n4lv0NfQdv+a0kEayoHplisOgwGvto2PUFPbkSjheWI+JGoUD8QJBLf7u9chkijYAKmRjkTixf399VtyNrGscccP5tc2ZsH6eWddybEyBfFAwtkIxoZvJr5axuw2AJKO9aWbj4CsyLy5tQHtpfdK28RG3HE2QOCmuQvp/HrrLBJ4ZZIl/MLKT3AuwSNMfCo7idJON2fxZ9PXU1JYjMDiFVW3YKFAYIBmuug7lnO6eRGW2Fkj9S47Dp5fTQCj7KJmLGSrbOVBJusde/trbqF2MEsbOxclQFAxjAOfInN9joWu2Mhrxlbbspf3FG3IdLk5gFmfPYZ05DcTSTRujGWM5I64z88aixwyjdxTSyRc3BDBPLt9ALv7aoHaX4SwyFbxYyMihWPP7aY5Q7IluJemf/Z"); } [data-cat="councils"] { --cat-art: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAwICQsJCAwLCgsODQwOEh4UEhEREiUbHBYeLCcuLisnKyoxN0Y7MTRCNCorPVM+QkhKTk9OLztWXFVMW0ZNTkv/2wBDAQ0ODhIQEiQUFCRLMisyS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0v/wAARCAAwADADASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAAAgMEBQEA/8QAKRAAAgEEAAYCAgIDAAAAAAAAAQIRAAMSIQQTMUFRYSKRcaEF8BQygf/EABcBAQEBAQAAAAAAAAAAAAAAAAEAAgT/xAAfEQACAgICAwEAAAAAAAAAAAAAAREhAjESQSJRUoH/2gAMAwEAAhEDEQA/AALh1LM4CocTjs9+n1WbxQX/ACMi2QABO9T6q9mtLftuLRONuMe5Ox0/NKu2ALIQLtWLNjvUdP1XI5ezsULQmxaXiGAVdHovc0NywtrRBgk6x6U23YYFiD/tAVQ2Me/unjhDbv27BAUtjiqnLvqhYjzsl/jeE5PEsXV1Ug9vfX++a0OYFXG20IJbqNjtFVfynCtwa2/iMMMTDj5dp9VAUFvFF7eFjRnqKYfspT6HG0LdtLzEkKAGGukdf3+6AWbjpnkAzRGMCfzTOFucMxNpAH+fTqY9UbEKnLkmWIVYGtUtUCdkloC01xsSQTo+BNHdmxeV7JwedvOxXm4flOMWVgzbyIB/G67ctXTd+TILcRisHdJRdor44zbTmNzIWJJn6+6Q3C2eQRacLcTckmf7o0ziov8AmR6NdVHVziVKkfIMsmnGOzOUtJYkA4i4H+IUlexUQB5qleJYoyXURfQFKvhVslbcrbjetsfVQtJMBWA8FRRRvyei1eICmSMm8E5dBTFv23cBmJIExlGvERWcJXuxjsFGv+UxUDxtiTJjAT9TMU/gQ/o1EuMwnm20I3sQDRtcvos3GkExWYloEjJbjqNxyxVC3haQI0hdyW+Qj34/NUonyWz/2Q=="); } [data-cat="liturgy"] { --cat-art: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAwICQsJCAwLCgsODQwOEh4UEhEREiUbHBYeLCcuLisnKyoxN0Y7MTRCNCorPVM+QkhKTk9OLztWXFVMW0ZNTkv/2wBDAQ0ODhIQEiQUFCRLMisyS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0v/wAARCAAwADADASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAAAwUGAgQA/8QAMRAAAQMDAwIEAwgDAAAAAAAAAQIDEQAEEgUhMUFREyJhoUJxgQYUI5GxweHwMlLR/8QAGAEBAQEBAQAAAAAAAAAAAAAABAMCBQH/xAAhEQACAwACAgIDAAAAAAAAAAABAgADEQQhMUESMlFhgf/aAAwDAQACEQMRAD8AjnrVy2W0lwALMYmZG/qKpE6ZZ27rlrcNFx5trMuKXsTHRIj37UovyVsI3JI2Hpvx71UaW2q4aUh8HNoeSIEcjtxztMUK53K9HPMaiqDp8dSZVYslW07djWkaeziJz5713vsC3dLbhWCBP+MRttM/t+dFt3mBk34RxURzBj6k/tUUsdj2071iUhdSrf5FZ0+3yw8xE7ma1f6L90Zbum0OeCqASsRvzz2p029ZeG2VoBjZaVZKUflIIH80C8cbesbspS6TiMQpQhIzEDYSTEbnsflXqXOHHfuB5NQZCVr+ORQtxKWbZaoUM0lQPUA/xVhbvthhBW5g2pCVYjkggGePX2PeoTxAu3CVH4vbgGarNAcRdWDpc2ShtLYPJO5/5SXq3ofmcw7ZgE7NT8DFkustulawkKAg7gnod+PevJ0ti4SXG2gkdBkQJ9TPp70J5lLr9mjL8JbmGJB2O8fqaPaOO3rLiEqTzlAgRJI49IqK8dFxWEVVbaoIZiMmbHRmLi3Q8tBAVPxHbpSvU32mbe6smGlBSVCVkiDuD9OBVJoJU1p4t1uSpCzuP9TuCPnz9aj9dM6rdJEx4nUelaq46l+/UxZybHUhm2ciW2UqEtoJ+W9OtNeS3arQRilSh5h24j9aSrUdlInmTNHF2oNlCHVto6pJgUy0lsCwlDBCWaOHL1vNlKUK8jiVJVlGRntFddqQhanFZLUsYpkgH8p26VLZgEYQSDzO/wDeKwEhKvLKYO5TsaO1Luft4/UQbkPrzK9GpyUYhzcwCgyFAd+lJPtCrC+8bBTZcT26/wBilROQgiR0EcUK6fdWhttaiUonGTIE87VatXQhidkWCHQJ/9k="); } [data-cat="sacraments"] { --cat-art: url("data:image/jpeg;base64,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"); } [data-cat="saints"] { --cat-art: url("data:image/jpeg;base64,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"); } [data-cat="scripture"] { --cat-art: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAwICQsJCAwLCgsODQwOEh4UEhEREiUbHBYeLCcuLisnKyoxN0Y7MTRCNCorPVM+QkhKTk9OLztWXFVMW0ZNTkv/2wBDAQ0ODhIQEiQUFCRLMisyS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0v/wAARCAAwADADASIAAhEBAxEB/8QAGgAAAgMBAQAAAAAAAAAAAAAABAUCAwYAAf/EACoQAAIBAwMDBAAHAAAAAAAAAAECAwAEEQUSITFBYRMiUaEGFXFygYOx/8QAFwEBAQEBAAAAAAAAAAAAAAAAAgABA//EABoRAAMBAQEBAAAAAAAAAAAAAAABEQISMSH/2gAMAwEAAhEDEQA/ANIpDdCDmpihtFiUW+5+cGjkRGcsEC+fmgtVUTzCuvMih7tWkTbHuznjEhT7HNDvrFtCpR4ZgyNsw208/rnmrolmhxqFCtqIuZUgii2O/tLNgMh/aR/tdqh2zKmWTcp5UkZ6/H8VPULks0Z0a3xuxznn7pmCvbFI/wAP4e3YnGc84+cCm4XzQx4LXpSzJHuaQhVX3EnsB3rM3Mvo6jcYLcyvyATjk/FaiVcYIPOetU28FjcAOYvfKd7e85yeecHFa5YyXnwR2VxJLNZNIjrOsgDArgYJ4plq1yp9B3jKkoW2uMEZHQ+aLFtZQyARQFnRgR1IU9uppXr21kXHK8rwemBRcnwQNoWqWPoNm7hVi2cGQAn7p0up2a8NdwD+wVlZYWMh471y6c8h6YprMOb1TS3GqWW0bbuEncOki/NX/mWnqcrdW2TyT6i0is9FjVt0o3eDXs+iRZJQY8VvJUenVbHbtF5bk+JFpLq+pQKqKssIj3HOGGBQZ0pkPAqSWLE4xWPFNWof/9k="); } [data-cat="monasticism"] { --cat-art: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAwICQsJCAwLCgsODQwOEh4UEhEREiUbHBYeLCcuLisnKyoxN0Y7MTRCNCorPVM+QkhKTk9OLztWXFVMW0ZNTkv/2wBDAQ0ODhIQEiQUFCRLMisyS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0v/wAARCAAwADADASIAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAABAUBAwYC/8QALxAAAQMCBQEGBQUAAAAAAAAAAQIDEQAEEiExQVETBQYicYGRFmGh0eEUUmKx8P/EABcBAQEBAQAAAAAAAAAAAAAAAAABAwL/xAAWEQEBAQAAAAAAAAAAAAAAAAAAEQH/2gAMAwEAAhEDEQA/ANT+peylw/SpQ8/r1DHlQT10y2ElbjaRH7hPtQb/AG6y2YbHUJEjaso0Oy+4Rm4a4U+5ssgZVm3u2bokGEtjXwpkn3qA5fOoDqnnAlZhMKCc+B+KsStE5dFAlboSOSYpa92/atuYS+tW2VJT2e4t0peyXgK4VkTsPrHPlQT3ZT7M9VbaMMiVGKuZhU3DjIBLQdUJyJQEg8aHy4qxroLcx3CXW0aYkJKiMtxtpVrjjKmkzbIWsiAQAI2B59qXW8NpJKlNhRIBWMgkHPidIyroNkXDQtktpeU86tUYAMIHl9zl7Vcy+y4ttwBoydzIBwmSUyIk8ggZa0qVcMowltpONLgElyQrP0MetSb51ai6whCBhiAZw/3E5celSA2ycx42FPwlyZWPEYAPlOlHXPZ1ulXSbvWy6EE5np6EZSSRniHvWfSbxCFJS54CCFJx6yd+Tr/tDbZm3VbJdvLlTjolIQThQM9zvtxpQLrxxF08X0pJwNpQPlAAkxpNcLWGlFbg6jqxiAImJEiea0PwnfjGlN0yQrRWIg+Whiufg28KIW/bYtiJy+9LhGbS6hbkLbQicshEHfz9atfW/wBUYTiVAhSDMAxkPl+adp7l3jZJS9a58yY+lXI7o3iESbhhTgEQVHDwRppS4RnGHXEqKVwQAARiIncaevuaOcuFqaSsuMlpweJKjM5nKNRrNNR3QvMEF21BMZgmZ40qfhG8DQQl5gnPVw/P+NLhH//Z"); } [data-cat="iconography"] { --cat-art: url("data:image/jpeg;base64,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"); } [data-cat="spirituality"] { --cat-art: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAwICQsJCAwLCgsODQwOEh4UEhEREiUbHBYeLCcuLisnKyoxN0Y7MTRCNCorPVM+QkhKTk9OLztWXFVMW0ZNTkv/2wBDAQ0ODhIQEiQUFCRLMisyS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0v/wAARCAAwADADASIAAhEBAxEB/8QAHAAAAgICAwAAAAAAAAAAAAAAAAYFBwMEAQII/8QALxAAAQIFBAAEBgEFAAAAAAAAAQIDBAUGESEAEjFBBxNRkRQiYXFysYEyQpKh0f/EABUBAQEAAAAAAAAAAAAAAAAAAAAB/8QAFREBAQAAAAAAAAAAAAAAAAAAACH/2gAMAwEAAhEDEQA/AHGuKkXTksbXDNocjIhwNspWCU/UnI+3PJGlpFMVvGt/FRFQKhohefJDygBxzs+UcdD9nS9VE9nU2MJMomHgGGoBzzmUIiEKcG4pICk79xI2i+B3gdS8q8XHNyUzWXoUCr5nIZViB+Kr3/yGgytVfUdKRYhamhTFw5J2vpSAojH9KhhQ++c86sGUTaCnUGmKl76XmibEjlJ9COQdQkzqal5jJFmMmDC4WIBRssS4DnOyxUCPW2qkl85i6fmUS9IolZYVub8xSLJWMgKKT3wRfj3Gg9B6NVjA01UFXQTMdMalHwzyAptLAJGD2kbUgg39Tj6a6R1JVFScG5HSWdreah0FbjRG2wHJCSVJOB36Y0D27TMlea8tcshiki2EWPuM6VZ34WS2J3Oyt1cK7yG1Hcj/AKP96iIdFaUSPJZZ+PlzZUoJCfMQByTj5k/rJxrZX4kTxYLbMhAeHO4LUBkXwLfvVoUJxTUTJkJEUy608Ff3gKbcTbojvHHd+rZa11TTk5o9yBimm5ZENpJbZQ0Sjfkgp2jg934v3zrmIlFY1opsTQplsCMlu20X/C5UT+WPTUbVXh1ESVlETLVORbKQN90XUggZJA65+3B9dBqURXKqbQ/CvMuRUItW5tIVYoPdvv8AvU5H1pOqqZclsjlCmkPoLbrizuO0jIvYBOL+v8aS51NYeYwrAVL2oONYAQpTCQlDg9bdH3v9NXjS8YqYU7LopaVJW4wncCkJuQLE2HRIuPodIJXRo0agNGjRoKT8TJhCuT+LhIeXMNluwW+EqC1L5UcG3duL8/wxeGNXeamCp5UCsFttZEQldxyVZTbAza9zm3rpmruSCbU9Gph4VDkdsT5aggbzZQNgeeL++sfh3K1S6mYQRUEIeMHmbypFl2Kzz3wB7DVH/9k="); } [data-cat="structure"] { --cat-art: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAwICQsJCAwLCgsODQwOEh4UEhEREiUbHBYeLCcuLisnKyoxN0Y7MTRCNCorPVM+QkhKTk9OLztWXFVMW0ZNTkv/2wBDAQ0ODhIQEiQUFCRLMisyS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0v/wAARCAAwADADASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/EABQRAQAAAAAAAAAAAAAAAAAAAAD/2gAMAwEAAhEDEQA/AJUAAAAAAAAAAAAAAAAAD//Z"); } [data-cat="calendar"] { --cat-art: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAwICQsJCAwLCgsODQwOEh4UEhEREiUbHBYeLCcuLisnKyoxN0Y7MTRCNCorPVM+QkhKTk9OLztWXFVMW0ZNTkv/2wBDAQ0ODhIQEiQUFCRLMisyS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0v/wAARCAAwADADASIAAhEBAxEB/8QAGgAAAwADAQAAAAAAAAAAAAAAAwQFAAIGAf/EACwQAAIBAwMDAwMEAwAAAAAAAAECAwARIQQSMQVBURMUImFxkQahsfCBwdH/xAAYAQADAQEAAAAAAAAAAAAAAAAAAQIDBP/EABsRAAMAAwEBAAAAAAAAAAAAAAABEQIhMQMy/9oADAMBAAIRAxEAPwAEcCDjlubjFQOo6l55TEyqAjEfermiTeboPmM3/v8AcVITp803VPasfmzG7EdvNcnl9OnTnxQT08Tlj6cXqm2QFvYeaxscIFI5zzXbFIumQCPSR2Atfyx8k0LW6LT9UiO5VSYY9Reb/Xz/AJ/atl6Vwh+cVOb6fo/d7rttReTVWLSwRACIBpDk3ObfX9vzULUwajp80mnmJDDBscMPNUeihjHqShG47RkXuM0s+UMewpiOPiK4IFrDF6c6fpSNRNqmy2wIv07n/VBlT1JPUifb9hzenNJGoiySWU3BrDGJ92am6Kq7xJs+ZJYnsOwrcom67L8vI/5QIo2WQsxN7mxNM6hg0aF8WOfvVvugI/6n0fuoINRAA0qmxAOSuf4P81M6DFKs8kxVlVUKkg2PNXdVpg8ZaMBHTOMXFSzOFYbWKyDhhQ83wF5p7KSEH4sQG8A0aMlASp5pGwNrJaixyS7QoYEA2uw7UsvJLaYlldDsbAxg3vbuK8djtdCMECwbi/NLTzOoUIAXJ7jApU6mf3Cq6bQebrj80KtUb04H1UzyRNEAB6mCQe3ikDp3JddrKEJG5xt3W8XovUWlUIY325uTajGQbFchFLgEgYxbipScrKTmkf/Z"); } [data-cat="music"] { --cat-art: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAwICQsJCAwLCgsODQwOEh4UEhEREiUbHBYeLCcuLisnKyoxN0Y7MTRCNCorPVM+QkhKTk9OLztWXFVMW0ZNTkv/2wBDAQ0ODhIQEiQUFCRLMisyS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0v/wAARCAAwADADASIAAhEBAxEB/8QAGQAAAwEBAQAAAAAAAAAAAAAABAUGAwIB/8QANBAAAgECBAMFBgUFAAAAAAAAAQIRAAMEEiExBRMiBkFRYXEVI4GRobEUJDXw8UJiksHR/8QAGAEBAQEBAQAAAAAAAAAAAAAAAQIDBAD/xAAeEQACAgMBAQEBAAAAAAAAAAAAAQIRAyExEkEycf/aAAwDAQACEQMRAD8AcYjFPZQNbAnOZkkaD03odOIYjE2QzqltATPvHUiPQ6/OuOKAi1aRWPVeIJmNKWWr9uwQtuHLsTmc5isaDu9f3pXFTrp2putIa+3VISzIy7SoYkad5ma0THMQFtsuVYGZAxGpiN/GkHMOFDqAssACO/Q+X86V2MXespFl2QGSQCd/4qpRr6GNubSX0rsFiDisOLhI6iYgRIqf7ftl4FdHezp8daM4bbvezmi4huNrJUkyTBJggxEekTSvtuQeBv71LpzgypnTNoNz4/SmHUZ5NNoP4uWOGGQFm5pAn1A/3QM4UiW5sJGZ0jqPl+/GiuMvysEhJ3uECPWl9xxkF0WApQQw6pIHf8qhRvbLdraPDZtISHtaBhkOfUgb/YaUZbso9w2Byj4kESW1gSfT70DyEuo5FgDP1GYMQPGfKt1whRl5ysgcgspgyR5Dv/6aPN9Y1BR4UPC7SDDnJGrMJGkifKpnt25bC3V1gBe7+4VS8HI/BJl1EnY+dIO3agcOuMv9UT/ktXj6jPItsO44AMGpbQcyNiYlhQF03iG5dxs8FQQY17202mNqe4nCpisOReDZQcxyanSdtDNY+wsKsE3ryMRsWU/DaiNUaenSViiDbANq6DbAJB1AYwOnb1+dd5LzBQcSTM9ImGmZjTeWPhRa8LwmRipxYQleoqIgnfbTQT5CK0HBMOFBS7dI3HUIP0p9A4qqUv4E8Gb8oQwyFWgjzgE/elXbr9HusuolB9adYbDjDIUVmZSSZaJpR2wKrwTESJmB8ZFeh+kRkd2f/9k="); } [data-cat="philosophy"] { --cat-art: url("data:image/jpeg;base64,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"); } [data-cat="eschatology"] { --cat-art: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAwICQsJCAwLCgsODQwOEh4UEhEREiUbHBYeLCcuLisnKyoxN0Y7MTRCNCorPVM+QkhKTk9OLztWXFVMW0ZNTkv/2wBDAQ0ODhIQEiQUFCRLMisyS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0v/wAARCAAwADADASIAAhEBAxEB/8QAGwAAAgIDAQAAAAAAAAAAAAAABAUDBgABAgf/xAAuEAACAQMDAgUDAwUAAAAAAAABAgMABBESITETQQUiUWFxgZGhMtHwBhRSscH/xAAXAQEBAQEAAAAAAAAAAAAAAAADBAIB/8QAHxEAAgICAgMBAAAAAAAAAAAAAQIAEQMxIVEiQWGx/9oADAMBAAIRAxEAPwCqwYWN+qwEbA5OcdqjMkZchiiqxICknc5wCfoM4oi3MUUJlCs0mdvb+ZqEsHGJUU758wPP3+ajLAbiUTqNfDVLPPqcaesNJ7k6Rnf7e29OZohZFZtS9N41DDH6gc6sn5A755pTYkMirwABwPSrjDaWtyUadRIqqNKneiGYLV6myljiZYS3Fx0DHaRBVYkgYOw43z7fjvxWvFb9mV4LmMOxRSArYBxnJyOxzTX+0t4XZRI0fUy2rSdPm2x6fSgrjwWyfxBI5JhJLLgFFXsBznNVrkWuBBKnueXm41TNbggMqbEHck8j/lT9aOSJWMDZnI0suRg/tvQyCBJWlSQBlPBGQDjG9ERxsqLi41aCSpC7AkVOXUGboxn4UHRYmkHbIxxj59aeQeKL4ZA7OFLRMqxk988Z+xquW0clxCI1ucALgkLhifn6UyvbNntlbp9UIiZIOSCO9B4lgCeLjLqhHsP9VXbdMFoHB3dQnA7Hmpp/FUtma5tlDSshOqR9WMnJUD03H+s1UbciMAID/iNt9uM+1EXPUkQaUljztknI9fTYVapXXqYbHS/ZTYtSQT6x+o5zgbnbG3NFxs4tPMVQHL7eXzHt7c/iuX3m6cSrKwGdttWN/wCfFE266yuYyQ3r780Tk9TigVDoWEdoWRSHKE4RvMCSc4px4PIcMksjLGiqMsTz3/JpVbMpUHAHHl0/tTW0uFnZonjdMoQSxIHyAO9SOLB4iVRjRb8i/hj1wxIVI0tIAW5A539KXT3FzFb4kvzIGc6lE2rIwNufnau2tLOdlneRkMahUxjQuMkHGPU/WhpJLJIHKyygKGy4AyDtt8bUmIAix+TjN3P/2Q=="); } [data-cat="texts"] { --cat-art: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gHYSUNDX1BST0ZJTEUAAQEAAAHIAAAAAAQwAABtbnRyUkdCIFhZWiAH4AABAAEAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAACRyWFlaAAABFAAAABRnWFlaAAABKAAAABRiWFlaAAABPAAAABR3dHB0AAABUAAAABRyVFJDAAABZAAAAChnVFJDAAABZAAAAChiVFJDAAABZAAAAChjcHJ0AAABjAAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAAgAAAAcAHMAUgBHAEJYWVogAAAAAAAAb6IAADj1AAADkFhZWiAAAAAAAABimQAAt4UAABjaWFlaIAAAAAAAACSgAAAPhAAAts9YWVogAAAAAAAA9tYAAQAAAADTLXBhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABtbHVjAAAAAAAAAAEAAAAMZW5VUwAAACAAAAAcAEcAbwBvAGcAbABlACAASQBuAGMALgAgADIAMAAxADb/2wBDAAwICQsJCAwLCgsODQwOEh4UEhEREiUbHBYeLCcuLisnKyoxN0Y7MTRCNCorPVM+QkhKTk9OLztWXFVMW0ZNTkv/2wBDAQ0ODhIQEiQUFCRLMisyS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0v/wAARCAAwADADASIAAhEBAxEB/8QAGQABAQEBAQEAAAAAAAAAAAAABQQGAwAC/8QALhAAAgIBAgMGBgIDAAAAAAAAAQIDEQQAIQUSMQYTIkFRcRQygaGx8GHRM8Hx/8QAGAEAAwEBAAAAAAAAAAAAAAAAAAECAwX/xAAfEQADAQABBAMAAAAAAAAAAAAAAQIRAxIhMUEiYXH/2gAMAwEAAhEDEQA/ADOz2KMjHTmdlAs+HWoh4ZA8CRRyMlNzdLB2IsjbffrrOdnLXBje97/3rR4+QoYBrOuHy1St4zp52NJjuIoUW/lXyFDXLK4lCx+GlYc04IRasn9saJyuIJGrEkhQLvpWgF4hNkcbRoSrY8BsFWqjQuzR/nbWUpsnoXllHHUfI4lBO8rskKKhU383MdqPmRy+9j10DxzEi5JpmRRkchJZdhp7GnGRPK8jKZEJtV8ruifpt1/Oh+OOWx8myKKNsNbRT6kisWFHZ2Mnh0X1/OmAoWiSdC8FGUeGYbY3LyliHDLYAvr1H6de7Q5/cocTkL94B06gXv7+WnUOrxC3EdeO5iHGlxYmuYqrULuuYXqPBdYw0CA+FDK8lVZHkR+7A6hxoWiVZ5nLtufGb2r19P71fApTJLijFJGFY+djp9r02lK6UNb5LYY41Q5se8kyDnFmj7aIyMj4rh2S5Qx+F6Dddjq/MyZVWMQIpDA3ewUf9OoMwr8POqAbxt9NtE+dD2KcKy4sDs7C8poMHC7+YuhoWFX5hm5RdkoBSa3obb/TXzE8mbFiYQAKoxsn+fM+2nn4eqY1PzGEeEDrzGtz6+v367a1vOP9ZK+QEHaXiXJkLyL3ZvlNAiv71VJN3LRiM7E8tEbV+/nU4MUBSJpGZkFAleu2vQy/FSgRg0Wqm/emoa3v6H9FwhbNX/L3aobJsgfbUWU0PcS9zIWUB1PMKN9NcOJZxRlgiLd0Qeq7H29QfXRZnkJ8IABBG311ccdNaDqUf//Z"); } /* landing.css */ /* The front door. * * It used to be a centred column of four large numerals, two filled buttons * and a bordered card, floating in the middle of a dark rectangle - a product * page for a piece of software. Nothing on it suggested what the site is. * * Now the hero runs full bleed and the map's own sky is behind it, drawn by * the same module that draws it on /graph/. That is the single most useful * thing the landing can do: the thing you are about to open is already here, * underneath the title, before you have clicked anything. * * The sky is painted ONCE and never animated. A field of stars slowly turning * behind every word of the front page would be a request for the CPU to stay * awake for as long as the tab is open, and stillness costs nothing. */ .hero { position: relative; isolation: isolate; text-align: center; /* Full bleed: out past the reading column's padding on both sides and up * under the masthead, so the sky reaches the edges of the window. */ margin: calc((var(--pad-page) + 14px) * -1) calc((var(--pad-page) + 8px) * -1) 0; padding: 88px var(--pad-page) 76px; /* The glow below is wider than the viewport, so its box would drag the page * sideways on a phone (measured: 55px at 390px). It is decoration and fades * out long before its own edge, so clipping it costs nothing visually. */ overflow: hidden; background: var(--bg-sunk); } .hero-sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; } /* The gilding behind the title, and a soft floor so the text never sits on a * star. */ .hero::before { content: ''; position: absolute; inset: -22% 50% auto auto; transform: translateX(50%); width: min(820px, 120vw); aspect-ratio: 1; background: radial-gradient(circle, var(--gold-glow) 0%, transparent 66%); pointer-events: none; z-index: -1; } .hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--rule-soft); } .hero-cross { color: var(--gold); margin-bottom: 22px; animation: gentle-glow 4s ease-in-out infinite; } .cross-hero { width: clamp(44px, 8vw, 62px); height: auto; margin: 0 auto; } @keyframes gentle-glow { 0%, 100% { filter: drop-shadow(0 0 8px var(--gold-glow)); } 50% { filter: drop-shadow(0 0 20px color-mix(in srgb, var(--gold) 45%, transparent)); } } .hero-title { font-family: var(--display); font-size: clamp(44px, 8.5vw, 84px); font-weight: 400; color: var(--gold); letter-spacing: 0.035em; line-height: 1.02; margin-bottom: 18px; } .hero-subtitle { font-family: var(--serif); font-size: clamp(17px, 2.5vw, 22px); font-style: italic; color: var(--text); opacity: 0.82; max-width: 30em; margin: 0 auto 36px; line-height: 1.5; } /* One line of small capitals with hairline separators, not four display * numerals. The figures are evidence for the claim above them; they are not * the claim. */ .hero-stats { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 0; margin-bottom: 40px; } .hero-stat { display: flex; align-items: baseline; gap: 7px; padding: 0 18px; position: relative; } .hero-stat + .hero-stat::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: color-mix(in srgb, var(--gold) 26%, transparent); } .hero-stat-num { font-family: var(--serif); font-size: 1.24rem; font-weight: 600; color: var(--gold); line-height: 1; margin: 0; font-variant-numeric: tabular-nums; } .hero-stat-label { font-family: var(--sans); font-size: 0.625rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.15em; } .hero-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } /* Today's commemoration, set as a colophon rather than as a card: a rule, a * date in small capitals, and the text. Hidden until the calendar engine fills * it, so the page never shows an empty promise. */ /* IT KEEPS ITS PLACE FROM FIRST PAINT. * * The commemoration is computed on the reader's own machine, so it arrives * after the page does - and arriving pushed everything below it 320px down the * screen. Measured: a layout shift of 0.157, which was almost all of the home * page's score and the single largest thing about this site that felt slow. It * was never slow. It moved. * * The first attempt reserved the space with `.today-card[hidden] { display: * block; visibility: hidden }` and did nothing at all, because base.css * carries `[hidden] { display: none !important }` and an author !important * beats any specificity. The rule was in the bundle, looked right, and lost. * * So the box is not hidden any more. It is prerendered holding the one part of * it that does not depend on the date - the link to the calendar - and the * engine fills in the rest above that. It holds its place because it is * genuinely there, which is sturdier than any amount of reserving, and a * reader with no JavaScript gets a real link rather than a blank. */ .today-card { /* Measured on the rendered card with its text clamped: 257px at desktop * widths, 283px at 390px. Reserved a little above each so a longer title * wrapping to its second line still costs nothing. */ min-height: 268px; max-width: 40em; margin: 52px auto 0; padding: 26px 0 0; background: none; border: none; border-top: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); border-radius: 0; text-align: center; } .today-card-label { font-family: var(--sans); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-muted); margin-bottom: 12px; } .today-card-title { font-family: var(--display); font-size: 1.62rem; line-height: 1.24; color: var(--gold); margin-bottom: 10px; } .today-card-title a { color: inherit; text-decoration: none; } .today-card-title a:hover { text-decoration: underline; } .today-card-meta { font-family: var(--sans); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); } /* Non-breaking spaces. The ordinary ones around the separator are collapsed * away, and the line reads "Tone 7 ·No fast". */ .today-card-meta > * + *::before { content: '\00a0\00b7\00a0'; } @media (max-width: 768px) { .hero { padding: 54px var(--pad-page) 48px; } .hero-stat { padding: 0 12px; } .hero-stat-num { font-size: 1.1rem; } .hero-buttons .btn-primary, .hero-buttons .btn-secondary { flex: 1 1 auto; justify-content: center; } .today-card { margin-top: 40px; min-height: 296px; } } @media (prefers-reduced-motion: reduce) { .hero-cross { animation: none; } } /* cards.css */ /* The topic index. * * Cards were
s with click handlers, which put all 203 topics out of reach * of the keyboard entirely. They are elements now, so tab, middle-click, * open-in-new-tab and a crawler all behave. The client intercepts the click to * open an overlay; the href stays the truth underneath. * * They were also BOXES: a fill, a 1px border on four sides, a 12px radius, a * drop shadow and a lift on hover. Two hundred and three of them in a grid is * a dashboard, and a dashboard is what a person scans rather than reads. * * So the box goes and one edge stays. Each entry is ruled on the left in its * own category's colour - the same colour it has in the index and on the map - * and separated from its neighbours by space rather than by outlines. It is * set like the index of a book, because that is what it is. */ .topic-section { margin-top: 8px; } .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 4px 30px; align-items: start; } .card { display: block; position: relative; background: none; border: none; border-left: 1px solid color-mix(in srgb, var(--cat, var(--border)) 32%, transparent); border-radius: 0; padding: 15px 16px 17px 18px; color: inherit; text-decoration: none; transition: background var(--motion) var(--ease), border-color var(--motion) var(--ease); } .card:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--cat, var(--gold)) 9%, transparent), transparent 72%); border-left-color: var(--cat, var(--gold)); } .card:hover .card-label { color: var(--gold-bright); } /* The essentials are marked, not badged. A pill with a border and a fill is a * status chip; a word in small capitals is an editorial note. */ .card-importance { position: absolute; top: 17px; right: 14px; font-family: var(--sans); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--gold-dim); background: none; border: none; padding: 0; } /* The category line comes FIRST and the title second, which is the order an * index entry actually runs in: where you are, then what is there. */ .card-cat { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.17em; color: var(--text-muted); margin-bottom: 6px; padding-right: 72px; } .card-cat-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; color: var(--cat, var(--gold)); background: currentColor; box-shadow: 0 0 7px currentColor; } .card-label { display: block; font-family: var(--serif); font-size: 1.32rem; line-height: 1.22; color: var(--text-strong); margin-bottom: 7px; transition: color var(--motion) var(--ease); } .card-desc { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.9375rem; color: var(--text-muted); line-height: 1.5; } /* Search filtering dims rather than deletes, so the shape of the results * stays legible against the whole. */ .card[data-filtered="out"] { display: none; } .empty-state { padding: 56px 20px; text-align: center; color: var(--text-muted); border: none; border-top: 1px solid var(--border); border-radius: 0; } @media (max-width: 640px) { .card-grid { grid-template-columns: 1fr; gap: 2px; } .card { padding: 13px 14px 15px 15px; } .card-cat { padding-right: 66px; } .card-label { font-size: 1.18rem; } } /* topic.css */ /* The topic page: the reading surface. * * This route did not exist before. All 203 topics lived inside one modal on one * URL, at a fixed narrow width, with the sources rendered as bare divs. Here * each topic is a document with a measure, a bibliography and real links out. */ /* The PROSE gets the measure; the apparatus does not. * * Constraining the whole page to 66ch left the bibliography and the * cross-references stacked in a narrow ribbon with half the window empty * beside them. A line of text has an optimum length and a reference list does * not, so only the reading column is held to it. */ .topic { max-width: 1020px; } .topic-body { max-width: var(--measure); } .topic-category { display: flex; align-items: center; gap: 9px; font-family: var(--sans); font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.17em; margin-bottom: 14px; } /* THE MARK CARRIES THE COLOUR, NOT THE WORDS. * * The sixteen category colours are picked to sit on a dark ground and glow. * Used as text on parchment they are unreadable - "Theology & Dogma" in its * own gold measured 1.75:1 - so the words take the ordinary muted ink and the * colour stays where it can be seen at any size: the dot. The category is * still identified by colour, and the identification is still the same colour * it has on the map. */ .topic-category { color: var(--text-muted); } .topic-category .cat-dot, .cat-dot-title { color: var(--cat, var(--gold)); } .topic-category .cat-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 7px currentColor; flex-shrink: 0; } .cat-dot-title { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; margin-right: 14px; vertical-align: middle; } .topic-title { font-family: var(--display); font-size: clamp(32px, 5.2vw, 48px); font-weight: 400; color: var(--gold); line-height: 1.12; margin-bottom: 20px; } .topic-body { font-family: var(--serif); font-size: 1.28rem; line-height: 1.66; color: var(--text); } .topic-body p + p { margin-top: 1em; } /* Terms the prose names that are topics in their own right. The link is quiet * inside the sentence and only declares itself on hover, so the paragraph * still reads as prose rather than as a list of links. */ .topic-link { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--gold) 45%, transparent); text-decoration-thickness: 1px; text-underline-offset: 3px; } .topic-link:hover { color: var(--gold); text-decoration-color: currentColor; } .topic-section-title { font-family: var(--sans); font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-muted); margin-bottom: 16px; } .topic-sources, .topic-connections { margin-top: 48px; } /* A bibliography, set as one. * * These were filled, bordered, rounded boxes - three stacked panels where the * page wanted three lines of a reference list. The sources are the site's * entire credibility claim, and a citation in a chip reads like a tag rather * than like a citation. So: a hanging indent, a hairline between entries, and * the serif everything else on this page is set in. */ .source-list { display: grid; border-top: 1px solid color-mix(in srgb, var(--gold) 16%, transparent); } .source-item { padding: 11px 0 11px 22px; border-bottom: 1px solid color-mix(in srgb, var(--gold) 11%, transparent); font-size: 1rem; line-height: 1.45; color: var(--text); position: relative; } .source-item::before { content: ''; position: absolute; left: 4px; top: 19px; width: 5px; height: 1px; background: var(--gold-dim); } /* Cross-references, not chips. * * Each one is a named relation to another topic, which is precisely what a * cross-reference in a reference work is. Two columns of ruled lines carry far * more of them in the same space than a wrapped field of filled pills, and the * relation can then sit where it belongs - to the right, quiet, aligned. */ .connection-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 0 34px; } .connection-pill { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 2px; background: none; border: none; border-bottom: 1px solid color-mix(in srgb, var(--gold) 10%, transparent); border-radius: 0; font-size: 1rem; line-height: 1.35; color: var(--text); text-decoration: none; transition: color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease); } .connection-pill:hover { color: var(--gold-bright); border-bottom-color: color-mix(in srgb, var(--gold) 40%, transparent); } .connection-relation { flex-shrink: 0; font-family: var(--sans); font-size: 0.5625rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); text-align: right; flex-shrink: 0; } .topic-actions { margin-top: 40px; } /* Previous and next within the category, so a subject can be worked through * rather than returned to the grid between every topic. */ /* The pair reads as a line you are moving along, so the two cards lean apart: * the previous one toward the left edge and the next one toward the right, * each with the arrow that says which way it goes. Without them these were two * identical boxes whose only difference was a word of small grey type. */ .topic-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border); } /* .topic-nav a is a class AND an element, which outranks a lone class, so this * needs both to win. */ .topic-nav a.topic-nav-next { align-items: flex-end; text-align: right; } .topic-nav a i { font-style: normal; color: var(--gold-dim, var(--text-muted)); } .topic-nav a:hover i { color: var(--gold); } .topic-nav a { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text); text-decoration: none; font-size: 0.9375rem; transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); } .topic-nav a:hover { border-color: var(--gold-dim); background: var(--bg-card-hover); } .topic-nav a span { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); } .topic-nav-next { text-align: right; align-items: flex-end; } @media (max-width: 560px) { .topic-nav { grid-template-columns: 1fr; } .topic-nav-next { text-align: left; align-items: flex-start; } } /* The bibliography at /sources/ */ .source-index { display: grid; gap: 14px; max-width: var(--measure); } .source-entry { padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); } .source-name { font-family: var(--serif); font-size: 1.0625rem; color: var(--text-strong); margin-bottom: 6px; } .source-topics { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.7; } .source-topics a { color: var(--gold); text-decoration: none; } .source-topics a:hover { text-decoration: underline; } /* The scripts-off index on /graph/ */ .graph-fallback { max-width: 100%; } .graph-index-group { margin-top: 28px; break-inside: avoid; } .graph-index-group h3 { font-size: 1rem; color: var(--gold); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .graph-index-group ul { columns: 3 210px; column-gap: 24px; font-size: 0.875rem; } .graph-index-group li { break-inside: avoid; margin-bottom: 3px; } .graph-index-group a { color: var(--text); text-decoration: none; } .graph-index-group a:hover { color: var(--gold); text-decoration: underline; } .prayer-text { font-family: var(--serif); font-size: clamp(20px, 3.4vw, 28px); font-style: italic; line-height: 1.5; color: var(--gold); padding: 20px 0 20px 24px; border-left: 2px solid var(--gold-dim); margin: 8px 0; } /* The terms and privacy pages. Plain prose, generous measure, and headings * that separate sections without shouting. */ .legal-h { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--gold); margin-top: 28px; } .section-page p { max-width: var(--measure); } /* The plate. * * An icon belongs on the page the way it belongs in a book: as a plate beside * the text, at a size you can actually look at, with its credit under it. Not * as a full-bleed banner - a banner crops a portrait icon through the face, * which on this subject is the one thing not to do. * * It floats beside the prose on a wide screen and sits above it on a narrow * one, which is also the order it should be READ in: the picture first, then * the paragraph. */ .topic-reading { display: flow-root; } .topic-plate { float: right; width: min(250px, 36%); margin: 4px 0 20px 30px; } .topic-plate img { width: 100%; height: auto; border-radius: 2px; /* Icons are painted on gesso over board and most of these are photographed * against it, so a hairline of gold reads as the frame rather than as a UI * border. */ box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 28%, transparent), var(--shadow-card); } .topic-plate figcaption { margin-top: 10px; font-family: var(--sans); font-size: 0.625rem; line-height: 1.5; color: var(--text-muted); } .topic-plate figcaption > * { display: block; } .plate-name { color: var(--text); } .plate-credit { font-style: normal; } .plate-source { margin-top: 3px; color: var(--text-muted); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); display: inline-block !important; } .plate-source:hover { color: var(--gold); } /* Where nothing is owed, the licence is stated and not linked. */ .plate-licence { color: var(--text-muted); } @media (max-width: 720px) { .topic-plate { float: none; width: 100%; max-width: 340px; margin: 0 auto 26px; } } /* The name grows, the relation does not: a long topic title must not squeeze * "interpreted through hymns" into one letter per line. */ .connection-name { min-width: 0; } /* Where to go and check. * * Set quieter and smaller than the citation it follows: the citation is the * claim's anchor and the link is a convenience, so it must not read as the * more important of the two. */ .source-link { font-size: 0.8125em; color: var(--text-muted); text-decoration: none; border-bottom: 1px dotted var(--border); white-space: nowrap; } .source-link::before { content: "\2197\00a0"; } .source-link:hover, .source-link:focus-visible { color: var(--gold); border-bottom-color: var(--gold); } /* The fixed prayers on /pray/. * * Set as prayers rather than as prose: serif, a generous line, and a rule down * the left so a block reads as one thing to be said rather than a paragraph to * be scanned. Quieter than .prayer-text above, which is reserved for the Jesus * Prayer and the Paschal troparion, the two single sentences the page is built * around. */ .prayer-heading { font-family: var(--sans); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin: 40px 0 10px; } .prayer-block { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.7; padding-left: 20px; border-left: 1px solid var(--gold-dim); margin: 12px 0 16px; } .prayer-block p { margin: 0 0 12px; } .prayer-block p:last-child { margin-bottom: 0; } /* The Creed is one sentence in twelve articles, so the articles are set * closer together than separate prayers would be. */ .prayer-creed p { margin-bottom: 6px; } /* A rubric is an instruction, not something to be said aloud. */ .prayer-rubric { font-family: var(--sans); font-size: 0.6875rem; font-style: normal; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); white-space: nowrap; } /* calendar.css */ /* The calendar page, and the daily card on the home page. */ .calendar-stage { max-width: 860px; } .cal-today { margin-bottom: 28px; } .cal-date { font-family: var(--serif); font-size: clamp(24px, 4vw, 34px); color: var(--text-strong); line-height: 1.2; } .cal-feast { font-family: var(--serif); font-size: 1.25rem; font-style: italic; color: var(--gold); margin-top: 6px; } .cal-season { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); margin-top: 8px; } .cal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--gap); margin-bottom: 28px; } .cal-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px 20px; } .cal-card-title { font-family: var(--sans); font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin-bottom: 10px; } .cal-big { font-family: var(--serif); font-size: 1.5rem; color: var(--gold); line-height: 1.2; margin-bottom: 8px; } .cal-note { font-size: 0.875rem; color: var(--text); line-height: 1.55; } .cal-dim { color: var(--text-muted); margin-top: 8px; } /* The fast is the one thing on this page a reader acts on, so it carries a * colour as well as a word. Never colour alone: the name is always present. */ .cal-card.fast-strict { border-left: 3px solid #b05b5b; } .cal-card.fast-strict .cal-big { color: #d99; } .cal-card.fast-moderate { border-left: 3px solid var(--gold-dim); } .cal-card.fast-none { border-left: 3px solid #3d8b70; } .cal-card.fast-none .cal-big { color: #7ecfb0; } /* The fast colours were chosen against the dark ground and carried straight * over. On parchment the pale green came to 1.81:1 at 24px, which is a * heading nobody can read; the pink is no better. Both are darkened for the * light theme, keeping the same hues so the signal is unchanged. */ @media (prefers-color-scheme: light) { :root:not([data-theme='dark']) .cal-card.fast-strict .cal-big { color: #9a3b3b; } :root:not([data-theme='dark']) .cal-card.fast-none .cal-big { color: #1f6b52; } } :root[data-theme='light'] .cal-card.fast-strict .cal-big { color: #9a3b3b; } :root[data-theme='light'] .cal-card.fast-none .cal-big { color: #1f6b52; } .cal-section { margin-bottom: 28px; } .cal-switch { margin-top: 14px; } .cal-list { margin-top: 12px; border-top: 1px solid var(--border); } .cal-list li { display: flex; justify-content: space-between; gap: 16px; padding: 9px 2px; border-bottom: 1px solid var(--border); font-size: 0.9375rem; } .cal-list li span:last-child { color: var(--text-muted); white-space: nowrap; } .cal-list li.is-today { color: var(--gold); } .cal-list li.is-today span:last-child { color: var(--gold); } /* The daily card on the home page. * * Two kinds of statement, kept visibly apart. What the Church keeps is stated * plainly at the top; the rotating reading is set below a divider and under its * own label, so it can never be mistaken for a commemoration again. */ .today-card-feast { font-family: var(--serif); font-size: 1.375rem; color: var(--gold); line-height: 1.25; margin-bottom: 8px; } .today-card-reading { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } .today-card-reading-label { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin-bottom: 6px; } /* CLAMPED, so the card's height is the same on every day of the year. * * Reserving space for something that arrives late only works if you know how * much to reserve, and a commemoration's length is whatever that saint's entry * happens to be - two lines for one, five for another. Clamping the title and * the reading makes the box deterministic, which is what lets the space above * be held open exactly. The full entry is one click away and the link is * right there. */ .today-card-read { font-family: var(--serif); font-size: 0.9375rem; color: var(--text); line-height: 1.6; margin-bottom: 10px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .today-card-title { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .today-card-more { margin-top: 10px; font-size: 0.8125rem; } @media (max-width: 640px) { .cal-grid { grid-template-columns: 1fr; } .cal-list li { flex-direction: column; gap: 2px; } .cal-list li span:last-child { white-space: normal; } } /* The saints the map knows who are kept today. * * Set below the feast and lighter than it, because they are a different order * of statement: the feast is the Church's day, these are whoever this map * happens to hold for it. Rendered as links, since the point of naming them * is that the reader can go and read. */ .cal-kept, .today-card-kept { font-family: var(--serif); font-size: 1rem; line-height: 1.4; margin-top: 6px; } .cal-kept a, .today-card-kept a { color: var(--text-strong); text-decoration: none; border-bottom: 1px solid var(--border); } .cal-kept a:hover, .cal-kept a:focus-visible, .today-card-kept a:hover, .today-card-kept a:focus-visible { color: var(--gold); border-bottom-color: var(--gold); } .cal-kept span, .today-card-kept span { color: var(--text-muted); } /* detail.css */ /* The topic overlay, and the shared modal chrome behind every dialog. * * The old build had four modals with no role, no aria-modal, no focus trap and * no return-focus, and a single global Escape handler that closed only one of * them while firing underneath the other three. One set of rules here, one * controller in js/modal.js. */ .modal { position: fixed; inset: 0; z-index: 300; display: none; align-items: center; justify-content: center; padding: 24px; background: color-mix(in srgb, #000 72%, transparent); backdrop-filter: blur(4px); } .modal.open { display: flex; } .modal-panel { position: relative; width: 100%; max-width: 720px; max-height: min(86vh, 900px); overflow-y: auto; overscroll-behavior: contain; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-float); padding: 32px; } .modal-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 1.5rem; line-height: 1; color: var(--text-muted); transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease); } .modal-close:hover { background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text-strong); } .modal-title { font-size: 1.75rem; font-weight: 400; color: var(--gold); margin-bottom: 6px; padding-right: 40px; } /* The overlay reuses the topic page's reading styles verbatim, so a topic * looks the same whether it was opened over the grid or navigated to. */ #detail-panel .topic { max-width: none; } #detail-panel .topic-title { font-size: clamp(26px, 4vw, 34px); } #detail-panel .topic-body { font-size: 1.0625rem; } .detail-permalink { display: inline-block; margin-top: 28px; font-size: 0.8125rem; color: var(--text-muted); } .detail-permalink a { color: var(--gold); } /* Suggestion form */ .suggest-form { display: grid; gap: 16px; margin-top: 20px; } .suggest-row { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; } .suggest-field { display: grid; gap: 6px; } .suggest-field label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-muted); } .suggest-field input, .suggest-field select, .suggest-field textarea { background: color-mix(in srgb, var(--text) 4%, transparent); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; color: var(--text); font-size: 0.9375rem; width: 100%; } .suggest-field textarea { min-height: 110px; resize: vertical; } .suggest-actions { display: flex; gap: 10px; flex-wrap: wrap; } .suggest-status { font-size: 0.875rem; color: var(--text-muted); min-height: 1.4em; } .suggest-status[data-state="error"] { color: var(--danger); } .suggest-status[data-state="ok"] { color: var(--gold); } @media (max-width: 640px) { .modal { padding: 0; align-items: flex-end; } .modal-panel { max-width: none; max-height: 92vh; border-radius: var(--radius) var(--radius) 0 0; padding: 24px 20px 32px; } /* The grab handle. It is what tells a thumb that the panel has an edge and * can be pulled back down, which is otherwise a gesture nobody would guess * at. js/sheet.js does the pulling; this says that it is possible. */ .modal-panel::before, .palette-panel::before { content: ''; display: block; width: 38px; height: 4px; margin: -10px auto 14px; border-radius: 999px; background: var(--border-strong, var(--border)); } .palette-panel { border-radius: var(--radius) var(--radius) 0 0; padding-top: 12px; } .suggest-row { grid-template-columns: 1fr; } } /* palette.css */ /* The command palette. * * Replaces a topbar input that ran an unranked substring filter over every * card on every keystroke, had no keyboard navigation, and shrank to a 100px * box on a phone. This one is fuzzy, ranked, grouped and reachable from any * route with Ctrl+K. */ #palette { align-items: flex-start; padding-top: min(14vh, 120px); } .palette-panel { width: 100%; max-width: 620px; background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--shadow-float); overflow: hidden; display: flex; flex-direction: column; max-height: min(70vh, 620px); } .palette-input-row { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .palette-input { flex: 1; background: none; border: none; outline: none; font-size: 1.0625rem; color: var(--text); } .palette-input::placeholder { color: var(--text-muted); } .palette-hint { font-size: 0.6875rem; color: var(--text-muted); white-space: nowrap; } /* THE HINT AND THE BUTTON ARE THE SAME AFFORDANCE FOR DIFFERENT HANDS. * * "Esc to close" is true on a keyboard and useless on a phone, where the only * way out was the browser's back gesture or a tap on the backdrop - neither of * which the panel advertised. So below the phone breakpoint the hint gives way * to a target big enough for a thumb. */ .palette-close { display: none; flex-shrink: 0; width: 40px; height: 40px; margin: -6px -8px -6px 0; padding: 0; border: none; border-radius: 999px; background: none; color: var(--text-muted); cursor: pointer; align-items: center; justify-content: center; } .palette-close svg { width: 16px; height: 16px; fill: currentColor; } .palette-close:hover { color: var(--text); background: var(--surface-raised, rgba(128, 128, 128, 0.12)); } .palette-close:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } @media (max-width: 900px) { .palette-hint { display: none; } .palette-close { display: inline-flex; } } .palette-results { overflow-y: auto; overscroll-behavior: contain; padding: 6px; } .palette-group-label { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); padding: 10px 12px 4px; } .palette-item { display: flex; align-items: baseline; gap: 10px; width: 100%; padding: 9px 12px; border-radius: var(--radius-sm); text-align: left; color: var(--text); text-decoration: none; scroll-margin: 8px; } /* Selection is driven by the keyboard, so it is an attribute rather than * :hover - the pointer must not be able to move the active row out from under * someone typing. */ .palette-item[data-active="true"] { background: var(--gold-glow); color: var(--gold); } .palette-item-label { font-size: 0.9375rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .palette-item-meta { font-size: 0.6875rem; color: var(--text-muted); flex-shrink: 0; } .palette-item mark { background: none; color: var(--gold); font-weight: 600; } .palette-empty { padding: 32px 16px; text-align: center; color: var(--text-muted); font-size: 0.875rem; } @media (max-width: 640px) { #palette { padding-top: 0; align-items: stretch; } .palette-panel { max-width: none; max-height: 100dvh; border-radius: 0; border: none; } } /* graph.css */ /* The map. * * The canvas fills the column and the controls float over it. The keyboard * mirror is visually hidden but fully focusable, so tabbing into the map moves * through real links rather than dropping the reader into a dead element. */ .graph-page { margin: 0 -24px; } .graph-stage { position: relative; width: 100%; height: calc(100vh - var(--topbar-h) - 2px); min-height: 420px; background: radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--gold) 6%, transparent) 0%, transparent 62%), var(--bg-sunk); overflow: hidden; touch-action: none; } #graph-canvas { width: 100%; height: 100%; display: block; cursor: grab; } #graph-canvas:active { cursor: grabbing; } /* The mirror is where the keyboard actually goes. It is off-screen, not * display:none, because a hidden element cannot be focused and the whole point * is that the map is operable without a pointer. */ #graph-a11y { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } #graph-a11y a:focus { position: fixed; top: calc(var(--topbar-h) + 12px); left: 12px; z-index: 60; width: auto; height: auto; clip-path: none; white-space: normal; max-width: 320px; padding: 10px 14px; background: var(--bg-raised); border: 1px solid var(--gold-dim); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; box-shadow: var(--shadow-float); } #graph-a11y a:focus span { display: block; font-size: 0.75rem; color: var(--text-muted); } .graph-controls { position: absolute; top: 14px; right: 14px; z-index: 20; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .graph-layouts { display: flex; gap: 6px; } .graph-btn { border: 1px solid var(--border); background: color-mix(in srgb, var(--bg-card) 88%, transparent); backdrop-filter: blur(8px); color: var(--text-muted); border-radius: var(--radius-sm); padding: 7px 13px; font-size: 0.8125rem; transition: border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); } .graph-btn:hover:not(:disabled) { border-color: var(--gold-dim); color: var(--text); } /* --gold-bright, not --gold: the pressed state puts gold text on a gold tint, * and at --gold that came to 3.44:1 - the one control on the map whose whole * job is to say which view you are in. */ .graph-btn[aria-pressed="true"] { border-color: var(--gold-dim); background: var(--gold-glow); color: var(--gold-bright); } .graph-btn:disabled { opacity: 0.4; cursor: default; } /* Collapsed by default, because an open panel covers the corner of the very * map it is describing. The closed state still names the active filter, so * nothing about the current view is hidden behind it. */ .graph-legend { position: absolute; left: 14px; bottom: 14px; z-index: 20; max-width: min(460px, calc(100% - 28px)); padding: 8px 10px; background: color-mix(in srgb, var(--bg-card) 88%, transparent); backdrop-filter: blur(8px); border: 1px solid var(--border); border-radius: var(--radius); } .legend-toggle { display: inline-flex; align-items: center; gap: 7px; font-size: 0.75rem; color: var(--text-muted); padding: 2px 4px; } .legend-toggle:hover { color: var(--text); } .legend-toggle::after { content: ''; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); margin-left: 2px; } .graph-legend[data-open="true"] .legend-toggle::after { transform: rotate(-135deg) translate(-2px, -2px); } .legend-items { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border); max-height: 168px; overflow-y: auto; } /* The legend is also the category filter, so each row is a real button with a * pressed state rather than a decorative swatch. */ .legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 0.6875rem; color: var(--text-muted); padding: 3px 7px; border-radius: var(--radius-pill); border: 1px solid transparent; } .legend-item:hover { color: var(--text); border-color: var(--border); } .legend-item[aria-pressed="true"] { color: var(--gold-bright); border-color: var(--gold-dim); background: var(--gold-glow); } .legend-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .graph-tooltip { position: fixed; z-index: 150; pointer-events: none; max-width: 290px; padding: 11px 14px; background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow-float); font-size: 0.8125rem; } .graph-tooltip strong { font-family: var(--serif); font-size: 1rem; color: var(--gold); display: block; } .graph-tooltip .gt-cat { display: block; font-size: 0.6875rem; color: var(--text-muted); margin: 2px 0 6px; } .graph-tooltip .gt-desc { display: block; color: var(--text); line-height: 1.5; } @media (max-width: 900px) { .graph-page { margin: 0 -16px; } .graph-stage { height: calc(100vh - var(--topbar-h) - 70px); } .graph-legend { max-width: calc(100% - 28px); max-height: 108px; overflow-y: auto; } .graph-controls { top: 10px; right: 10px; } /* TALLER, not smaller. * * This rule used to shrink the buttons to 6px of padding so that five of * them fit across a 390px bar, which left a 35px target on the one device * where the pointer is a finger - against the 44px that every platform's own * guidance asks for. Width is the real constraint, so the horizontal padding * stays tight and the vertical padding does the work. */ .graph-btn { padding: 12px 10px; font-size: 0.75rem; } .legend-item, .legend-toggle { padding-top: 10px; padding-bottom: 10px; } } /* The key to the galaxy. * * A layout whose shape encodes four different facts is worth nothing if the * reader is never told which four. The positions are not decoration and they * are not guessable, so they are stated plainly, on the map, while the map is * showing them. * * It is prerendered markup rather than a string built in JavaScript, so a * guard can read it off the page whether or not the module ever ran. */ .graph-key { position: absolute; right: 16px; bottom: 16px; z-index: 5; /* An EXPLICIT width, not a max-width. * * Absolutely positioned with left auto, the box shrink-to-fits, and it * resolved to its min-content: 200px, one word per line, 1063px tall inside * an 834px stage. max-width had applied perfectly and constrained nothing, * because the used width never reached it. */ width: min(330px, calc(100% - 32px)); max-height: calc(100% - 32px); overflow-y: auto; padding: 15px 17px 16px; background: color-mix(in srgb, var(--bg-sunk) 82%, transparent); backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--gold) 20%, transparent); border-radius: var(--radius-sm); font-family: var(--sans); font-size: 0.6875rem; line-height: 1.5; color: var(--text-muted); } .graph-key[hidden] { display: none; } .graph-key-lead { font-family: var(--serif); font-size: 0.9375rem; font-style: italic; color: var(--gold); margin-bottom: 11px; padding-bottom: 9px; border-bottom: 1px solid color-mix(in srgb, var(--gold) 18%, transparent); } .graph-key ul { display: grid; gap: 9px; } /* EVERY child is a grid item, including an anonymous one made from bare text. * * The prose in each row used to follow the as a loose text node, so the * row had three items rather than two: the mark, the bold label, and then the * sentence - which wrapped onto a second row and landed back in the 16px * column. One word per line, a 1063px tall panel inside an 834px stage, and * not a single thing wrong with the CSS. The markup wraps the sentence in one * element now, and flex keeps it honest if it ever stops. */ .graph-key li { display: flex; gap: 9px; align-items: flex-start; } .graph-key li > span:last-child { flex: 1 1 auto; min-width: 0; } .graph-key b { color: var(--text); font-weight: 600; } .graph-key-mark { flex: 0 0 16px; margin-top: 5px; height: 9px; position: relative; } /* Each mark is the thing it describes, drawn small. */ .graph-key-mark--core::after { content: ''; position: absolute; left: 4px; top: 1px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 9px var(--gold-bright); } .graph-key-mark--arm::after { content: ''; position: absolute; left: 0; top: 4px; width: 15px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); transform: rotate(-22deg); } .graph-key-mark--lift::after { content: ''; position: absolute; left: 7px; top: 0; width: 1px; height: 9px; background: linear-gradient(180deg, var(--gold-bright), color-mix(in srgb, var(--gold) 20%, transparent)); } .graph-key-mark--size::after { content: ''; position: absolute; left: 3px; top: 0; width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--gold-dim); } /* On a narrow screen the descriptions would cover the map they describe, so * the four claims stay and their elaborations go. */ @media (max-width: 860px) { .graph-key { right: 10px; left: 10px; bottom: 10px; width: auto; max-width: none; padding: 11px 13px 12px; } /* THE LEGEND MOVES TO THE TOP. * * Both panels are anchored to the bottom of the stage, which is fine at a * desktop width where one is on the left and the other on the right. At * 390px the key spans the full width and the legend sits on top of it, so * the third line of the key read "...disc" with a category filter across it. * The top-left of the map is empty on a phone; the legend goes there. */ .graph-legend { top: 58px; bottom: auto; left: 10px; } .graph-key li { font-size: 0; } .graph-key b { font-size: 0.625rem; } .graph-key-lead { font-size: 0.8125rem; margin-bottom: 9px; padding-bottom: 7px; } .graph-key ul { gap: 6px; } } /* game.css */ /* The prayer rope, and the learning suite. * * The rope has no score, no timer and no progress bar on purpose, so there is * nothing here that styles one. What it has instead is a breath: a ring that * expands and contracts under the knots, and a current knot that is simply * brighter than the rest. */ .rope-stage { max-width: 620px; margin-top: 24px; } .rope-frame { position: relative; text-align: center; } .rope-svg { width: min(360px, 78vw); margin: 0 auto; overflow: visible; cursor: default; } .rope-svg.is-running { cursor: pointer; } .breath-ring { fill: none; stroke: var(--gold); stroke-width: 0.4; opacity: 0.22; transform-origin: 50px 46px; transition-property: transform; transition-timing-function: cubic-bezier(0.37, 0, 0.63, 1); } .knot { fill: var(--border-strong); transition: fill 400ms var(--ease), r 400ms var(--ease); } .knot.is-done { fill: var(--gold-dim); } .knot.is-current { fill: var(--gold-bright); r: 2.4; filter: drop-shadow(0 0 2.5px var(--gold)); } .rope-tail { stroke: var(--border-strong); stroke-width: 0.6; } .rope-cross { fill: var(--gold); } .rope-breath { min-height: 1.4em; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--text-muted); margin-top: 4px; } .rope-counter { font-family: var(--serif); font-size: 1.125rem; color: var(--text-muted); } .rope-words { margin: 20px auto 0; max-width: 34em; text-align: center; font-family: var(--serif); font-size: clamp(18px, 3vw, 24px); line-height: 1.5; } .rope-line { display: block; color: var(--text-muted); transition: color 600ms var(--ease); } .rope-line.is-now { color: var(--gold); } .rope-steadiness { min-height: 1.5em; margin-top: 14px; text-align: center; font-size: 0.875rem; color: var(--text-muted); } .rope-steadiness[data-quality="still"] { color: var(--gold); } .rope-steadiness[data-quality="rushing"] { color: var(--text-muted); font-style: italic; } .rope-actions { display: flex; justify-content: center; gap: 12px; margin-top: 20px; } .rope-done { margin-top: 22px; text-align: center; padding: 18px; border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius); background: var(--bg-card); } .rope-done:focus { outline: none; } .rope-done-text { font-family: var(--serif); font-size: 1.25rem; color: var(--gold); } .rope-done-note { font-size: 0.875rem; color: var(--text-muted); margin-top: 6px; } .rope-controls { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--border); } .rope-set { border: none; display: flex; flex-direction: column; gap: 7px; align-items: center; } .rope-set legend { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-muted); margin-bottom: 4px; text-align: center; } .rope-set > :not(legend) { display: inline-block; } .rope-chip { border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 6px 14px; font-size: 0.8125rem; color: var(--text); background: transparent; transition: border-color var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); } .rope-chip:hover { border-color: var(--gold-dim); color: var(--text); } .rope-chip[aria-pressed="true"] { border-color: var(--gold-dim); background: var(--gold-glow); color: var(--gold); } .rope-set { flex-direction: row; flex-wrap: wrap; } .rope-set legend { width: 100%; } .rope-hint { margin-top: 14px; text-align: center; font-size: 0.8125rem; color: var(--text-muted); } /* Stillness is the point, so a reader who has asked for less motion gets a * rope that does not move at all: the knots still advance and the words still * change, but nothing animates and the breath ring holds its size. */ @media (prefers-reduced-motion: reduce) { .breath-ring { transition: none !important; transform: none !important; } .knot { transition: none !important; } .knot.is-current { filter: none; } } /* ---------- the learning suite ---------- */ .learn-stage { max-width: 720px; margin-top: 24px; } .learn-stats { display: flex; flex-wrap: wrap; gap: 14px 36px; padding-bottom: 20px; border-bottom: 1px solid var(--border); } .learn-stat { display: flex; flex-direction: column; } .learn-stat-num { font-family: var(--serif); font-size: 1.75rem; color: var(--gold); line-height: 1.1; } .learn-stat-label { font-size: 0.75rem; color: var(--text-muted); } .learn-setup { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 22px; } .learn-mastery { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--border); } .mastery-row { display: grid; grid-template-columns: 1fr 100px auto; align-items: center; gap: 12px; padding: 5px 0; font-size: 0.875rem; } .mastery-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mastery-bar { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--text) 10%, transparent); overflow: hidden; } .mastery-bar span { display: block; height: 100%; background: var(--gold-dim); } .mastery-count { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; } .learn-progress { display: flex; justify-content: space-between; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-muted); margin-bottom: 18px; } .learn-mode { color: var(--gold-dim); } .learn-prompt { font-size: 1.0625rem; color: var(--text); margin-bottom: 14px; } .learn-body { font-family: var(--serif); font-size: 1.0625rem; line-height: 1.6; color: var(--text); padding: 14px 18px; border-left: 2px solid var(--gold-dim); background: var(--bg-card); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 22px; } .learn-options { display: grid; gap: 10px; } .learn-option { display: block; width: 100%; text-align: left; padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); color: var(--text); font-size: 0.9375rem; transition: border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease); } .learn-option:hover:not(:disabled) { border-color: var(--gold-dim); background: var(--bg-card-hover); } .learn-option:disabled { cursor: default; opacity: 0.75; } /* Never colour alone: the chosen and correct answers are also marked with a * word, so the verdict does not depend on distinguishing red from green. */ .learn-option[data-state="right"] { border-color: #3d8b70; background: color-mix(in srgb, #3d8b70 16%, var(--bg-card)); opacity: 1; } .learn-option[data-state="right"]::after { content: ' \2014 correct'; color: #7ecfb0; font-size: 0.8125rem; } .learn-option[data-state="wrong"] { border-color: #b05b5b; background: color-mix(in srgb, #b05b5b 14%, var(--bg-card)); opacity: 1; } .learn-option[data-state="wrong"]::after { content: ' \2014 your answer'; color: #e0a0a0; font-size: 0.8125rem; } .learn-verdict { margin-top: 22px; padding: 18px; border: 1px solid var(--border); border-left: 3px solid var(--gold); border-radius: var(--radius); background: var(--bg-card); } .learn-verdict:focus { outline: none; } .learn-verdict-line { font-family: var(--serif); font-size: 1.125rem; color: var(--gold); margin-bottom: 10px; } .learn-verdict-read { font-size: 0.9375rem; line-height: 1.6; color: var(--text); } .learn-verdict-source { margin-top: 10px; font-size: 0.8125rem; color: var(--text-muted); } .learn-verdict-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .learn-done { text-align: center; padding: 32px 0; } @media (max-width: 640px) { .mastery-row { grid-template-columns: 1fr 64px auto; } .learn-verdict-actions .btn-primary, .learn-verdict-actions .btn-secondary { flex: 1 1 auto; justify-content: center; } } /* The daily challenge's shared result. * * The marks are set large and widely spaced because they are the message: a * row of five that reads at a glance in a channel, and says how it went * without saying which questions they were. */ .learn-daily-grid { font-size: 1.9rem; letter-spacing: 0.34em; line-height: 1.2; color: var(--gold); margin-bottom: 14px; /* The trailing letter-space would sit the row off-centre by half a gap. */ text-indent: 0.34em; } .learn-daily-note { max-width: 46ch; margin-left: auto; margin-right: auto; } /* print.css */ /* Printing a topic or a category should give paper you can read, not a * screenshot of a dark UI with the navigation baked in. */ @media print { #topbar, #sidebar, footer, .nav-toggle, .search-trigger, .topic-actions, .modal, .graph-stage, .hero-buttons, .today-card { display: none !important; } body { background: #fff; color: #000; display: block; } #content { display: block; } #main { padding: 0; } .topic-title, .section-header, .hero-title { color: #000; } .topic-body { font-size: 11pt; line-height: 1.5; } .card, .source-item, .source-entry, .connection-pill { background: none; border: 1px solid #bbb; box-shadow: none; break-inside: avoid; } /* A printed link that says only "here" is useless on paper. */ .topic-body a::after, .source-topics a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; } .card-grid { display: block; } .card { margin-bottom: 8pt; } }