The Dispatch | Independent news, updated every day

:root {
–ink: #141414;
–muted: #555555;
–paper: #FFFFFF;
–soft: #F6F4F0;
–rule: #E2E0DC;
–photo: #E8E5DF;
–accent: #B3261E;
–accent-dark: #8E1E17;
–serif: ‘Newsreader’, Georgia, ‘Times New Roman’, serif;
–sans: ‘Public Sans’, ‘Helvetica Neue’, Helvetica, sans-serif;
–max: 1240px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(–paper); color: var(–ink); font-family: var(–sans); line-height: 1.4; }
a { color: var(–ink); text-decoration: none; }
a:hover { color: var(–accent-dark); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(–accent); outline-offset: 2px; }
img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
.wrap { max-width: var(–max); margin: 0 auto; padding: 0 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Utility bar */
.utility { background: var(–soft); border-bottom: 1px solid var(–rule); font-size: 13px; color: var(–muted); }
.utility .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
.utility nav { display: flex; flex-wrap: wrap; gap: 20px; }
.utility a { color: var(–muted); }

/* Masthead */
.masthead .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; padding-top: 28px; padding-bottom: 20px; }
.brand { display: flex; flex-direction: column; gap: 6px; }
.logo { font-family: var(–serif); font-weight: 700; font-size: clamp(40px, 7vw, 56px); line-height: 1; letter-spacing: -0.02em; }
.tagline { font-size: 14px; color: var(–muted); }
.search { display: flex; gap: 8px; }
.search input { height: 44px; width: 220px; max-width: 60vw; padding: 0 14px; border: 1px solid #C9C6C0; border-radius: 4px; font: inherit; font-size: 15px; }
.search button { height: 44px; width: 44px; display: grid; place-items: center; border: 0; border-radius: 4px; background: var(–ink); color: #fff; cursor: pointer; }

/* Main nav */
.mainnav { border-top: 3px solid var(–ink); border-bottom: 1px solid var(–ink); }
.mainnav ul { list-style: none; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 4px 26px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.mainnav a { display: block; padding: 13px 0; }
.mainnav a[aria-current=”page”] { border-bottom: 3px solid var(–accent); margin-bottom: -1px; }

/* Breaking */
.breaking { margin-top: 16px; }
.breaking .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 10px 14px; background: var(–soft); border-radius: 4px; }
.badge { background: var(–accent); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; }
.breaking a { font-size: 15px; font-weight: 600; }

main.wrap { display: flex; flex-direction: column; gap: 48px; padding-top: 28px; }

/* Shared story bits */
.photo { background-color: var(–photo); background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.035) 0 12px, transparent 12px 24px); border-radius: 4px; aspect-ratio: 3 / 2; }
.photo.wide { aspect-ratio: 16 / 9; display: flex; align-items: flex-end; padding: 12px; font-size: 12px; color: var(–muted); }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(–accent); }
.meta { font-size: 13px; color: var(–muted); }
.story { display: flex; flex-direction: column; gap: 10px; }
.story h3 { font-family: var(–serif); font-weight: 600; font-size: 20px; line-height: 1.25; }

/* Top stories */
.top { display: flex; flex-wrap: wrap; gap: 32px; }
.lead { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.lead h1 { font-family: var(–serif); font-weight: 700; font-size: clamp(30px, 4.2vw, 44px); line-height: 1.08; letter-spacing: -0.01em; }
.lead p { font-family: var(–serif); font-size: 20px; line-height: 1.45; color: #333; max-width: 62ch; }
.secondary { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.secondary h2 { font-family: var(–serif); font-weight: 600; font-size: 21px; line-height: 1.22; }
.secondary .story:first-child h2 { font-size: 23px; }
.divider { height: 1px; background: var(–rule); }

.rail { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; border-top: 3px solid var(–ink); padding-top: 12px; }
.rail h2 { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.rail ol, .rail ul { list-style: none; margin: 0; padding: 0; }
.rail li a { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(–rule); font-size: 15px; line-height: 1.35; font-weight: 500; }
.rail time { flex: 0 0 52px; font-size: 13px; font-weight: 700; color: var(–accent); }
.rail .more { padding-top: 14px; font-size: 14px; font-weight: 600; }

/* Sections */
.section { display: flex; flex-direction: column; gap: 18px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-top: 3px solid var(–ink); padding-top: 12px; }
.section-head h2 { font-family: var(–serif); font-weight: 700; font-size: 30px; }
.section-head a { font-size: 14px; font-weight: 600; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 28px; }

/* Opinion + most read */
.split { display: flex; flex-wrap: wrap; gap: 40px; }
.split > .section { flex: 999 1 560px; min-width: 0; }
.opinion-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.op { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: var(–soft); border-radius: 4px; }
.author { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 600; }
.avatar { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 50%; background: #D9D5CE; }
.op h3 { font-family: var(–serif); font-style: italic; font-weight: 600; font-size: 21px; line-height: 1.25; }
.mostread { flex: 1 1 280px; }
.mostread li a { gap: 16px; align-items: flex-start; padding: 14px 0; }
.num { flex: 0 0 28px; font-family: var(–serif); font-weight: 700; font-size: 32px; line-height: 1; color: var(–accent); }

/* Newsletter */
.newsletter { background: var(–ink); color: #fff; border-radius: 6px; padding: 40px 32px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.newsletter > div { flex: 1 1 360px; display: flex; flex-direction: column; gap: 8px; }
.newsletter h2 { font-family: var(–serif); font-weight: 700; font-size: 32px; }
.newsletter p { font-size: 16px; line-height: 1.5; color: #D6D3CE; }
.newsletter form { flex: 1 1 360px; display: flex; flex-wrap: wrap; gap: 10px; }
.newsletter input { flex: 1 1 220px; height: 48px; padding: 0 16px; border: 0; border-radius: 4px; font: inherit; font-size: 16px; }
.newsletter button { height: 48px; padding: 0 24px; border: 0; border-radius: 4px; background: var(–accent); color: #fff; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.newsletter button:hover { background: var(–accent-dark); }

/* Footer */
footer { margin-top: 56px; border-top: 3px solid var(–ink); background: var(–soft); }
footer .wrap { display: flex; flex-direction: column; gap: 32px; padding-top: 40px; padding-bottom: 24px; }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; }
.footer-cols > div { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.footer-cols h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 4px; }
.footer-cols .logo { font-size: 28px; }
.footer-cols p { line-height: 1.55; color: var(–muted); }
.legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid #DAD7D1; font-size: 13px; color: var(–muted); }
.legal a { color: var(–muted); }

• Home
• World
• National
• Politics
• Business
• Technology
• Sports
• Entertainment
• Health
• Opinion