/* ========================================================================== Cold Desert A quiet, chronological theme. Hairlines, small mono meta, serif headlines. ========================================================================== */ /* -------------------------------------------------------------------------- Tokens -------------------------------------------------------------------------- */ :root { --bg: #fbfbfa; --ink: #17191b; --muted: #6f747a; --faint: #9aa0a6; --hairline: rgba(23, 25, 27, .13); --panel: rgba(23, 25, 27, .04); --accent: var(--ghost-accent-color, #3c6577); --serif: var(--gh-font-heading, "Iowan Old Style", "Palatino Linotype", Palatino, "Source Serif 4", Georgia, serif); --body: var(--gh-font-body, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif); --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --header-h: 54px; --measure: 1020px; --reading: 700px; --gutter: clamp(20px, 4vw, 56px); } html.scheme-dark { --bg: #111315; --ink: #e9e7e4; --muted: #9aa0a6; --faint: #767b81; --hairline: rgba(233, 231, 228, .16); --panel: rgba(233, 231, 228, .06); --accent: var(--ghost-accent-color, #8fb6c6); } @media (prefers-color-scheme: dark) { html.scheme-auto { --bg: #111315; --ink: #e9e7e4; --muted: #9aa0a6; --faint: #767b81; --hairline: rgba(233, 231, 228, .16); --panel: rgba(233, 231, 228, .06); --accent: var(--ghost-accent-color, #8fb6c6); } } /* -------------------------------------------------------------------------- Reset -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl { margin: 0; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } /* Links added through Ghost's Code injection (a rel="me" verification link, for instance) land as direct children of and would otherwise print at the top of every page. Keep them in the DOM, out of the layout. */ body > a { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .site { display: flex; flex-direction: column; min-height: 100vh; } .site-main { flex: 1 0 auto; padding-top: var(--header-h); } .home-template .site-main { padding-top: 0; } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; gap: 28px; height: var(--header-h); padding: 0 var(--gutter); background: var(--bg); border-bottom: 1px solid var(--hairline); transition: background-color .25s ease, border-color .25s ease, color .25s ease; } .site-header-name { font-family: var(--serif); font-size: 17px; letter-spacing: -.01em; text-decoration: none; white-space: nowrap; } .site-header-nav { display: flex; align-items: center; gap: 22px; margin-right: auto; min-width: 0; overflow: hidden; } .site-header-tools { display: flex; align-items: center; gap: 22px; } .site-header-link { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--muted); white-space: nowrap; transition: color .2s ease; } .site-header-link:hover, .site-header-link.is-current { color: inherit; } .site-header-menu { display: none; flex-direction: column; gap: 5px; width: 22px; padding: 6px 0; } .site-header-menu span { display: block; height: 1px; background: currentColor; } /* Transparent over the cover */ .site-header-over { background: transparent; border-bottom-color: transparent; color: #fff; } .site-header-over .site-header-link { color: rgba(255, 255, 255, .78); } .site-header-over .site-header-link:hover, .site-header-over .site-header-link.is-current { color: #fff; } /* -------------------------------------------------------------------------- Cover -------------------------------------------------------------------------- */ .cover { position: relative; width: 100%; aspect-ratio: var(--cover-ratio, 21 / 9); max-height: 88vh; min-height: 260px; overflow: hidden; background: var(--panel); } .cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cover-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 26%), linear-gradient(0deg, rgba(0, 0, 0, .46) 0%, rgba(0, 0, 0, 0) 42%); } .cover-caption { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(22px, 3.4vw, 46px); max-width: 680px; color: #fff; } .cover-title { font-family: var(--serif); font-weight: 400; font-size: var(--cover-title, clamp(30px, 4vw, 56px)); line-height: 1.04; letter-spacing: -.025em; text-shadow: 0 1px 24px rgba(0, 0, 0, .28); } .cover-description { margin-top: 10px; max-width: 520px; font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 18px rgba(0, 0, 0, .3); } /* -------------------------------------------------------------------------- Topic spine -------------------------------------------------------------------------- */ .topics { position: sticky; top: var(--header-h); z-index: 10; background: var(--bg); border-bottom: 1px solid var(--hairline); } .topics-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(var(--measure), 100% - (var(--gutter) * 2)); margin: 0 auto; } .topics-list { display: flex; align-items: stretch; min-width: 0; overflow-x: auto; scrollbar-width: none; } .topics-list::-webkit-scrollbar { display: none; } .topic { padding: 15px 18px 14px; font-family: var(--mono); font-size: 11px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--muted); border-bottom: 2px solid transparent; transition: color .2s ease, border-color .2s ease; } .topic:first-child { padding-left: 0; } .topic:hover { color: var(--ink); } .topic.is-active { color: var(--ink); border-bottom-color: var(--ink); } .topics-count { flex-shrink: 0; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); white-space: nowrap; } /* -------------------------------------------------------------------------- Stream -------------------------------------------------------------------------- */ .stream, .archive, .pagination, .post, .post-nav, .post-comments, .empty { width: min(var(--measure), 100% - (var(--gutter) * 2)); margin-left: auto; margin-right: auto; } .entry { display: grid; grid-template-columns: 124px minmax(0, 1fr); column-gap: 36px; align-items: baseline; padding: 30px 0; border-bottom: 1px solid var(--hairline); } .entry:last-child { border-bottom: 0; } .entry-meta { font-family: var(--mono); font-size: 11px; line-height: 1.5; letter-spacing: .06em; text-align: right; color: var(--muted); text-transform: uppercase; } .entry-time { display: block; color: var(--faint); } .entry-body { min-width: 0; } .entry-topic { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--muted); } .entry-topic:hover { color: var(--ink); } .entry-title { margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: clamp(23px, 2.2vw, 30px); line-height: 1.16; letter-spacing: -.02em; } .entry-title a { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .3s ease; } .entry-title a:hover { background-size: 100% 1px; } .entry-inner { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 28px; align-items: start; margin-top: 10px; } .entry-text p { max-width: var(--reading); color: var(--muted); font-size: 16px; line-height: 1.58; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .entry-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; } .entry-actions a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hairline); padding-bottom: 2px; } .entry-actions a:hover { border-bottom-color: currentColor; } .entry-actions span { color: var(--faint); } .entry-locked { color: var(--accent) !important; } .entry-image { display: block; width: 190px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--panel); } .entry-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .entry-image:hover img { transform: scale(1.03); } .empty { padding: 70px 0; color: var(--muted); } /* -------------------------------------------------------------------------- Archive headers -------------------------------------------------------------------------- */ .archive { padding: 56px 0 6px; max-width: none; } .archive-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); } .archive-title { margin-top: 12px; font-family: var(--serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -.03em; } .archive-description { margin-top: 14px; max-width: var(--reading); color: var(--muted); } .error-page { padding-bottom: 80px; } /* -------------------------------------------------------------------------- Pagination -------------------------------------------------------------------------- */ .pagination { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 44px 0 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } .pagination a { color: var(--ink); text-decoration: none; border: 1px solid var(--hairline); padding: 10px 18px; transition: background-color .2s ease, border-color .2s ease; } .pagination a:hover { border-color: var(--ink); background: var(--panel); } .page-number { color: var(--faint); } /* -------------------------------------------------------------------------- Post -------------------------------------------------------------------------- */ .post { padding-top: 56px; } .post-header, .post-content, .post-tags, .post-comments { max-width: var(--reading); margin-left: auto; margin-right: auto; } .post-topic { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; text-decoration: none; color: var(--muted); } .post-title { margin-top: 14px; font-family: var(--serif); font-weight: 400; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.06; letter-spacing: -.03em; } .post-standfirst { margin-top: 16px; font-size: 19px; line-height: 1.5; color: var(--muted); } .post-meta { margin-top: 20px; display: flex; gap: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); } .post-image { margin: 40px auto 0; max-width: min(var(--measure), 100%); } .post-image figcaption { margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--faint); text-align: center; } .post-content { margin-top: 40px; } .post-content > * + * { margin-top: 1.4em; } .post-content p, .post-content li { font-size: 18px; line-height: 1.68; } .post-content a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--faint); } .post-content a:hover { text-decoration-color: currentColor; } .post-content h2, .post-content h3, .post-content h4 { font-family: var(--serif); font-weight: 400; line-height: 1.2; letter-spacing: -.02em; margin-top: 2em; } .post-content h2 { font-size: 28px; } .post-content h3 { font-size: 22px; } .post-content h4 { font-size: 19px; } .post-content ul, .post-content ol { padding-left: 1.3em; } .post-content li + li { margin-top: .4em; } .post-content blockquote { padding-left: 22px; border-left: 2px solid var(--hairline); color: var(--muted); font-style: italic; } .post-content hr { height: 1px; border: 0; margin: 2.6em 0; background: var(--hairline); } .post-content figure { margin-top: 2em; } .post-content figcaption { margin-top: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--faint); text-align: center; } .post-content pre { padding: 18px 20px; overflow-x: auto; background: var(--panel); font-family: var(--mono); font-size: 14px; line-height: 1.55; } .post-content code { font-family: var(--mono); font-size: .88em; } .post-content :not(pre) > code { padding: 2px 5px; background: var(--panel); } /* Koenig card widths */ .post-content .kg-width-wide { max-width: min(var(--measure), 100vw - (var(--gutter) * 2)); margin-left: 50%; transform: translateX(-50%); } .post-content .kg-width-full { max-width: 100vw; margin-left: 50%; transform: translateX(-50%); } .post-content .kg-image, .post-content .kg-gallery-image img { margin-left: auto; margin-right: auto; } .post-tags { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--hairline); font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } .post-tags a { color: var(--muted); text-decoration: none; } .post-tags a:hover { color: var(--ink); } .post-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 56px; padding-top: 26px; border-top: 1px solid var(--hairline); } .post-nav-link { text-decoration: none; } .post-nav-next { text-align: right; grid-column: 2; } .post-nav-link span { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } .post-nav-link strong { display: block; margin-top: 8px; font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.25; } .post-nav-link:hover strong { text-decoration: underline; text-underline-offset: 3px; } .post-comments { margin-top: 56px; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { flex-shrink: 0; margin-top: 84px; border-top: 1px solid var(--hairline); } .site-footer-top, .site-footer-credits { width: min(var(--measure), 100% - (var(--gutter) * 2)); margin: 0 auto; } .site-footer-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding: 30px 0 22px; } .site-footer-nav { display: flex; flex-wrap: wrap; gap: 12px 24px; } .site-footer-nav a, .site-footer-subscribe { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; color: var(--muted); } .site-footer-nav a:hover { color: var(--ink); } .site-footer-subscribe { color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 3px; } .site-footer-credits { padding-bottom: 42px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--faint); } .site-footer-credits a { text-decoration: none; } .site-footer-credits a:hover { color: var(--ink); } /* -------------------------------------------------------------------------- Narrow screens -------------------------------------------------------------------------- */ @media (max-width: 800px) { body { font-size: 16px; } /* The cover stays landscape on phones rather than cropping to a column. */ .cover { aspect-ratio: 16 / 9; min-height: 210px; max-height: 62vh; } .cover-title { font-size: clamp(26px, 7vw, 40px); } .cover-description { font-size: 14px; } .site-header { gap: 16px; } .site-header-name { margin-right: auto; } .site-header-menu { display: flex; } .site-header-nav { position: absolute; top: var(--header-h); left: 0; right: 0; display: none; flex-direction: column; align-items: flex-start; gap: 0; margin: 0; padding: 6px var(--gutter) 16px; background: var(--bg); border-bottom: 1px solid var(--hairline); } .menu-open .site-header-nav { display: flex; } .menu-open .site-header-nav .site-header-link { padding: 12px 0; color: var(--muted); } .site-header-over.site-header:not(.is-open) { color: #fff; } .topics-count { display: none; } .topics-list { padding-right: var(--gutter); } .entry { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; } .entry-meta { display: flex; gap: 12px; text-align: left; } .entry-time { display: inline; } .entry-inner { grid-template-columns: 1fr; gap: 14px; } .entry-image { width: 100%; aspect-ratio: 16 / 10; } .entry-text p { -webkit-line-clamp: 4; } .post { padding-top: 40px; } .post-content p, .post-content li { font-size: 17px; } .post-nav { grid-template-columns: 1fr; } .post-nav-next { grid-column: 1; text-align: left; } .archive { padding-top: 40px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }