@layer site {
  * { box-sizing: border-box; }
  html { font-size: 100%; }
  body {
    margin: 0;
    padding: 1rem;
    background: #faf7f2;
    color: #1c1a17;
    font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
    font-size: 1.125rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
  }
  h1, h2, h3, .site-name, .stamp, th {
    font-family: "Arial Narrow", "Helvetica Neue", sans-serif;
    font-weight: 700;
    line-height: 1.15;
  }
  h1 { font-size: 2.1rem; margin: 0.2rem 0 0.6rem; }
  h2 { font-size: 1.45rem; }
  h3 { font-size: 1.15rem; }
  a { color: #1c1a17; }
  a:hover { color: #9c4221; }
  .site-name { font-size: 1rem; letter-spacing: 0.04em; text-transform: uppercase; }
  .crumbs { font-size: 1rem; padding: 0; margin: 0.4rem 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
  p, dd { max-width: 68ch; }
  .stamp {
    display: inline-block;
    border: 3px solid #9c4221;
    padding: 0.55rem 0.7rem;
    font-variant-numeric: tabular-nums;
    color: #1c1a17;
    background: transparent;
  }
  .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; padding: 0; list-style: none; }
  .tiles li { border: 1px solid #d8d0c4; padding: 0.6rem; }
  .tiles b { display: block; font-variant-numeric: tabular-nums; font-size: 1.4rem; }
  .chart-labels { font-size: 1rem; }
  .table-frame { overflow-x: auto; max-width: 100%; border: 1px solid #d8d0c4; }
  table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
  caption { text-align: left; font-weight: 700; padding: 0.4rem; }
  th, td { border-top: 1px solid #d8d0c4; padding: 0.35rem 0.45rem; text-align: left; }
  .actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  button, .actions a {
    font: inherit;
    background: #faf7f2;
    color: #1c1a17;
    border: 2px solid #1c1a17;
    padding: 0.45rem 0.7rem;
    text-decoration: none;
  }
  button:hover, .actions a:hover { border-color: #9c4221; }
  .chart img { width: 320px; max-width: 100%; height: auto; }
  .uncertainty, .limits, footer { border-top: 1px solid #d8d0c4; padding-top: 0.6rem; }
  footer a { display: inline-block; margin-right: 0.8rem; }
  @media (min-width: 900px) {
    main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 2rem; align-items: start; }
    .block-title { grid-column: 1 / -1; }
    .block-answer, .block-action, .block-tiles, .block-conclusion, .block-limits { grid-column: 1; }
    .block-figures, .block-table, .block-neighbours, .block-provenance { grid-column: 2; }
  }
  @media (prefers-reduced-motion: reduce) {
    * { transition: none; }
  }
}