/* -------------------------------------------------------------------------- Site stylesheet One file, no external fonts and no framework: the page loads from one HTML and one CSS file. -------------------------------------------------------------------------- */ :root { color-scheme: light; /* dark theme is off */ --bg: #ffffff; /* content surface */ --canvas: #e3e8f1; /* backdrop around the surface */ --bg-soft: #eef2f8; --bg-deep: #0b1120; --ink: #0d1526; --body: #35435c; --muted: #57677d; --line: #e1e7ef; --line-strong: #c8d2e0; --accent: #1d4ed8; --accent-soft: #eaf0ff; --accent-ink: #1e40af; --accent-2: #c2410c; /* warm "editorial" color: kickers and tags */ --max: 1220px; --gut: 26px; /* side margin of the content */ --radius: 2px; /* a newspaper, not an app */ --radius-ui: 3px; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --serif: Georgia, "Iowan Old Style", "Times New Roman", serif; /* TRIAL: dark header, same color as the footer, so the page sits between two identical dark surfaces. The color changes in one place. */ --nav-bg: #0b1120; /* header and menu surface, like the footer */ --nav-bg-deep: #060b16; /* top line with the date, a shade darker */ --nav-ink: #ffffff; --nav-ink-soft: #cbd5e5; /* tagline */ --nav-ink-dim: #60a5fa; /* the brand suffix and icons on hover */ --nav-line: rgba(255, 255, 255, .14); } /* The dark theme is off: the site is always light, whatever the operating system says. The palette is kept and turns on with data-theme="dark" on . */ html[data-theme="dark"] { --bg: #0b1120; --canvas: #05090f; --bg-soft: #121a2b; --ink: #f1f5f9; --body: #c3cddd; --muted: #8d9cb3; --line: #1e293b; --line-strong: #2b3950; --accent: #7ba2ff; --accent-soft: #16203a; --accent-ink: #9db8ff; --accent-2: #fb923c; color-scheme: dark; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--canvas); color: var(--body); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } h1, h2, h3, h4 { color: var(--ink); font-weight: 800; letter-spacing: -.022em; line-height: 1.2; margin: 0; } /* Letter spacing must follow size. Weight 800 and negative tracking belong to large headlines; at 16 px they close the counters of a, e and o and the headline turns into a dark smudge. Small headlines therefore use 700, no tracking and a taller line. */ .card h3, .card.compact h3, .stream-body h3, .side-cards h3, .ranked .ti-title, .related h3, .nb strong { font-weight: 700; letter-spacing: -.004em; line-height: 1.3; } .wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); } /* Content sits on a white "sheet" above a gray backdrop, so the page edge is visible like a printed paper rather than an endless white field. */ main { display: flow-root; /* keeps children's margins inside the white surface */ max-width: var(--max); margin: 0 auto; background: var(--bg); border-left: 1px solid var(--line); border-right: 1px solid var(--line); } @media (min-width: 1260px) { main { box-shadow: 0 2px 28px rgba(13, 21, 38, .07); } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: 10px 16px; z-index: 100; } .skip:focus { left: 8px; top: 8px; } /* -------------------------------------------------------------------- header --- */ /* The background sits on the inner element, not the full screen width, as with the header and menu. Otherwise the dark bar runs edge to edge across the white sheet while the block below it is narrower. */ .topbar { background: transparent; color: #93a4bd; font-size: 13px; } .topbar-in { display: flex; align-items: center; justify-content: space-between; height: 36px; gap: 18px; background: var(--nav-bg-deep); border: 1px solid var(--nav-bg-deep); border-bottom: 0; } .today { text-transform: lowercase; letter-spacing: .02em; } .topbar-links { display: flex; gap: 18px; align-items: center; } .topbar-links a { color: #93a4bd; } .topbar-links a:hover { color: #fff; } .topbar-links .rss { border: 1px solid #2b3950; padding: 2px 9px; border-radius: var(--radius-ui); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; } /* Header and navigation sit on the same white "sheet" as the content, so the gray margins run from the top of the page to the footer. */ .masthead { background: transparent; } .masthead-in { display: flex; align-items: center; gap: 22px; padding-top: 22px; padding-bottom: 22px; background: var(--nav-bg); border: 1px solid var(--nav-bg); border-bottom: 0; } .logo { display: inline-flex; align-items: center; gap: 12px; font-weight: 900; letter-spacing: -.045em; font-size: 34px; } .logo-text { display: inline-flex; align-items: baseline; } .logo-word { color: var(--nav-ink); } .logo-suffix { color: var(--nav-ink-dim); } /* Site mark: white square with a cut-out "W" at rest, blue "W" on a dark square after scrolling (.compact). */ .brand-mark { --mark-bg: var(--nav-ink); --mark-fg: var(--nav-bg); width: 1.06em; height: 1.06em; flex: none; border-radius: 3px; overflow: hidden; transition: color .2s ease, transform .2s ease; } .brand-mark-bg { fill: var(--mark-bg); transition: fill .2s ease; } .brand-mark-fg { fill: var(--mark-fg); transition: fill .2s ease; } .logo:hover .brand-mark, .nav-logo:hover .brand-mark { --mark-bg: var(--nav-ink-dim); } .mainnav.compact .brand-mark { --mark-bg: var(--nav-bg); --mark-fg: var(--nav-ink-dim); } .mainnav.compact .nav-logo:hover .brand-mark { --mark-bg: var(--nav-bg); --mark-fg: var(--nav-ink); } .nav-logo:active .brand-mark { transform: scale(.94); } .tagline { flex: 1; margin: 0; padding-left: 20px; border-left: 1px solid var(--nav-line); color: var(--nav-ink-soft); font-size: 13px; letter-spacing: .01em; } .search { display: flex; align-items: stretch; } .masthead-in .search input { border-color: transparent; } .masthead-in .search button { background: #fff; color: var(--nav-bg); } .masthead-in .search button:hover { background: var(--nav-ink-dim); color: var(--nav-bg); } .search input { border: 1px solid var(--line-strong); border-right: 0; background: var(--bg); color: var(--ink); padding: 10px 14px; font: inherit; font-size: 13px; border-radius: var(--radius-ui) 0 0 var(--radius-ui); min-width: 230px; } .search input:focus { outline: 2px solid var(--accent); outline-offset: -2px; } .search button { border: 0; background: var(--ink); color: #fff; padding: 0 18px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; border-radius: 0 var(--radius-ui) var(--radius-ui) 0; } .search button:hover { background: var(--accent); } .search.big { margin-top: 18px; } .search.big input { min-width: 0; flex: 1; padding: 14px 16px; font-size: 16px; } /* ---------------------------------------------------------------- navigation --- */ .mainnav { position: sticky; top: 0; z-index: 40; background: transparent; } /* On scroll the bar "lifts" off the content with a soft shadow. */ .nav-in { transition: box-shadow .25s ease; } .mainnav.scrolled .nav-in { box-shadow: 0 10px 22px -14px rgba(13, 21, 38, .55); } /* Thin line showing how much of the article has been read. */ .read-progress { position: absolute; left: 0; right: 0; bottom: -3px; height: 3px; /* White, because the terracotta hairline under the bar now has the same color: the hairline is the track, this line is what has been read. */ background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .1s linear; pointer-events: none; z-index: 41; } body:not(.article-page) .read-progress { display: none; } .nav-in { position: relative; display: flex; align-items: stretch; gap: 2px; background: var(--nav-bg); border: 1px solid var(--nav-bg); /* TRIAL: terracotta hairline on the bottom edge, mirroring the one on top of the footer. It sits on the sticky bar, so it stays visible while scrolling. */ border-bottom: 3px solid var(--accent-2); } /* Logo in the bar: visible once the header scrolls away (and always without the script). */ .nav-logo { display: flex; align-items: center; gap: 9px; flex: none; font-weight: 900; font-size: 21px; letter-spacing: -.045em; text-transform: none; max-width: 190px; opacity: 1; overflow: hidden; white-space: nowrap; padding-right: 18px; margin-right: 2px; transition: max-width 1.5s cubic-bezier(.22, .61, .36, 1), opacity .55s ease, padding-right 1.5s cubic-bezier(.22, .61, .36, 1); } .mainnav.js:not(.scrolled) .nav-logo { max-width: 0; opacity: 0; padding-right: 0; } /* Title of what is being read: fills the bar when the headline row collapses. */ .nav-context { display: none; flex: 1; min-width: 0; padding: 0 14px; font-size: 13px; font-weight: 700; color: var(--nav-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-links { display: flex; gap: 2px; flex: 1; overflow-x: auto; scrollbar-width: none; } .nav-links::-webkit-scrollbar { display: none; } .nav-links a { display: flex; align-items: center; white-space: nowrap; padding: 18px 12px; font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--nav-ink); border-bottom: 3px solid transparent; } .nav-links a { position: relative; border-bottom-color: transparent; } /* No underline. A terracotta hairline sits under the bar, so any line under a category would give two stacked lines. The color alone marks the category, lightened to pass contrast on the dark surface: the dark brown of Society would otherwise melt into the background. */ .nav-links a, .subnav a { --cat-light: color-mix(in srgb, var(--cat, var(--accent)) 45%, #fff); } .nav-links a:hover { color: var(--cat-light, var(--nav-ink)); } .nav-links a.active { color: var(--cat-light, var(--nav-ink)); } /* Search and menu in the bar work without JavaScript too (
). */ .nav-tool { position: relative; display: flex; align-items: center; flex: none; } .nav-tool > summary { list-style: none; cursor: pointer; color: var(--nav-ink); display: flex; align-items: center; padding: 0 12px; height: 100%; } .nav-tool > summary::-webkit-details-marker { display: none; } .nav-tool > summary:hover { color: var(--nav-ink-dim); } .nav-tool[open] > summary { color: var(--nav-ink); background: rgba(255, 255, 255, .16); } .nav-tool svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .nav-panel { position: absolute; top: calc(100% + 2px); right: 0; z-index: 60; width: min(380px, calc(100vw - 24px)); background: var(--bg); border: 1px solid var(--line-strong); box-shadow: 0 14px 34px rgba(13, 21, 38, .16); padding: 16px; } .nav-panel .search input { min-width: 0; flex: 1; } .panel-title { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; } .panel-title + .panel-links { margin-bottom: 18px; } .panel-links { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .panel-links a { /* 12 px top and bottom gives a 44 px touch height; below that fingers miss. */ display: block; padding: 12px 12px; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--ink); border-bottom: 0; border-left: 3px solid var(--cat, var(--line)); background: var(--bg-soft); } .panel-links a:hover { color: var(--accent); } .panel-links.secondary a { border-left-color: var(--line); color: var(--muted); background: transparent; } .nav-panel .panel-links a.active { color: var(--cat, var(--accent)); } /* ---------------------------------------------------------------- latest bar --- */ /* Below the menu runs a row of the freshest headlines that rotate on their own. If the editor enters a featured item, it takes that spot. */ /* Category row on phones: outside the sticky bar, it scrolls away with the page. */ .subnav { display: none; } .subnav-in { display: flex; overflow-x: auto; scrollbar-width: none; background: var(--nav-bg); border: 1px solid var(--nav-bg); border-top: 0; } .subnav-in::-webkit-scrollbar { display: none; } .subnav a { position: relative; display: flex; align-items: center; white-space: nowrap; padding: 13px 13px 12px; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--nav-ink); } .subnav a:first-child { padding-left: 0; } .subnav a.active { color: var(--cat-light, var(--nav-ink)); } .newsbar { background: transparent; } .newsbar-in { display: flex; align-items: center; gap: 16px; height: 40px; background: var(--bg); border: 1px solid var(--line); border-top: 0; font-size: 13px; } .newsbar-label { display: inline-flex; align-items: center; gap: 9px; flex: none; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); } .live-dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); flex: none; } .live-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent-2); animation: live-pulse 2.4s ease-out infinite; } @keyframes live-pulse { 0% { transform: scale(.5); opacity: .8; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } } .newsbar-items { position: relative; flex: 1; min-width: 0; height: 20px; overflow: hidden; } .newsbar-item { position: absolute; left: 0; right: 0; top: 0; display: block; line-height: 20px; color: var(--ink); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(105%); pointer-events: none; transition: opacity .35s ease, transform .45s cubic-bezier(.2, .7, .3, 1); } .newsbar-item.is-on { opacity: 1; transform: translateY(0); pointer-events: auto; } .newsbar-item.is-out { opacity: 0; transform: translateY(-105%); } .newsbar-item:hover { color: var(--accent); } .newsbar-all { flex: none; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .newsbar-all:hover { color: var(--accent); } .newsbar.breaking .newsbar-in { background: var(--accent-soft); border-color: var(--accent-soft); } .newsbar.breaking .newsbar-item { font-weight: 700; } /* --------------------------------------------------------------------- cards --- */ .thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-soft); border-radius: var(--radius); } .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .thumb.wide { aspect-ratio: 16 / 9; } .thumb.placeholder { display: grid; place-items: center; background: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px) 0 0 / 9px 9px, linear-gradient(135deg, var(--c, #2563eb) 0%, rgba(11, 17, 32, .94) 100%); } .thumb.placeholder span { color: #fff; font-size: 30px; font-weight: 900; opacity: .3; letter-spacing: -.06em; } .thumb.placeholder::after { content: attr(data-label); position: absolute; left: 12px; bottom: 10px; right: 12px; color: rgba(255, 255, 255, .72); font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card.compact .thumb.placeholder::after, .stream-item .thumb.placeholder::after { content: none; } /* Image zoom: with a mouse on hover, with a finger while touching the card. Hover is gated by a media query because touch screens can "stick" in :hover after a tap, leaving the image zoomed after the finger leaves. site.js sets the .pressed class on touch. */ @media (hover: hover) { .card:hover .thumb img, .stream-item:hover .thumb img { transform: scale(1.02); } } .card.pressed .thumb img, .stream-item.pressed .thumb img { transform: scale(1.02); transition-duration: .22s; /* a finger lifts faster than a mouse leaves */ } .cat-tag { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 8px; color: var(--cat, var(--accent)); /* The color the editor picks is darkened for text so contrast passes AA however light it is. */ color: color-mix(in srgb, var(--cat, var(--accent)) 72%, #0b1120); } .cat-tag:hover { text-decoration: underline; } .meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin-top: 10px; } .meta .dot { opacity: .5; } .card { display: flex; flex-direction: column; gap: 14px; } .card h2 { font-size: 30px; } .card h3 { font-size: 19px; } .card h2 a:hover, .card h3 a:hover, .stream-body h3 a:hover { color: var(--accent); } .card .dek { margin: 8px 0 0; color: var(--body); font-size: 15px; } .card.compact { flex-direction: row; gap: 14px; align-items: flex-start; } .card.compact .card-image { flex: 0 0 104px; } .card.compact .thumb { aspect-ratio: 1 / 1; } .card.compact h3 { font-size: 15px; line-height: 1.3; } .card.compact .meta { margin-top: 7px; font-size: 11px; } .card.compact .cat-tag { font-size: 11px; margin-bottom: 5px; } /* The lead headline is large, but not so large it drowns out the rest of the home page: the cap is 34 px, as on the big news sites. */ .lead-card h2 { font-size: clamp(25px, 2.7vw, 34px); letter-spacing: -.028em; } .lead-card .dek { font-size: 17px; margin-top: 12px; } /* ----------------------------------------------------------------- hero --- */ .hero { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 30px; padding-top: 26px; padding-bottom: 26px; background: var(--bg-soft); border-bottom: 1px solid var(--line-strong); } .hero-side { display: flex; flex-direction: column; gap: 20px; } .hero-side .card + .card { border-top: 1px solid var(--line); padding-top: 20px; } /* ------------------------------------------------------------------- columns --- */ .columns { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 42px; padding-top: 30px; padding-bottom: 46px; align-items: start; } .block-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 2px solid var(--ink); padding-bottom: 9px; margin-bottom: 22px; } /* A section heading must be larger than the headlines it introduces; at 19 px it was smaller than them, because list headlines use 21 px. */ .block-head h2 { font-size: 25px; letter-spacing: -.01em; } .cat-block .block-head { border-bottom-color: var(--cat, var(--ink)); border-bottom-width: 3px; } .cat-block .block-head h2 { color: var(--cat, var(--ink)); display: flex; align-items: center; gap: 10px; } .cat-block .block-head h2::before { content: ''; width: 10px; height: 10px; background: var(--cat, var(--ink)); flex: none; } /* The touch area grows with padding and a negative margin puts the link back in place, so the look does not change. Fingers miss 21 px tall text. */ .more { color: var(--muted); font-size: 13px; font-weight: 700; white-space: nowrap; padding: 11px 0; margin: -11px 0; } .more:hover { color: var(--accent); } .stream-section { margin-bottom: 36px; } .stream { display: flex; flex-direction: column; } .stream-item { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line); } .stream-item:first-child { padding-top: 0; } .stream-body h3 { font-size: 21px; } .stream-body .dek { margin: 9px 0 0; font-size: 15px; color: var(--muted); } .cat-block { margin-bottom: 36px; } .cat-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 26px; } .cat-grid .card.compact { grid-column: 2; } .cat-grid .card:first-child { grid-row: span 3; } .related .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .related .cat-grid .card:first-child { grid-row: auto; } .related .cat-grid .card.compact { grid-column: auto; } /* ---------------------------------------------------------------- sidebar --- */ .col-side { display: flex; flex-direction: column; gap: 22px; position: sticky; top: 70px; padding-left: 30px; } .side-block { background: var(--bg-soft); border: 1px solid var(--line); border-top: 2px solid var(--ink); padding: 13px 16px 16px; } .side-title { font-size: 15px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; } .side-title::before { content: ''; width: 10px; height: 10px; background: var(--accent-2); flex: none; } .ranked { list-style: none; margin: 0; padding: 0; counter-reset: r; } .ranked li { display: flex; gap: 13px; padding: 10px 0; border-bottom: 1px solid var(--line); } .ranked li:last-child { border-bottom: 0; } .ranked .rank { font-size: 21px; font-weight: 900; color: var(--line-strong); line-height: 1; min-width: 24px; font-variant-numeric: tabular-nums; } .ranked li:nth-child(-n+3) .rank { color: var(--accent-2); } .ti-title { display: block; color: var(--ink); font-weight: 700; font-size: 15px; line-height: 1.3; } .ranked a:hover .ti-title, .side-cards h3 a:hover { color: var(--accent); } .ti-meta { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; } .side-cards { display: flex; flex-direction: column; gap: 16px; } /* In the narrower sidebar the headline needs more room than the thumbnail. */ .side-cards .card.compact { gap: 12px; } .side-cards .card.compact .card-image { flex: 0 0 78px; } .tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; } .tag-cloud a { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line-strong); padding: 7px 11px; border-radius: var(--radius); font-size: 13px; color: var(--ink); background: var(--bg); } .tag-cloud a:hover { border-color: var(--accent); color: var(--accent); } .tag-cloud small { color: var(--muted); font-size: 11px; } .side-cta p:last-of-type { margin-bottom: 16px; } .side-cta p { margin: 0 0 14px; font-size: 13px; color: var(--muted); } .btn-rss { display: inline-block; background: var(--ink); color: #fff; padding: 11px 18px; border-radius: var(--radius-ui); font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } .btn-rss:hover { background: var(--accent); } /* ------------------------------------------------------------ list pages --- */ .page-head { padding-top: 26px; padding-bottom: 22px; background: var(--bg-soft); border-bottom: 1px solid var(--line-strong); } .kicker { font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--cat, var(--accent-2)); margin-bottom: 10px; display: inline-flex; align-items: center; gap: 9px; } .kicker::before { content: ''; width: 18px; height: 3px; background: currentColor; flex: none; } .page-head h1 { font-size: clamp(30px, 4vw, 44px); letter-spacing: -.03em; } .page-intro { margin: 12px 0 0; font-size: 17px; color: var(--muted); max-width: 62ch; } .count { margin: 12px 0 0; font-size: 13px; color: var(--muted); } .pagination { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 32px; } .pagination a, .pagination .current, .pagination .gap { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-ui); font-size: 13px; font-weight: 700; color: var(--ink); } .pagination a:hover { border-color: var(--accent); color: var(--accent); } .pagination .current { background: var(--ink); border-color: var(--ink); color: #fff; } .pagination .gap { border: 0; min-width: 20px; color: var(--muted); } .empty-state { padding: 48px 0 56px; color: var(--muted); } .empty-state p { margin: 0 0 8px; } .empty-title { color: var(--ink); font-size: 19px; font-weight: 800; letter-spacing: -.01em; } .empty-state .btn-rss { margin-top: 14px; } .empty-state h1 { margin-bottom: 12px; } .muted { color: var(--muted); } .error-page { padding: 70px 0 90px; } .error-page h1 { font-size: clamp(30px, 5vw, 48px); margin-bottom: 14px; } .error-page .stream { margin: 30px 0; } /* ------------------------------------------------------------------- article --- */ /* The column is narrow on purpose: at 820 px a line had 81 characters, while 60 to 75 read comfortably. At 700 px it is 71, measured with the real width of Georgia, not estimated. Images therefore break out of the column, so the text gets calm and photos keep their size. */ .article { max-width: 700px; padding-top: 22px; padding-bottom: 34px; } .article.narrow { max-width: 660px; } .preview-flag { background: #fef3c7; border: 1px solid #fcd34d; color: #92400e; padding: 11px 16px; margin-top: 16px; border-radius: var(--radius); font-size: 13px; font-weight: 700; } .crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 18px; } .crumbs a:hover { color: var(--accent); } /* text-wrap: balance evens out headline line lengths so no lone word is left on the last line. */ .article-head h1 { font-size: clamp(30px, 4.6vw, 46px); letter-spacing: -.032em; line-height: 1.12; text-wrap: balance; } .article-lead { font-size: 19px; color: var(--muted); margin: 13px 0 0; line-height: 1.5; text-wrap: pretty; } .byline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 16px; padding: 11px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); } .byline .author { color: var(--ink); font-weight: 700; } .byline .dot { opacity: .5; } .article-cover { margin: 18px 0 0; } /* The cover is cropped to 16:9 instead of keeping its original ratio. A portrait or 4:3 photo would otherwise grow so tall that the reader has to scroll a full screen to reach the first sentence. */ .article-cover img { width: 100%; border-radius: var(--radius); aspect-ratio: 16 / 9; object-fit: cover; } .article-cover figcaption { margin-top: 9px; font-size: 13px; color: var(--muted); text-align: center; } .article-body { font-family: var(--serif); font-size: 19px; line-height: 1.75; color: var(--body); margin-top: 26px; } /* Space between paragraphs must be clearly larger than between lines, or the paragraphs merge into one block with nowhere for the eye to rest. */ .article-body p { margin: 0 0 1.35em; text-wrap: pretty; } /* A section heading belongs to the text below it, so the space above it is twice the space below. */ .article-body h2 { font-family: var(--sans); font-size: 25px; margin: 2em 0 .55em; } .article-body h3 { font-family: var(--sans); font-size: 19px; margin: 1.7em 0 .5em; } .article-body a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; /* A faint line while reading, a full one on hover: a text with fifteen links does not look sprinkled with blue smudges. */ text-decoration-color: color-mix(in srgb, var(--accent) 32%, transparent); transition: text-decoration-color .15s ease; } .article-body a:hover { text-decoration-color: var(--accent); } .article-body ul, .article-body ol { margin: 0 0 1.25em; padding-left: 1.35em; } .article-body li { margin-bottom: .5em; } .article-body blockquote { margin: 1.9em 0; padding: 2px 0 2px 24px; border-left: 3px solid var(--accent-2); color: var(--ink); font-style: italic; font-size: 1.06em; line-height: 1.6; } .article-body blockquote p:last-child { margin-bottom: 0; } .article-body figure { margin: 1.8em 0; } .article-body img { border-radius: var(--radius); } .article-body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; background: var(--bg-soft); padding: 2px 6px; border-radius: 4px; } .article-body pre { background: var(--bg-soft); padding: 16px; border-radius: var(--radius); overflow-x: auto; } .article-body pre code { background: none; padding: 0; } /* A pause between two parts of the text. A rule across the column cuts the page in two; three dots say the same without interrupting the reading. */ .article-body hr { border: 0; height: 0; margin: 2.6em 0; overflow: visible; text-align: center; } .article-body hr::before { content: "•\00a0•\00a0•"; display: block; transform: translateY(-.5em); font-family: var(--sans); font-size: 15px; letter-spacing: .5em; color: color-mix(in srgb, var(--muted) 55%, transparent); } .article-body table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 15px; } .article-body th, .article-body td { border: 1px solid var(--line); padding: 9px 12px; text-align: left; } .source-box { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 30px 0 0; padding: 14px 18px; background: var(--bg-soft); border-left: 3px solid var(--accent); border-radius: 0; font-size: 15px; } .source-label { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .source-box a { color: var(--accent); font-weight: 700; } .source-box a:hover { text-decoration: underline; } .tag-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; } .tag-list a { font-size: 13px; color: var(--muted); border: 1px solid var(--line); padding: 6px 11px; border-radius: var(--radius); } .tag-list a:hover { border-color: var(--accent); color: var(--accent); } .share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); } .share-label { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .share-btn { /* and