...
Classical illuminated-manuscript drop, 3 lines tall, gold.
============================================================ */
.lede::first-letter {
font-family: var(--veil-font-display);
font-style: italic;
font-weight: 700;
font-size: 4.2rem;
line-height: 0.9;
float: left;
padding: 0.25rem 0.75rem 0 0;
margin-top: 0.2rem;
color: var(--veil-gold);
text-shadow: 0 2px 18px rgba(201, 168, 76, 0.25);
}
/* ============================================================
Scenario roman numerals (symbol pages)
Usage:
Replaces the generic h3 title bar with a book-chapter cue.
============================================================ */
.scenario {
position: relative;
}
.scenario[data-numeral]::before {
content: attr(data-numeral);
position: absolute;
top: 1rem;
right: 1.1rem;
font-family: var(--veil-font-display);
font-style: italic;
font-weight: 600;
font-size: 0.95rem;
letter-spacing: 0.08em;
color: var(--veil-gold);
opacity: 0.6;
}
/* ============================================================
Icon glyphs — gold monoline, 28×28
Used in place of emoji feature icons on landing.
Classes: .glyph-lock .glyph-mic .glyph-sparkle .glyph-export
.glyph-archive .glyph-moon
Each is an inline SVG ref via mask-image for single-color fill.
============================================================ */
.glyph {
display: inline-block;
width: 32px;
height: 32px;
background-color: var(--veil-gold);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
}
.glyph-lock { -webkit-mask-image: url("data:image/svg+xml;utf8,
"); mask-image: url("data:image/svg+xml;utf8,
"); }
.glyph-mic { -webkit-mask-image: url("data:image/svg+xml;utf8,
"); mask-image: url("data:image/svg+xml;utf8,
"); }
.glyph-sparkle { -webkit-mask-image: url("data:image/svg+xml;utf8,
"); mask-image: url("data:image/svg+xml;utf8,
"); }
.glyph-export { -webkit-mask-image: url("data:image/svg+xml;utf8,
"); mask-image: url("data:image/svg+xml;utf8,
"); }
.glyph-archive { -webkit-mask-image: url("data:image/svg+xml;utf8,
"); mask-image: url("data:image/svg+xml;utf8,
"); }
.glyph-moon { -webkit-mask-image: url("data:image/svg+xml;utf8,
"); mask-image: url("data:image/svg+xml;utf8,
"); }
/* ============================================================
A–Z grimoire hub — illuminated chapter layout
Used by /blog/dream-symbol/index.html (rebuilt by gen:hub)
============================================================ */
.grimoire-hub {
max-width: 1080px;
margin: 0 auto;
padding: 3rem 1.5rem 5rem;
}
.grimoire-hub > header {
text-align: center;
margin-bottom: 3.5rem;
}
.grimoire-hub h1 {
font-family: var(--veil-font-display);
font-weight: 700;
font-size: clamp(2rem, 5vw, 3rem);
line-height: 1.1;
margin-bottom: 0.75rem;
color: var(--veil-ink);
}
.grimoire-hub h1 em {
font-style: italic;
color: var(--veil-gold);
}
.grimoire-hub .subtitle {
color: var(--veil-ink-soft);
font-style: italic;
font-family: var(--veil-font-display);
max-width: 520px;
margin: 0 auto;
font-size: 1.05rem;
}
.chapter {
display: grid;
grid-template-columns: 96px 1fr;
gap: 2rem;
padding: 2rem 0;
border-bottom: 1px solid rgba(201, 168, 76, 0.12);
}
.chapter:last-child { border-bottom: none; }
.chapter-letter {
font-family: var(--veil-font-display);
font-style: italic;
font-weight: 700;
font-size: 6rem;
line-height: 0.8;
color: var(--veil-gold);
text-shadow: 0 2px 20px rgba(201, 168, 76, 0.3);
user-select: none;
align-self: start;
position: sticky;
top: 1rem;
}
.chapter-entries {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 1rem 1.5rem;
list-style: none;
padding: 0;
margin: 0.75rem 0 0;
}
.chapter-entries li { margin: 0; }
.chapter-entries a {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.5rem 0.5rem 0.5rem 0;
color: var(--veil-ink);
text-decoration: none;
border-radius: 10px;
transition: background-color 0.2s ease, transform 0.15s ease;
}
.chapter-entries a:hover {
background: rgba(201, 168, 76, 0.06);
transform: translateX(3px);
}
.chapter-entries .thumb {
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(201, 168, 76, 0.25);
}
.chapter-entries .thumb.placeholder {
background: linear-gradient(135deg, var(--veil-violet-dark), var(--veil-violet));
display: flex;
align-items: center;
justify-content: center;
color: var(--veil-gold);
font-family: var(--veil-font-display);
font-style: italic;
font-size: 1.2rem;
}
.chapter-entries .label {
font-family: var(--veil-font-body);
font-weight: 500;
font-size: 0.98rem;
color: var(--veil-ink);
letter-spacing: 0.005em;
}
.chapter-entries a:hover .label { color: var(--veil-gold); }
@media (max-width: 640px) {
.chapter {
grid-template-columns: 68px 1fr;
gap: 1.25rem;
padding: 1.5rem 0;
}
.chapter-letter { font-size: 4rem; }
.chapter-entries {
grid-template-columns: 1fr;
gap: 0.4rem;
}
.chapter-entries .thumb { width: 36px; height: 36px; }
}
/* ============================================================
Reading progress — 2px gold rail along the left edge.
Pure CSS via scroll-driven animation (progressive enhancement;
falls back silently in unsupported browsers).
============================================================ */
@supports (animation-timeline: scroll()) {
body.veil::before {
/* keep the existing ambient gradient — progress rail added via a
dedicated element to avoid stacking against the ::before layer */
}
body.veil .scroll-rail {
position: fixed;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(to bottom, var(--veil-gold), transparent);
transform-origin: top;
transform: scaleY(0);
animation: scrollRail linear both;
animation-timeline: scroll();
z-index: 5;
pointer-events: none;
opacity: 0.5;
}
@keyframes scrollRail {
to { transform: scaleY(1); }
}
}
/* ============================================================
Reduced motion
============================================================ */
@media (prefers-reduced-motion: reduce) {
body.veil .scroll-rail { display: none; }
}