/* HNHOT archive route styles. */

.scope-tabs {
display: flex; gap: 28px; padding: 16px 2px 14px; overflow-x: auto; scrollbar-width: none;
}

.scope-tabs::-webkit-scrollbar {
display: none;
}

.scope-tabs a {
position: relative; flex: 0 0 auto; padding: 2px 0 9px; color: var(--muted); font-size: 13px;
}

.scope-tabs a.active {
color: var(--ink); font-weight: 750;
}

.scope-tabs a.active::after {
content: ""; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; background: var(--accent);
}

.logical-section {
padding: 24px 0 4px; border-bottom: 1px solid var(--line);
}

.logical-section > header {
display: flex; margin-bottom: 8px; align-items: baseline; justify-content: space-between; gap: 20px;
}

.logical-section h2 {
margin: 0; font-family: Georgia, "Noto Serif CJK SC", serif; font-size: 21px;
}

.logical-section header span {
color: var(--muted); font-size: 11px;
}

.all-list {
display: grid;
}

.all-row {
display: grid; min-height: 42px; padding: 9px 2px; grid-template-columns: minmax(0, 1fr) 20px; align-items: center; gap: 12px; border-bottom: 1px solid var(--line-soft);
}

.all-row:last-child {
border-bottom: 0;
}

.all-row span {
font-family: Georgia, "Noto Serif CJK SC", serif; font-size: 15px;
}

.all-row svg {
width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 1.5;
}

.issue-backbar {
margin-bottom: 15px;
}

.issue-backbar a {
display: inline-flex; min-height: 38px; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 700;
}

.issue-backbar a:hover {
color: var(--accent);
}

.issue-page-header {
align-items: center; border-bottom: 0;
}

.issue-count-stat {
margin: 0;
}

.issue-count-stat div {
display: grid; min-width: 110px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius-medium); background: var(--paper);
}

.issue-count-stat dt {
color: var(--muted); font-size: 9px; letter-spacing: .08em;
}

.issue-count-stat dd {
display: flex; margin: 3px 0 0; align-items: baseline; gap: 5px;
}

.issue-count-stat strong {
color: var(--accent); font: 800 24px/1 var(--font-serif);
}

.issue-count-stat span {
color: var(--muted); font-size: 10px;
}

.issue-section-tabs {
padding: 8px 0 18px; flex-wrap: wrap; gap: 8px; border-bottom: 0;
}

.issue-section-tabs a {
display: inline-flex; padding: 5px 11px; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px;
}

.issue-section-tabs a span {
color: var(--muted); font-size: 10px;
}

.issue-section-tabs a.active {
border-color: var(--accent); color: var(--on-accent); background: var(--accent);
}

.issue-section-tabs a.active::after {
display: none;
}

.issue-section-tabs a.active span {
color: currentColor;
}

.issue-section {
padding-top: 26px; scroll-margin-top: 18px;
}

.issue-section > header {
display: flex; margin-bottom: 10px; align-items: center; justify-content: space-between; gap: 18px;
}

.issue-section-meta {
display: flex; align-items: center; justify-content: flex-end; gap: 8px; color: var(--muted); font-size: 11px;
}

.issue-story-list {
box-shadow: var(--shadow);
}

.archive-filter-panel {
display: grid; margin: 18px 0 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}

.archive-search {
width: 100%; margin: 0 0 22px;
}

.archive-empty-state {
line-height: 1.75;
}

.archive-filter-control {
display: grid; min-width: 0; gap: 7px;
}

.archive-filter-control > span {
color: var(--muted); font-size: 11px; font-weight: 750; letter-spacing: .04em;
}

.archive-filter-control select {
width: 100%; min-width: 0; min-height: 40px; padding: 7px 34px 7px 12px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-medium); color: var(--ink); background: var(--paper); font: 12px var(--font-sans); text-overflow: ellipsis;
}

.archive-filter-status {
margin-top: 0;
}

.archive-date-group {
margin-bottom: 38px;
}

.archive-issue-sections {
display: grid; gap: 26px;
}

.archive-issue-section > header {
display: flex; min-height: 30px; padding: 0 2px 8px; align-items: baseline; justify-content: space-between; gap: 18px;
}

.archive-issue-section > header h3 {
margin: 0; font: 700 20px/1.35 var(--font-serif);
}

.archive-issue-section > header span {
color: var(--muted); font-size: 10px;
}

.archive-load-more {
display: flex; width: min(420px, 100%); min-height: 44px; margin: 8px auto 12px; padding: 9px 16px; align-items: center; justify-content: center; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); background: transparent; cursor: pointer; font-size: 12px; font-weight: 750;
}

.archive-load-more:hover {
color: var(--on-accent); background: var(--accent);
}

.archive-results-heading {
display: flex; align-items: baseline; justify-content: space-between; gap: 20px;
}

.archive-results-heading h2 {
margin: 0; font-family: Georgia, "Noto Serif CJK SC", serif; font-size: 21px;
}

.archive-results-heading span {
color: var(--muted); font-size: 11px;
}

.archive-tabs {
padding: 13px 0 15px; flex-wrap: wrap; gap: 8px;
}

.archive-tabs a {
display: inline-flex; padding: 5px 11px; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px;
}

.archive-tabs a span {
color: var(--muted); font-size: 10px;
}

.archive-tabs a.active {
border-color: var(--accent); color: var(--on-accent); background: var(--accent);
}

.archive-tabs a.active::after {
display: none;
}

.archive-tabs a.active span {
color: currentColor;
}

.archive-overview {
padding-top: 25px;
}

.archive-issues {
display: grid; margin-top: 13px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px;
}

.archive-issue {
min-width: 0;
}

.archive-issue > header {
display: flex; margin-bottom: 8px; align-items: baseline; justify-content: space-between; gap: 14px;
}

.archive-issue > header > div {
display: flex; align-items: baseline; gap: 8px;
}

.archive-issue h3 {
margin: 0; font-family: Georgia, "Noto Serif CJK SC", serif; font-size: 18px;
}

.archive-issue header span {
color: var(--muted); font-size: 11px;
}

.archive-preview .story-card {
grid-template-columns: 25px minmax(0, 1fr) 34px; gap: 8px; padding: 11px 9px;
}

.archive-preview .story-copy h3 {
font-size: 14px;
}

.archive-preview .story-copy p {
-webkit-line-clamp: 2;
}

.archive-issue-link {
display: block; margin-top: 7px; padding: 8px 2px; color: var(--accent); font-size: 12px; font-weight: 650;
}

.archive-search-note {
margin: 18px 0 0; color: var(--muted); font-size: 12px;
}

.archive-page > .archive-results-heading {
padding: 25px 2px 11px;
}

.archive-page [data-archive-search-results] {
padding-top: 23px;
}

.image-archive-page {
width: min(1480px, calc(100% - 48px)); padding-bottom: 80px;
}

.image-archive-intro {
max-width: 720px; margin: 18px 0 28px; color: var(--muted); font-family: Georgia, "Noto Serif CJK SC", serif; font-size: 14px; line-height: 1.75;
}

.image-archive-intro p {
margin: 0;
}

@media (min-width: 761px) and (max-width: 900px) {
.archive-page .page-header {
align-items: flex-start; flex-direction: column; gap: 15px;
}

.archive-page .site-search {
width: 100%;
}

.archive-issues {
grid-template-columns: 1fr; gap: 24px;
}
}

@media (max-width: 760px) {
.archive-filter-panel {
margin: 16px 0 12px; gap: 8px;
}

.archive-search {
margin-bottom: 20px;
}

.archive-filter-control {
gap: 6px;
}

.archive-filter-control > span {
overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap;
}

.archive-filter-control select {
min-height: 44px; padding-inline: 9px 26px; font-size: 11px;
}

.archive-filter-status {
margin-bottom: 20px;
}

.scope-tabs {
gap: 8px; padding-block: 12px;
}

.scope-tabs a {
display: inline-flex; min-height: 44px; padding: 8px 13px; align-items: center; border: 1px solid var(--line); border-radius: 999px; font-size: 12px;
}

.scope-tabs a.active {
border-color: var(--accent); color: var(--on-accent); background: var(--accent);
}

.scope-tabs a.active::after {
display: none;
}

.archive-feed .date-group > .date-group-header {
position: sticky; top: env(safe-area-inset-top); z-index: 28; min-height: 42px; margin: 0 -16px 10px; padding: 8px max(16px, env(safe-area-inset-right)) 8px max(16px, env(safe-area-inset-left)); align-items: baseline; border-bottom: 1px solid var(--line-soft); background: var(--bg);
}

.archive-date-group {
margin-bottom: 34px;
}

.archive-issue-sections {
gap: 21px;
}

.archive-issue-section > header {
min-height: 28px; padding-bottom: 7px;
}

.archive-issue-section > header h3 {
font-size: 18px;
}

.archive-load-more {
width: 100%; min-height: 46px;
}

.logical-section {
padding-top: 20px;
}

.logical-section > header {
align-items: flex-start; flex-direction: column; gap: 2px;
}

.logical-section h2 {
font-size: 19px;
}

.all-row span {
font-size: 14px;
}

.issue-backbar {
margin: -4px 0 9px;
}

.issue-backbar a {
min-height: 42px;
}

.issue-page-header {
gap: 11px; padding-bottom: 8px;
}

.issue-page-header h1 {
font-size: 29px;
}

.issue-count-stat {
width: 100%;
}

.issue-count-stat div {
display: flex; min-height: 42px; padding: 7px 11px; align-items: baseline; gap: 10px;
}

.issue-count-stat dt {
margin-right: auto;
}

.issue-count-stat dd {
margin: 0;
}

.issue-count-stat strong {
font-size: 21px;
}

.issue-section-tabs {
flex-wrap: nowrap; padding-block: 10px 14px;
}

.issue-section-tabs a {
padding: 6px 12px;
}

.issue-section {
padding-top: 22px; scroll-margin-top: 64px;
}

.issue-section > header {
align-items: baseline; flex-direction: row; gap: 12px;
}

.issue-section-meta {
flex: 0 0 auto;
}

.issue-story-list {
box-shadow: none;
}

.archive-results-heading h2 {
font-size: 19px;
}

.archive-tabs {
flex-wrap: nowrap; padding-block: 11px 14px;
}

.archive-tabs a {
padding: 6px 12px;
}

.archive-issues {
grid-template-columns: 1fr; gap: 24px;
}

.archive-issue h3 {
font-size: 17px;
}

.archive-page [data-archive-search-results] {
padding-top: 20px;
}

.image-archive-page {
width: 100%; padding: 19px 16px 38px;
}

.image-archive-page > .explore-page-header {
padding-bottom: 0; border-bottom: 0;
}

.image-archive-page > .explore-page-header .eyebrow,
  .image-archive-page > .explore-page-header .explore-stats {
display: none;
}

.image-archive-page > .explore-page-header h1 {
margin: 0; font: 700 20px/1.3 var(--font-serif); letter-spacing: 0;
}

.image-archive-intro {
margin: 18px 0 26px; font-size: 14px;
}
}