/* Index and Tag lists. Dimensions follow the approved mock (blog-index-tag-preview). */
.nk-archive {
  --nk-sans: var(--wp--preset--font-family--sans);
  --nk-ink: var(--wp--preset--color--ink);
  --nk-muted: var(--wp--preset--color--muted);
  --nk-line: var(--wp--preset--color--line);
  --nk-accent: var(--wp--preset--color--accent);
}
/* The mock's sizes assume border-box; the theme itself keeps content-box. */
.nk-archive, .nk-archive *, .nk-tag-dialog, .nk-tag-dialog * { box-sizing: border-box; }
.nk-archive a { color: inherit; text-decoration: none; }
.nk-archive__back { display: inline-block; margin-bottom: 1.75rem; color: var(--nk-muted); font: .75rem/1.8 var(--nk-sans); }
.nk-archive__back:hover { text-decoration: underline; }
.nk-archive__eyebrow { margin: 0 0 .875rem; color: var(--wp--preset--color--muted); font: .6875rem/1.8 var(--wp--preset--font-family--sans); letter-spacing: .14em; text-transform: uppercase; }
.nk-archive__title { margin: 0; font-size: clamp(2.375rem, 5vw, 3.875rem); font-weight: 400; line-height: 1.25; letter-spacing: .08em; overflow-wrap: anywhere; }
.nk-archive__lead { margin: 1rem 0 0; color: var(--nk-muted); font-size: .94rem; }

/* The Index's views (#16) */
.nk-index-switch { display: flex; gap: 1.75rem; margin: 2.25rem 0 0; border-bottom: 1px solid var(--nk-line); font: .8125rem/1.8 var(--nk-sans); }
.nk-index-switch a { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -1px; color: var(--nk-muted); border-bottom: 2px solid transparent; }
.nk-index-switch a:hover { color: var(--nk-ink); }
.nk-index-switch a[aria-current] { color: var(--nk-ink); border-bottom-color: var(--nk-ink); }

/* Top tags */
.nk-archive__tags { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 2.25rem 0 0; color: var(--nk-muted); font: .8125rem/1.8 var(--nk-sans); }
.nk-archive__tags a { display: inline-flex; align-items: center; gap: .5625rem; min-height: 44px; padding: .5rem 0; border-bottom: 1px solid transparent; }
.nk-archive__tags a:not(.nk-archive__open-tags) { white-space: nowrap; max-width: 100%; }
.nk-archive__tags a[aria-current] { color: var(--nk-ink); border-bottom-color: var(--nk-ink); }
.nk-archive__tags a:hover { color: var(--nk-ink); }
.nk-archive__tag-name { min-width: 0; overflow-wrap: anywhere; white-space: normal; }
.nk-archive__tag-count { font-size: .625rem; color: var(--nk-muted); }
.nk-archive__open-tags { margin-left: auto; min-height: 44px; padding: .5rem 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--nk-accent) !important; font: inherit; text-decoration: underline !important; text-underline-offset: 5px; cursor: pointer; }
.nk-archive__open-tags:hover { color: var(--nk-ink) !important; }

/* List */
.nk-archive__label { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin: 2.25rem 0 .75rem; color: var(--nk-muted); font: .6875rem/1.8 var(--nk-sans); letter-spacing: .05em; }
.nk-archive__label h2 { margin: 0; font: inherit; }
.nk-archive__label > span { flex: none; }
.nk-archive__list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--nk-line); }
.nk-archive__item { position: relative; display: grid; grid-template-columns: 160px 94px minmax(0, 1fr) 16px; gap: 26px; align-items: center; margin: 0; padding: 1.5rem 0; border-bottom: 1px solid var(--nk-line); transition: background .2s; }
.nk-archive__item:hover { background: rgba(89, 106, 115, .035); }
.nk-archive__thumb { display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: #efeee8; }
.nk-archive__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.nk-archive__item:hover .nk-archive__thumb img { transform: scale(1.025); }
.nk-archive__thumb.is-empty { background: none; border: 1px solid var(--nk-line); }
.nk-archive__date { color: var(--nk-muted); font: .72rem/1.8 var(--nk-sans); letter-spacing: .04em; }
.nk-archive__copy { min-width: 0; }
.nk-archive__heading { margin: 0; font-size: 1.1875rem; font-weight: 400; line-height: 1.85; letter-spacing: .025em; overflow-wrap: anywhere; }
/* The title link covers the whole row; tags and buttons sit above it. */
.nk-archive__link::after { content: ""; position: absolute; inset: 0; }
.nk-archive__link:focus-visible { outline: none; }
.nk-archive__link:focus-visible::after { outline: 2px solid var(--nk-accent); outline-offset: -2px; }
.nk-archive__row-tags { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 4px 15px; margin: .5rem 0 0; color: var(--nk-muted); font: .6875rem/1.8 var(--nk-sans); pointer-events: none; }
.nk-archive__row-tags a { display: inline-flex; align-items: center; min-height: 30px; overflow-wrap: anywhere; pointer-events: auto; }
.nk-archive__row-tags a:hover { text-decoration: underline; text-underline-offset: 4px; }
.nk-archive__extra-tags { display: contents; }
.nk-archive__more-tags { display: none; min-height: 30px; padding: 0; border: 0; background: none; color: var(--nk-accent); font: inherit; line-height: 1.8; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; pointer-events: auto; }
.nk-js .nk-archive__more-tags { display: inline-flex; align-items: center; }
.nk-js .nk-archive__extra-tags:not(.is-open) { display: none; }
.nk-archive__arrow { color: var(--nk-muted); font: 1rem/1 var(--nk-sans); }
.nk-archive__empty { padding: 2.5rem 0; border-top: 1px solid var(--nk-line); color: var(--nk-muted); font-size: .94rem; }
.nk-archive__empty p { margin: 0 0 .5rem; }
.nk-archive__empty a { font: .75rem/1.8 var(--nk-sans); text-decoration: underline; text-underline-offset: 5px; }

.nk-archive__pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1rem; margin-top: var(--wp--preset--spacing--lg); color: var(--nk-muted); font: .75rem/1.8 var(--nk-sans); letter-spacing: .06em; }
.nk-archive__pagination .page-numbers { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; justify-content: center; }
.nk-archive__pagination .current { color: var(--nk-ink); border-bottom: 1px solid var(--nk-ink); }
.nk-archive__pagination .prev { margin-right: auto; }
.nk-archive__pagination .next { margin-left: auto; }
.nk-archive__pagination a:hover { color: var(--nk-ink); }

/* Every tag: an in-page section without JavaScript, a modal dialog with it. */
.nk-tag-index { margin-top: var(--wp--preset--spacing--lg); padding-top: 1.5rem; border-top: 1px solid var(--wp--preset--color--line); }
.nk-js .nk-archive .nk-tag-index { display: none; }
.nk-tag-index__title { margin: 0 0 1.5rem; font-size: 1.6875rem; font-weight: 400; line-height: 1.7; letter-spacing: .05em; }
.nk-tag-index__search label { display: block; margin-bottom: .375rem; color: var(--wp--preset--color--muted); font: .6875rem/1.8 var(--wp--preset--font-family--sans); }
.nk-tag-index__search input { display: block; box-sizing: border-box; width: 100%; padding: .75rem .875rem; border: 1px solid var(--wp--preset--color--line); border-radius: 0; background: transparent; color: var(--wp--preset--color--ink); font: 1rem/1.8 var(--wp--preset--font-family--sans); }
.nk-tag-index__search input:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 2px; }
.nk-tag-index__status { margin: 1.125rem 0 .5rem; color: var(--wp--preset--color--muted); font: .6875rem/1.8 var(--wp--preset--font-family--sans); }
.nk-tag-index__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1.5rem; font: .8125rem/1.8 var(--wp--preset--font-family--sans); }
.nk-tag-index__list a { display: flex; justify-content: space-between; align-items: center; gap: .5rem; min-height: 44px; padding: .75rem 0; border-bottom: 1px solid var(--wp--preset--color--line); color: var(--wp--preset--color--ink); text-decoration: none; overflow-wrap: anywhere; }
.nk-tag-index__list a[hidden] { display: none; }
.nk-tag-index__list a:hover,
.nk-tag-index__list a[aria-current] { color: var(--wp--preset--color--accent); border-bottom-color: var(--wp--preset--color--accent); }
.nk-tag-index__list .nk-archive__tag-count { flex: none; font-size: .625rem; color: var(--wp--preset--color--muted); }
.nk-tag-index__empty { color: var(--wp--preset--color--muted); font: .8125rem/1.9 var(--wp--preset--font-family--sans); }
.nk-tag-index__close { position: absolute; top: .375rem; right: .5rem; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--wp--preset--color--ink); font: 1.625rem/1 var(--wp--preset--font-family--sans); cursor: pointer; }

.nk-tag-dialog { box-sizing: border-box; width: 640px; max-width: calc(100vw - 40px); max-height: calc(100dvh - 48px); padding: 0; border: 1px solid var(--wp--preset--color--line); background: var(--wp--preset--color--paper); color: var(--wp--preset--color--ink); overflow: auto; overscroll-behavior: contain; }
.nk-tag-dialog::backdrop { background: rgba(30, 35, 33, .25); }
.nk-tag-dialog .nk-tag-index { position: relative; margin: 0; padding: 2.25rem; border: 0; }
.nk-tag-dialog .nk-archive__eyebrow { margin: 0 0 .875rem; }

@media (max-width: 900px) {
  .nk-archive__item { grid-template-columns: 132px 80px minmax(0, 1fr) 14px; gap: 20px; }
  .nk-archive__heading { font-size: 1.0625rem; }
}

@media (max-width: 700px) {
  .nk-archive__back { margin-bottom: 1.5rem; }
  .nk-archive__lead { font-size: .8125rem; line-height: 2; }
  .nk-archive__tags { gap: .25rem 1.25rem; margin-top: 1.5rem; font-size: .75rem; }
  .nk-archive__open-tags { margin-left: 0; font-size: .6875rem; }
  .nk-archive__label { margin-top: 1.75rem; font-size: .625rem; }
  .nk-archive__item { grid-template-columns: 94px minmax(0, 1fr) 12px; grid-template-rows: auto auto; column-gap: 16px; row-gap: 4px; align-items: start; padding: 1.25rem 0; }
  .nk-archive__thumb { grid-column: 1; grid-row: 1 / 3; margin-top: 3px; }
  .nk-archive__date { grid-column: 2; grid-row: 1; font-size: .625rem; }
  .nk-archive__copy { grid-column: 2; grid-row: 2; }
  .nk-archive__heading { font-size: .9375rem; letter-spacing: 0; }
  .nk-archive__row-tags { gap: 2px 10px; margin-top: .375rem; font-size: .625rem; }
  .nk-archive__row-tags a, .nk-archive__more-tags { min-height: 32px; }
  .nk-archive__arrow { grid-column: 3; grid-row: 2; margin-top: 7px; font-size: .8125rem; }
  .nk-tag-dialog .nk-tag-index { padding: 1.75rem 1.5rem; }
  .nk-tag-index__title { font-size: 1.5rem; }
  .nk-tag-index__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; font-size: .75rem; }
}

@media (max-width: 360px) {
  .nk-archive__item { grid-template-columns: 78px minmax(0, 1fr) 10px; column-gap: 12px; }
  .nk-archive__tags { gap: .25rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nk-archive__item,
  .nk-archive__thumb img { transition: none; }
  .nk-archive__item:hover .nk-archive__thumb img { transform: none; }
}
