/* najafali.blog * * Design tokens follow §2 of the design spec. Typography follows §3. * Spacing/layout follow §5. Components §6. * * Light is default; dark is the prefers-color-scheme fallback; the * data-theme attribute on overrides both when the user has * picked explicitly. The server emits data-theme based on the * blog_theme cookie so the first paint is correct. */ :root { --bg-primary: #fbfaf7; --bg-secondary: #f1efe9; --bg-tertiary: #e6e3da; --text-primary: #1a1816; --text-secondary: #6c6862; --text-tertiary: #9c968c; --border-tertiary: rgba(26, 24, 22, 0.08); --border-secondary: rgba(26, 24, 22, 0.18); color-scheme: light; --font-serif: 'Literata', 'Charter', 'Iowan Old Style', Georgia, 'Hiragino Mincho ProN', 'YuMincho', 'Yu Mincho', 'Noto Serif JP', serif; --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', 'Noto Sans JP', sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', monospace; } @media (prefers-color-scheme: dark) { :root { --bg-primary: #1f1f1e; --bg-secondary: #292928; --bg-tertiary: #333331; --text-primary: #c8c7c3; --text-secondary: #8a857d; --text-tertiary: #65635e; --border-tertiary: rgba(200, 199, 195, 0.08); --border-secondary: rgba(200, 199, 195, 0.16); color-scheme: dark; } } :root[data-theme="light"] { --bg-primary: #fbfaf7; --bg-secondary: #f1efe9; --bg-tertiary: #e6e3da; --text-primary: #1a1816; --text-secondary: #6c6862; --text-tertiary: #9c968c; --border-tertiary: rgba(26, 24, 22, 0.08); --border-secondary: rgba(26, 24, 22, 0.18); color-scheme: light; } :root[data-theme="dark"] { --bg-primary: #1f1f1e; --bg-secondary: #292928; --bg-tertiary: #333331; --text-primary: #c8c7c3; --text-secondary: #8a857d; --text-tertiary: #65635e; --border-tertiary: rgba(200, 199, 195, 0.08); --border-secondary: rgba(200, 199, 195, 0.16); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } /* Reserve the scrollbar slot so centered layouts don't shift when content height crosses the viewport-scroll threshold. */ html { scrollbar-gutter: stable; } html, body { margin: 0; padding: 0; background: var(--bg-primary); color: var(--text-primary); } body { font-family: var(--font-serif); font-size: 16px; line-height: 1.75; } :lang(ja) body { line-height: 1.95; letter-spacing: 0.02em; } a { color: inherit; text-underline-offset: 3px; text-decoration: none; } a:hover { text-decoration: underline; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--bg-primary); color: var(--text-primary); padding: 8px 12px; z-index: 100; } .skip-link:focus { left: 8px; top: 8px; } /* ---------- Top nav ---------- */ .topnav { border-bottom: 0.5px solid var(--border-tertiary); font-family: var(--font-sans); /* Pin so JA's larger body line-height doesn't bleed into chrome. */ line-height: 1.75; } .topnav-inner { max-width: 1040px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { font-family: var(--font-serif); font-weight: 500; font-size: 18px; letter-spacing: -0.01em; color: var(--text-primary); } .logo:hover { text-decoration: none; } .topnav-right { display: flex; align-items: center; gap: 22px; font-family: var(--font-sans); font-size: 13px; } .nav-link { color: var(--text-secondary); } .nav-link:hover { color: var(--text-primary); } .topnav-controls { display: flex; align-items: center; gap: 2px; padding-left: 14px; border-left: 0.5px solid var(--border-tertiary); } .theme-toggle { background: none; border: 0; padding: 6px; margin: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); cursor: pointer; } .theme-toggle:hover { color: var(--text-primary); } .theme-icon { display: none; } .theme-icon-system { display: block; } :root[data-theme="light"] .theme-icon-system, :root[data-theme="light"] .theme-icon-dark { display: none; } :root[data-theme="light"] .theme-icon-light { display: block; } :root[data-theme="dark"] .theme-icon-system, :root[data-theme="dark"] .theme-icon-light { display: none; } :root[data-theme="dark"] .theme-icon-dark { display: block; } .lang-switcher { display: inline-flex; align-items: center; gap: 3px; padding: 6px 4px; font-size: 12px; color: var(--text-secondary); font-family: var(--font-sans); } .lang-switcher:hover { color: var(--text-primary); text-decoration: none; } .lang-switcher-label { display: inline-block; min-width: 1.4em; text-align: center; } .lang-switcher-chevron { display: block; } /* ---------- Main column ---------- */ main { max-width: 1040px; margin: 0 auto; padding: 48px 24px; } /* ---------- Index ---------- */ .intro { max-width: 500px; margin-bottom: 64px; } .lede { font-family: var(--font-serif); font-size: 20px; line-height: 1.55; letter-spacing: -0.005em; color: var(--text-primary); margin: 0; } :lang(ja) .lede { letter-spacing: 0; line-height: 1.7; } .eyebrow { font-family: var(--font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--text-tertiary); margin: 0 0 0.9rem; } :lang(ja) .eyebrow { text-transform: none; letter-spacing: 0.16em; } .featured { margin-bottom: 56px; } .featured-post { display: block; max-width: 580px; } .featured-post.has-cover { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 24px; align-items: start; max-width: none; } .featured-cover img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; } .featured-title { font-family: var(--font-serif); font-weight: 500; font-size: 24px; line-height: 1.20; letter-spacing: -0.015em; margin: 0 0 8px; } :lang(ja) .featured-title { letter-spacing: 0.01em; line-height: 1.35; } .featured-title a { color: var(--text-primary); } .featured-title a:hover { text-decoration: none; } .dek { font-family: var(--font-serif); font-size: 15px; color: var(--text-secondary); line-height: 1.55; margin: 0; } .archive-year { margin-bottom: 32px; } .archive-year-label { font-family: var(--font-serif); font-size: 14px; font-weight: 500; letter-spacing: 0.04em; color: var(--text-secondary); border-bottom: 0.5px solid var(--border-secondary); padding-bottom: 8px; margin: 0 0 8px; } .archive-entries { list-style: none; margin: 0; padding: 0; } .archive-entry { border-bottom: 0.5px solid var(--border-tertiary); } .archive-entry-link { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 16px; padding: 16px 0; } .archive-entry-link:hover { text-decoration: none; } .archive-entry-link:hover .archive-title { text-decoration: underline; } .archive-date { font-family: var(--font-sans); font-size: 12px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; padding-top: 2px; } .archive-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .archive-title { font-family: var(--font-serif); font-size: 17px; font-weight: 500; color: var(--text-primary); line-height: 1.30; } :lang(ja) .archive-title { letter-spacing: 0.01em; } .archive-dek { font-family: var(--font-serif); font-size: 14px; color: var(--text-secondary); line-height: 1.45; } /* ---------- Page ---------- */ .page { max-width: 680px; margin: 0 auto; } .page-title { font-family: var(--font-serif); font-weight: 500; font-size: 28px; line-height: 1.2; letter-spacing: -0.015em; margin: 0 0 32px; } :lang(ja) .page-title { letter-spacing: 0.01em; line-height: 1.35; } .page-body p { margin: 0 0 1.2rem; } .page-body ul, .page-body ol { padding-left: 1.2rem; } /* ---------- Post ---------- */ .post { max-width: 800px; margin: 0 auto; } .post-header { max-width: 440px; margin-bottom: 1.8rem; } .post-title { font-family: var(--font-serif); font-weight: 500; font-size: 34px; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 1rem; color: var(--text-primary); } :lang(ja) .post-title { letter-spacing: 0.01em; line-height: 1.30; } .byline { font-family: var(--font-sans); font-size: 13px; color: var(--text-secondary); margin: 0; } .byline-sep { padding: 0 6px; opacity: 0.6; } .post-body { display: block; } .post-body p { margin: 0 0 1.2rem; } .post-body ul, .post-body ol { margin: 0 0 1.2rem; } .post-body pre { font-family: var(--font-mono); font-size: 13px; line-height: 1.55; background: var(--bg-tertiary); border-radius: 4px; padding: 14px 16px; margin: 0 0 1.2rem; white-space: pre-wrap; overflow-wrap: anywhere; } .post-body pre code { font-family: inherit; font-size: inherit; background: transparent; padding: 0; } .post-body :not(pre) > code { font-family: var(--font-mono); font-size: 0.88em; background: var(--bg-tertiary); padding: 1px 5px; border-radius: 3px; } .post-body a { text-decoration: underline dotted; text-decoration-thickness: 1px; } .post-body a:hover { text-decoration-style: solid; } .post-body h2 { font-family: var(--font-serif); font-weight: 500; font-size: 22px; margin: 40px 0 16px; } .post-body blockquote { font-family: var(--font-serif); font-style: italic; font-size: 17px; line-height: 1.55; margin: 0 0 1.2rem; padding: 0 0 0 20px; border-left: 2px solid var(--border-secondary); color: var(--text-secondary); } .post-body blockquote p { margin: 0 0 0.6rem; } .post-body blockquote p:last-child { margin-bottom: 0; } :lang(ja) .post-body blockquote { line-height: 1.55; letter-spacing: 0; } .post-body hr { border: 0; text-align: center; margin: 3rem 0 2rem; height: 1em; } .post-body hr::before { content: "✦ ✦ ✦"; color: var(--text-tertiary); font-size: 11px; letter-spacing: 0.8em; } .post-body figure { margin: 2.5rem 0; } .post-body figure img { width: 100%; border-radius: 8px; display: block; } .post-body figcaption { font-family: var(--font-serif); font-style: italic; font-size: 13.5px; color: var(--text-secondary); margin-top: 12px; padding-left: 2px; max-width: 460px; } /* Row = one or more paragraphs in column 1 + an optional aside in column 2. Below the rail breakpoint the row is single-column flow. */ .post-body .row { display: block; } .post-body .row > p { margin: 0 0 1.2rem; } .post-body .row aside { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.6; color: var(--text-secondary); border-left: 2px solid var(--border-secondary); padding: 2px 0 2px 12px; margin: 0 0 1.2rem; } :lang(ja) .post-body .row aside { line-height: 1.75; } .post-body .row aside::before { content: attr(data-variant); display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--text-tertiary); margin: 0 0 0.4rem; } :lang(ja) .post-body .row aside[data-variant="aside"]::before { content: "余談"; text-transform: none; letter-spacing: 0.16em; } :lang(ja) .post-body .row aside[data-variant="note"]::before { content: "注"; text-transform: none; letter-spacing: 0.16em; } .post-body .row aside p { margin: 0; } /* Marginalia rail kicks in once there's room for prose + aside. Every top-level block (paragraph, blockquote, list, heading, hr, figure) sits in column 1 so widths match; asides float into the rail in column 2 next to the paragraph they follow. Below the breakpoint, rows collapse to block flow and asides stack inline. */ @media (min-width: 720px) { .post-body .row { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 28px; align-items: start; } .post-body .row > * { grid-column: 1; } .post-body .row > aside { grid-column: 2; margin-bottom: 0; } } /* Drop cap (EN only — see §3.5 of the design spec) */ :lang(en) .post[data-drop-cap="true"] .post-body .row:first-child > p:first-child::first-letter, :lang(en) .post[data-drop-cap="true"] .post-body > p:first-child::first-letter { float: left; font-family: var(--font-serif); font-weight: 500; font-size: 50px; line-height: 0.85; padding: 7px 8px 0 0; } /* Post nav (prev/next) — width-matched to the prose column so it sits flush with the body content rather than spanning into the aside rail. */ .post-nav { display: flex; justify-content: space-between; gap: 24px; padding-top: 1.4rem; margin-top: 3rem; border-top: 0.5px solid var(--border-tertiary); max-width: calc(100% - 170px - 28px); } .post-nav-prev, .post-nav-next { max-width: 45%; } .post-nav-next { text-align: right; margin-left: auto; } .post-nav a { display: flex; flex-direction: column; gap: 5px; color: var(--text-secondary); } .post-nav a:hover { text-decoration: none; } .post-nav-label { font-family: var(--font-sans); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.10em; color: var(--text-tertiary); } :lang(ja) .post-nav-label { text-transform: none; letter-spacing: 0.16em; } .post-nav-title { font-family: var(--font-serif); font-size: 15px; line-height: 1.3; color: var(--text-primary); } /* ---------- Responsive ---------- */ @media (max-width: 768px) { .topnav-inner { padding: 12px 16px; gap: 12px; } .topnav-right { gap: 14px; } main { padding: 32px 16px; } .featured-post { grid-template-columns: minmax(0, 1fr); } .archive-entry-link { grid-template-columns: 70px minmax(0, 1fr); gap: 12px; } .post-title { font-size: 28px; } }