:root {
  color-scheme: light;
  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #21201c;
  background: #fdfdfc;
  font-size: 16px;
  font-weight: 460;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
body { margin: 0; }
.page { display: grid; grid-template-columns: minmax(0,608px) 240px; gap: 72px; max-width: 984px; margin: 0 auto; padding: 80px 32px 72px; align-items: start; }
main { min-width: 0; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-size: 1rem; font-weight: 600; line-height: 1.625; }
a { color: inherit; text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid #6a1226; outline-offset: 5px; border-radius: 2px; }
header { padding-bottom: 28px; border-bottom: 1px solid #e8e8e3; }
.wolf-mark { display: block; width: 56px; height: 38px; margin-bottom: 16px; object-fit: contain; filter: brightness(0); opacity: .87; }
.meta { color: #63635e; font-size: 14px; line-height: 20px; }
nav { display: flex; flex-wrap: wrap; column-gap: 20px; margin-top: 28px; }
nav a { display: inline-flex; align-items: center; min-height: 32px; }
.intro { margin: 28px 0 36px; }
.intro p + p { margin-top: 16px; }
section > h2 { margin-bottom: 20px; }
.project + .project { margin-top: 28px; }
.project .meta { margin-top: 2px; }
.project p:not(.meta) { margin-top: 10px; }
.illustrated { display: grid; grid-template-columns: minmax(0,1fr) 144px; gap: 24px; align-items: start; }
.project-image { display: block; margin-top: 4px; border-radius: 4px; }
.project-image img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; }
.story { margin-top: 24px; }
.story-link { display: block; text-decoration: none; border-radius: 4px; }
.story-link img { display: block; width: 100%; height: auto; border-radius: 4px; }
.timeline { position: sticky; top: 80px; font-size: 13px; line-height: 20px; }
.timeline ol { position: relative; margin: 0; padding: 0; list-style: none; }
.timeline ol::before { content: ""; position: absolute; left: 92px; top: 26px; bottom: 26px; width: 1px; background: #deded8; }
.timeline li { position: relative; display: grid; grid-template-columns: 80px 1px minmax(0,1fr); column-gap: 12px; min-height: 52px; align-items: center; }
.timeline li::before { content: ""; position: absolute; top: 50%; left: 90px; width: 5px; height: 5px; transform: translateY(-50%); border-radius: 50%; background: #21201c; }
.timeline li > * { grid-row: 1; }
.timeline li > :last-child { grid-column: 3; }
.timeline-date { grid-column: 1; font-size: 11px; line-height: 16px; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.timeline .past { color: #63635e; }
@media (max-width: 979px) {
  .page { max-width: 672px; grid-template-columns: minmax(0,1fr); gap: 56px; }
  .timeline { position: static; }
}
@media (max-width: 540px) {
  .page { padding: 40px 24px 48px; }
  .illustrated { grid-template-columns: minmax(0,1fr) 88px; gap: 0 16px; }
  .illustrated { grid-template-rows: 26px minmax(62px,auto) auto; }
  .illustrated > div { display: contents; }
  .illustrated h3 { grid-area: 1 / 1; }
  .illustrated .meta { grid-area: 2 / 1; }
  .illustrated p:not(.meta) { grid-area: 3 / 1 / 4 / -1; }
  .illustrated .project-image { grid-area: 1 / 2 / 3 / 3; margin-top: 0; }
  .project + .project { margin-top: 28px; }
  .project-image img { aspect-ratio: 1; }
}
@media (max-width: 370px) {
  .illustrated { column-gap: 12px; }
}