:root {
  --page: #efefeb;
  --paper: #fffef8;
  --ink: #292929;
  --muted: #777;
  --rule: #d7d7d0;
  --blue: #23659a;
  --blue-dark: #153f61;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 14px/1.65 Georgia, "Times New Roman", serif;
}
a { color: var(--blue); }
a:hover { color: var(--blue-dark); }
button, input { font: inherit; }
.skip-link {
  position: fixed;
  top: 0;
  left: 1rem;
  z-index: 10;
  padding: .5rem .75rem;
  transform: translateY(-120%);
  background: #111;
  color: #fff;
}
.skip-link:focus { transform: translateY(0); }
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-shell {
  width: min(940px, calc(100% - 30px));
  margin: 28px auto;
  background: var(--paper);
  border: 1px solid #ccc;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
}
.site-header { padding: 34px 40px 30px; }
.site-header h1 {
  margin: 0 0 3px;
  font-size: 38px;
  font-weight: normal;
  line-height: 1.1;
  letter-spacing: -1px;
}
.site-header h1 a { color: #222; text-decoration: none; }
.site-title {
  margin: 0 0 3px !important;
  font-size: 38px !important;
  font-weight: normal;
  line-height: 1.1;
  letter-spacing: -1px;
}
.site-title a { color: #222; text-decoration: none; }
.site-header p { margin: 0; color: var(--muted); font-size: 13px; font-style: italic; }
.main-nav {
  display: flex;
  padding: 0 28px;
  background: #272727;
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
}
.main-nav a {
  padding: 10px 13px;
  color: #eee;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}
.main-nav a:hover { background: #444; color: #fff; }

.layout {
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(210px, .85fr);
  gap: 42px;
  padding: 38px 40px 50px;
}
.sample-note {
  margin: 0 0 30px;
  padding: 9px 12px;
  border: 1px solid #ddd6b5;
  background: #fffbe8;
  color: #665d35;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}
.post { margin-bottom: 48px; }
.post > header h2 { margin: 0 0 4px; font-size: 28px; font-weight: normal; line-height: 1.18; }
.post-title {
  color: var(--blue);
  text-decoration: none;
}
.post-title:hover { color: var(--blue-dark); text-decoration: underline; }
.post-meta {
  margin: 0 0 18px;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}
.post-image {
  height: 185px;
  margin: 0 0 18px;
  display: grid;
  place-items: center;
  border: 1px solid #ccc;
  background: var(--post-color);
  font-size: 70px;
}
.post-summary { margin: 0 0 12px; font-size: 15px; }
.post-score { margin: 0 0 12px; font-weight: bold; }
.read-more {
  color: var(--blue);
  text-decoration: underline;
}
.post-footer {
  margin-top: 18px;
  padding-top: 8px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}
.empty-state { color: var(--muted); font-style: italic; }

aside { padding-left: 4px; }
.widget { margin: 0 0 30px; }
.widget h2 {
  margin: 0 0 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--rule);
  color: #444;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.widget p { margin: 0; color: #555; font-size: 13px; }
.widget ul { margin: 0; padding: 0; list-style: none; }
.widget li { padding: 3px 0; border-bottom: 1px dotted #ddd; }
.search-row { display: flex; gap: 4px; }
.search-row input { min-width: 0; width: 100%; padding: 5px; border: 1px solid #bbb; background: #fff; }
.search-row button { padding: 5px 8px; border: 1px solid #888; background: #eee; cursor: pointer; font: 11px Arial, sans-serif; }
.filter { padding: 0; border: 0; background: none; color: var(--blue); cursor: pointer; text-decoration: underline; }
.filter.is-active { color: #333; font-weight: bold; text-decoration: none; }

.site-shell > footer {
  padding: 18px 40px;
  border-top: 1px solid var(--rule);
  background: #f6f6f2;
  color: var(--muted);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
}
.site-shell > footer p { margin: 0; }

.breadcrumbs { margin: 0 0 24px; color: var(--muted); font: 11px Arial, sans-serif; }
.page-title { margin: 0 0 8px; font-size: 31px; font-weight: normal; line-height: 1.2; }
.page-intro { margin: 0 0 28px; font-size: 17px; font-style: italic; }
.prose h2 { margin: 28px 0 8px; font-size: 21px; font-weight: normal; }
.prose p, .prose li { font-size: 15px; }
.prose ul, .prose ol { padding-left: 22px; }
.review-header { padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.review-header h1 { margin: 0 0 3px; color: #222; font-size: 31px; font-weight: normal; }
.review-meta { margin: 0; color: var(--muted); font: 11px Arial, sans-serif; }
.review-lede { margin: 22px 0; font-size: 17px; font-style: italic; }
.scores { width: 100%; margin: 20px 0; border-collapse: collapse; }
.scores th, .scores td { padding: 6px 8px; border: 1px solid #ccc; text-align: left; }
.scores th { width: 35%; background: #f1f1ec; font: bold 11px Arial, sans-serif; text-transform: uppercase; }
.review-notes h2 { margin: 22px 0 5px; font-size: 18px; font-weight: normal; }
.review-notes p { margin: 0; }
.back-link { margin-top: 30px; }
[hidden] { display: none !important; }

@media (max-width: 700px) {
  .site-shell { width: 100%; margin: 0; border-inline: 0; }
  .site-header { padding: 28px 22px 24px; }
  .site-header h1 { font-size: 32px; }
  .main-nav { padding-inline: 10px; }
  .layout { grid-template-columns: 1fr; gap: 12px; padding: 30px 22px 40px; }
  aside { padding-top: 16px; border-top: 3px double var(--rule); }
  .post-image { height: 155px; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }