:root {
  color-scheme: dark;
  --ink: #fff3e9;
  --muted: #e4ccbd;
  --accent: #ffcb9d;
  --active: #893f29;
  --panel: rgb(73 45 37 / 61%);
  --line: rgb(255 190 145 / 26%);
  --serif: "Noto Serif SC", "Songti SC", STSong, SimSun, Georgia, serif;
  font: 15px/1.6 system-ui, "Microsoft YaHei", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { isolation: isolate; margin: 0; min-height: 100vh; background: #241a18; color: var(--ink); font: inherit; }
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
button, input { color: inherit; font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.archive-backdrop {
  position: fixed;
  inset: -8px;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(rgb(18 16 24 / 53%), rgb(18 16 24 / 53%)),
    url("assets/article-archive.jpeg") center 45% / cover no-repeat;
}

.archive-header {
  position: relative;
  z-index: 2;
  background: transparent;
  backdrop-filter: none;
  font: 14px/1.65 var(--sans);
}
.archive-header .header-row {
  --reader-glass: linear-gradient(105deg, rgb(78 51 42 / 57%), rgb(98 57 44 / 51%));
}
.archive-header .brand-mark { background: rgb(85 53 43 / 72%); color: var(--accent); }
.archive-header .brand-mark { border-color: #c99165; }
.archive-header .brand small { color: var(--muted); }
.archive-header .nav-item { color: var(--ink); }
.archive-header .nav-item.current, .archive-header a.nav-item:hover { border-color: #ffbc8973; background: #ac583849; color: var(--accent); }

.archive-shell { width: min(100% - 36px, 944px); margin-inline: auto; padding: 42px 0 100px; }
.archive-intro { text-align: center; }
.archive-intro h1 { margin: 0; font: 800 clamp(36px, 6vw, 52px)/1.2 var(--serif); }
.archive-intro p { margin: 12px 0 0; color: var(--muted); }
.archive-intro p::before { content: "✦"; margin-right: 8px; color: var(--accent); }
.archive-search, .archive-toolbar { background: linear-gradient(155deg, rgb(60 37 31 / 18%), rgb(37 24 22 / 86%)); }
.archive-search { display: flex; align-items: center; gap: 12px; width: min(100%, 512px); min-height: 58px; margin: 46px auto 32px; padding: 0 18px; border: 1px solid var(--line); border-radius: 16px; }
.archive-search:focus-within { border-color: var(--accent); }
.archive-search input { flex: 1; min-width: 0; padding-block: 12px; border: 0; outline: 0; background: transparent; scroll-margin-top: 20px; }
.archive-search input::placeholder { color: var(--muted); }
.archive-search svg, .archive-views svg { width: 21px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.archive-search svg { color: var(--muted); }
.archive-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 28px; padding: 16px; border: 1px solid var(--line); border-radius: 24px; }
.archive-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.archive-filters button, .archive-views button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 0; border-radius: 11px; color: var(--muted); font-size: 13px; font-weight: 650; }
.archive-filters button { background: #d68b6226; overflow-wrap: anywhere; }
.archive-filters button:hover { background: #d68b6245; }
.archive-filters button[aria-pressed="true"] { background: var(--active); color: var(--ink); }
.archive-filters small { opacity: .85; }
.archive-views { display: flex; gap: 3px; flex: none; padding: 4px; border-radius: 14px; background: rgb(61 35 28 / 72%); }
.archive-views button { white-space: nowrap; background: transparent; }
.archive-views button:hover, .archive-views button[aria-pressed="true"] { background: #643625; color: var(--accent); }
.archive-views svg { width: 16px; }
.archive-empty { margin: 0; padding: 40px 18px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); color: var(--muted); text-align: center; }

.archive-sound {
  border-color: var(--line);
  background: rgb(67 39 31 / 70%);
  color: var(--accent);
}
.archive-sound:hover { border-color: var(--accent); background: rgb(87 51 41 / 80%); }

.archive-posts { display: grid; margin: 0; padding: 0; list-style: none; }
.archive-posts > li { min-width: 0; }
.archive-posts[data-layout="grid"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.archive-posts[data-layout="grid"] .archive-card { min-height: 330px; }
.archive-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--line); border-radius: 23px; background: linear-gradient(155deg, rgb(60 37 31 / 20%), rgb(37 24 22 / 86%)); box-shadow: 0 14px 30px #170b083d; }
.archive-card.awaiting-reveal:not(:focus-within) { opacity: 0; }
.archive-card:hover { border-color: #ffb87cb3; }
.archive-card:hover h2 { color: var(--accent); }
.archive-cover { position: relative; overflow: hidden; aspect-ratio: 1.8; background: #503229; }
.archive-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.archive-copy { display: flex; flex: 1; flex-direction: column; padding: 18px 20px 21px; overflow-wrap: anywhere; }
.archive-card-meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; margin-top: auto; }
.archive-date { flex: none; color: var(--accent); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.archive-copy h2 { margin: 0 0 5px; font: 700 20px/1.36 var(--serif); }
.archive-copy p { display: -webkit-box; margin: 0 0 16px; overflow: hidden; color: var(--muted); font-size: 13px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.archive-chips { display: flex; min-width: 0; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.archive-chips li { padding: 2px 7px; border: 1px solid var(--line); border-radius: 5px; background: #bf70442e; color: var(--accent); font-size: 11px; }

.archive-posts[data-layout="timeline"] { --axis: 50%; position: relative; gap: clamp(34px, 6vw, 90px); padding-bottom: 24px; }
.archive-posts[data-layout="timeline"]:not(:empty)::before { content: ""; position: absolute; inset: 0 auto 0 var(--axis); width: 2px; background: linear-gradient(#efac77, #ad603755); transform: translateX(-50%); }
.archive-posts[data-layout="timeline"] > li { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(56px, 8vw, 144px); }
.archive-posts[data-layout="timeline"] > li::before { content: ""; position: absolute; left: var(--axis); top: 50%; width: 20px; height: 20px; border: 3px solid #ffb983; border-radius: 50%; background: #3b231c; transform: translate(-50%, -50%); box-shadow: 0 0 12px #f1844f59; }
.archive-posts[data-layout="timeline"] .archive-card { width: min(100%, 360px); grid-column: 2; }
.archive-posts[data-layout="timeline"] > li:nth-child(even) .archive-card { grid-column: 1; justify-self: end; }

@media (max-width: 760px) {
  .archive-toolbar { flex-wrap: wrap; }
  .archive-posts[data-layout="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
}
@media (max-width: 540px) {
  .archive-shell { padding-top: 30px; }
  .archive-search { margin-top: 30px; }
  .archive-toolbar { padding: 12px; border-radius: 17px; }
  .archive-views button { padding-inline: 9px; }
  .archive-posts[data-layout="grid"] { grid-template-columns: minmax(0, 1fr); }
  .archive-posts[data-layout="timeline"] { --axis: 10px; gap: 24px; }
  .archive-posts[data-layout="timeline"] > li { display: block; padding-left: 30px; }
  .archive-posts[data-layout="timeline"] > li::before { width: 15px; height: 15px; }
  .archive-posts[data-layout="timeline"] .archive-card { width: 100%; }
}