.top a, .back { color: var(--dim); text-decoration: none; }
.top a:hover { color: var(--blue-soft); }
.back::before { content: '['; } .back::after { content: ']'; }

.g-title { margin: clamp(28px, 8vh, 80px) 0 0; font: inherit; font-size: clamp(28px, 5vw, 48px); line-height: 1.1; color: var(--blue); }
.g-title::before { content: '/ '; color: var(--dim); }

.months { margin-top: clamp(18px, 4vh, 40px); padding-top: 12px; border-top: 1px solid var(--line); }
.months:empty { display: none; }
.months section + section { margin-top: 28px; }
.month { margin: 0 0 10px; font: inherit; font-size: 11px; color: var(--blue); }
.month::before { content: '/ '; color: var(--dim); }
.grid { columns: 4 160px; column-gap: 10px; }
.pic { display: block; width: 100%; margin: 0 0 10px; padding: 0; border: 1px solid var(--line); background: var(--line); cursor: zoom-in; break-inside: avoid; }
.pic img { display: block; width: 100%; height: auto; opacity: 0; transition: opacity .3s steps(4); }
.pic img.in { opacity: 1; }
.pic:hover, .pic:focus-visible { border-color: var(--blue); }
.empty { margin-top: 24px; color: var(--dim); }

.lb { max-width: 100vw; max-height: 100vh; width: 100%; height: 100%; margin: 0; padding: 16px; border: 0; background: color-mix(in oklab, var(--bg) 94%, transparent); color: var(--text); }
.lb[open] { display: flex; flex-direction: column; gap: 10px; }
.lb::backdrop { background: transparent; }
.lb img { flex: 1; min-height: 0; width: 100%; object-fit: contain; image-rendering: auto; }
.lb-bar { display: flex; gap: 16px; align-items: baseline; justify-content: center; font-size: 11px; }
.lb-cap { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mid); }

@media (prefers-reduced-motion: reduce) { .pic img { transition: none; } }

.cons-list { margin-top: clamp(18px, 4vh, 40px); padding-top: 12px; border-top: 1px solid var(--line); display: grid; gap: 28px; max-width: 60ch; }