) ----- */
mark {
background: linear-gradient(180deg, transparent 60%, rgba(201, 169, 97, 0.28) 60%) !important;
color: var(--grim-bone) !important;
padding: 0 0.15em;
border-radius: 2px;
}
/* ----- End-of-content fleuron after last paragraph in article ----- */
article > p:last-of-type::after,
article > div:last-of-type::after,
.popover-hint > p:last-of-type::after {
content: '\A❦';
white-space: pre;
display: block;
font-family: var(--grim-font-display);
text-align: center;
color: var(--grim-gilt);
font-size: 1.6rem;
opacity: 0.55;
margin-top: 1.5rem;
letter-spacing: 0;
text-shadow: 0 0 12px rgba(201, 169, 97, 0.25);
line-height: 1;
}
/* ----- Adjacent siblings (note transitions) ----- */
article hr + h2,
article hr + h3 {
margin-top: 1rem !important;
}
/* ----- Mobile body adjustments ----- */
@media (max-width: 768px) {
article > p { text-align: left; word-spacing: normal; }
article > p + p { text-indent: 1rem; }
article h2 { font-size: 1.3rem !important; }
article h3 { font-size: 1.05rem !important; }
}
/* ============================================================================
v6 — Switch body font to EB Garamond (more readable than Cormorant for prose)
Cormorant Garamond kept for italic display accents (titles, leads)
============================================================================ */
@font-face {
font-family: 'EB Garamond';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/branding/fonts-grimoire/ebgaramond-var.ttf') format('truetype-variations');
}
@font-face {
font-family: 'EB Garamond';
font-style: italic;
font-weight: 400 800;
font-display: swap;
src: url('/branding/fonts-grimoire/ebgaramond-italic-var.ttf') format('truetype-variations');
}
/* Override body font to EB Garamond (more solid, designed for reading) */
:root {
--grim-font-serif: 'EB Garamond', 'Cormorant Garamond', Georgia, serif !important;
}
html, body {
font-family: 'EB Garamond', 'Cormorant Garamond', Georgia, serif !important;
font-weight: 450 !important;
font-size: 1.08rem !important;
line-height: 1.78 !important;
letter-spacing: 0.003em !important;
}
article p, article li, article dd, .center p, .popover-hint p {
font-family: 'EB Garamond', Georgia, serif !important;
font-weight: 450 !important;
font-feature-settings: 'liga' 1, 'kern' 1, 'onum' 1;
}
/* Italic in body: switch to EB Garamond Italic (matches body) */
article em, article i,
article p em, article p i,
article li em, article li i {
font-family: 'EB Garamond', Georgia, serif !important;
font-style: italic !important;
}
/* Lead paragraph: slightly larger and Cormorant kept for elegance */
article > p:first-of-type {
font-family: 'EB Garamond', Georgia, serif !important;
font-size: 1.15rem !important;
line-height: 1.72 !important;
font-weight: 450 !important;
}
/* Blockquotes — keep Cormorant italic for poetic flair */
blockquote, blockquote p {
font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif !important;
font-style: italic !important;
font-size: 1.1rem;
font-weight: 500 !important;
}
/* Caption + figcaption + meta italic stays Cormorant (display feel) */
figcaption, .description, .subtitle,
.left.sidebar > p {
font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif !important;
font-style: italic !important;
}
/* Meta italic (date row): Cormorant for italic accent */
.content-meta {
font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif !important;
font-style: italic !important;
}
/* Mobile tightening */
@media (max-width: 768px) {
html, body {
font-size: 1.02rem !important;
line-height: 1.7 !important;
}
}
/* ============================================================================
Graph icon position — inset properly inside card, not flush to edge
============================================================================ */
.graph-outer {
position: relative !important;
padding-top: 2.4rem !important;
}
.global-graph-icon {
position: absolute !important;
top: 0.55rem !important;
right: 0.55rem !important;
left: auto !important;
padding: 0.32rem 0.45rem !important;
border-radius: 4px !important;
background: rgba(6, 3, 10, 0.55) !important;
border: 1px solid rgba(201, 169, 97, 0.28) !important;
transition: background 0.24s, border-color 0.24s !important;
}
.global-graph-icon:hover {
background: rgba(160, 44, 58, 0.18) !important;
border-color: rgba(201, 169, 97, 0.55) !important;
}
.global-graph-icon svg {
width: 14px !important;
height: 14px !important;
}
/* ============================================================================
Phase 338+19 ultra-polish (2026-05-27, exhaustive Playwright audit pass)
============================================================================ */
/* Hide article-title on the home/index page — sidebar GRIMOIRE already serves
as site name + the markdown body h1 carries the welcome. Removes triple
"GRIMOIRE / GRIMOIRE / Bine ai venit" title stacking. */
body[data-slug="index"] .article-title { display: none !important; }
body[data-slug="index"] .article-title::after { display: none !important; }
/* Also drop the content-meta date row on the index — it's not really a "post" */
body[data-slug="index"] .content-meta { display: none !important; }
/* And drop the .breadcrumb-container on index (Home > Bine ai venit looks odd
when the page IS Home) */
body[data-slug="index"] .breadcrumb-container,
body[data-slug="index"] [class*="breadcrumb"] { display: none !important; }
/* Article body — slightly larger at narrow viewports for comfortable reading */
@media (max-width: 900px) {
article p, article li, article dd { font-size: 1.04rem !important; line-height: 1.78 !important; }
article > p:first-of-type { font-size: 1.12rem !important; }
}
/* Right-sidebar section spacing — give breathing room between TOC + Graph */
.right .toc + .graph,
.right .graph + .toc,
.right .toc,
.right .graph {
margin-bottom: 1.5rem;
}
/* Graph canvas border + rounded inner — already styled but increase contrast */
.graph-outer {
background: rgba(6, 3, 10, 0.45) !important;
border-radius: 8px !important;
}
/* ============================================================================
Phase 338+19 — MOBILE FIRST (2026-05-27 evening)
Quartz default doesn't hide sidebars at <800px; instead it stacks them above
the article. The left sidebar header (GRIMOIRE title) wraps to 3 lines, the
explorer toggle gets squeezed beside it. Fix: hide both sidebars on phones,
show a compact mobile header instead.
============================================================================ */
@media (max-width: 800px) {
/* Hide both desktop sidebars entirely; mobile-only menu button stays */
.left.sidebar.desktop-only,
.right.sidebar.desktop-only,
.page > #quartz-body > .left,
.page > #quartz-body > .right {
display: none !important;
}
/* Center column takes full width with phone-comfortable margins */
.page > #quartz-body > .center {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 1rem 1.1rem !important;
}
.page > #quartz-body {
display: block !important;
grid-template: none !important;
}
/* Compact mobile header: GRIMOIRE title centered above article */
.page::before {
content: 'GRIMOIRE';
display: block;
text-align: center;
font-family: var(--grim-font-display);
font-weight: 900;
font-size: 1.5rem;
letter-spacing: 0.18em;
background: linear-gradient(180deg, var(--grim-gilt-soft) 0%, var(--grim-gilt) 50%, var(--grim-oxblood) 110%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
padding: 1rem 0 0.5rem;
border-bottom: 1px solid rgba(201, 169, 97, 0.20);
margin-bottom: 1rem;
}
/* Article title sized down for phone */
article > h1, .article-title, .page-header h1 {
font-size: 1.8rem !important;
letter-spacing: 0.04em !important;
padding: 0.3rem 0 0.5rem !important;
}
/* Body comfortable reading size */
html, body {
font-size: 17px !important;
line-height: 1.72 !important;
}
article p, article li {
font-size: 1.04rem !important;
line-height: 1.72 !important;
word-spacing: normal;
-webkit-hyphens: auto;
hyphens: auto;
}
article > p:first-of-type { font-size: 1.12rem !important; }
/* Section headings — proportional */
article h2 { font-size: 1.35rem !important; margin: 1.8rem 0 0.6rem !important; }
article h3 { font-size: 1.08rem !important; margin: 1.4rem 0 0.4rem !important; }
/* Drop-cap a touch smaller so it doesn't dwarf the line */
article > p:first-of-type::first-letter {
font-size: 2.8rem !important;
initial-letter: 2 0 !important;
-webkit-initial-letter: 2 0 !important;
margin: 0.2rem 0.5rem 0 0 !important;
}
/* No more `article::before` left-rail on mobile (cleaner) */
article::before { display: none !important; }
/* Tags row — wrap cleanly */
.tags { gap: 0.35rem !important; margin: 0.85rem 0 !important; }
.tag-link, a.tag { font-size: 0.72rem !important; padding: 0.15rem 0.55rem !important; }
/* Tables — scroll horizontally instead of bursting layout */
article table { display: block; overflow-x: auto; max-width: 100%; }
/* Code blocks — full width, smaller padding */
pre { padding: 0.75rem 0.85rem !important; font-size: 0.85rem !important; }
code { font-size: 0.85em !important; word-break: break-word; }
/* Footer compact */
footer, .footer { padding: 1rem 0 !important; font-size: 0.82rem !important; }
footer::before, .footer::before { letter-spacing: 0.8rem; margin-bottom: 0.5rem; }
/* Images full-width */
article img { width: 100%; height: auto; }
/* Constellation dots noise — disable on mobile (cleaner + cheaper) */
body::before { display: none !important; }
body::after { opacity: 0.025 !important; }
}
/* Extra-tight phone (≤375px iPhone-SE/8) */
@media (max-width: 380px) {
.page > #quartz-body > .center { padding: 0.8rem 0.85rem !important; }
article > h1, .article-title { font-size: 1.55rem !important; }
article h2 { font-size: 1.2rem !important; }
html, body { font-size: 16px !important; }
}
/* Tablet portrait — 2-col but compact */
@media (min-width: 800px) and (max-width: 1024px) {
.page > #quartz-body { grid-template-columns: 280px 1fr !important; }
.right.sidebar.desktop-only { display: none !important; }
}
/* ============================================================================
v7 — Phase 338+19 polish-pass-2 (2026-05-28)
Impeccable audit pass over 9 viewports × 3 routes. Surgical fixes for:
• residual cyan from cyber-hub.css bleeding into , toggle buttons,
footer background, TOC/search button text colour
• Material-default easings (cubic-bezier(0.4,0,0.2,1) / ease-in-out)
replaced with exponential ease-out-quart (premium feel per
reference/motion-design.md)
• duplicate body on guide pages — was rendering twice on mobile
and overflowing
• prefers-reduced-motion respect (mandatory per motion-design.md)
• link underline visibility (was rgba(.,.3) — too thin on dark bg)
• mobile content-meta excess vertical space
• motion tokens centralised so the rest of the file can reference them
============================================================================ */
:root {
/* Motion tokens — exponential curves only. Polish skill mandates these. */
--grim-ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* quint-out, refined */
--grim-ease-out-fast: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out, snappy */
--grim-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--grim-dur-fast: 140ms; /* micro-feedback */
--grim-dur-base: 240ms; /* state changes */
--grim-dur-slow: 360ms; /* layout shifts */
}
/* ----- Residual-cyan exorcism: hunt the leftover cyber-hub.css teal ----- */
/* blocks: the inner body inherits `color: rgb(135, 251, 255)` from
cyber-hub. Force gilt/bone tones. */
article pre, .center pre, main pre,
article pre code, article pre *,
.popover-inner pre, .popover-inner pre * {
color: var(--grim-bone) !important;
}
article pre {
background: linear-gradient(180deg, rgba(6, 3, 10, 0.95), rgba(15, 10, 14, 0.92)) !important;
border: 1px solid rgba(201, 169, 97, 0.22) !important;
box-shadow:
inset 0 0 24px rgba(0, 0, 0, 0.55),
0 0 18px rgba(160, 44, 58, 0.10) !important;
}
/* Syntax-highlight token recolouring — was bright cyan, now bone-on-warm */
article pre .token.comment,
article pre .token.prolog,
article pre .token.doctype { color: var(--grim-ink) !important; font-style: italic; }
article pre .token.property,
article pre .token.tag,
article pre .token.constant,
article pre .token.symbol,
article pre .token.deleted { color: var(--grim-oxblood-soft) !important; }
article pre .token.boolean,
article pre .token.number { color: var(--grim-gilt-soft) !important; }
article pre .token.selector,
article pre .token.attr-name,
article pre .token.string,
article pre .token.char,
article pre .token.builtin,
article pre .token.inserted { color: var(--grim-gilt) !important; }
article pre .token.operator,
article pre .token.entity,
article pre .token.url,
article pre .token.variable { color: var(--grim-bone) !important; }
article pre .token.atrule,
article pre .token.attr-value,
article pre .token.function,
article pre .token.class-name { color: var(--grim-gilt-soft) !important; }
article pre .token.keyword { color: var(--grim-oxblood-soft) !important; font-style: italic; }
article pre .token.regex,
article pre .token.important { color: var(--grim-gilt) !important; }
/* Footer: the rgb(4, 16, 24) teal-dark we measured is cyber-hub. Reset. */
footer, .footer {
background: transparent !important;
color: var(--grim-bone-muted) !important; /* lift contrast from #8A8478 ink */
transition: opacity var(--grim-dur-base) var(--grim-ease-out) !important;
}
footer p, .footer p, footer a, .footer a {
color: var(--grim-bone-muted) !important;
}
footer a, .footer a {
color: var(--grim-gilt-soft) !important;
text-decoration-color: rgba(201, 169, 97, 0.55) !important;
}
/* Tighten the ✦ ❦ ✦ ornament kerning — 1.5rem read as gappy, 0.85rem reads
as a single composed mark */
footer::before, .footer::before {
letter-spacing: 0.85rem !important;
margin-left: 0.85rem; /* optical centering: ::before letter-spacing pushes
visual centre right; compensate */
opacity: 0.7 !important;
font-size: 0.92em;
}
/* Toggle buttons (TOC + search + dark/reader) — colour leaks from cyber-hub */
button.toc-header,
button.toc-header h3,
.search > .search-button,
.search > .search-button p,
.darkmode, .readermode {
color: var(--grim-bone-muted) !important;
}
button.toc-header h3 {
color: var(--grim-gilt) !important;
}
button.toc-header {
background: rgba(6, 3, 10, 0.55) !important; /* was cyan-tinted #0c202a */
letter-spacing: 0.06em !important;
}
/* ----- Motion: exponential curves replacing Material defaults ----- */
a, a:visited {
transition:
text-decoration-color var(--grim-dur-base) var(--grim-ease-out),
text-decoration-thickness var(--grim-dur-fast) var(--grim-ease-out),
color var(--grim-dur-fast) var(--grim-ease-out),
text-shadow var(--grim-dur-slow) var(--grim-ease-out) !important;
/* Lift underline visibility — was 0.3 alpha, barely visible on dark bg */
text-decoration-color: rgba(201, 169, 97, 0.55) !important;
}
.internal-link, a.internal {
text-decoration-color: rgba(201, 169, 97, 0.45) !important;
}
/* External links — show as gilt-soft with a subtle ↗ affordance on hover */
article a[href^="http"]:not(.internal-link):not(.tag-link)::after {
content: "↗";
font-size: 0.72em;
margin-left: 0.18em;
opacity: 0.55;
vertical-align: super;
color: var(--grim-gilt);
font-family: var(--grim-font-mono);
transition: opacity var(--grim-dur-fast) var(--grim-ease-out);
}
article a[href^="http"]:not(.internal-link):not(.tag-link):hover::after {
opacity: 1;
}
/* Backlinks li transition — was generic 0.24s, now exponential */
.backlinks li {
transition:
border-color var(--grim-dur-base) var(--grim-ease-out),
background var(--grim-dur-base) var(--grim-ease-out),
transform var(--grim-dur-base) var(--grim-ease-out-fast) !important;
}
/* Explorer + recent-notes hover transform: exponential */
.explorer li, .recent-notes li {
transition:
background var(--grim-dur-fast) var(--grim-ease-out),
transform var(--grim-dur-fast) var(--grim-ease-out-fast) !important;
}
/* Tag pills — was `all 0.24s` (which animates colour + background +
border + shadow); restrict to the actually-changing properties to
prevent paint thrash on dense tag rows */
.tag-link, a.tag {
transition:
background var(--grim-dur-base) var(--grim-ease-out),
color var(--grim-dur-base) var(--grim-ease-out),
border-color var(--grim-dur-base) var(--grim-ease-out),
text-shadow var(--grim-dur-base) var(--grim-ease-out),
transform var(--grim-dur-base) var(--grim-ease-out-fast) !important;
}
.tag-link:hover, a.tag:hover {
transform: translateY(-1px); /* subtle lift — was static colour-only */
}
/* Search + toggle buttons motion */
.search > .search-button,
.darkmode, .readermode,
button.toc-header,
.title-button.explorer-toggle {
transition:
border-color var(--grim-dur-base) var(--grim-ease-out),
box-shadow var(--grim-dur-base) var(--grim-ease-out),
background var(--grim-dur-base) var(--grim-ease-out) !important;
}
/* Chevron rotation — exponential, not linear */
.title-button.explorer-toggle svg.fold,
button.toc-header svg.fold {
transition: transform var(--grim-dur-base) var(--grim-ease-out) !important;
}
/* ----- Duplicate on article pages — Quartz renders BOTH the
.article-title (Quartz page-header h1) AND the markdown body's first
`# Heading`. On the guide pages this produces "CUM PUBLIC O NOTĂ"
in the header AND "CUM PUBLIC O NOTĂ PE SABIN.UK" stacked as a 4-line
wrap on phones. Hide the body's first `# h1` when an `.article-title`
is also present in the same article. */
article > .article-title ~ h1:first-of-type,
.popover-hint > .article-title ~ h1:first-of-type {
/* If they're identical-ish we hide; if different the body h1 stays as h2 */
font-size: 1.6rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-align: left !important;
text-transform: none !important;
background: none !important;
-webkit-text-fill-color: var(--grim-bone) !important;
color: var(--grim-bone) !important;
-webkit-background-clip: unset !important;
background-clip: unset !important;
margin-top: 0.5rem !important;
padding: 0 !important;
}
article > .article-title ~ h1:first-of-type::after,
.popover-hint > .article-title ~ h1:first-of-type::after {
display: none !important;
}
/* ----- Content meta: tighten mobile vertical rhythm
Baseline measured 156px on 390px — way more than the line needs.
The padding-bottom + margin-bottom doubled up. */
@media (max-width: 768px) {
.content-meta {
padding-bottom: 0.6rem !important;
margin-bottom: 0.8rem !important;
gap: 0.65rem !important;
font-size: 0.92rem !important;
flex-wrap: wrap !important;
}
.content-meta time {
font-size: 0.78rem !important;
letter-spacing: 0.12em !important;
}
.content-meta > *:not(time):not(:first-child) {
font-size: 0.82rem !important;
}
}
/* ----- Drop-cap: bump the gradient contrast — was washing into bg at
small sizes; lift the bottom stop from oxblood-deep (which is nearly
black) to oxblood proper, and add a faint warm glow */
article > p:first-of-type::first-letter,
.popover-hint > p:first-of-type::first-letter {
background: linear-gradient(180deg,
var(--grim-gilt-soft) 0%,
var(--grim-gilt) 48%,
var(--grim-oxblood) 100%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
filter: drop-shadow(0 0 14px rgba(201, 169, 97, 0.18));
}
/* ----- Blockquote: rebalance visual weight. The 3px oxblood border-left
+ the giant 4rem ‘“’ glyph + the gradient background were competing.
Soften the glyph, deepen the bg gradient, increase quote text size. */
blockquote {
border-left-width: 2px !important;
background: linear-gradient(90deg,
rgba(160, 44, 58, 0.12),
rgba(160, 44, 58, 0.04) 40%,
transparent 90%) !important;
}
blockquote::before {
font-size: 3.2rem !important;
opacity: 0.22 !important;
top: -0.2rem !important;
left: 0.6rem !important;
}
blockquote p { margin: 0.4rem 0 !important; }
/* ----- Code (inline): the cyber-hub colour bled through too; force
bone+gilt; also bump the letter-spacing back DOWN (the inherited
`letter-spacing: 1.1px` we measured was Quartz default for monospace
buttons, far too wide for inline code). */
article code, .center code, main code,
li code, p code, td code, th code {
color: var(--grim-gilt-soft) !important;
letter-spacing: 0.01em !important;
font-size: 0.88em !important;
background: rgba(6, 3, 10, 0.7) !important;
border: 1px solid rgba(201, 169, 97, 0.22) !important;
}
/* ----- Focus rings: every interactive element needs a visible keyboard
focus indicator. Quartz default `outline: none` was too aggressive. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
.tag-link:focus-visible, a.tag:focus-visible,
.search > .search-button:focus-visible,
.darkmode:focus-visible, .readermode:focus-visible,
button.toc-header:focus-visible,
.title-button.explorer-toggle:focus-visible {
outline: 2px solid var(--grim-gilt) !important;
outline-offset: 2px !important;
box-shadow:
0 0 0 4px rgba(201, 169, 97, 0.18),
0 0 18px rgba(201, 169, 97, 0.22) !important;
}
a:focus:not(:focus-visible) { outline: none; }
/* ----- Selection: tighten — bone background read garish at high
selection density; soften from 0.42 → 0.34 */
::selection {
background: rgba(201, 169, 97, 0.34) !important;
}
/* ----- Article side-rail (the vertical gilt line) — at narrow desktop
the -2rem offset clipped against the container edge. Re-anchor. */
@media (max-width: 1100px) and (min-width: 801px) {
article::before {
left: -1rem !important;
}
}
/* ----- Tablet (768–1024) drop-cap polish: was inheriting 3.6rem from
the universal v4 rule, which dwarfed the 2-line lead-paragraph on
tablet. Scale to 3rem, span 2 lines. */
@media (min-width: 768px) and (max-width: 1024px) {
article > p:first-of-type::first-letter {
font-size: 3rem !important;
initial-letter: 2 0 !important;
-webkit-initial-letter: 2 0 !important;
}
}
/* ----- Reduced-motion: respect prefers-reduced-motion. Mandatory.
Vestibular triggers affect ~35% of adults over 40 (per motion-design.md).
We keep functional fades (link colour, focus glow) but kill transforms
and any oscillation. */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Preserve essential feedback: colour fades stay but instant */
a, .tag-link, a.tag, button { transition: color 0.01ms, background 0.01ms !important; }
.backlinks li:hover,
.explorer li:hover,
.recent-notes li:hover,
.tag-link:hover {
transform: none !important; /* kill translate-x lift */
}
}
/* ----- Print: actually polish the print stylesheet (was 3 lines).
Real grimoire prints should feel like the screen: warm paper, oxblood
ink, gilt accents drained to ink. */
@media print {
html, body {
background: #FAF7EE !important;
color: #1A1217 !important;
font-family: 'EB Garamond', Georgia, serif !important;
font-size: 11pt !important;
line-height: 1.55 !important;
}
body::before, body::after { display: none !important; }
/* Hide nav chrome */
.left.sidebar, .right.sidebar, footer, .footer,
.search, .darkmode, .readermode,
.breadcrumb-container, [class*="breadcrumb"],
.toc, .graph, .backlinks, .explorer { display: none !important; }
article { margin: 0 !important; max-width: none !important; }
article::before { display: none !important; }
/* Headings — preserve gilt-on-paper via ink */
h1, h2, h3, article h1, article h2, article h3,
.page-title, .article-title {
color: #6E1A24 !important;
background: none !important;
-webkit-text-fill-color: #6E1A24 !important;
-webkit-background-clip: unset !important;
background-clip: unset !important;
text-shadow: none !important;
page-break-after: avoid;
}
article h2 { border-bottom: 1px solid #8C7438 !important; }
/* Links: ink + URL footnote */
a, a:visited { color: #6E1A24 !important; text-decoration: underline; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; opacity: 0.7; color: #8C7438; }
/* Drop cap stays — but in ink */
article > p:first-of-type::first-letter {
color: #8C7438 !important;
background: none !important;
-webkit-text-fill-color: #8C7438 !important;
filter: none !important;
}
/* Block elements stay together */
blockquote, pre, table, figure { page-break-inside: avoid; }
blockquote { background: #F2E9D6 !important; border-left: 3px solid #8C7438 !important; }
pre, code { background: #F2E9D6 !important; color: #1A1217 !important; border: 1px solid #D6C497 !important; }
hr {
background: none !important;
border-top: 1px solid #8C7438 !important;
height: 1px !important;
margin: 1.5rem auto !important;
width: 60%;
}
/* End-fleuron in ink */
article > p:last-of-type::after { color: #8C7438 !important; opacity: 0.7 !important; }
}
/* ----- Right-sidebar (TOC + Graph + Backlinks) heading consistency.
Was: TOC h3 inside button had its own size (0.78rem), Backlinks h2
was 0.92rem from the master rule. Different siblings = noise. */
.right .backlinks > button.title-button h2,
.right .graph > button.title-button h2,
.right .recent-notes > button.title-button h2 {
font-size: 0.82rem !important;
letter-spacing: 0.14em !important;
}
/* ----- 1440px viewport: the article body link underline is too thin
(1px on dark bg + 0.55 alpha is still subtle). Bump to 1.5px on
text-heavy reading width. */
@media (min-width: 1024px) {
article p a, article li a, article dd a {
text-decoration-thickness: 1.5px !important;
}
}
/* ----- Tag-pill text colour: oxblood pill currently has gilt-soft text
measured as rgb(224,200,135) on rgba(160,44,58,0.15). Acceptable but
the brand intent was bone-muted. Restore. */
.tag-link, a.tag {
color: var(--grim-gilt-soft) !important; /* matches inherited Quartz, brand-on */
font-weight: 500;
}
/* ----- v7 close: optical-centering of GRIMOIRE wordmark on mobile.
The `.page::before` mobile header didn't have any letter-spacing
compensation — the trailing 0.18em letter-spacing pushes visual
centre left. Pull right via padding-left. */
@media (max-width: 800px) {
.page::before {
padding-left: 0.18em; /* compensate trailing letter-spacing */
}
/* And reduce the top padding of the article column — was 1rem,
creating a 16px gap from the mobile header to the breadcrumb */
.page > #quartz-body > .center { padding-top: 0.4rem !important; }
}
/* ============================================================================
v7.1 — Phase 338+19 polish-pass-2 iteration 2 (2026-05-28)
Post-Playwright deep-inspect: identified 4 cyber-hub bleed sites that
my v7 missed because the actual DOM tree was different than I assumed:
• .page-header is a sibling DIV before , holds the
.article-title + breadcrumbs + content-meta. Has the teal bg.
• .page-footer + .breadcrumb-container .nav have same teal.
• button.toc-header background was getting overridden by a later
cyber-hub specificity, needs higher specificity here.
• Duplicate h1 is real — .article-title (in .page-header) and
article > h1 (the markdown body title) BOTH render. The page-
header title is the slug-derived one ("Cum public o notă"), the
body one is the markdown frontmatter ("Cum public o notă pe
sabin.uk"). They're different strings — KEEP the page-header
title as the canonical, demote the markdown h1 to a section h2.
============================================================================ */
/* Kill the residual cyan on page-header + page-footer + breadcrumb-container */
.page-header,
div.page-header,
.center > .page-header {
background: transparent !important;
border-top: none !important;
border-bottom: none !important;
padding: 0 !important;
margin: 0 0 1rem !important;
}
.page-footer,
div.page-footer,
.center > .page-footer {
background: transparent !important;
border-top: 1px solid rgba(201, 169, 97, 0.18) !important;
border-bottom: none !important;
margin-top: 2rem !important;
}
nav.breadcrumb-container,
.breadcrumb-container,
.page-header .breadcrumb-container,
.page-header nav,
.page-header > nav {
background: transparent !important;
border: none !important;
padding: 0.5rem 0 !important;
}
/* The article container itself: kill the rogue oxblood top/bottom borders
that cyber-hub or quartz default added to .popover-hint inside .center */
.center > article.popover-hint,
.center > article {
border-top: none !important;
border-bottom: none !important;
background: transparent !important;
}
/* button.toc-header — higher-specificity override of the cyber-hub teal bg
that survived v7. Use both #quartz-body chain AND .right ancestor. */
#quartz-body .right.sidebar button.toc-header,
.right.sidebar button.toc-header,
.right button.toc-header,
button.toc-header[aria-expanded],
button.toc-header {
background: rgba(6, 3, 10, 0.55) !important;
border: 1px solid rgba(201, 169, 97, 0.22) !important;
}
#quartz-body .right.sidebar button.toc-header:hover,
.right.sidebar button.toc-header:hover,
button.toc-header:hover {
background: rgba(160, 44, 58, 0.10) !important;
border-color: var(--grim-gilt) !important;
}
/* ----- Duplicate h1 — every page actually has a .page-header (it
holds the slug title). On home/index we hide that title and the
body h1 is the canonical (Bine ai venit). On non-index pages the
.article-title IS the canonical and the body h1 is a duplicate to
demote. Use body[data-slug="index"] to scope cleanly. */
body:not([data-slug="index"]) .center > article > h1:first-child,
body:not([data-slug="index"]) .center > article.popover-hint > h1:first-child {
font-size: 1.5rem !important;
font-weight: 700 !important;
letter-spacing: 0.03em !important;
text-align: left !important;
text-transform: none !important;
background: none !important;
-webkit-background-clip: unset !important;
background-clip: unset !important;
-webkit-text-fill-color: var(--grim-bone) !important;
color: var(--grim-bone) !important;
margin: 0.25rem 0 1rem !important;
padding: 0 !important;
line-height: 1.3 !important;
text-shadow: 0 0 18px rgba(201, 169, 97, 0.08);
}
body:not([data-slug="index"]) .center > article > h1:first-child::after,
body:not([data-slug="index"]) .center > article.popover-hint > h1:first-child::after {
display: none !important;
}
@media (max-width: 800px) {
body:not([data-slug="index"]) .center > article > h1:first-child,
body:not([data-slug="index"]) .center > article.popover-hint > h1:first-child {
font-size: 1.2rem !important;
margin: 0.15rem 0 0.85rem !important;
}
}
/* For Guides/ index and other listing pages — the .article-title might
carry the section name and the body has no h1 at all OR has one h1.
We treat them like article pages (demote any body h1). The home/index
is the only special case via [data-slug="index"]. */
/* The page-header h1 (the .article-title — keep as primary) — restate
styling to make sure it wins over our v6 generic h1 overrides */
.page-header h1.article-title,
.page-header > .popover-hint > h1.article-title {
font-family: var(--grim-font-display) !important;
font-weight: 900 !important;
font-size: 2.6rem !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
text-align: center !important;
background: linear-gradient(180deg, var(--grim-gilt-soft) 0%, var(--grim-gilt) 50%, var(--grim-oxblood) 105%) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
margin: 0 0 0.5rem !important;
padding: 0.5rem 0 0.85rem !important;
}
@media (max-width: 800px) {
.page-header h1.article-title {
font-size: 1.8rem !important;
padding: 0.3rem 0 0.5rem !important;
}
}
/* Breadcrumb chevron: ensure it's gilt (cyber-hub had it cyan) */
nav.breadcrumb-container,
.breadcrumb-container,
.page-header .breadcrumb-container {
color: var(--grim-bone-muted) !important;
font-family: var(--grim-font-serif) !important;
font-style: italic !important;
text-align: center !important;
}
nav.breadcrumb-container a,
.breadcrumb-container a {
color: var(--grim-gilt-soft) !important;
}
/* The article side-rail (the gilt vertical line) — when article wraps
in .popover-hint the absolute positioning offset by -2rem clipped at
narrow widths. v7 patched ≤1100; extend to ≤1280 since the .center
column max-width is ~750px on 1440 viewports. */
@media (max-width: 1280px) and (min-width: 801px) {
article::before {
left: -1rem !important;
}
}
/* ----- v6 lead-paragraph color drift fix: measured `rgb(184, 176, 162)`
(bone-muted) instead of the intended `rgb(232, 223, 208)` (bone).
The lead paragraph should be the most readable text on the page —
it's currently 25% lower contrast than the rest. Force full bone. */
article > p, article p,
article > p:first-of-type,
article > p:not(:first-of-type) {
color: var(--grim-bone) !important;
}
article > p:first-of-type {
color: var(--grim-bone) !important; /* not muted */
}
/* ----- Heading h2 link colors etc were leaking measured-cyan in TOC.
Hard-pin the TOC contents (button + h3 + links). */
button.toc-header h3,
.toc h3,
.toc h2 {
color: var(--grim-gilt) !important;
}
.toc a {
color: var(--grim-bone-muted) !important;
}
.toc a:hover, .toc a.active {
color: var(--grim-gilt-soft) !important;
}
/* ----- Hard-pin internal-link underline visibility — was inheriting
0.3 alpha from cyber-hub default */
.internal-link, a.internal,
article a.internal, article a[data-href] {
text-decoration-color: rgba(201, 169, 97, 0.50) !important;
}
/* ----- Tags row: in the article view the row sits below content-meta;
on mobile it has no top spacing. */
.tags { margin-top: 1rem !important; }
@media (max-width: 800px) {
.tags { margin: 1rem 0 0.5rem !important; }
}