:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif; color: #202020; background: #fff; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-underline-offset: .25em; }
a:focus-visible { outline: 2px solid #202020; outline-offset: 6px; }
.page { width: min(1160px, calc(100% - 96px)); margin-inline: auto; padding-bottom: 80px; }
.site-header { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid #222; }
.brand { font-size: 24px; font-weight: 750; text-decoration: none; }
.official-link { font-size: 13px; text-decoration: none; padding-block: 12px; }
.official-link span { margin-left: 16px; }
.official-link:hover { text-decoration: underline; }
.introduction { padding-block: 80px 64px; }
h1 { margin: 0 0 24px; font-size: clamp(28px, 3vw, 36px); font-weight: 500; line-height: 1.5; text-wrap: balance; }
.introduction p { margin: 0; color: #595959; font-size: 14px; line-height: 1.9; text-wrap: pretty; }
.collection { display: grid; gap: 24px; padding: 0; margin: 0; list-style: none; }
.work { background: #f3f3f1; padding: 32px; }
.work-link { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 36px; text-decoration: none; }
.work-image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #f4f4f4; }
.work-details { display: flex; flex-direction: column; align-items: flex-start; padding-block: 4px; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; }
.category { padding: 5px 10px; font-size: 11px; line-height: 1.5; color: #fff; background: #3b3b3b; }
.tag { padding: 4px 9px; font-size: 11px; line-height: 1.5; border: 1px solid #3b3b3b; }
/* A link out: a card like the works, its parts links of their own (the picture, title and button open the other site). */
.work-picture { display: block; }
.external h2 a { text-decoration: none; }
.external h2 a:hover, .external .work-picture:hover ~ .work-details h2 a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.reference { margin: -16px 0 32px; color: #595959; font-size: 12px; }
.reference span { margin-left: 4px; }
a.open { text-decoration: none; }
h2 { margin: 0 0 16px; font-size: 24px; font-weight: 500; line-height: 1.65; text-wrap: balance; }
.place { margin: 0 0 24px; color: #595959; font-size: 13px; font-variant-numeric: tabular-nums; }
.description { margin: 0 0 32px; font-size: 14px; line-height: 1.9; text-wrap: pretty; }
.open { align-self: flex-end; margin-top: auto; padding: 12px 18px; background: #222; color: #fff; font-size: 14px; }
.open span { margin-left: 32px; }
.work-link:hover h2 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
.skip-link { position: absolute; top: 8px; left: 8px; padding: 12px; background: #fff; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
@media (max-width: 800px) {
  .page { width: calc(100% - 48px); padding-bottom: 40px; }
  .site-header { min-height: 88px; }
  .brand { font-size: 21px; }
  .introduction { padding-block: 56px 40px; }
  .work-link { grid-template-columns: 1fr; gap: 24px; }
  .work { padding: 20px; }
  .tags { margin-bottom: 12px; }
  h2 { font-size: 22px; }
  .place { margin-bottom: 20px; }
  .open { margin-top: 8px; }
}
@media (max-width: 360px) {
  .page { width: calc(100% - 32px); }
  .brand { font-size: 19px; }
  .official-link { font-size: 12px; }
  .official-link span { margin-left: 6px; }
  .work { padding: 16px; }
}