/* ═══════════════════════════════════════════════════════════ samgalanakis.com — modern editorial Karla (sans, headings) · ET Book (serif, body) · JetBrains Mono (chrome) ═══════════════════════════════════════════════════════════ */ /* ET Book — Edward Tufte's commissioned web body face. Self-hosted from /static/fonts/. Old-style figures by default; line figures only on the bold variant for headings/captions. */ @font-face { font-family: 'et-book'; src: url('/static/fonts/et-book-roman-old-style-figures.woff') format('woff'), url('/static/fonts/et-book-roman-old-style-figures.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'et-book'; src: url('/static/fonts/et-book-display-italic-old-style-figures.woff') format('woff'), url('/static/fonts/et-book-display-italic-old-style-figures.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'et-book'; src: url('/static/fonts/et-book-semi-bold-old-style-figures.woff') format('woff'), url('/static/fonts/et-book-semi-bold-old-style-figures.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'et-book'; src: url('/static/fonts/et-book-bold-line-figures.woff') format('woff'), url('/static/fonts/et-book-bold-line-figures.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; scroll-padding-top: 80px; text-size-adjust: 100%; } :root { color-scheme: light; /* Palette — light values first, dark second. light-dark() resolves per color-scheme. Light is the default; dark is opt-in via the toggle ([data-theme="dark"] on , persisted in localStorage). */ /* Light mode is canonical (cream paper · sage band · gilt accent · ink). Dark mode is the quieter sibling — comfortable late-night reading. No sage band, calmer gilt, lower body chroma. */ --bg: light-dark(oklch(0.97 0.008 95), oklch(0.16 0.012 75)); /* cream / calm warm-dark */ --bg-alt: light-dark(oklch(0.94 0.012 95), oklch(0.21 0.014 75)); --surface: light-dark(oklch(0.99 0.005 95), oklch(0.13 0.010 75)); --plaster: light-dark(oklch(0.74 0.022 145), oklch(0.16 0.012 75)); /* dark: same as bg, band disappears */ --plaster-2: light-dark(oklch(0.66 0.022 145), oklch(0.30 0.030 145)); --plaster-3: light-dark(oklch(0.55 0.024 145), oklch(0.32 0.040 145)); /* footer — one sage moment */ --ink: light-dark(oklch(0.22 0.015 80), oklch(0.93 0.012 88)); /* primary text */ --ink-2: light-dark(oklch(0.36 0.018 80), oklch(0.80 0.014 86)); --ink-3: light-dark(oklch(0.50 0.018 85), oklch(0.68 0.014 84)); --ink-4: light-dark(oklch(0.66 0.014 85), oklch(0.46 0.012 82)); --gilt: light-dark(oklch(0.62 0.105 90), oklch(0.78 0.090 90)); /* present but quiet — focus, not brand */ --gilt-deep: light-dark(oklch(0.50 0.090 88), oklch(0.70 0.110 86)); --border: light-dark(oklch(0.86 0.012 95), oklch(0.32 0.012 75)); --border-2: light-dark(oklch(0.91 0.010 95), oklch(0.26 0.010 75)); --rule: light-dark(oklch(0.82 0.014 95), oklch(0.36 0.012 75)); --shadow-md: 0 1px 3px oklch(0.30 0.020 95 / 0.06); /* Type scale — fixed rem-ish for product chrome, fluid only for display heads. */ --t-caption: 13px; --t-meta: 14px; --t-body: 18px; --t-body-lg: 20px; --t-lede: clamp(20px, 1.6vw, 23px); --t-h-card: clamp(22px, 1.8vw, 24px); --t-h-listing: clamp(24px, 2.2vw, 28px); --t-h-section: clamp(30px, 3vw, 40px); --t-h-post: clamp(36px, 4.4vw, 52px); --t-h-page: clamp(44px, 5.6vw, 72px); --t-h-display: clamp(46px, 7vw, 84px); /* Spacing — 4pt scale. */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; /* Motion. */ --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --dur-quick: 150ms; --dur-base: 240ms; } /* Explicit theme override — set by the FOUC-prevention inline script based on localStorage; the toggle button flips it. When unset, :root's color-scheme: light is canonical — dark is opt-in. */ [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } /* ─── BASE ─────────────────────────────────────────────────── */ body { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-weight: 400; background: var(--bg); color: var(--ink); line-height: 1.55; font-feature-settings: "kern" 1, "liga" 1, "onum" 1, "calt" 1; font-variant-numeric: oldstyle-nums; } ::selection { background: light-dark(oklch(0.78 0.090 92), oklch(0.55 0.130 88)); color: light-dark(var(--ink), oklch(0.16 0.010 90)); } a { color: inherit; } button { font: inherit; cursor: pointer; background: none; border: none; color: inherit; } img, svg { display: block; max-width: 100%; } main, header, footer, section, article { position: relative; } .skip { position: absolute; left: -10000px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 14px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 500; font-size: 13px; z-index: 999; } .skip:focus { left: 8px; } :focus-visible { outline: 2px solid var(--gilt-deep); outline-offset: 2px; border-radius: 1px; } /* ─── NAV ──────────────────────────────────────────────────── */ .site-nav { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 1px solid var(--rule); padding: 14px clamp(20px, 4vw, 40px); display: flex; align-items: center; gap: 32px; } .site-nav-home { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-weight: 600; font-size: 16px; letter-spacing: 0; color: var(--ink); text-decoration: none; } .site-nav-links { margin-left: auto; display: flex; gap: 24px; font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-size: 15px; font-weight: 500; } .site-nav-links a { color: var(--ink-3); text-decoration: none; transition: color var(--dur-quick); } .site-nav-links a:hover { color: var(--ink); } .site-nav-links a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gilt-deep); text-decoration-thickness: 1px; text-underline-offset: 4px; } .theme-toggle { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-style: italic; font-variant: small-caps; font-size: 14px; font-weight: 400; letter-spacing: 0.04em; color: var(--ink-3); padding: 0; margin: 0; transition: color var(--dur-quick); } .theme-toggle:hover { color: var(--ink); } .theme-toggle-dark { display: inline; } .theme-toggle-light { display: none; } [data-theme="dark"] .theme-toggle-dark { display: none; } [data-theme="dark"] .theme-toggle-light { display: inline; } @media (max-width: 600px) { .site-nav { gap: 16px; padding: 14px 20px; } .site-nav-links { gap: 16px; font-size: 14px; } } /* ─── HERO ─────────────────────────────────────────────────── */ .hero { padding: clamp(72px, 10vw, 144px) 0 clamp(56px, 7vw, 96px); border-bottom: 1px solid var(--rule); } .hero-wrap { max-width: 880px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); } .hero-eyebrow { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-size: 16px; font-weight: 400; font-variant: small-caps; letter-spacing: 0.04em; color: var(--ink-3); margin-bottom: 28px; } .hero-eyebrow-link { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gilt); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--dur-quick); } .hero-eyebrow-link:hover { color: var(--gilt-deep); } .hero-title { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-weight: 400; font-style: italic; font-size: var(--t-h-display); letter-spacing: 0; line-height: 1.06; color: var(--ink); margin-bottom: 28px; } .hero-lede { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-size: clamp(22px, 1.8vw, 25px); line-height: 1.55; color: var(--ink-2); max-width: 60ch; margin-bottom: 36px; } .hero-link { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-style: italic; font-size: clamp(18px, 1.5vw, 21px); color: var(--ink-2); } .hero-link a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-3); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: text-decoration-color var(--dur-quick), text-decoration-thickness var(--dur-quick); } .hero-link a:hover { text-decoration-color: var(--gilt-deep); text-decoration-thickness: 2px; } /* ─── BUTTONS ──────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-size: 15px; font-weight: 500; letter-spacing: 0; text-decoration: none; background: var(--ink); color: var(--bg); border: 1px solid var(--ink); border-radius: 2px; cursor: pointer; transition: background var(--dur-quick) var(--ease-out-quart), color var(--dur-quick) var(--ease-out-quart), border-color var(--dur-quick) var(--ease-out-quart); } .btn:hover { background: var(--ink-2); border-color: var(--ink-2); } /* ─── SECTIONS ─────────────────────────────────────────────── */ .page-section { padding: clamp(56px, 8vw, 112px) 0; } .page-section + .page-section { border-top: 1px solid var(--rule); } .page-section-wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); } /* The "sage band" — present in light mode as a deep-tinted section that gives About a different ground from the cream rest. In dark mode the band falls away (background == body bg, borders transparent) — light is the canonical theme; dark is the quieter sibling. Compound selector below to outrank `.page-section + .page-section` borders. */ .page-section.page-section--band { background: light-dark(var(--plaster), transparent); border-top: 1px solid light-dark(color-mix(in oklch, var(--plaster) 70%, var(--ink)), transparent); border-bottom: 1px solid light-dark(color-mix(in oklch, var(--plaster) 70%, var(--ink)), transparent); } .page-section--band + .page-section { border-top: none; } .page-section--band .section-title { color: var(--ink); } .page-section--band .about-body { color: var(--ink); } .page-section--band .about-body a { color: var(--ink); text-decoration-color: var(--ink); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; } .section-title { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-weight: 400; font-style: italic; font-size: var(--t-h-section); letter-spacing: 0; line-height: 1.14; color: var(--ink); } .section-link { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-size: 16px; font-weight: 400; font-style: italic; color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color var(--dur-quick), text-decoration-color var(--dur-quick); } .section-link:hover { color: var(--ink); text-decoration-color: var(--ink-3); } /* ─── POST GRID (landing) ─────────────────────────────────── */ .post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 3vw, 32px); } .post-card { display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 22px 20px 20px; background: transparent; border-top: 1px solid var(--ink-3); text-decoration: none; color: var(--ink); transition: border-color var(--dur-quick); } .post-card:hover { border-top-color: var(--ink); } .post-card:hover .post-card-title { color: var(--ink); } .post-card-meta { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-style: italic; font-size: var(--t-meta); letter-spacing: 0; color: var(--ink-3); font-feature-settings: "tnum" 1; } .post-card-title { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-weight: 600; font-size: var(--t-h-card); letter-spacing: 0; line-height: 1.18; color: var(--ink); transition: color var(--dur-quick); } .post-card-summary { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-size: var(--t-body); line-height: 1.5; color: var(--ink-2); } .post-card-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 4px; gap: 12px; } .post-card-tags { display: flex; gap: 6px; flex-wrap: wrap; } .post-card-arrow { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-weight: 500; color: var(--ink-3); transition: transform var(--dur-quick) var(--ease-out-quart), color var(--dur-quick); } .post-card:hover .post-card-arrow { transform: translateX(3px); color: var(--ink); } /* ─── TAGS ────────────────────────────────────────────────── */ .tag { display: inline-flex; align-items: center; padding: 2px 9px; font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-variant: small-caps; font-size: 14px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-2); background: transparent; border: 1px solid light-dark(var(--ink-4), oklch(0.32 0.014 80)); border-radius: 2px; } .tag--draft { color: light-dark(oklch(0.42 0.16 35), oklch(0.78 0.14 50)); border-color: light-dark(oklch(0.6 0.18 35), oklch(0.55 0.16 50)); background: light-dark(oklch(0.97 0.04 60), oklch(0.28 0.05 50)); letter-spacing: 0.08em; font-weight: 600; } /* ─── ABOUT (in the sage band) ────────────────────────────── */ .about-grid { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: start; } .about-grid .section-title { margin-top: 4px; } .about-body { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-size: var(--t-body-lg); line-height: 1.6; color: var(--ink); max-width: 64ch; } .about-body p { margin-bottom: 16px; } .about-body p:last-child { margin-bottom: 0; } .about-body a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .about-body a:hover { text-decoration-thickness: 2px; } @media (max-width: 720px) { .about-grid { grid-template-columns: 1fr; } } /* ─── CONTACT ─────────────────────────────────────────────── */ .contact-block { max-width: 640px; } .contact-lede { font-size: var(--t-body-lg); line-height: 1.6; color: var(--ink); margin: 0 0 18px; } .contact-lede a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gilt-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; } .contact-lede a:hover { text-decoration-thickness: 2px; } /* ─── PROJECTS ────────────────────────────────────────────── */ .project-list { display: flex; flex-direction: column; } .project { padding: 36px 0; border-top: 1px solid var(--rule); max-width: 720px; } .project:first-child { border-top: none; padding-top: 8px; } .project-title { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-style: italic; font-weight: 400; font-size: var(--t-h-section); letter-spacing: 0; line-height: 1.14; color: var(--ink); margin-bottom: 12px; } .project-blurb { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-size: var(--t-body-lg); line-height: 1.55; color: var(--ink); margin-bottom: 14px; max-width: 64ch; } .project-body { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-size: var(--t-body); line-height: 1.6; color: var(--ink-2); max-width: 64ch; margin-bottom: 14px; } .project-body p { margin-bottom: 10px; } .project-body p:last-child { margin-bottom: 0; } .project-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gilt-deep); text-underline-offset: 3px; } .project-links { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-style: italic; font-variant: small-caps; font-size: 14px; letter-spacing: 0.04em; color: var(--ink-3); margin-bottom: 6px; } .project-links a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gilt-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness var(--dur-quick); } .project-links a:hover { text-decoration-thickness: 2px; } .project-related { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-size: var(--t-meta); color: var(--ink-2); } .project-related em { color: var(--ink-3); font-style: italic; } .project-related a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-4); text-underline-offset: 3px; } .project-related a:hover { text-decoration-color: var(--gilt-deep); } .project-sep { color: var(--ink-4); } /* ─── BLOG INDEX ──────────────────────────────────────────── */ .page-head { padding: clamp(64px, 9vw, 112px) 0 clamp(32px, 5vw, 56px); border-bottom: 1px solid var(--rule); } .page-title { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-weight: 400; font-style: italic; font-size: var(--t-h-page); letter-spacing: 0; line-height: 1.06; color: var(--ink); margin-bottom: 20px; } .page-intro { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-size: var(--t-lede); line-height: 1.5; color: var(--ink-2); max-width: 60ch; margin-bottom: 16px; } .page-meta { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-style: italic; font-size: var(--t-meta); color: var(--ink-3); } .post-list { display: grid; gap: 0; } .post-listing { border-top: 1px solid var(--rule); } .post-listing:last-child { border-bottom: 1px solid var(--rule); } .post-listing-link { display: block; padding: 24px 0; text-decoration: none; color: var(--ink); transition: transform var(--dur-quick) var(--ease-out-quart); } .post-listing-link:hover { transform: translateX(3px); } .post-listing-link:hover .post-listing-title { color: var(--ink); } .post-listing-meta { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-style: italic; font-size: var(--t-meta); color: var(--ink-3); margin-bottom: 8px; display: flex; gap: 10px; align-items: baseline; } .post-listing-dot { color: var(--ink-4); } .post-listing-title { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-weight: 600; font-size: var(--t-h-listing); letter-spacing: 0; line-height: 1.16; color: var(--ink); margin-bottom: 8px; transition: color var(--dur-quick); } .post-listing-summary { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-size: var(--t-body); line-height: 1.5; color: var(--ink-2); max-width: 64ch; margin-bottom: 10px; } .post-listing-tags { display: flex; gap: 6px; flex-wrap: wrap; } /* ─── DRAFT PLACEHOLDER ───────────────────────────────────── */ .draft-placeholder { min-height: 68vh; display: grid; align-items: center; padding: clamp(64px, 9vw, 120px) clamp(20px, 5vw, 40px); border-bottom: 1px solid var(--rule); } .draft-placeholder-wrap { max-width: 760px; width: 100%; margin: 0 auto; } .draft-placeholder-card { position: relative; padding: clamp(28px, 5vw, 48px); background: linear-gradient(135deg, light-dark(oklch(0.99 0.010 95), oklch(0.18 0.014 75)), var(--surface)); border: 1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow-md); } .draft-placeholder-card::before { content: ""; position: absolute; inset: 12px; border: 1px solid light-dark(oklch(0.82 0.045 90 / 0.7), oklch(0.48 0.050 88 / 0.45)); pointer-events: none; } .draft-placeholder-meta { position: relative; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-style: italic; font-size: var(--t-meta); color: var(--ink-3); } .draft-placeholder-title { position: relative; max-width: 12ch; font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-weight: 400; font-style: italic; font-size: var(--t-h-post); line-height: 1.06; letter-spacing: 0; color: var(--ink); margin-bottom: 22px; } .draft-placeholder-copy { position: relative; max-width: 48ch; font-size: var(--t-lede); line-height: 1.45; color: var(--ink-2); margin-bottom: 18px; } .draft-placeholder-summary { position: relative; max-width: 56ch; font-size: var(--t-body-lg); line-height: 1.55; color: var(--ink-3); margin-bottom: 26px; } .draft-placeholder-actions { position: relative; font-size: var(--t-body); color: var(--ink-2); } .draft-placeholder-actions a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gilt); text-decoration-thickness: 1px; text-underline-offset: 3px; } .draft-placeholder-actions a:hover { color: var(--gilt-deep); text-decoration-color: currentColor; } /* ─── POST PAGE ───────────────────────────────────────────── */ .post-head { padding: clamp(64px, 9vw, 112px) 0 clamp(40px, 6vw, 72px); border-bottom: 1px solid var(--rule); } .post-head-wrap { max-width: 760px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); } .post-head-meta { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-style: italic; font-size: var(--t-meta); color: var(--ink-3); margin-bottom: 16px; display: flex; gap: 10px; align-items: baseline; } .post-title { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-weight: 400; font-style: italic; font-size: var(--t-h-post); letter-spacing: 0; line-height: 1.08; color: var(--ink); margin-bottom: 18px; } .post-lede { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-size: var(--t-lede); line-height: 1.5; color: var(--ink-2); font-style: italic; max-width: 60ch; margin-bottom: 18px; } .post-head-tags { display: flex; gap: 6px; flex-wrap: wrap; } /* Post body layout — body column + reserved right gutter for sidenotes. The body keeps its 66ch comfortable measure; sidenotes float into the gutter on wide viewports and collapse inline (italic, indented) on narrow. */ .post-body-wrap { padding: clamp(40px, 6vw, 72px) clamp(20px, 5vw, 40px); display: grid; grid-template-columns: minmax(0, 66ch) 240px; column-gap: 48px; justify-content: center; align-items: start; } .post-body { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-size: var(--t-body-lg); line-height: 1.65; color: var(--ink); max-width: 66ch; width: 100%; font-feature-settings: "kern" 1, "liga" 1, "onum" 1, "calt" 1; hanging-punctuation: first last; } .post-body > * { margin-bottom: 1.1em; } .post-body > *:last-child { margin-bottom: 0; } .post-body p { margin-bottom: 1.1em; } /* Newthought — small caps lead-in for the first few words of a paragraph. Tufte's preferred opener; lighter than a drop cap, more typographic. */ .newthought { font-variant: small-caps; font-weight: 600; letter-spacing: 0.04em; } /* The first paragraph of a post automatically gets a newthought-style opener on the first ~3 words — see views.rs which wraps them in . */ .post-body h2 { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.5em; letter-spacing: 0; color: var(--ink); margin: 2.2em 0 0.4em; line-height: 1.22; } .post-body h3 { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-style: italic; font-weight: 400; font-size: 1.18em; letter-spacing: 0; color: var(--ink-2); margin: 1.6em 0 0.3em; line-height: 1.3; } .post-body em { font-style: italic; } .post-body strong { font-weight: 600; color: var(--ink); } .post-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-3); text-decoration-thickness: 1px; text-underline-offset: 3px; } .post-body a:hover { text-decoration-color: var(--ink); text-decoration-thickness: 2px; } .post-body blockquote { margin: 1.6em 0 1.6em -1.4em; padding: 0.4em 0 0.4em 1.4em; border-left: 1px solid var(--ink-4); font-style: italic; color: var(--ink-2); } .post-body code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.88em; background: var(--bg-alt); padding: 1px 5px; border-radius: 2px; } .post-body pre { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 14px; line-height: 1.55; background: var(--bg-alt); border: 1px solid var(--border); border-radius: 3px; padding: 16px 18px; overflow-x: auto; margin: 1.6em 0; /* Hidden scrollbar by default — revealed on hover (see :hover rules below). Avoids the always-on chunky native scrollbar on Linux when content only overflows by a sub-pixel. */ scrollbar-width: none; } .post-body pre::-webkit-scrollbar { height: 0; background: transparent; } .post-body pre:hover { scrollbar-width: thin; scrollbar-color: var(--ink-4) transparent; } .post-body pre:hover::-webkit-scrollbar { height: 8px; } .post-body pre:hover::-webkit-scrollbar-track { background: transparent; } .post-body pre:hover::-webkit-scrollbar-thumb { background: var(--ink-4); border-radius: 4px; } .post-body pre code { background: none; padding: 0; font-size: inherit; } /* lashlang syntax tokens — set by the client-side highlighter in views.rs. Color-only differentiation (no weight changes) to avoid sub-pixel width shifts that trigger phantom overflow on JetBrains Mono. */ .post-body pre code .t-keyword { color: var(--gilt-deep); } .post-body pre code .t-string { color: light-dark(oklch(0.46 0.07 130), oklch(0.78 0.06 130)); } .post-body pre code .t-number { color: var(--gilt-deep); } .post-body pre code .t-function { color: var(--ink); } .post-body pre code .t-punctuation { color: var(--ink-3); } .post-body pre code .t-operator { color: var(--ink-3); } .post-body pre code .t-comment { color: var(--ink-4); font-style: italic; } .post-body pre code .t-identifier { color: inherit; } .post-body ul, .post-body ol { padding-left: 1.4em; margin-bottom: 1.1em; } .post-body ul li::marker { color: var(--ink-4); } .post-body hr { border: none; height: 1px; background: var(--rule); margin: 2.4em auto; width: 50%; } .post-body img { width: 100%; border: 1px solid var(--border); border-radius: 3px; margin: 1.4em 0; } .post-body table { width: 100%; border-collapse: collapse; margin: 1.6em 0; font-size: 0.95em; } .post-body th, .post-body td { border-bottom: 1px solid var(--rule); padding: 8px 14px; text-align: left; } .post-body th { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-variant: small-caps; font-size: 16px; font-weight: 500; letter-spacing: 0.04em; color: var(--ink-2); } /* ─── TUFTE COMPONENTS ────────────────────────────────────── */ /* Epigraph — italic block quote with attribution at the head of a post. */ .epigraph { margin: 0 0 2em; padding: 0; font-style: italic; color: var(--ink-2); font-size: 1.05em; line-height: 1.5; } .epigraph p { margin-bottom: 0.4em; } .epigraph footer, .epigraph cite { display: block; font-style: italic; font-size: 0.85em; text-align: right; color: var(--ink-3); margin-top: 0.2em; } .epigraph cite::before { content: '— '; } /* Figure / figcaption — a labeled visual with caption-style text below. Caption uses small caps for the label, regular italic for any prose continuation. */ .post-body figure { margin: 1.6em 0; } .post-body figure > img, .post-body figure > video { width: 100%; border: 1px solid var(--border); border-radius: 3px; margin-bottom: 0.5em; } .post-body figcaption { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-style: italic; font-size: 0.85em; line-height: 1.45; color: var(--ink-3); max-width: 60ch; } .post-body figcaption .label { font-style: normal; font-variant: small-caps; font-weight: 600; letter-spacing: 0.04em; color: var(--ink-2); margin-right: 0.4em; } /* Sidenote — Tufte-style margin note. Floats into the reserved 240px right gutter on wide viewports; collapses to an inline tap-to-reveal on narrow. */ .sidenote, .marginnote { float: right; clear: right; width: 240px; margin-right: -288px; /* 240 width + 48 column-gap */ margin-top: 0.2em; margin-bottom: 0.6em; font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-style: italic; font-size: 14px; line-height: 1.45; color: var(--ink-2); position: relative; } /* Numbered sidenote: superscript reference inline + the floated note. */ .sidenote-number { counter-increment: sidenote-counter; } .sidenote-number::after, .sidenote::before { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-feature-settings: "sups" 1; position: relative; vertical-align: baseline; } .sidenote-number::after { content: counter(sidenote-counter); font-size: 0.75em; top: -0.5em; left: 0.1em; color: var(--gilt-deep); } .sidenote::before { content: counter(sidenote-counter) " "; font-size: 0.85em; font-style: normal; font-weight: 600; color: var(--gilt-deep); } .post-body { counter-reset: sidenote-counter; } /* Tufte CSS sidenote pattern: ← inline superscript number, click target ← hidden state holder … ← floats into gutter on wide; collapses on narrow The input is ALWAYS hidden — the label is the visible/clickable thing. */ input.margin-toggle { display: none; } .sidenote-number { display: inline; cursor: pointer; } @media (max-width: 1100px) { .post-body-wrap { grid-template-columns: minmax(0, 66ch); column-gap: 0; } .sidenote, .marginnote { display: none; float: none; width: auto; margin: 1em 0; padding: 0.6em 0.9em; background: var(--bg-alt); border-radius: 3px; font-size: 15px; } .margin-toggle:checked + .sidenote, .margin-toggle:checked + .marginnote { display: block; } .sidenote::before { display: inline; margin-right: 0.4em; } } /* ─── POST FOOT (prev/next nav) ───────────────────────────── */ .post-foot { border-top: 1px solid var(--rule); padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); } .post-foot-wrap { max-width: 760px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); display: grid; gap: 32px; } .post-foot-thanks { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-size: var(--t-body); color: var(--ink-2); } .post-foot-thanks a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .post-foot-all { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-size: 15px; font-weight: 500; color: var(--ink-3); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; text-decoration-thickness: 1px; justify-self: start; transition: color var(--dur-quick), text-decoration-color var(--dur-quick); } .post-foot-all:hover { color: var(--ink); text-decoration-color: var(--ink-3); } .post-nav { display: flex; justify-content: space-between; align-items: stretch; gap: 32px; } .post-nav-link { flex: 1 1 0; display: grid; gap: 4px; padding: 18px 0 0; background: transparent; border-top: 1px solid var(--rule); text-decoration: none; color: var(--ink); transition: border-color var(--dur-quick), transform var(--dur-quick); } .post-nav-link:hover { border-top-color: var(--ink-3); } .post-nav-link.post-nav-newer:hover { transform: translateX(3px); } .post-nav-link.post-nav-older:hover { transform: translateX(-3px); } .post-nav-newer { text-align: right; } .post-nav-eyebrow { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-style: italic; font-size: var(--t-meta); color: var(--ink-3); } .post-nav-title { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-weight: 600; font-size: var(--t-h-card); letter-spacing: 0; line-height: 1.18; color: var(--ink); } @media (max-width: 600px) { .post-nav { flex-direction: column; gap: 16px; } .post-nav-newer { text-align: left; } } /* ─── EMPTY STATE ─────────────────────────────────────────── */ .empty-state { padding: 56px 24px; text-align: center; border: 1px dashed var(--rule); border-radius: 3px; display: grid; gap: 12px; justify-items: center; } .empty-state-eyebrow { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-style: italic; font-size: var(--t-meta); color: var(--ink-3); } .empty-state h3, .empty-state h1 { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-weight: 400; font-style: italic; font-size: var(--t-h-listing); letter-spacing: 0; color: var(--ink); } .empty-state p { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-size: var(--t-body); color: var(--ink-2); } /* ─── FOOTER ──────────────────────────────────────────────── */ .site-foot { background: var(--plaster-3); color: oklch(0.92 0.020 90); padding: clamp(48px, 7vw, 80px) 0 28px; } .site-foot-wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 40px); } .site-foot-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 14px; row-gap: 8px; margin-bottom: 32px; font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-size: 15px; } .site-foot-sep { color: oklch(0.78 0.030 90 / 0.55); user-select: none; } .site-foot a { color: oklch(0.94 0.018 90); text-decoration: underline; text-decoration-color: oklch(0.70 0.060 92); text-underline-offset: 3px; transition: color var(--dur-quick); } .site-foot a:hover { color: oklch(0.92 0.090 92); } .site-foot-rule { display: flex; justify-content: space-between; align-items: center; padding-top: 22px; border-top: 1px solid oklch(1 0 0 / 0.14); flex-wrap: wrap; gap: 12px; } .site-foot-meta { font-family: 'et-book', 'Iowan Old Style', 'Palatino', Georgia, serif; font-style: italic; font-size: 14px; color: oklch(0.84 0.025 90); }