:root {
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
  color-scheme: dark;
  color: #f6f7f7;
  background: #202325;
  --yellow: #ffcf60;
  --muted: #c4c9cb;
  --divider: #665838;
  font-size: min(1vw, 1.78vh);
}
* { box-sizing: border-box; }
body { margin: 0; }
.board {
  min-height: 100vh;
  padding: 2.35rem 3.3rem 1.35rem;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1.3rem;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  border-bottom: .16rem solid var(--yellow);
  padding-bottom: 1.35rem;
}
h1 { font-size: 3.05rem; line-height: 1.05; letter-spacing: -.045em; margin: 0; }
header img {
  width: 20rem;
  height: auto;
  padding: .48rem .63rem;
  background: #faf8f0;
  border-radius: .22rem;
}
main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.1rem; }
section { display: grid; grid-template-rows: auto 1fr; min-width: 0; }
h2 {
  margin: 0 0 .65rem;
  padding: .6rem 1rem .75rem;
  background: #393327;
  border-left: .38rem solid var(--yellow);
  color: var(--yellow);
  font-size: 2.05rem;
  line-height: 1.12;
  letter-spacing: -.024em;
}
section + section h2 { background: #30363a; }
.stories { display: grid; grid-template-rows: repeat(3, 1fr); background: #292d30; }
article {
  display: grid;
  align-content: center;
  gap: .45rem;
  padding: .85rem 1.15rem;
  min-width: 0;
}
article + article { border-top: .1rem solid var(--divider); }
h3 { margin: 0; font-size: 1.8rem; line-height: 1.13; letter-spacing: -.028em; overflow-wrap: anywhere; }
h3 a { color: inherit; text-decoration: none; }
h3 a:hover, h3 a:focus-visible { text-decoration: underline; text-decoration-color: var(--yellow); }
p { margin: 0; }
.relevance { font-size: 1.28rem; line-height: 1.26; }
.source { font-size: 1.03rem; color: var(--muted); }
footer {
  border-top: .1rem solid var(--divider);
  padding-top: .68rem;
  color: var(--muted);
  font-size: 1.08rem;
  font-variant-numeric: tabular-nums;
}
@media (max-aspect-ratio: 5/4) {
  :root { font-size: clamp(12px, 2.4vw, 18px); }
  .board { padding: 1.2rem; }
  header { flex-wrap: wrap; }
  header img { width: min(20rem, 80%); }
  main { grid-template-columns: 1fr; }
}