/* ── Cormorant Garamond — display, titles, ornaments ── */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; src: url('../fonts/cormorant-garamond-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 300; src: url('../fonts/cormorant-garamond-300-italic.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; src: url('../fonts/cormorant-garamond-400-italic.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 600; src: url('../fonts/cormorant-garamond-600-italic.woff2') format('woff2'); } /* ── Lora — body text ── */ @font-face { font-family: 'Lora'; font-style: normal; font-weight: 400; src: url('../fonts/lora-400-normal.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: italic; font-weight: 400; src: url('../fonts/lora-400-italic.woff2') format('woff2'); } @font-face { font-family: 'Lora'; font-style: normal; font-weight: 500; src: url('../fonts/lora-500-normal.woff2') format('woff2'); } /* ── Design tokens ── */ :root { --ink: #1e1b18; --ink-muted: rgba(30, 27, 24, 0.38); --ink-rule: rgba(30, 27, 24, 0.18); --cream: #faf8f2; --midnight: #0d0d2b; --gold: #b89a4e; --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Lora', Georgia, serif; } /* ── Base ── */ body { font-family: var(--font-body); color: var(--ink); -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* ── Imprint page ── */ .imprint-content { font-family: var(--font-body); font-size: 0.72rem; color: var(--ink-muted); line-height: 2; } /* ── Table of contents ── */ .toc-title { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 1.9rem; color: var(--ink); padding-bottom: 0.6rem; border-bottom: 1px solid var(--ink-rule); margin-bottom: 0.2rem; } .toc-list li { font-family: var(--font-body); font-size: 0.95rem; color: var(--ink); line-height: 1.5; } .toc-list li::before { font-family: var(--font-display); font-style: italic; font-size: 0.8rem; color: var(--ink-muted); } /* ── Story number label ── */ .story-number { display: block; font-family: var(--font-display); font-style: normal; font-weight: 400; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 0.55rem; } /* ── Story title ── */ .story-title { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 1.85rem; line-height: 1.25; color: var(--ink); padding-bottom: 0.6rem; border-bottom: 1px solid var(--ink-rule); margin-bottom: 1rem; } /* ── Scene text ── */ .scene-text { font-family: var(--font-body); font-size: 1.02rem; line-height: 1.9; color: var(--ink); } .scene-text p { margin-bottom: 1em; } .scene-text p:last-child { margin-bottom: 0; } .scene-text em { font-style: italic; } /* ── Scene ornament ── */ .scene-ornament { font-family: var(--font-display); font-size: 1.4rem; color: var(--ink-muted); text-align: center; margin-top: auto; padding-top: 0.5rem; } /* ── Title page ── */ .titlepage-ornament { font-family: var(--font-display); font-size: 1.6rem; color: var(--ink-muted); } .titlepage-title { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 2.4rem; line-height: 1.2; color: var(--ink); } .titlepage-subtitle { font-family: var(--font-display); font-style: italic; font-size: 1rem; color: var(--ink-muted); letter-spacing: 0.08em; } .titlepage-author { font-family: var(--font-body); font-size: 0.85rem; color: var(--ink-muted); letter-spacing: 0.12em; text-transform: uppercase; margin-top: 0.5rem; }