:root {
  color-scheme: light;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #202020;
  background: #fff;
  line-height: 1.8;
  font-synthesis: none;
  overflow-wrap: anywhere;
}

* { box-sizing: border-box; }

body {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

header {
  padding-bottom: 1.25rem;
  border-bottom: 1px solid #d9d9d9;
}

.brand {
  color: inherit;
  font-weight: 650;
  letter-spacing: .03em;
  text-decoration: none;
}

.home-header { display: flex; align-items: center; gap: 1rem; }
.home-header img { border-radius: .7rem; }
.sample-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-top: 1.5rem; }
.sample-gallery figure { margin: 0; }
.sample-gallery img { display: block; width: 100%; height: auto; border-radius: .4rem; }
.sample-gallery figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .25rem 1rem; margin-top: .65rem; font-size: .875rem; }
@media (max-width: 420px) {
  .sample-gallery { gap: .75rem; }
}

main { padding: 2rem 0; }

h1, h2 { line-height: 1.4; }
h1 { margin: 0 0 1rem; font-size: 2rem; font-weight: 650; }
h2 { margin: 2rem 0 .5rem; font-size: 1.125rem; }
p { margin: .75rem 0; }
a { color: #234c82; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, summary:focus-visible { outline: 2px solid #234c82; outline-offset: 4px; }
.meta { color: #626262; font-size: .875rem; }

nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pages {
  padding: 0;
  margin: 1.5rem 0 0;
  list-style: none;
}

.pages a {
  display: block;
  padding: 1rem 0;
  border-bottom: 1px solid #d9d9d9;
}

footer {
  padding-top: 1.25rem;
  border-top: 1px solid #d9d9d9;
  font-size: .875rem;
}

details { margin: 1.5rem 0; }
summary { cursor: pointer; font-weight: 600; }
pre { white-space: pre-wrap; font: inherit; font-size: .875rem; line-height: 1.7; }