/* ============================================================ ATMOSPHERE — coded texture and ambient decoration No image assets for texture; everything here is generated with gradients and CSS so it stays crisp at any size and never reads as clipart. ============================================================ */ /* Subtle parchment grain, layered radial warmth, and a faint deckle-edge vignette. Applied to by default. */ .bg-parchment { background-color: var(--parchment); background-image: radial-gradient(ellipse at 20% 10%, rgba(173,138,78,0.05), transparent 55%), radial-gradient(ellipse at 85% 90%, rgba(181,98,106,0.04), transparent 50%), repeating-linear-gradient( 0deg, rgba(58,46,42,0.015) 0px, rgba(58,46,42,0.015) 1px, transparent 1px, transparent 3px ); } /* Night-sky atmosphere for hero / gate moments */ .bg-night { background-color: var(--night); background-image: radial-gradient(1px 1px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 80% 15%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 60%, #fff8e8, transparent), radial-gradient(1px 1px at 65% 80%, #fff, transparent), radial-gradient(1px 1px at 25% 75%, #fff, transparent), radial-gradient(1.5px 1.5px at 90% 50%, #fff, transparent), radial-gradient(1px 1px at 55% 30%, #fff, transparent), radial-gradient(1px 1px at 35% 45%, #fff, transparent), radial-gradient(ellipse at 50% 100%, rgba(60,55,90,0.6), transparent 70%); background-repeat: repeat; background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%; color: var(--parchment); } /* A single coded four-point sparkle — used sparingly, never looping */ .sparkle { display: inline-block; width: 1em; height: 1em; position: relative; } .sparkle::before { content: ''; position: absolute; inset: 0; background: linear-gradient(var(--gold) 0 0) center/2px 100% no-repeat, linear-gradient(90deg, var(--gold) 0 0) center/100% 2px no-repeat; clip-path: polygon( 50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39% ); background: var(--gold); } /* Hairline divider with a small centered sparkle, replacing generic

rules throughout the site */ .divider { display: flex; align-items: center; gap: var(--space-sm); margin: var(--space-md) 0; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--line); } .divider .sparkle { color: var(--gold); flex-shrink: 0; } /* Frosted glass card surface, used across archive/blog/diary cards */ .glass-card { background: var(--glass-fill); border: 1px solid var(--glass-border); border-radius: var(--radius-card); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 8px 30px rgba(58,46,42,0.08); } /* Corner flourish — coded, not imaged. A single quarter-swirl built from two overlapping arcs, positioned per-instance. */ .corner-flourish { position: absolute; width: 64px; height: 64px; pointer-events: none; opacity: 0.35; } .corner-flourish svg { width: 100%; height: 100%; } .corner-flourish.tl { top: 10px; left: 10px; } .corner-flourish.tr { top: 10px; right: 10px; transform: scaleX(-1); } .corner-flourish.bl { bottom: 10px; left: 10px; transform: scaleY(-1); } .corner-flourish.br { bottom: 10px; right: 10px; transform: scale(-1, -1); }