@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/dm-sans/400.woff2') format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/fonts/dm-sans/500.woff2') format('woff2'); } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/assets/fonts/dm-sans/700.woff2') format('woff2'); } @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/fonts/newsreader/400.woff2') format('woff2'); } @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400; font-display: swap; src: url('/assets/fonts/newsreader/400-italic.woff2') format('woff2'); } @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/fonts/newsreader/600.woff2') format('woff2'); } :root { --bg: #f5f1ec; --surface: #ffffff; --fg: #1f2421; --muted: #6f7670; --rule: #cfc8bf; --accent: #7F00FF; --accent-fg: #ffffff; --hero-tint: #e6dfd4; --radius: 20px; --radius-sm: 12px; --font-display: 'Newsreader', Georgia, serif; --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --content-width: 720px; --grid-width: 1180px; } @media (prefers-color-scheme: dark) { :root { --bg: #1a1f1c; --surface: #232826; --fg: #ece5dd; --muted: #a09a90; --rule: #3a4039; --accent: color-mix(in oklch, #7F00FF 70%, white); --accent-fg: #1a1f1c; --hero-tint: #262b28; } } * { box-sizing: border-box; } html { background: var(--bg); color: var(--fg); font-family: var(--font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.w-8f6 { margin: 0; display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } ::selection { background: var(--accent); color: var(--accent-fg); } img { max-width: 100%; display: block; } .x-adf { max-width: var(--grid-width); margin: 0 auto; padding: 1rem 1.5rem; } .w-430 { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; } .t-491 { background: var(--bg); border-bottom: 1px solid var(--rule); padding: 0.5rem 0; position: sticky; top: 0; z-index: 10; } .brand { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--fg); text-decoration: none; } .brand-mark { display: inline-block; width: 14px; height: 14px; background: var(--accent); border-radius: 50%; flex-shrink: 0; } .brand-mark--sm { width: 10px; height: 10px; } .brand-name { font: 600 22px/1 var(--font-display); letter-spacing: -0.01em; } .brand-name--sm { font-size: 16px; } .t-491 .m-1e5 ul, .t-491 .t-536 { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; } .t-491 .m-1e5 a { font: 500 14px/1 var(--font-body); color: var(--muted); } .t-491 .m-1e5 a:hover { color: var(--fg); text-decoration: none; } .w-755 { padding: 0 0 4rem; } .hero-photo { margin: 0; max-width: var(--grid-width); padding: 1.5rem 1.5rem 0; margin-left: auto; margin-right: auto; } .hero-photo > * { border-radius: var(--radius); overflow: hidden; background: var(--hero-tint); } .hero-photo img { width: 100%; display: block; } .article-head { max-width: var(--content-width); padding-top: 2rem; padding-bottom: 0.5rem; } .eyebrow { font: 500 11px/1 var(--font-body); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin: 0 0 0.85rem; } .article-title { font: 500 clamp(34px, 4.6vw, 54px)/1.1 var(--font-display); letter-spacing: -0.012em; margin: 0 0 1rem; text-wrap: balance; } .article-dek { font: 400 19px/1.55 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-body { max-width: var(--content-width); padding-top: 2rem; } .prose-lifestyle { font: 400 17px/1.7 var(--font-body); color: var(--fg); } .prose-lifestyle p { margin: 0 0 1.2em; text-wrap: pretty; } .prose-lifestyle h2 { font: 500 30px/1.2 var(--font-display); letter-spacing: -0.01em; margin: 2em 0 0.5em; text-wrap: balance; } .prose-lifestyle h3 { font: 500 22px/1.3 var(--font-display); margin: 1.6em 0 0.4em; text-wrap: balance; } .prose-lifestyle blockquote { margin: 1.6em 0; padding: 0.4em 0 0.4em 1.4em; border-left: 3px solid var(--accent); font: italic 400 21px/1.45 var(--font-display); color: var(--fg); text-wrap: balance; } .prose-lifestyle a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .prose-lifestyle a:hover { text-decoration-thickness: 2px; } .prose-lifestyle code { font-family: ui-monospace, 'Menlo', monospace; background: var(--surface); padding: 1px 6px; border-radius: 4px; font-size: 0.9em; } .prose-lifestyle pre { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-sm); padding: 1rem 1.2rem; overflow-x: auto; margin: 1.4em 0; font-family: ui-monospace, 'Menlo', monospace; font-size: 14px; } .prose-lifestyle pre code { background: transparent; padding: 0; border-radius: 0; } .prose-lifestyle ul, .prose-lifestyle ol { padding-left: 1.4em; margin: 0 0 1.2em; } .prose-lifestyle li { margin: 0.2em 0; } .prose-lifestyle img { border-radius: var(--radius-sm); margin: 1.4em 0; width: 100%; } .prose-lifestyle hr { border: 0; border-top: 1px solid var(--rule); margin: 2em 0; } .index-wrap { padding: 2rem 1.5rem 3rem; max-width: var(--grid-width); } .index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.6rem; } .story-card { background: var(--surface); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--rule); transition: transform 0.2s ease, box-shadow 0.2s ease; } .story-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.06); } .card-link { display: block; color: var(--fg); padding: 0; text-decoration: none; } .card-link:hover { text-decoration: none; } .card-photo { margin: 0; background: var(--hero-tint); } .card-photo img { width: 100%; display: block; aspect-ratio: 3 / 2; object-fit: cover; } .card-link .eyebrow { margin: 1.1rem 1.2rem 0.4rem; } .card-title { font: 500 22px/1.25 var(--font-display); margin: 1.15rem 1.3rem 0.55rem; letter-spacing: -0.005em; text-wrap: balance; } .card-dek { font: 400 14.5px/1.55 var(--font-body); color: var(--muted); margin: 0 1.3rem 0.7rem; text-wrap: pretty; } .card-byline { font: 13px/1 var(--font-body); color: var(--muted); margin: 0 1.3rem 1.25rem; } .s-396 { margin-top: 2rem; padding: 1.4rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); } .s-396 .eyebrow { margin: 0 0 0.6rem; } .s-396 .x-369 { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; font-size: 14px; } .c-eaf { border-top: 1px solid var(--rule); margin-top: 3rem; padding: 1.8rem 0; background: var(--bg); } .c-eaf .w-430 { align-items: center; flex-wrap: wrap; gap: 1rem 2rem; } .brand-line { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; color: var(--fg); } .c-eaf .x-369, .c-eaf .t-536 { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.4rem; font-size: 13.5px; } .c-eaf .x-369 a { color: var(--muted); } .c-eaf .x-369 a:hover { color: var(--fg); } .colophon { font: 13px/1.4 var(--font-body); color: var(--muted); margin: 0; flex-basis: 100%; } @media (max-width: 900px) { .index-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .index-grid { grid-template-columns: 1fr; } .hero-photo { padding: 1rem 1rem 0; } .article-title { font-size: 32px; } .t-491 .w-430 { gap: 0.8rem; } }