:root { /* -- Light theme (default) */ /* Page backgrounds - near-neutral, only a whisper of cool hue */ --color-bg-base: oklch(97% 0.003 225); /* essentially white-gray */ --color-bg-subtle: oklch(93% 0.006 225); /* section backgrounds */ --color-bg-muted: oklch(88% 0.010 225); /* cards, insets */ /* UI borders & dividers */ --color-border: oklch(80% 0.018 225); /* visible but gentle */ --color-border-strong: oklch(68% 0.026 225); /* emphasis borders */ /* Text */ --color-text-faint: oklch(60% 0.030 225); /* placeholders, captions */ --color-text-muted: oklch(48% 0.032 225); /* secondary text, metadata */ --color-text-body: oklch(32% 0.022 225); /* body copy - main prose */ --color-text-heading: oklch(18% 0.018 225); /* headings - near-black */ /* Accent - warm amber */ --color-accent: oklch(68% 0.140 60); --color-accent-dim: oklch(78% 0.090 60); /* Timeline */ --color-timeline-line: var(--color-border); --color-timeline-dot: var(--color-border-strong); } /* Dark theme - same hue/chroma, lightness scale inverted */ @media (prefers-color-scheme: dark) { :root { --color-bg-base: oklch(18% 0.003 225); --color-bg-subtle: oklch(22% 0.006 225); --color-bg-muted: oklch(27% 0.010 225); --color-border: oklch(35% 0.018 225); --color-border-strong: oklch(46% 0.026 225); --color-text-faint: oklch(52% 0.030 225); --color-text-muted: oklch(65% 0.028 225); --color-text-body: oklch(82% 0.016 225); --color-text-heading: oklch(94% 0.008 225); } } /* Manual override via data-theme attribute: */ /* or */ [data-theme="dark"] { --color-bg-base: oklch(18% 0.003 225); --color-bg-subtle: oklch(22% 0.006 225); --color-bg-muted: oklch(27% 0.010 225); --color-border: oklch(35% 0.018 225); --color-border-strong: oklch(46% 0.026 225); --color-text-faint: oklch(52% 0.030 225); --color-text-muted: oklch(65% 0.028 225); --color-text-body: oklch(82% 0.016 225); --color-text-heading: oklch(94% 0.008 225); } [data-theme="light"] { --color-bg-base: oklch(97% 0.003 225); --color-bg-subtle: oklch(93% 0.006 225); --color-bg-muted: oklch(88% 0.010 225); --color-border: oklch(80% 0.018 225); --color-border-strong: oklch(68% 0.026 225); --color-text-faint: oklch(60% 0.030 225); --color-text-muted: oklch(48% 0.032 225); --color-text-body: oklch(32% 0.022 225); --color-text-heading: oklch(18% 0.018 225); } @font-face { font-family: 'et-book'; src: url(/etbookot-roman-webfont.woff2) format('truetype'); } * { font-family: 'et-book', serif; } body { background: var(--color-bg-base); color: var(--color-text-body); font-size: 1.2rem; padding: 2rem; } a:link, a:visited { color: inherit; text-decoration: underline dotted; text-decoration-thickness: 0.05em; text-underline-offset: 0.1em; } a:hover { color: inherit; text-decoration: underline; text-decoration-thickness: 0.05em; text-underline-offset: 0.1em; } h1, h2, h3, h4 { color: var(--color-text-heading); } dt { font-weight: bold; color: var(--color-text-body); } dd { margin-bottom: 0.3rem; color: var(--color-text-muted); &:last-child { margin-bottom: 0; } } h2 { margin-bottom: 1rem; } h3 small, dt small { font-weight: normal; color: var(--color-text-faint); } header { margin-bottom: 2rem; } main { display: flex; gap: 2rem; } footer { margin-top: 2rem; text-align: center; color: var(--color-text-faint); code { display: block; font-size: 0.2rem; } } @media (width <=930px) { main { flex-direction: column; } } /* ── Timeline ── */ .timeline { padding-left: 2.5rem; position: relative; } .timeline::before { border-left: 2px dotted var(--color-timeline-line); bottom: 0.5rem; content: ''; left: 0.55rem; position: absolute; top: 0.5rem; width: 0; } .timeline-year { margin-bottom: 0.5rem; margin-top: 1rem; position: relative; } .timeline-year::before { background: var(--color-bg-base); border-radius: 50%; border: 2px solid var(--color-timeline-dot); content: ''; height: 0.65rem; left: -2.2rem; position: absolute; top: 50%; transform: translateY(-50%); width: 0.65rem; } .timeline-year:first-child { margin-top: 0; } .timeline-year h3 { background: var(--color-bg-base); display: inline-block; } .timeline-entry { margin-bottom: 0.8rem; }