:root { color-scheme: light; font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #fcfcfa; color: #20201e; }
* { box-sizing: border-box; }
body { margin: 0; background: #fcfcfa; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:focus-visible { outline: 2px solid #235b8c; outline-offset: 4px; }
.home, .series { width: min(100% - 3rem, 1080px); margin: 0 auto; }
.site-header { max-width: 650px; padding: clamp(5rem, 15vh, 11rem) 0 5rem; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 500; line-height: 1.06; letter-spacing: -.04em; margin: 0; }
.description, .introduction { max-width: 34rem; font-size: 1rem; line-height: 1.55; margin: 1.5rem 0 0; }
.series-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(3rem, 8vw, 7rem) clamp(1.5rem, 5vw, 4rem); list-style: none; padding: 0 0 8rem; margin: 0; }
.series-link { display: block; text-decoration: none; }
.series-link img { display: block; width: 100%; max-height: 32rem; object-fit: contain; object-position: left center; margin-bottom: 1.25rem; background: #f5f5f2; }
.series-title { display: block; font-size: 1.3rem; line-height: 1.2; }
.series-period, .period { display: block; color: #676762; font-size: .9rem; line-height: 1.4; margin-top: .45rem; }
.series-header { padding: clamp(2rem, 8vw, 6rem) 0 clamp(5rem, 12vw, 9rem); max-width: 650px; }
.back { display: inline-block; color: #676762; font-size: .9rem; margin-bottom: clamp(3rem, 8vw, 6rem); }
.series-header h1 { font-size: clamp(2.2rem, 6vw, 4.5rem); }
.period { margin: 1.2rem 0 0; }
.introduction { font-size: 1.06rem; margin-top: 2rem; }
.photos { display: grid; gap: clamp(6rem, 15vw, 12rem); }
.photo { margin: 0; display: grid; justify-items: start; }
.photo img { display: block; width: auto; max-width: 100%; height: auto; max-height: min(80vh, 900px); object-fit: contain; }
.photo figcaption { margin-top: 1.1rem; color: #686863; font-size: .82rem; line-height: 1.4; }
.photo time { display: grid; gap: .1rem; }
.photo .time { color: #20201e; font-size: .96rem; font-variant-numeric: tabular-nums; }
.series-navigation { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: clamp(6rem, 15vw, 12rem) 0 4rem; font-size: .95rem; }
.series-navigation a:last-child { text-align: right; }
@media (max-width: 620px) { .home, .series { width: min(100% - 2rem, 1080px); } .series-list { grid-template-columns: 1fr; } .series-link img { max-height: 28rem; } .photo img { max-height: 76vh; } }