/* ── 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; } /* ── Title page ── */ .title-eyebrow { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 0.9rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 1.8rem; } .title-main { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 3.4rem; line-height: 1.15; color: #ffffff; margin-bottom: 1.6rem; letter-spacing: 0.01em; } .title-author { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1rem; color: rgba(255, 255, 255, 0.65); letter-spacing: 0.12em; margin-bottom: 0.5rem; } .title-sub { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 1rem; color: rgba(255, 255, 255, 0.45); letter-spacing: 0.08em; } .title-rule { width: 3rem; height: 1px; background: rgba(255, 255, 255, 0.25); margin: 1.4rem auto; } /* ── 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; } /* ── Finale overlay ── */ .finale-overlay h2 { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 2.6rem; color: white; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.7); letter-spacing: 0.02em; } .finale-overlay p { font-family: var(--font-display); font-style: italic; font-size: 0.95rem; color: rgba(255, 255, 255, 0.7); letter-spacing: 0.12em; margin-top: 0.6rem; }