/* ==========================================================================
   YORU — archive page: header · filter bar · masonry
   ========================================================================== */
.archive { position: relative; padding: calc(var(--nav-h) + clamp(70px, 12vh, 140px)) var(--gutter) clamp(90px, 14vh, 160px); isolation: isolate; min-height: 100vh; }
.archive > *:not(.terminal-bg) { position: relative; z-index: 1; }
.archive__head { max-width: var(--max); margin: 0 auto clamp(26px, 4vh, 44px); display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 10px 30px; }
.archive__head .eyebrow { grid-column: 1 / -1; margin-bottom: 0; }
.archive__title { font-weight: 900; font-stretch: 125%; font-size: clamp(64px, 14vw, 250px); line-height: .8; letter-spacing: -.045em; }
.archive__count { padding-bottom: 1.2em; color: var(--ivory-60); text-align: right; }
.archive__count b { color: var(--ivory); font-weight: 500; }

/* filter bar */
.archive__filters { position: sticky; top: var(--nav-h); z-index: 5 !important; max-width: var(--max); margin: 0 auto clamp(30px, 5vh, 56px); }
.filters { margin: 0 calc(var(--gutter) * -1); padding: 10px var(--gutter); background: rgba(8, 8, 8, .82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.filters__track { display: flex; align-items: center; gap: 6px; width: max-content; }
.filters button { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 11px; border: 1px solid var(--line); color: var(--ivory-60); white-space: nowrap; transition: border-color .3s, color .3s, background-color .3s; }
.filters button sup { font-size: 8px; color: var(--grey); top: 0; }
.filters button:hover { color: var(--ivory); border-color: var(--line-2); }
.filters button.is-on { color: var(--ivory); border-color: var(--red); background: rgba(210, 33, 46, .1); }
.filters button.is-on sup { color: var(--red); }
.filters button[data-filter="saved"] { color: var(--ivory-80); }
.filters__sep { width: 1px; height: 18px; margin: 0 6px; background: var(--line-2); }

/* masonry */
.archive__grid { max-width: var(--max); margin: 0 auto; }
.agrid { position: relative; width: 100%; transition: height .6s var(--ease-out); }
.acell {
  position: absolute; left: 0; top: 0; will-change: transform;
  transition: transform .75s var(--ease-out), opacity .5s var(--ease-out), translate .75s var(--ease-out), scale .5s var(--ease-out), filter .5s;
}
.acell.no-anim { transition: none !important; }
.acell.is-entering { opacity: 0; translate: 0 22px; }
.acell.is-leaving { opacity: 0; scale: .95; pointer-events: none; transition-duration: .45s; z-index: 0; }
.acell.is-awaiting { opacity: 0; transition: none; }
.agrid.is-intro .acell:not(.is-awaiting) { animation: cell-in .7s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 26ms + 260ms); }
@keyframes cell-in { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
.acell .wp-card__meta { margin-top: 8px; }
.acell .wp-card__t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archive__empty { max-width: var(--max); margin: 40px auto 0; padding: 60px 0; border-top: 1px solid var(--line); color: var(--ivory-60); line-height: 2; }

@media (max-width: 720px) {
  .archive__head { grid-template-columns: 1fr; }
  .archive__count { text-align: left; padding-bottom: 0; }
  .acell .wp-card__meta { font-size: 8.5px; gap: 8px; }
  .acell .wp-card__actions { right: 6px; bottom: 6px; }
  .acell .dl-btn { padding: 6px 8px; font-size: 11px; }
  .acell .dl-btn__word, .acell .save-btn { display: none; }
}
.is-reduced .acell { transition-duration: .2s !important; }