/* Writings tiles page. Blue/orange accents only (deuteranomaly-safe). */
:root {
  --bg: #f7f8fa; --panel: #fff; --ink: #1c2330; --muted: #5b6576; --rule: #dde2ea;
  --accent: #1f4fa3;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161d; --panel: #1a2029; --ink: #e5e9f0; --muted: #9aa4b4; --rule: #2c3440;
    --accent: #86abee;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 16px/1.55 -apple-system, "Segoe UI", system-ui, sans-serif;
  padding-inline: 16px; padding-block: 32px 64px;
}
header, main, footer { max-width: 1100px; margin: 0 auto; }
a { color: var(--accent); }
h1 { font-size: 2.2rem; margin: 0 0 4px; }
h2 { font-size: 1.4rem; margin: 48px 0 4px; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.home { margin: 0 0 16px; font-size: .9rem; }
.lede, .blurb { color: var(--muted); margin: 0 0 16px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.tile {
  display: grid; grid-template-columns: 90px 1fr; gap: 14px;
  background: var(--panel); border: 1px solid var(--rule); border-radius: 8px; padding: 14px;
}
.thumb img {
  width: 90px; height: auto; display: block;
  border: 1px solid var(--rule); background: #fff;
  box-shadow: 0 1px 3px rgb(0 0 0 / .12);
}
.tile h3 { font-size: 1rem; margin: 0 0 2px; line-height: 1.3; }
.tile h3 a { text-decoration: none; color: var(--ink); }
.tile h3 a:hover, .tile h3 a:focus-visible { color: var(--accent); text-decoration: underline; }
.facts { font-size: .8rem; color: var(--muted); margin: 0 0 6px; font-variant-numeric: tabular-nums; }
.summary { font-size: .9rem; margin: 0; }
footer { margin-top: 56px; color: var(--muted); font-size: .9rem; }
@media (max-width: 400px) { .grid { grid-template-columns: 1fr; } }
.byline { font-size: .85rem; margin: 0 0 2px; }
.rights { font-size: .75rem; color: var(--muted); margin: 6px 0 0; font-style: italic; }

/* Hover preview: a readable image of the page, shown beside the tile on devices with a
   mouse. Loaded lazily, i.e. only when first shown. site/preview.js flips it to the left
   when there's no room on the right. */
.thumb { position: relative; display: block; align-self: start; }
.preview {
  display: none; position: absolute; top: -8px; left: calc(100% + 12px); z-index: 10;
  width: min(440px, 45vw); padding: 6px; background: #fff; pointer-events: none;
  border: 1px solid var(--rule); border-radius: 6px; box-shadow: 0 8px 28px rgb(0 0 0 / .25);
}
.preview img { width: 100%; height: auto; display: block; border: 0; box-shadow: none; }
.thumb.flip .preview { left: auto; right: calc(100% + 12px); }
@media (hover: hover) and (pointer: fine) {
  .thumb:hover .preview, .thumb:focus-visible .preview { display: block; }
}
@media (prefers-reduced-motion: no-preference) {
  .thumb:hover .preview { animation: pop .12s ease-out; }
  @keyframes pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
}

/* Tile for an external document whose PDF couldn't be fetched: a plain label, no preview */
.thumb.nopreview {
  width: 90px; height: 116px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--rule); border-radius: 4px; color: var(--muted); font-size: .8rem;
  text-decoration: none;
}