.nl-archive { --nl-ink: #232d2c; --nl-accent: #305e51; --nl-line: #dbe0dc; width: 100%; margin: 28px 0; color: var(--nl-ink); }
.nl-archive *, .nl-archive *::before, .nl-archive *::after { box-sizing: border-box; }
.nl-archive .nl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px 28px; }
.nl-archive .nl-columns-1 { grid-template-columns: minmax(0, 1fr); }
.nl-archive .nl-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nl-archive .nl-columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nl-archive .nl-issue { min-width: 0; margin: 0; padding: 0; border: 0; }
.nl-archive .nl-issue-link { display: block; color: inherit; text-decoration: none; border: 0; box-shadow: none; }
.nl-archive .nl-issue-link:focus-visible { outline: 3px solid var(--nl-accent); outline-offset: 7px; border-radius: 3px; }
.nl-archive .nl-cover { container-type: inline-size; position: relative; display: flex; justify-content: center; align-items: center; aspect-ratio: 3 / 4; padding: 20px; overflow: hidden; background: #edf0eb; border: 1px solid #e2e6e0; border-radius: 4px; transition: background .2s; }
.nl-archive .nl-cover-image { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; box-shadow: 0 6px 18px #19251b24, 0 1px 3px #19251b20; transition: transform .2s; }
.nl-archive .nl-cover-placeholder { width: 100%; height: 100%; background: #fffdf7; border: 1px solid #dfded4; box-shadow: 0 6px 18px #19251b18; padding: clamp(8px, 6cqw, 18px); display: flex; flex-direction: column; align-items: center; text-align: center; overflow: hidden; }
.nl-archive .nl-cover-brand { font-family: Georgia, serif; font-size: clamp(8px, 7cqw, 20px); font-weight: 700; letter-spacing: .06em; }
.nl-archive .nl-placeholder-rule { height: 4px; width: 100%; margin-top: 10px; border-block: 1px solid #8b9187; }
.nl-archive .nl-cover-placeholder > svg { width: clamp(20px, 18cqw, 42px); height: clamp(20px, 18cqw, 42px); color: #839282; flex-shrink: 0; margin: auto 0 10px; }
.nl-archive .nl-cover-title { font: 700 clamp(12px, 12cqw, 28px)/1.2 Georgia, serif; overflow-wrap: anywhere; }
.nl-archive .nl-cover-date { margin: 10px 0 auto; font: clamp(8px, 5cqw, 12px)/1.5 system-ui, sans-serif; color: #71786d; }
.nl-archive .nl-cover-open { display: grid; place-items: center; position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; background: var(--nl-accent); border-radius: 50%; color: white; opacity: 0; transform: translateY(5px); transition: opacity .2s, transform .2s; }
.nl-archive .nl-issue-link:hover .nl-cover, .nl-archive .nl-issue-link:focus-visible .nl-cover { background: #e2e8de; }
.nl-archive .nl-issue-link:hover .nl-cover-image { transform: translateY(-3px); }
.nl-archive .nl-issue-link:hover .nl-cover-open, .nl-archive .nl-issue-link:focus-visible .nl-cover-open { opacity: 1; transform: none; }
.nl-archive .nl-issue-meta { padding: 17px 1px 0; }
.nl-archive time { display: block; color: #65706a; font: 12px/1.5 system-ui, sans-serif; letter-spacing: .045em; }
.nl-archive .nl-issue-meta h3 { margin: 5px 0 10px; padding: 0; color: var(--nl-ink); font-size: 21px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.nl-archive .nl-read { display: inline-flex; align-items: center; gap: 8px; color: var(--nl-accent); font: 500 13px/1.5 system-ui, sans-serif; }
.nl-archive .nl-read svg { width: 16px; height: 16px; }
.nl-archive .nl-empty { text-align: center; padding: 64px 20px; background: #f4f6f2; border: 1px solid var(--nl-line); border-radius: 4px; }
.nl-archive .nl-empty svg { width: 36px; height: 36px; color: var(--nl-accent); }
.nl-archive .nl-empty p { margin: 12px 0 0; }
.nl-archive .nl-pagination { margin: 36px 0 0; border-top: 1px solid var(--nl-line); padding-top: 24px; }
.nl-archive .nl-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.nl-archive .nl-pagination li { margin: 0; padding: 0; }
.nl-archive .nl-pagination a, .nl-archive .nl-pagination span { display: inline-block; padding: 8px 14px; color: var(--nl-accent); text-decoration: none; border-radius: 3px; }
.nl-archive .nl-pagination .current { background: var(--nl-accent); color: #fff; }
.nl-archive .nl-pagination a:hover { background: #edf0eb; }
@media (max-width: 780px) { .nl-archive .nl-grid:not(.nl-columns-1) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 18px; } .nl-archive .nl-cover { padding: 14px; } }
@media (max-width: 440px) { .nl-archive .nl-grid { grid-template-columns: minmax(0, 1fr) !important; } .nl-archive .nl-cover { padding: 24px; } .nl-archive .nl-cover-brand { font-size: 22px; } .nl-archive .nl-cover-title { font-size: 28px; } }
@media (prefers-reduced-motion: reduce) { .nl-archive * { transition: none !important; } }