*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: #1c1c1c;
  font-family: 'Source Sans 3', 'Helvetica Neue', sans-serif;
  font-size: 18px;
  line-height: 1.6;
  text-wrap: pretty;
}
a { color: #4a3f8f; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: #1c1c1c; }
img { display: block; max-width: 100%; height: auto; }

.site-header, main, .site-footer { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 24px; }
.site-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; padding-top: 32px; padding-bottom: 48px; }
.brand { font-weight: 700; color: #1c1c1c; text-decoration: none; font-size: 20px; }
.brand:hover { color: #4a3f8f; }
.tagline { color: #6b6b6b; font-size: 16px; }
.all { font-size: 16px; }

h1, h2 { font-weight: 700; line-height: 1.2; margin: 0; }
h1 { font-size: 36px; margin-bottom: 12px; }
h2 { font-size: 24px; margin: 48px 0 12px; }
p { margin: 0 0 20px; }
.subtitle { font-size: 21px; color: #4a4a4a; margin-bottom: 32px; }

.meta {
  background: #f3f3f2;
  margin: 0 -24px 40px;
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
  font-size: 16px;
}
.meta div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; }
.meta dt { color: #6b6b6b; }
.meta dd { margin: 0; }
@media (min-width: 800px) { .meta { margin-left: 0; margin-right: 0; padding: 28px 32px; } }
@media (max-width: 600px) { .meta { grid-template-columns: 1fr; } }

figure { margin: 32px 0 36px; }
figure.wide { width: 960px; max-width: calc(100vw - 48px); margin-left: 50%; transform: translateX(-50%); }
figure img { width: 100%; }
figcaption { font-size: 14px; color: #6b6b6b; line-height: 1.5; margin-top: 10px; }
figure.wide figcaption { max-width: 720px; margin-left: auto; margin-right: auto; }

.case-list { list-style: none; margin: 56px 0 0; padding: 0; }
.case-list li { padding: 0 0 48px; margin-bottom: 48px; border-bottom: 1px solid #e4e4e2; }
.case-list li:last-child { border-bottom: 0; }
.case-list .thumb { width: 320px; max-width: 100%; margin-bottom: 20px; }
.case-list h2 { margin: 0 0 8px; }
.case-list h2 a { color: #1c1c1c; text-decoration: none; }
.case-list h2 a:hover { color: #4a3f8f; }
.hook { color: #4a4a4a; margin-bottom: 8px; }

.pager { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 64px 0 0; padding-top: 24px; border-top: 1px solid #e4e4e2; }
.site-footer { padding-top: 64px; padding-bottom: 48px; font-size: 16px; color: #6b6b6b; }
.site-footer p { margin: 0 0 6px; }