/* Recent page shares the site's header, typeface and palette. */
body{overflow-x:hidden}
button{font:inherit;color:inherit}
.recent-main{padding-top:32px;padding-bottom:36px}
.recent-main .section-head{margin-bottom:38px}
.recent-main h1{margin:0}
.recent-content{--stage-h:min(50vh,calc(100dvh - 250px));display:grid;grid-template-columns:100px minmax(0,1fr) auto;column-gap:clamp(20px,3vw,48px);align-items:start}
.timeline{position:relative;height:var(--stage-h);display:flex;flex-direction:column;justify-content:space-between}
.timeline:before{content:"";position:absolute;left:45px;top:12px;bottom:12px;width:1px;background:var(--line)}
.year-block{position:relative;display:grid;grid-template-columns:36px 20px 1fr;align-items:center;min-height:24px}
.year-button{border:0;background:none;padding:0;text-align:left;cursor:pointer;font-size:11px;color:var(--en)}
.year-block.is-active .year-button{color:var(--ink)}
.year-mark{justify-self:center;width:6px;height:6px;border-radius:50%;background:var(--line);box-shadow:0 0 0 5px var(--bg)}
.year-block.is-active .year-mark{background:var(--ink)}
.year-dots{display:flex;gap:5px;padding-left:4px}
.year-dot{position:relative;width:4px;height:4px;border-radius:50%;border:0;padding:0;background:var(--line);cursor:pointer}
.year-dot:before{content:"";position:absolute;inset:-5px}
.year-dot.is-active{background:var(--ink)}
.viewer{min-width:0}
.stage{position:relative;height:var(--stage-h);overflow:hidden;touch-action:pan-y;user-select:none;cursor:grab}
.stage.is-dragging{cursor:grabbing}
.slide{position:absolute;inset:0 30px;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease}
.slide.is-active{opacity:1;visibility:visible;pointer-events:auto}
.slide img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;user-select:none}
.nav-arrow{position:absolute;top:50%;transform:translateY(-50%);border:0;background:none;width:28px;height:44px;padding:0;font-size:25px;color:var(--muted);cursor:pointer;opacity:.65}
.nav-arrow.prev{left:0}.nav-arrow.next{right:0}.nav-arrow:disabled{opacity:.15;cursor:default}
.info{display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);margin-top:16px;padding-top:12px;font-size:11px;line-height:1.7;color:var(--muted)}
#infoYear{white-space:nowrap}#infoTitle{text-align:right;color:var(--ink)}
.thumbnails{--thumb:calc((var(--stage-h) - 30px)/4);display:grid;grid-template-rows:repeat(4,var(--thumb));gap:10px;width:var(--thumb)}
.thumbnail{display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer;opacity:.42;transition:opacity .2s}
.thumbnail[hidden]{display:none}.thumbnail img{width:100%;height:100%;object-fit:cover}.thumbnail:hover,.thumbnail.is-active{opacity:1}.thumbnail.is-active{outline:1px solid var(--muted);outline-offset:3px}
button:focus-visible{outline:1px solid var(--ink);outline-offset:4px}
@media(max-width:800px){.recent-main{padding-top:24px}.recent-content{grid-template-columns:90px minmax(0,1fr) auto;column-gap:14px}.thumbnails{--thumb:min(9vw,calc((var(--stage-h) - 30px)/4))}}
@media(max-width:520px){.recent-main .section-head{margin-bottom:28px}.recent-content{--stage-h:min(45vh,calc(100dvh - 235px));grid-template-columns:58px minmax(0,1fr) auto;column-gap:8px}.timeline:before{left:43px}.year-block{grid-template-columns:34px 20px}.year-dots{display:none}.slide{inset:0 16px}.nav-arrow{width:16px;font-size:20px}.thumbnails{--thumb:min(11vw,calc((var(--stage-h) - 24px)/4));gap:8px}.info{font-size:10px;gap:8px}.header-inner{gap:10px}.brand-lockup{gap:4px}.brand-en{font-size:9px;letter-spacing:.02em}.nav{gap:9px;font-size:10px;max-width:52%}}
@media(prefers-reduced-motion:reduce){.slide,.thumbnail{transition:none}}

/* Lower caption band, aligned with the marked area. */
.info{margin-top:clamp(40px,10vh,100px);margin-left:-24px;margin-right:-24px}
@media(max-width:800px){.info{margin-left:0;margin-right:0;margin-top:clamp(28px,7vh,64px)}}