:root {
  font-family: "Rubik", "Noto Sans JP", sans-serif;
  color: #f0fdf4;
  background: #1c1917;
  color-scheme: dark;
  font-synthesis: none;
}

* { box-sizing: border-box; }
body { margin: 0; }
body::after { position: fixed; inset: 0; z-index: 10; pointer-events: none; background: url("./static/ink_splash_duotone_stripe_background.avif") center / auto 1250px; opacity: .07; content: ""; }
a { color: inherit; }

.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;
  padding: 40px;
  letter-spacing: .05em;
}
.header { margin-bottom: 80px; }
.header h1 { margin: 0; font-size: 30px; font-weight: 500; line-height: 1.2; }
.lower { margin-top: auto; }
.photos { overflow-x: auto; margin-bottom: 40px; padding-bottom: 16px; scrollbar-width: thin; scrollbar-color: #292524 #1c1917; scroll-snap-type: x mandatory; }
.photos:hover { scrollbar-color: #44403c #1c1917; }
.photo-track { display: flex; gap: 32px; width: max-content; }
.photo { position: relative; flex: 0 0 min(504px, calc(100vw - 80px)); width: min(504px, calc(100vw - 80px)); aspect-ratio: 4 / 3; margin: 0; background: #f0fdf4; scroll-snap-align: start; }
.photo picture { display: block; width: 100%; height: 100%; }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: contrast(2); mix-blend-mode: luminosity; }
.photo figcaption { position: absolute; right: 0; bottom: 0; padding: 4px; background: rgb(28 25 23 / 75%); font-family: monospace; font-size: 8px; font-weight: 600; line-height: 1; text-align: right; }
.info-row { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px; margin-bottom: 40px; }
.info-row h2 { display: flex; gap: 16px; align-items: baseline; margin: 0; font-size: 12px; font-weight: 600; line-height: 2; }
.info-row h2::after { flex: 1; border-top: 1px solid rgb(240 253 244 / 25%); content: ""; }
.info-row p { margin: 0; font-size: 12px; line-height: 2; }
footer { color: rgb(240 253 244 / 25%); font-size: 12px; font-weight: 300; }