/* The Brick Bars — original editorial theme inspired by classic Nordic newspapers */
:root {
  --ink: #111111;
  --muted: #66605c;
  --paper: #ffffff;
  --soft: #f1f1ef;
  --line: #d8d6d2;
  --signal: #e30513;
  --warm: #f7f4ee;
  --max: 1320px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: #ececea;
  font-family: Arial, Helvetica, sans-serif;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img { display: block; width: 100%; height: auto; }
.site-shell { max-width: 1360px; margin: 0 auto; background: var(--paper); min-height: 100vh; border-top: 4px solid var(--signal); }
.masthead { position: sticky; top: 0; z-index: 20; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(10px); }
.mast-row { max-width: var(--max); margin: 0 auto; min-height: 70px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 0 16px; }
.logo { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(28px,3.2vw,43px); font-weight: 900; letter-spacing: -2px; white-space: nowrap; }
.logo span { color: var(--signal); }
.nav { display: flex; gap: 22px; align-items: center; font-size: 15px; font-weight: 700; white-space: nowrap; }
.nav a { padding: 26px 0 20px; border-bottom: 4px solid transparent; }
.nav a:hover, .nav a.active { border-color: var(--signal); }
.actions { display: flex; gap: 8px; align-items: center; }
.pill { border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; font-weight: 700; background: white; }
.pill.red { background: var(--signal); color: white; border-color: var(--signal); }
.menu-btn { display:none; border:0; background:transparent; font-weight:800; font-size:16px; }
.breaking { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 1fr 300px; gap: 10px; padding: 12px 16px 0; }
.breaking-list { display: grid; gap: 7px; }
.breaking-item { background: var(--soft); border-left: 3px solid var(--signal); padding: 13px 15px; font-family: Georgia, serif; font-weight: 700; }
.breaking-item b { color: var(--signal); }
.latest { border: 1px solid var(--line); background: #fff; padding: 14px; }
.latest h3 { margin: 0 0 8px; font-size: 17px; }
.latest a { display:block; padding: 10px 0; border-top: 1px solid var(--line); font-family: Georgia, serif; font-weight: 700; line-height: 1.15; }
.latest small { font: 12px Arial, sans-serif; color: var(--muted); display:block; margin-top:5px; }
main { max-width: var(--max); margin: 0 auto; padding: 14px 16px 48px; }
.hero-grid { display:grid; grid-template-columns: minmax(0,2fr) minmax(280px,.92fr); gap: 12px; align-items:start; }
.hero-story { border-top: 4px solid var(--signal); background:#0c0c0c; color:#fff; }
.hero-story img { aspect-ratio: 16 / 9; object-fit: cover; }
.hero-copy { padding: 22px 18px 24px; }
.eyebrow { font-size: 13px; text-transform: uppercase; letter-spacing: .11em; font-weight: 800; color: var(--signal); }
.hero-copy h1 { font-family: Georgia, 'Times New Roman', serif; font-size: clamp(40px,5vw,72px); line-height: .94; margin: 8px 0 14px; letter-spacing: -2.7px; max-width: 1000px; }
.hero-copy p { font-family: Georgia, serif; font-size: 20px; line-height: 1.35; max-width: 820px; margin: 0; }
.side-stack { display: grid; gap: 12px; }
.side-card { border-top: 1px solid var(--line); padding-top: 10px; }
.side-card img { aspect-ratio: 16/9; object-fit: cover; margin-bottom: 10px; }
.side-card h2 { margin:0 0 6px; font: 800 27px/1.02 Georgia, serif; letter-spacing:-.8px; }
.side-card p { margin:0; color:var(--muted); line-height:1.4; }
.section-head { display:flex; justify-content:space-between; align-items:end; border-top: 4px solid #111; margin: 32px 0 14px; padding-top: 10px; }
.section-head h2 { margin:0; font:900 31px/1 Georgia, serif; }
.section-head a { color:var(--signal); font-weight:800; }
.card-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.news-card { border-top: 1px solid var(--line); padding-top: 11px; }
.news-card img { aspect-ratio: 16/10; object-fit:cover; margin-bottom:11px; }
.news-card .meta { text-transform:uppercase; font-size:11px; letter-spacing:.08em; color:var(--signal); font-weight:800; }
.news-card h3 { font:800 25px/1.05 Georgia, serif; letter-spacing:-.5px; margin:6px 0 8px; }
.news-card p { margin:0; color:var(--muted); line-height:1.45; }
.split-feature { margin-top:28px; display:grid; grid-template-columns:1.1fr .9fr; border-top:4px solid var(--signal); background:var(--warm); }
.split-feature img { height:100%; object-fit:cover; min-height:420px; }
.split-copy { padding:28px; align-self:center; }
.split-copy h2 { font:900 clamp(35px,4vw,58px)/.98 Georgia,serif; letter-spacing:-1.5px; margin:8px 0 16px; }
.split-copy p { font:19px/1.5 Georgia,serif; }
.newsletter { margin-top:34px; background:#171717; color:white; padding:28px; display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; }
.newsletter h2 { font:900 36px/1 Georgia,serif; margin:0 0 6px; }
.newsletter p { margin:0; color:#ccc; }
.newsletter .fake-input { border:1px solid #555; border-radius:999px; padding:14px 22px; min-width:280px; color:#aaa; }
.footer { max-width:var(--max); margin:0 auto; border-top:1px solid var(--line); padding:28px 16px 48px; display:grid; grid-template-columns:1.4fr repeat(3,1fr); gap:24px; }
.footer h4 { margin:0 0 8px; }
.footer a { display:block; color:var(--muted); margin:7px 0; font-size:14px; }
.footer .brand { font:900 31px Georgia,serif; letter-spacing:-1.5px; }

/* Article */
.article-page { max-width: 1100px; margin:0 auto; }
.article-head { max-width:900px; margin:26px auto 20px; }
.article-head h1 { font:900 clamp(44px,6vw,78px)/.96 Georgia,serif; letter-spacing:-2.6px; margin:8px 0 14px; }
.article-deck { font:22px/1.4 Georgia,serif; color:#4a4744; max-width:780px; }
.byline { border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:12px 0; margin-top:18px; color:var(--muted); font-size:13px; display:flex; justify-content:space-between; gap:12px; }
.article-hero { margin:0 auto 24px; }
.article-hero img { aspect-ratio:16/9; object-fit:cover; }
.caption { color:#777; font-size:12px; margin-top:7px; }
.article-body { max-width:760px; margin:0 auto; font:19px/1.72 Georgia,serif; }
.article-body p { margin:0 0 21px; }
.article-body h2 { font:900 34px/1.08 Georgia,serif; letter-spacing:-.8px; margin:38px 0 13px; }
.article-body .standfirst { font-size:23px; line-height:1.55; }
.pullquote { border-left:5px solid var(--signal); padding:8px 0 8px 22px; margin:30px 0; font:900 29px/1.18 Georgia,serif; }
.related { max-width:1000px; margin:46px auto 0; border-top:4px solid #111; padding-top:12px; }
.related h2 { font:900 28px Georgia,serif; margin:0 0 14px; }

/* Blog page */
.page-head { border-top:4px solid var(--signal); padding:22px 0 14px; max-width:900px; }
.page-head h1 { font:900 clamp(46px,6vw,72px)/.95 Georgia,serif; margin:0 0 12px; letter-spacing:-2px; }
.page-head p { font:20px/1.45 Georgia,serif; color:var(--muted); max-width:760px; }
.blog-compose { border:1px solid var(--line); background:var(--warm); padding:24px; margin:10px 0 28px; }
.blog-compose h2 { font:900 30px Georgia,serif; margin:0 0 8px; }
.blog-compose p { margin:0; color:var(--muted); line-height:1.5; }
.archive-list { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; }
.archive-row { display:grid; grid-template-columns:160px 1fr; gap:14px; padding:16px 0; border-top:1px solid var(--line); }
.archive-row img { width:160px; height:105px; object-fit:cover; }
.archive-row h3 { font:800 23px/1.05 Georgia,serif; margin:3px 0 7px; }
.archive-row p { margin:0; color:var(--muted); font-size:14px; line-height:1.4; }

@media (max-width: 980px) {
  .mast-row { grid-template-columns:auto 1fr auto; }
  .nav { position:absolute; top:70px; left:0; right:0; background:#fff; padding:10px 18px 18px; border-bottom:1px solid var(--line); display:none; flex-wrap:wrap; box-shadow:0 12px 30px rgba(0,0,0,.09); }
  .nav.open { display:flex; }
  .nav a { padding:10px 0 6px; }
  .menu-btn { display:block; }
  .actions .pill { display:none; }
  .breaking { grid-template-columns:1fr; }
  .latest { display:none; }
  .hero-grid { grid-template-columns:1fr; }
  .side-stack { grid-template-columns:1fr 1fr; }
  .card-grid { grid-template-columns:1fr 1fr; }
  .footer { grid-template-columns:1fr 1fr; }
}
@media (max-width: 650px) {
  body { background:white; }
  .site-shell { border-top-width:3px; }
  .mast-row { min-height:60px; padding:0 12px; gap:12px; }
  .logo { font-size:28px; letter-spacing:-1.4px; }
  .menu-btn { font-size:14px; }
  .nav { top:60px; gap:14px 18px; }
  .breaking { padding:8px 10px 0; }
  .breaking-item { font-size:14px; padding:11px 12px; }
  main { padding:10px 10px 34px; }
  .hero-copy { padding:18px 14px 20px; }
  .hero-copy h1 { font-size:42px; letter-spacing:-1.8px; }
  .hero-copy p { font-size:18px; }
  .side-stack { grid-template-columns:1fr; }
  .card-grid { grid-template-columns:1fr; gap:22px; }
  .news-card h3 { font-size:28px; }
  .split-feature { grid-template-columns:1fr; }
  .split-feature img { min-height:260px; }
  .split-copy { padding:22px 16px; }
  .newsletter { grid-template-columns:1fr; padding:22px 16px; }
  .newsletter .fake-input { min-width:0; width:100%; }
  .footer { grid-template-columns:1fr; padding:24px 12px 40px; }
  .article-head { margin:18px 6px 16px; }
  .article-head h1 { font-size:46px; letter-spacing:-1.8px; }
  .article-deck { font-size:19px; }
  .byline { flex-direction:column; }
  .article-body { font-size:18px; padding:0 6px; }
  .article-body h2 { font-size:30px; }
  .archive-list { grid-template-columns:1fr; }
  .archive-row { grid-template-columns:118px 1fr; }
  .archive-row img { width:118px; height:88px; }
  .archive-row h3 { font-size:21px; }
}