@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/source-serif-4/400.woff2') format('woff2'); } @font-face { font-family: 'Source Serif 4'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/source-serif-4/400-italic.woff2') format('woff2'); } @font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/source-serif-4/600.woff2') format('woff2'); } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/fraunces/400.woff2') format('woff2-variations'), url('/assets/fonts/fraunces/400.woff2') format('woff2'); } @font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 100 900; font-display: swap; src: url('/assets/fonts/fraunces/400-italic.woff2') format('woff2-variations'), url('/assets/fonts/fraunces/400-italic.woff2') format('woff2'); } :root { --bg: #f7f3ec; --surface: #ffffff; --fg: #1a1815; --muted: #6b6358; --rule: #1a1815; --accent: #9a2a2a; --accent-fg: #fff7ee; --hero-tint: #ece4d6; --radius: 0px; --font-display: 'Fraunces', Georgia, 'Times New Roman', serif; --font-body: 'Source Serif 4', Georgia, serif; --content-width: 680px; --hero-width: 1100px; --header-width: 1200px; } @media (prefers-color-scheme: dark) { :root { --bg: #1a1815; --surface: #231f1a; --fg: #f0e9dc; --muted: #9a9388; --rule: #f0e9dc; --accent: color-mix(in oklch, #9a2a2a 70%, white); --accent-fg: #1a1815; --hero-tint: #2a251f; } } * { box-sizing: border-box; } html { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.w-790 { margin: 0; display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } ::selection { background: var(--accent); color: var(--accent-fg); } img { max-width: 100%; display: block; } .s-2c8 { max-width: var(--header-width); margin: 0 auto; padding: 1rem 1.5rem; } .t-ce8 { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; } .c-955 { border-bottom: 2px solid var(--rule); background: var(--bg); padding: 1.5rem 0 1rem; text-align: center; } .masthead-title { display: inline-block; font: 600 clamp(28px, 4vw, 44px)/1 var(--font-display); letter-spacing: 0.005em; color: var(--fg); font-variation-settings: "SOFT" 50, "WONK" 0; } .masthead-dek { margin: 0.25rem 0 0; font: italic 400 15px/1.4 var(--font-body); color: var(--muted); } .c-955 .c-bbc { margin-top: 0.85rem; border-top: 1px solid var(--rule); padding-top: 0.6rem; } .c-955 .c-bbc ul, .c-955 .m-323 { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.6rem; } .c-955 .c-bbc a { font: 500 11px/1 var(--font-body); color: var(--fg); text-transform: uppercase; letter-spacing: 0.16em; } .c-955 .c-bbc a:hover { color: var(--accent); text-decoration: none; } .c-7b7 { padding: 2rem 0 3rem; } .article-head { max-width: var(--content-width); text-align: center; padding-top: 1rem; padding-bottom: 1rem; } .category-line { font: italic 500 13px/1 var(--font-body); color: var(--accent); letter-spacing: 0.05em; margin: 0 0 1.1rem; text-transform: uppercase; font-style: italic; } .article-title { font: 300 clamp(34px, 5.2vw, 56px)/1.08 var(--font-display); letter-spacing: -0.012em; margin: 0 0 1rem; text-wrap: balance; font-variation-settings: "SOFT" 100, "WONK" 0; } .article-dek { font: italic 300 21px/1.5 var(--font-body); color: var(--muted); margin: 0 0 1.4rem; text-wrap: pretty; } .article-byline { font: 14px/1 var(--font-body); color: var(--muted); margin: 0; } .article-byline time { font-variant-numeric: tabular-nums; } .article-hero { max-width: var(--hero-width); margin: 2.2rem auto 0; padding: 0 1.5rem; } .article-hero img { width: 100%; display: block; background: var(--hero-tint); } .article-body { max-width: var(--content-width); padding-top: 2.5rem; } .prose-editorial { font: 400 19px/1.75 var(--font-body); color: var(--fg); } .prose-editorial > p:first-of-type::first-letter { font: 400 84px/0.85 var(--font-display); color: var(--accent); float: left; padding: 0.15em 0.12em 0 0; font-variation-settings: "SOFT" 30, "WONK" 1; } .prose-editorial p { margin: 0 0 1.3em; text-wrap: pretty; } .prose-editorial h2 { font: 400 32px/1.2 var(--font-display); letter-spacing: -0.01em; margin: 2.2em 0 0.6em; text-wrap: balance; font-variation-settings: "SOFT" 100, "WONK" 0; } .prose-editorial h3 { font: 500 24px/1.3 var(--font-display); margin: 1.8em 0 0.5em; text-wrap: balance; } .prose-editorial blockquote { border-left: 3px solid var(--accent); margin: 2em -1rem; padding: 0.4em 0 0.4em 2rem; font: italic 300 26px/1.4 var(--font-display); color: var(--fg); text-wrap: balance; font-variation-settings: "SOFT" 100, "WONK" 0; } .prose-editorial blockquote::before { content: '\201C'; } .prose-editorial blockquote::after { content: '\201D'; } .prose-editorial em, .prose-editorial i { font-style: italic; } .prose-editorial strong, .prose-editorial b { font-weight: 600; } .prose-editorial code { font-family: 'Source Serif 4', Georgia, serif; font-style: italic; background: var(--surface); padding: 0 4px; border-radius: 2px; border: 1px solid var(--rule); font-size: 0.95em; } .prose-editorial pre { background: var(--surface); border-left: 3px solid var(--rule); padding: 1rem 1.2rem; overflow-x: auto; margin: 1.6em 0; font-family: ui-monospace, 'Menlo', monospace; font-size: 14px; line-height: 1.5; } .prose-editorial pre code { background: transparent; border: 0; padding: 0; font-style: normal; } .prose-editorial ul, .prose-editorial ol { padding-left: 1.6em; margin: 0 0 1.3em; } .prose-editorial li { margin: 0.3em 0; } .prose-editorial img { margin: 1.6em auto; width: 100%; } .prose-editorial hr { border: 0; height: 1px; background: var(--rule); width: 25%; margin: 2.5em auto; opacity: 0.4; } .prose-editorial a { color: var(--fg); border-bottom: 1px solid var(--accent); } .prose-editorial a:hover { color: var(--accent); text-decoration: none; } .index-wrap { display: grid; grid-template-columns: 1fr; gap: 2rem; max-width: 1100px; padding-top: 2.5rem; } .index-feed { display: flex; flex-direction: column; gap: 0; } .index-row { display: grid; grid-template-columns: 1fr 200px; gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--rule); align-items: start; } .index-row:first-child { padding-top: 0.5rem; } .index-row:last-child { border-bottom: 0; } .row-text { min-width: 0; } .row-title { font: 400 clamp(22px, 2.4vw, 32px)/1.15 var(--font-display); margin: 0.4rem 0 0.5rem; letter-spacing: -0.005em; text-wrap: balance; font-variation-settings: "SOFT" 80, "WONK" 0; } .row-title a { color: var(--fg); } .row-title a:hover { color: var(--accent); text-decoration: none; } .row-dek { font: italic 300 16px/1.55 var(--font-body); color: var(--muted); margin: 0 0 0.6rem; text-wrap: pretty; } .row-byline { font: 13px/1 var(--font-body); color: var(--muted); margin: 0; font-variant-numeric: tabular-nums; } .row-thumb { margin: 0; } .row-thumb img { width: 100%; display: block; } .s-17d { border-top: 1px solid var(--rule); margin-top: 1.5rem; padding-top: 1.5rem; font: italic 400 14px/1.55 var(--font-body); color: var(--muted); } .s-17d .w-4c0 { font-style: normal; font: 500 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg); margin: 0 0 0.6rem; } .s-17d .x-5fe { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.3rem; } .m-b2f { border-top: 2px solid var(--rule); margin-top: 3rem; padding: 1.4rem 0; text-align: center; } .m-b2f .x-5fe, .m-b2f .m-323 { list-style: none; padding: 0; margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem 1.6rem; font: 500 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.14em; } .m-b2f .x-5fe a { color: var(--fg); } .m-b2f .x-5fe a:hover { color: var(--accent); } .colophon { font: italic 14px/1.4 var(--font-body); color: var(--muted); margin: 0; } @media (max-width: 700px) { html { font-size: 16px; } .index-row { grid-template-columns: 1fr; gap: 1rem; } .row-thumb { order: -1; max-width: 80%; } .article-hero { padding: 0 1rem; } .prose-editorial blockquote { margin: 1.6em 0; padding-left: 1.2rem; font-size: 22px; } .prose-editorial > p:first-of-type::first-letter { font-size: 64px; } }