/* ========================================================== * Mediatrix — shared stylesheet * Editorial Marian register. Hiraeth typographic spine, * Marian palette. Tokens + base + components used across * every page. * * Hard rule: no raw hex outside :root. Vestment via * [data-vestment] on , never via class. * ========================================================== */ :root { /* --- Marian palette ---------------------------------------------------- Ink is azure mariana deep navy; accent is gold of the Queen of Heaven; hero accent is Marian blue (distinct from ink). Rose tones for the mystical rose / mater dolorosa register. Lily white for paper. */ --m-navy: #0C2340; /* primary ink (heads, rules) */ --m-blue: #1E3A6E; /* Marian blue — promoted to primary accent */ --m-gold: #C99700; /* crown of twelve stars */ --m-gold-text: #8C6B00; /* darkened gold for foreground text (5.4:1 on cream) */ --m-rose: #B66D87; /* mystical rose */ --m-rose-deep: #8C4566; /* mater dolorosa */ --warm-grey-1: #EEEDEB; /* page background */ --warm-grey-2: #D9D7D3; /* hairline rules */ --warm-grey-3: #686A6E; /* light-mode metadata — 4.85:1 on --cream */ --warm-grey-4: #54585A; /* secondary text */ --cream: #F9F6EF; /* body paper */ --bone: #D9CFBE; /* vigil primary ink */ --verified: #3AAF66; /* verified ✓ marker */ /* Vigil (dark mode) tokens — analogous to Compline. Two golds: text-gold stays luminous for tracked-cap legibility on dark; rule-gold dims one stop to candlelight amber for decorative rules, ornaments, hairlines. The shift matches a chapel lit by tapers, where gilt reads warmer and quieter than it does under day light. */ --ink-deep: #0A1628; /* vigil page bg */ --ink-panel: #1A2240; /* vigil paper — slightly deepened from #1F2842 */ --gold-night: #E8B44E; /* text-gold for tracked caps */ --gold-night-rule: #A6803D; /* rule-gold for decorative borders / Stella Maris */ --cream-night: #E8E4D8; /* Vestments — six liturgical colors. Default is blue (Marian). */ --vest-blue: #1E3A6E; /* Marian — default */ --vest-white: #C99700; /* Christmas, Easter, most solemnities */ --vest-violet: #4A2C6F; /* Advent, Lent */ --vest-rose: #B66D87; /* Gaudete, Laetare */ --vest-red: #8B1A1A; /* Passion, martyrs, Pentecost */ --vest-green: #00843D; /* Ordinary Time */ --wash-blue: rgba( 30, 58, 110, 0.05); --wash-white: rgba(201, 151, 0, 0.04); --wash-violet: rgba( 74, 44, 111, 0.05); --wash-rose: rgba(182, 109, 135, 0.05); --wash-red: rgba(139, 26, 26, 0.04); --wash-green: rgba( 0, 132, 61, 0.03); /* Type families — identical to Hiraeth. Self-hosted woff2. */ --font-display: "Cinzel", "Trajan Pro 3", serif; --font-serif: "Source Serif 4", "EB Garamond", serif; --font-sans: "Source Sans 3", "ITC Franklin Gothic", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Rhythm — Bringhurst-derived */ --rhythm: 1.5rem; --rhythm-half: 0.75rem; --rhythm-x2: 3rem; --rhythm-x3: 4.5rem; /* Measures */ --measure-prose: 68ch; --measure-wide: 1100px; --measure-reader: 84ch; --rule-hairline: 1px solid rgba(12, 35, 64, 0.2); --focus-ring: 0 0 0 2px var(--m-gold-text), 0 0 0 4px rgba(201,151,0,0.18); } /* --- Vigil mode (analogous to Hiraeth's Compline). Page bg cools to deep navy; cards become deeper navy "paper"; decorative gold dims one stop to amber so rules / Stella Maris feel like gilt under tapers, not noon sun; tracked-cap text-gold stays luminous for legibility. Vestment colors are NOT dimmed — they carry liturgical meaning. */ html[data-mode="vigil"] { --warm-grey-1: var(--ink-deep); --warm-grey-2: #3F4866; --warm-grey-3: #98A0AC; --warm-grey-4: #B4BAC0; --cream: var(--ink-panel); --m-gold: var(--gold-night-rule); /* decorative rule-gold dimmed */ --m-gold-text: var(--gold-night); /* tracked-cap text-gold luminous */ --m-navy: var(--cream-night); --m-blue: #7BA7E8; --rule-hairline: 1px solid rgba(166, 128, 61, 0.32); /* Zero out the day-mode 5%-blue wash; the page bg already carries the liturgical cast and the wash would add a sheen that breaks the candlelight register. */ --wash-blue: transparent; --wash-white: transparent; --wash-violet: transparent; --wash-rose: transparent; --wash-red: transparent; --wash-green: transparent; color-scheme: dark; } /* --- Vestment binding --------------------------------------------------- */ body { --rule: var(--vest-blue); --wash: var(--wash-blue); } body[data-vestment="white"] { --rule: var(--vest-white); --wash: var(--wash-white); } body[data-vestment="violet"] { --rule: var(--vest-violet); --wash: var(--wash-violet); } body[data-vestment="rose"] { --rule: var(--vest-rose); --wash: var(--wash-rose); } body[data-vestment="red"] { --rule: var(--vest-red); --wash: var(--wash-red); } body[data-vestment="green"] { --rule: var(--vest-green); --wash: var(--wash-green); } body[data-vestment="blue"] { --rule: var(--vest-blue); --wash: var(--wash-blue); } /* ========================== Base ========================== */ * { box-sizing: border-box; } html { font-family: var(--font-serif); font-size: 16px; line-height: 1.58; color: var(--m-navy); background: var(--warm-grey-1); -webkit-font-smoothing: antialiased; overflow-x: clip; } body { margin: 0; background-color: var(--wash, transparent); min-height: 100vh; overflow-x: clip; max-width: 100vw; } a { color: var(--m-blue); text-decoration: underline; text-decoration-color: rgba(30, 58, 110, 0.32); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color 0.18s ease; } a:hover { text-decoration-color: var(--m-blue); } a:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; } p { margin: 0 0 var(--rhythm); } em, i { font-family: var(--font-serif); font-style: italic; } .small-caps { font-family: var(--font-sans); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--warm-grey-4); } .greek, .hebrew, .latin { font-family: var(--font-serif); font-style: italic; } .nolink { color: var(--warm-grey-3); cursor: not-allowed; } #main { display: block; } .skip-link { position: absolute; left: -9999px; background: var(--m-navy); color: var(--cream); padding: 0.5rem 0.8rem; z-index: 100; font-family: var(--font-sans); letter-spacing: 0.1em; } .skip-link:focus { left: 0.5rem; top: 0.5rem; } /* ========================== Type scale ==================== */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--m-navy); text-wrap: balance; } /* Typographic humility: Cinzel display reads as carved Roman stone at 400, billboard at 600. See catholic-editorial-design skill, "Typographic humility note". */ h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); font-weight: 400; line-height: 1.04; margin: 0 0 var(--rhythm); letter-spacing: 0.04em; } h2 { font-size: 1.65rem; font-weight: 400; line-height: 1.18; margin: var(--rhythm-x2) 0 var(--rhythm); letter-spacing: 0.03em; } h3 { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; line-height: 1.3; margin: var(--rhythm) 0 var(--rhythm-half); } h4 { font-family: var(--font-sans); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--warm-grey-4); margin: var(--rhythm) 0 var(--rhythm-half); } .kicker { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--warm-grey-4); margin: 0 0 var(--rhythm-half); display: inline-flex; align-items: center; gap: 0.7rem; } .kicker .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--m-gold); } blockquote { margin: var(--rhythm) 0; padding: 0 var(--rhythm) 0 var(--rhythm); border-left: 2px solid var(--rule, var(--m-blue)); font-family: var(--font-serif); font-size: 1.08rem; line-height: 1.55; color: var(--m-navy); } blockquote.pull { font-style: italic; font-size: 1.25rem; border-left: none; padding: var(--rhythm) 0; text-align: center; border-top: 1px solid var(--m-gold); border-bottom: 1px solid var(--m-gold); max-width: 38rem; margin: var(--rhythm-x2) auto; } blockquote cite { display: block; margin-top: var(--rhythm-half); font-family: var(--font-sans); font-style: normal; font-size: 0.74rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--warm-grey-4); } dl.glossed { margin: var(--rhythm) 0; } dl.glossed dt { font-family: var(--font-display); font-weight: 500; font-size: 1rem; letter-spacing: 0.02em; color: var(--m-navy); margin-top: var(--rhythm); } dl.glossed dd { margin: var(--rhythm-half) 0 0 0; font-family: var(--font-serif); color: var(--m-navy); } .verse-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.74rem; color: var(--m-gold); margin-right: 0.4em; } .verified::after { content: " \2713"; color: var(--verified); font-family: var(--font-sans); font-size: 0.85em; margin-left: 0.18em; } /* ========================== Masthead ====================== */ .mast { max-width: var(--measure-wide); margin: 0 auto; padding: var(--rhythm) var(--rhythm) var(--rhythm-half); display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--rhythm); border-bottom: 1px solid var(--m-gold); } .mast__back { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--warm-grey-4); } .mast__back:hover { color: var(--m-navy); text-decoration: none; } /* Vestment dot — surfaces the page's liturgical color in the masthead. Tied to the body[data-vestment] token via --rule. Sits between back-link and wordmark on desktop; appears under the back-link on mobile. */ .vest-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--rule, var(--m-blue)); margin: 0 0.65rem 0 0; vertical-align: 0.04em; flex-shrink: 0; } .mast__word { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.08em; text-decoration: none; color: var(--m-navy); display: inline-flex; align-items: baseline; gap: 0.6rem; justify-self: center; min-height: 44px; /* mobile touch target */ padding: 4px 0; } .mast__word em { font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 0.78rem; letter-spacing: 0.02em; color: var(--warm-grey-4); } .mast__tools { display: flex; align-items: center; gap: 1.1rem; justify-self: end; font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; } .mast__tools a { color: var(--warm-grey-4); text-decoration: none; } .mast__tools a:hover { color: var(--m-navy); } #mode-toggle { background: transparent; border: 1px solid var(--warm-grey-2); padding: 4px 10px; font: inherit; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm-grey-4); cursor: pointer; border-radius: 2px; min-height: 28px; } #mode-toggle:hover { color: var(--m-navy); border-color: var(--m-gold); } #mode-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ========================== Colophon ====================== */ .colophon { max-width: var(--measure-wide); margin: var(--rhythm-x3) auto 0; padding: var(--rhythm) var(--rhythm) var(--rhythm-x2); border-top: 1px solid var(--m-gold); display: flex; justify-content: space-between; align-items: flex-start; gap: var(--rhythm); flex-wrap: wrap; font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm-grey-4); } .colophon a { color: var(--warm-grey-4); text-decoration: none; min-height: 24px; padding-block: 4px; display: inline-block; } .colophon a:hover { color: var(--m-navy); } .colophon__nav { display: flex; flex-wrap: wrap; gap: 0.4rem 0.85rem; } .colophon__nav span { color: var(--warm-grey-2); } .colophon__sub { flex-basis: 100%; text-align: center; margin-top: var(--rhythm); padding-top: var(--rhythm); border-top: 1px solid var(--warm-grey-2); font-family: var(--font-serif); font-style: italic; font-size: 0.86rem; letter-spacing: 0.04em; text-transform: none; color: var(--warm-grey-4); } .colophon__sub strong { display: block; font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: 0.74rem; letter-spacing: 0.36em; text-transform: uppercase; color: var(--m-gold-text); margin-bottom: var(--rhythm-half); } /* ========================== Stella Maris (8-pt star) ====== */ /* The only symbolic glyph Mediatrix admits. Inline SVG also supplied as favicon.svg; this class is for in-flow ornamental use. Gold, eight points (four cardinal long, four diagonal short), no drop shadow. */ .stella { display: inline-block; width: 1em; height: 1em; color: var(--m-gold); vertical-align: -0.12em; } .stella svg { display: block; width: 100%; height: 100%; fill: currentColor; } .stella-rule { display: flex; align-items: center; justify-content: center; gap: 0.9rem; margin: var(--rhythm-x2) auto; max-width: 22rem; color: var(--m-gold); } .stella-rule::before, .stella-rule::after { content: ""; flex: 1; height: 1px; background: var(--m-gold); opacity: 0.55; } .stella-rule .stella { width: 1.35rem; height: 1.35rem; } /* ========================== Page shells =================== */ main.wide { max-width: var(--measure-wide); margin: 0 auto; padding: 0 var(--rhythm); min-height: 70vh; } main.prose { max-width: var(--measure-prose); margin: 0 auto; padding: 0 var(--rhythm); min-height: 70vh; } main.reader { max-width: var(--measure-reader); margin: 0 auto; padding: 0 var(--rhythm); min-height: 70vh; } .panel { background: var(--cream); border-top: 3px solid var(--m-gold); padding: var(--rhythm-x2) var(--rhythm-x2); } @media (max-width: 600px) { .panel { padding: var(--rhythm) var(--rhythm); } } /* ========================== Index grid ==================== */ .section-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--rhythm); margin: var(--rhythm-x2) 0 var(--rhythm-x3); } .section-card { border: 1px solid var(--warm-grey-2); background: var(--cream); padding: var(--rhythm) var(--rhythm-half) var(--rhythm) var(--rhythm); text-decoration: none; color: var(--m-navy); display: flex; flex-direction: column; gap: var(--rhythm-half); position: relative; transition: border-color 0.18s ease, transform 0.18s ease; min-height: 9.5rem; } .section-card:hover { border-color: var(--m-gold); text-decoration: none; transform: translateY(-1px); } .section-card:focus-visible { outline: none; box-shadow: var(--focus-ring); } .section-card__num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.74rem; color: var(--m-gold); letter-spacing: 0.05em; } .section-card__title { font-family: var(--font-display); font-weight: 500; font-size: 1.1rem; letter-spacing: 0.03em; line-height: 1.18; } .section-card__sub { font-family: var(--font-serif); font-style: italic; font-size: 0.92rem; line-height: 1.4; color: var(--warm-grey-4); margin-top: auto; } /* ========================== Hero ========================== */ .hero { max-width: var(--measure-wide); margin: 0 auto; padding: var(--rhythm-x3) var(--rhythm) var(--rhythm-x2); text-align: center; position: relative; } .hero__overline { font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--warm-grey-4); margin: 0 0 var(--rhythm); display: inline-flex; align-items: center; gap: 0.7rem; } .hero__overline .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--m-gold); } .hero__word { font-family: var(--font-display); font-weight: 400; /* carved-stone, not billboard */ font-size: clamp(2rem, 9vw, 6.5rem); line-height: 1; letter-spacing: 0.08em; /* paired with weight 400 per editorial skill */ color: var(--m-navy); margin: 0 0 var(--rhythm-half); white-space: nowrap; /* the brand word never breaks; clamp guarantees fit at ≥320 px */ } .hero__pron { font-family: var(--font-serif); font-style: italic; color: var(--warm-grey-4); font-size: 1.05rem; margin: 0 0 var(--rhythm-x2); } .hero__pron em { font-family: var(--font-mono); font-style: normal; font-size: 0.85em; color: var(--m-gold); padding: 0 0.2em; } /* Hero epigraph — a quiet italic Marian declarative beneath the wordmark. Source Serif italic, navy ink, slightly larger than .hero__pron, with wider breathing room above and below. Used on the home page in place of the dictionary-register phonetic line. */ .hero__epigraph { font-family: var(--font-serif); font-style: italic; font-size: 1.18rem; line-height: 1.55; color: var(--m-navy); text-align: center; max-width: 38rem; margin: var(--rhythm-half) auto var(--rhythm-x2); text-wrap: pretty; } .hero__defn { font-family: var(--font-serif); font-size: 1.32rem; line-height: 1.5; color: var(--m-navy); max-width: 54ch; margin: 0 auto var(--rhythm-x2); text-wrap: pretty; } .hero__defn em { color: var(--warm-grey-4); } .hero__corpus { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm-grey-4); margin-top: var(--rhythm-x2); display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; } .hero__corpus strong { color: var(--m-navy); font-family: var(--font-display); font-weight: 500; font-size: 1rem; letter-spacing: 0.02em; } /* ========================== Reading prose styling ========= */ .reader-prose { font-size: 1.0625rem; line-height: 1.62; color: var(--m-navy); } .reader-prose p { margin: 0 0 var(--rhythm); } .reader-prose h2 { margin-top: var(--rhythm-x3); padding-top: var(--rhythm); border-top: 1px solid var(--warm-grey-2); } .reader-prose h3 { margin-top: var(--rhythm-x2); } .reader-prose blockquote { background: var(--cream); padding: var(--rhythm) var(--rhythm-x2); } .reader-prose ul, .reader-prose ol { padding-left: 1.2em; margin: 0 0 var(--rhythm); } .reader-prose li { margin-bottom: 0.4em; } .reader-prose code { font-family: var(--font-mono); font-size: 0.88em; background: var(--warm-grey-2); padding: 0 0.3em; border-radius: 2px; } /* drop cap — first letter of first paragraph */ .reader-prose > p:first-of-type::first-letter { font-family: var(--font-display); font-weight: 400; font-size: 3.6rem; float: left; line-height: 0.92; padding: 0.2rem 0.6rem 0 0; color: var(--m-gold); } /* ========================== Saint card (anthology) ======== */ .saint-card { border-top: 1px solid var(--warm-grey-2); padding: var(--rhythm-x2) 0 var(--rhythm); display: grid; grid-template-columns: 14ch 1fr; gap: var(--rhythm) var(--rhythm-x2); } @media (max-width: 720px) { .saint-card { grid-template-columns: 1fr; gap: var(--rhythm-half); } } .saint-meta { font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--warm-grey-4); } .saint-meta strong { display: block; font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: 1.05rem; letter-spacing: 0.02em; color: var(--m-navy); margin-bottom: 0.2em; } .saint-meta time { display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.74rem; color: var(--m-gold); margin-top: 0.4em; } .saint-quote { font-family: var(--font-serif); font-size: 1.06rem; line-height: 1.55; color: var(--m-navy); margin: 0; padding: 0; border: none; } .saint-quote .source-language { display: block; font-style: italic; color: var(--warm-grey-4); margin-bottom: var(--rhythm-half); } .saint-source { display: block; margin-top: var(--rhythm-half); font-family: var(--font-sans); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--warm-grey-4); } /* Optional inner block for a Latin/Greek patristic witness embedded inside a litany / rosary / office gloss. Style follows the library quote-entry so the reader recognises the same authority-marker across pages. The element spans the full width of its parent grid (title-card is 1fr 1fr). */ .witness { display: block; margin: var(--rhythm-half) 0 var(--rhythm); padding: var(--rhythm-half) 0 var(--rhythm-half) var(--rhythm); border-left: 2px solid var(--m-gold); grid-column: 1 / -1; } .witness__lat, .witness__greek { display: block; font-family: var(--font-serif); font-style: italic; color: var(--m-navy); font-size: 0.98rem; line-height: 1.5; margin: 0 0 0.25em; } .witness__en { display: block; font-family: var(--font-serif); font-size: 0.94rem; line-height: 1.55; color: var(--warm-grey-4); margin: 0; } .witness__en::before { content: "\201C"; color: var(--m-gold); } .witness__en::after { content: "\201D"; color: var(--m-gold); } .witness__cite { display: block; margin-top: 0.35em; font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--m-gold-text); } /* ========================== Rosary ======================== */ .mystery { padding: var(--rhythm-x2) 0; border-top: 1px solid var(--warm-grey-2); } .mystery__kicker { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--warm-grey-4); margin: 0 0 var(--rhythm-half); } .mystery__title { font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; letter-spacing: 0.03em; margin: 0 0 var(--rhythm); color: var(--m-navy); } .mystery__row { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--rhythm-half) var(--rhythm); margin-bottom: var(--rhythm); align-items: baseline; } @media (max-width: 600px) { .mystery__row { grid-template-columns: 1fr; gap: 0.1rem; margin-bottom: var(--rhythm-half); } } .mystery__row dt { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--m-gold-text); } .mystery__row dd { margin: 0; font-family: var(--font-serif); } /* ========================== Litany ======================== */ .litany-group { margin: var(--rhythm-x2) 0; } .litany-group__head { font-family: var(--font-sans); font-size: 0.74rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--m-gold-text); padding-bottom: var(--rhythm-half); border-bottom: 1px solid var(--m-gold); margin: 0 0 var(--rhythm-x2); } .title-card { padding: var(--rhythm) 0; border-bottom: 1px solid var(--warm-grey-2); display: grid; grid-template-columns: 1fr 1fr; gap: var(--rhythm-half) var(--rhythm-x2); align-items: baseline; } @media (max-width: 720px) { .title-card { grid-template-columns: 1fr; } } .title-card__lat { font-family: var(--font-display); font-weight: 500; font-size: 1.18rem; letter-spacing: 0.03em; color: var(--m-navy); } .title-card__en { font-family: var(--font-serif); font-style: italic; font-size: 1.04rem; color: var(--warm-grey-4); } .title-card__gloss { grid-column: 1 / -1; font-family: var(--font-serif); font-size: 0.95rem; line-height: 1.55; color: var(--m-navy); margin-top: var(--rhythm-half); } .title-card__gloss em { color: var(--warm-grey-4); } .title-card__roots { grid-column: 1 / -1; font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm-grey-4); margin-top: var(--rhythm-half); } .title-card__roots a { color: var(--m-blue); } /* ========================== Apparition card ============== */ .apparition { padding: var(--rhythm-x2) 0; border-top: 1px solid var(--warm-grey-2); } .apparition__head { display: grid; grid-template-columns: 1fr auto; gap: var(--rhythm-half); align-items: baseline; margin-bottom: var(--rhythm); } .apparition__title { font-family: var(--font-display); font-weight: 500; font-size: 1.6rem; letter-spacing: 0.03em; color: var(--m-navy); margin: 0; } .apparition__year { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 0.95rem; color: var(--m-gold); } .apparition__sub { font-family: var(--font-serif); font-style: italic; color: var(--warm-grey-4); margin: 0 0 var(--rhythm); } .apparition dl { display: grid; grid-template-columns: 8rem 1fr; gap: var(--rhythm-half) var(--rhythm); margin: var(--rhythm) 0; } @media (max-width: 600px) { .apparition dl { grid-template-columns: 1fr; gap: 0.1rem; } } .apparition dt { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--m-gold-text); } .apparition dd { margin: 0; font-family: var(--font-serif); } /* ========================== Provenance badges ============ */ /* Provenance markers — tracked small-caps with a leading colored dot. No enclosing box, no rounded corners: the typography is the badge. The dot is set in the provenance color so the eye can scan a long anthology page and parse provenance at a glance. */ .prov { display: inline-flex; align-items: baseline; gap: 0.4em; font-family: var(--font-sans); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--warm-grey-4); margin-left: 0.4em; vertical-align: 0.1em; white-space: nowrap; } .prov::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--warm-grey-3); transform: translateY(-0.18em); } .prov.verbatim { color: var(--verified); } .prov.verbatim::before { background: var(--verified); } .prov.traditional { color: var(--m-gold-text); } .prov.traditional::before { background: var(--m-gold); } .prov.disputed { color: var(--m-rose-deep); } .prov.disputed::before { background: var(--m-rose); } .prov.liturgical { color: var(--m-blue); } .prov.liturgical::before { background: var(--m-blue); } .prov.magisterial { color: var(--m-navy); } .prov.magisterial::before { background: var(--m-navy); } /* ========================== Tables ======================== */ table.ref { width: 100%; border-collapse: collapse; margin: var(--rhythm) 0 var(--rhythm-x2); font-family: var(--font-serif); } table.ref th, table.ref td { padding: 0.6em 0.8em; text-align: left; border-bottom: 1px solid var(--warm-grey-2); vertical-align: top; } table.ref th { font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--m-gold-text); font-weight: 500; } table.ref tr:hover td { background: var(--wash, transparent); } /* ========================== Pending / placeholder ======== */ .pending { font-family: var(--font-sans); font-size: 0.74rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--warm-grey-3); border: 1px dashed var(--warm-grey-3); padding: 2px 8px; margin-left: 0.4em; border-radius: 2px; } /* ========================== Mobile: 600px collapse ============ */ /* Touch targets meet WCAG 2.5.5 / iOS HIG 44 px floor below 600 px. Masthead collapses: back-link + Vigil button on row 1, wordmark (subtitle hidden) centered on row 2, single cross-link on row 3. */ @media (max-width: 600px) { .mast { grid-template-columns: 1fr auto; grid-template-areas: "back tools" "word word"; padding: var(--rhythm-half) var(--rhythm); row-gap: var(--rhythm-half); } .mast__back { grid-area: back; } .mast__tools { grid-area: tools; } .mast__word { grid-area: word; font-size: 1.2rem; justify-self: center; } .mast__word em { display: none; } .mast__tools { gap: var(--rhythm-half); } /* Keep only Vigil button + the first cross-link on mobile; hide secondary cross-links. */ .mast__tools a + a { display: none; } /* If a page has no back-link, leave the slot empty rather than collapse. */ /* Colophon mobile layout: stack the three pieces vertically with even rhythm instead of letting them wrap into ragged horizontal rows. */ .colophon { flex-direction: column; align-items: center; text-align: center; gap: var(--rhythm); } .colophon__nav { justify-content: center; gap: 0.4rem 0.85rem; } /* Touch targets — every tappable element 44×44 minimum */ .colophon a, .mast__back, .mast__tools a, #mode-toggle, .recents__item, .section-card, .feature__panel, .tag { min-height: 44px; padding-block: 10px; display: inline-block; } .feature__cta { min-height: 44px; padding-block: 12px; display: inline-block; } #mode-toggle { padding: 10px 14px; } /* Hero stats — collapse to 2 columns instead of ragged wrap */ .hero__corpus { display: grid; grid-template-columns: 1fr 1fr; gap: var(--rhythm-half) var(--rhythm); text-align: center; } /* H2 tightening below 600 px — long titles like "Old Testament — the typological foundation" sat 16 px past their narrow column at the desktop 0.03em letter-spacing. Tighten to 0.015em on mobile so each word fits within the column without forcing mid-word breaks ("TYPOLOGI-CAL" reads worse than a longer wrap). */ h2 { letter-spacing: 0.015em; } } /* ========================== History chip + popover-card ======== Reusable pattern shared across the devotional surfaces (rosary, litany, anything that needs a deep-history fold). The chip is a small editorial pill — tracked sans-caps, gold-bordered — that opens a native HTML popover-card. The card uses the editorial register of the rest of the site: cream paper, gold rules top + bottom, Cinzel title, Source Serif body, ::backdrop dimmed deep navy. Hidden on paper. */ /* History link — a marginal-note marker, not a button-pill. A leading Stella Maris, tracked small caps in gold, a hairline rule under the text on hover. No enclosure: the typography carries the affordance. */ .history-chip { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: var(--rhythm); padding: 0.4rem 0; background: transparent; border: none; color: var(--m-gold-text); font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.28em; text-transform: uppercase; cursor: pointer; border-bottom: 1px solid transparent; transition: border-bottom-color 0.18s ease, color 0.18s ease; } .history-chip:hover { border-bottom-color: var(--m-gold); color: var(--m-navy); } .history-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 2px; } .history-chip__star { width: 0.85em; height: 0.85em; color: var(--m-gold); } .history-chip:hover .history-chip__star { color: var(--m-navy); } .popover-card { margin: auto; max-width: 580px; width: calc(100vw - 2rem); max-height: calc(100vh - 4rem); overflow-y: auto; padding: 0; border: none; background: var(--cream); color: var(--m-navy); border-top: 3px solid var(--m-gold); border-bottom: 3px solid var(--m-gold); box-shadow: 0 24px 48px rgba(12, 35, 64, 0.22); } .popover-card::backdrop { background: rgba(12, 35, 64, 0.55); backdrop-filter: blur(3px); } .popover-card__body { padding: var(--rhythm-x2) var(--rhythm-x2); font-family: var(--font-serif); } .popover-card__close { position: absolute; top: 0.6rem; right: 0.8rem; width: 36px; height: 36px; background: transparent; border: none; font-family: var(--font-display); font-size: 1.3rem; color: var(--warm-grey-4); cursor: pointer; line-height: 1; } .popover-card__close:hover { color: var(--m-navy); } .popover-card__kicker { font-family: var(--font-sans); font-size: 0.7rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--m-gold-text); margin: 0 0 var(--rhythm-half); display: inline-flex; align-items: center; gap: 0.6rem; } .popover-card__kicker .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--m-gold); } .popover-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; letter-spacing: 0.03em; color: var(--m-navy); margin: 0 0 var(--rhythm-half); line-height: 1.15; } .popover-card__lede { font-family: var(--font-serif); font-style: italic; color: var(--warm-grey-4); line-height: 1.55; margin: 0 0 var(--rhythm); } .popover-card p { font-family: var(--font-serif); color: var(--m-navy); line-height: 1.62; margin: 0 0 var(--rhythm); } .popover-card p em { font-style: italic; } .popover-card .latin { font-family: var(--font-serif); font-style: italic; } .popover-card blockquote { margin: var(--rhythm) 0; padding: 0 var(--rhythm); border-left: 2px solid var(--m-gold); font-family: var(--font-serif); font-style: italic; color: var(--m-navy); line-height: 1.55; } .popover-card blockquote cite { display: block; margin-top: var(--rhythm-half); font-family: var(--font-sans); font-style: normal; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--warm-grey-4); } .popover-card__tag { text-align: center; margin: var(--rhythm-x2) 0 var(--rhythm); font-family: var(--font-serif); font-style: italic; font-size: 1.08rem; color: var(--m-gold-text); } .popover-card__refs { margin: var(--rhythm) 0 0; padding-top: var(--rhythm); border-top: 1px solid var(--warm-grey-2); font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--warm-grey-4); line-height: 1.6; } @media print { .history-chip, .popover-card { display: none !important; } } /* ========================== Print ========================= */ /* Marian print colophon: the existing .colophon__sub block becomes the Eucharistic-equivalent close on paper — 8-pointed Stella Maris above Sub tuum praesidium. The body of every print is closed with Mary's protection, in continuity with the screen experience. */ @media print { /* Page setup — leave the printer's chrome and OS margins, just tune the inside of the page to a real reading register: 11/14 with justified hyphenation, widows/orphans protected, headings glued to their bodies, Marian Stella above Sub tuum at the colophon. */ @page { margin: 1.6cm 1.8cm; } html, body { background: white; color: black; font-size: 11pt; /* body */ line-height: 1.32; /* tight enough for 11pt to read as 11/14.5 */ -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Strip screen chrome that doesn't belong on paper. */ .mast, .mast__tools, #mode-toggle, .colophon__nav, .chant-chip, .recents, .feature, .section-grid, .skip-link, #mode-toggle, .todays-feast { display: none !important; } /* Override screen measures — paper has its own column. */ main, main.library, main.prose, .lib-hero, .reader-prose, .preamble, .synthesis, .ot-prequel, .era, .passage, .litany-group { max-width: none; padding-left: 0; padding-right: 0; } /* Body prose — justified with hyphenation, widow/orphan protection. */ p, li, dd { orphans: 3; widows: 3; hyphens: auto; -webkit-hyphens: auto; } /* Don't hyphenate Latin/Greek inline-italic blocks (hyphens are wrong for these). */ .latin, .greek, .romance, em, i, cite, code, .latin em { hyphens: manual; -webkit-hyphens: manual; } /* Headings stay glued to the paragraph that follows. Cinzel reads as inscriptional capitals; weight stays at 400 in print too. */ h1, h2, h3, h4 { page-break-after: avoid; break-after: avoid-page; color: black; } h1 { font-size: 22pt; letter-spacing: 0.06em; } h2 { font-size: 15pt; letter-spacing: 0.04em; } h3 { font-size: 12pt; letter-spacing: 0.03em; } /* Force new page between major sections in the long-form pages. */ section.era, section.passage, section.obj, .litany-group { page-break-before: auto; } section.era + section.era, section.passage + section.passage, section.obj + section.obj { page-break-before: always; } /* Atoms that must not be split across pages. */ blockquote, .saint-card, .title-card, .quote-entry, .mystery, .feast, .apparition, .obj__steel, .witness, .greek-block, .layer, table { page-break-inside: avoid; break-inside: avoid; } /* Witness blocks lose the cream tint on paper and gain a thin rule. */ .witness { background: transparent; border-left: 1.5pt solid #555; padding: 0.4em 0 0.2em 0.8em; } .witness__lat { font-style: italic; } .witness__cite { color: #555; font-size: 0.84em; } /* Colophon — keep the screen experience: Stella Maris above the Eucharistic close. Quiet, centered, hairline above. */ .colophon { border: none; display: block; text-align: center; margin: 2em auto 1em; padding: 1em 0 0; border-top: 1pt solid #888; } .colophon > .small-caps { display: none; } /* drop the per-page count strip */ .colophon__sub { flex-basis: auto; border: none; margin: 0; padding: 0; text-align: center; font-size: 0.92em; } .colophon__sub::before { content: ""; display: block; width: 28pt; height: 28pt; margin: 0 auto 0.55em; background-image: url("../favicon.svg"); background-size: contain; background-repeat: no-repeat; background-position: center; } .colophon__sub strong { display: block; font-family: var(--font-display); font-weight: 400; font-size: 0.8em; letter-spacing: 0.32em; text-transform: uppercase; color: #000; margin-bottom: 0.4em; } /* Links: don't dress them as hyperlinks; print the URL in fine print after the link text for offline reference (Father Sean wants to follow a citation from a paper hand-out). */ a { color: black; text-decoration: none; } a[href^="http"]::after, a[href*=".html"]::after { content: " (" attr(href) ")"; font-size: 0.74em; color: #555; } /* Suppress the URL print for in-page anchors (#s17 etc.) and short fragments — they're not useful on paper. */ a[href^="#"]::after, a[href$=".html"]::after { content: ""; } }