:root {
    --bg: #F7F5F1;
    --ink: #2E2D28;
    --prose: #55534B;
    --soft: #8A867C;
    --moss: #6E7F62;
  --mark: #486042;
    --line: #DDD8CD;
    --card: #FFFFFF;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #24384C;
      --ink: #F2EEE4;
      --prose: #C9CFD6;
      --soft: #8FA0B4;
      --moss: #B7C4AA;
    --mark: #ECDFD0;
      --line: #3C526A;
      --card: #2B4159;
    }
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  body {
    background: var(--bg);
    color: var(--ink);
    font-family: "Schibsted Grotesk", system-ui, sans-serif;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  main { max-width: 880px; margin: 0 auto; padding: 48px 24px 80px; }
  header.site { margin-bottom: 44px; }
  header.site a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
  .wordmark { font-weight: 500; font-size: 22px; letter-spacing: 0.01em; }
  h1 { font-weight: 500; font-size: clamp(26px, 5vw, 34px); margin-bottom: 14px; }
  .intro {
    font-family: "Newsreader", Georgia, serif;
    font-style: italic;
    color: var(--prose);
    font-size: 19px;
    max-width: 640px;
    margin-bottom: 10px;
  }
  .honest { color: var(--soft); font-size: 15px; max-width: 640px; margin-bottom: 30px; }
  .controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; }
  .chip {
    font: inherit; font-size: 14px; cursor: pointer;
    color: var(--prose); background: none;
    border: 1px solid var(--line); border-radius: 999px; padding: 4px 14px;
  }
  .chip.on { background: var(--moss); border-color: var(--moss); color: var(--bg); }
  .sort {
    margin-left: auto; font-size: 14px; cursor: pointer;
    color: var(--moss); background: none; border: none; font-family: inherit;
    border-bottom: 1px solid var(--line); padding: 0 0 1px;
  }
  .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 18px; }
  .card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .card.hide { display: none; }
  .tagrow { display: flex; align-items: baseline; justify-content: space-between; }
  .tag {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--moss);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 2px 10px;
  }
  .year { font-size: 13px; color: var(--soft); }
  .card h2 { font-size: 18px; font-weight: 500; line-height: 1.35; }
  .card p { color: var(--prose); font-size: 15px; flex: 1; }
  .card p a { color: var(--moss); text-decoration: none; border-bottom: 1px solid var(--line); }
  .card .src { font-size: 13px; color: var(--soft); }
  .card .src a { color: var(--moss); text-decoration: none; border-bottom: 1px solid var(--line); }
  .card .src a:hover, .card p a:hover { border-bottom-color: var(--moss); }
  footer { margin-top: 56px; color: var(--soft); font-size: 14px; max-width: 640px; }
  footer a { color: var(--moss); }