/* BookLog Journal — design tokens Self-hosted Playfair Display + custom properties for both themes. Set data-theme="light" | "dark" on ; absence defaults to light. */ @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/playfair-display-400.woff2') format('woff2'); } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/playfair-display-500.woff2') format('woff2'); } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/playfair-display-600.woff2') format('woff2'); } @font-face { font-family: 'Playfair Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/playfair-display-italic-400.woff2') format('woff2'); } :root { --bg: #FAF8F4; --ink: #1A1A18; --ink-2: #6B6560; --ink-3: #9E9990; --rule: #E5E0D8; --pill: #C8C3BA; --panel: #F2EFE9; --inv-bg: #1A1A18; --inv-ink: #FAF8F4; --inv-ink-2: #A9A49C; --frame: #26261F; --shadow: rgba(26, 26, 24, 0.16); } :root[data-theme="dark"] { --bg: #0E0E0C; --ink: #F2EFE9; --ink-2: #A8A29A; --ink-3: #6F6A63; --rule: #2A2A26; --pill: #45413B; --panel: #161613; --inv-bg: #F2EFE9; --inv-ink: #0E0E0C; --inv-ink-2: #57534C; --frame: #000000; --shadow: rgba(0, 0, 0, 0.6); } :root { /* type */ --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif; --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif; --fs-hero: clamp(68px, 15vw, 166px); --fs-h2: clamp(38px, 7vw, 86px); --fs-quote: clamp(30px, 6vw, 62px); --fs-narrative: clamp(24px, 3.4vw, 38px); --fs-h3: clamp(22px, 2.6vw, 28px); --fs-subtitle: clamp(21px, 3.6vw, 34px); --fs-body: 16px; --fs-body-doc: 17px; --fs-caption: 15px; --fs-label: 11px; /* layout */ --measure-page: 1120px; --measure-doc: 660px; --pad-x: clamp(20px, 5vw, 48px); --space-section: clamp(48px, 10vw, 110px); --space-section-wide: clamp(96px, 15vw, 190px); /* shape */ --radius-pill: 999px; --radius-icon: 8px; --radius-phone: 44px; --shadow-icon: 0 1px 3px var(--shadow); --shadow-phone: 0 26px 60px -22px var(--shadow); /* motion */ --ease-reveal: cubic-bezier(.22, .61, .36, 1); --dur-reveal: 900ms; --dur-hover: 200ms; --dur-theme: 400ms; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; transition: background var(--dur-theme) ease, color var(--dur-theme) ease; } body { overflow-x: hidden; } img { display: block; max-width: 100%; } a { color: var(--ink); text-decoration: none; } a:hover { color: var(--ink-2); } :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; } .skip-link { position: absolute; top: 0; left: -9999px; z-index: 100; background: var(--bg); color: var(--ink); padding: 12px 20px; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* small uppercase label used for every eyebrow / caption label */ .label { font-size: var(--fs-label); letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-3); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }