:root {
    color-scheme: light dark;
    --paper: #f5efdf;
    --ink: #443b30;
    --muted: #85735d;
    --line: #d5c7ae;
    --accent: #8e4b37;
    --hover: #e0cfac80;
    --spotlight-wash: #fffbe9b3;
    --spotlight-dot: #af835f80;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    background: var(--paper);
    color: var(--ink);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background-image: radial-gradient(ellipse at 50% 0, transparent 25%, #8463330b 100%),
        radial-gradient(#85633c12 0.6px, transparent 0.8px);
    background-size: 100% 100%, 5px 5px;
}

.annual-directory-page { background-attachment: fixed; }
.annual-directory-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--spotlight-wash);
    background-image: radial-gradient(var(--spotlight-dot) 0.7px, transparent 1px);
    background-size: 5px 5px;
    -webkit-mask-image: radial-gradient(circle clamp(180px, 26vw, 360px) at var(--spotlight-x, 50%) var(--spotlight-y, 30%), #000 0%, #0009 42%, transparent 100%);
    mask-image: radial-gradient(circle clamp(180px, 26vw, 360px) at var(--spotlight-x, 50%) var(--spotlight-y, 30%), #000 0%, #0009 42%, transparent 100%);
    opacity: 0;
    transition: opacity 240ms ease;
}
.annual-directory-page.is-spotlight-active::before { opacity: 1; }
.annual-directory-page .annual-shell { position: relative; z-index: 1; }

[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }

a:focus-visible, button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 6px;
}

.annual-shell {
    width: min(960px, calc(100% - 80px));
    margin: 0 auto;
}

.annual-header {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    border-bottom: 3px double var(--line);
}

.annual-brand { font-family: "Songti SC", "STSong", serif; font-weight: 650; letter-spacing: 0.12em; }

.annual-header nav { display: flex; gap: 24px; font-size: 14px; }

.annual-header nav a { color: var(--muted); }

.annual-header a:hover { color: var(--accent); }

main { padding: 72px 0 96px; }

.annual-catalog { display: grid; grid-template-columns: clamp(140px, 18vw, 200px) minmax(0, 1fr); column-gap: clamp(24px, 5vw, 64px); align-items: center; }
.annual-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; padding-right: 24px; border-right: 1px solid var(--line); }
.annual-subtitle { margin: 0; color: var(--muted); font-family: Georgia, "Times New Roman", serif; font-size: 12px; letter-spacing: 0.16em; line-height: 1.8; }

h1 {
    margin: 0;
    font-family: "Songti SC", "STSong", "Noto Serif CJK SC", serif;
    font-size: clamp(40px, 6vw, 64px);
    font-weight: 500;
    letter-spacing: 0.12em;
    line-height: 1.2;
}

.annual-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1em;
    font-family: "Songti SC", "STSong", "Noto Serif CJK SC", "Source Han Serif SC", "SimSun", serif;
    font-size: clamp(96px, 12vw, 144px);
    font-weight: 900;
    letter-spacing: 0;
    line-height: 1;
}

.annual-title span { display: block; color: var(--ink); }

.annual-book-mark { display: flex; align-items: flex-end; gap: 5px; padding: 10px 12px; border: 1px solid var(--accent); color: var(--accent); transform: rotate(-5deg); opacity: 0.7; }
.annual-book-mark span { display: block; width: 9px; height: 30px; border: 1px solid currentColor; border-bottom-width: 4px; }
.annual-book-mark span:nth-child(2) { height: 35px; }
.annual-book-mark span:nth-child(3) { transform: rotate(-10deg); transform-origin: bottom; }
.annual-heading .annual-book-mark, .annual-heading .annual-book-mark span:nth-child(3) { transform: none; }

.annual-empty {
    margin: 0;
    padding: 32px 0;
    border-top: 1px solid var(--line);
    color: var(--muted);
}

.annual-list { margin: 0; padding: 0; list-style: none; border-top: 3px double var(--line); border-bottom: 1px solid var(--line); counter-reset: annual-volume; }
.annual-list li { counter-increment: annual-volume; }

.annual-issue {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: baseline;
    gap: 32px;
    padding: 32px 16px;
    border-bottom: 1px solid var(--line);
}

.annual-issue::before { content: counter(annual-volume, decimal-leading-zero); align-self: center; padding-right: 24px; border-right: 1px solid var(--line); color: var(--muted); font-family: Georgia, "Times New Roman", serif; font-size: 13px; letter-spacing: 0.08em; }
.annual-issue::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: var(--hover);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.annual-issue:hover::after, .annual-issue:focus-visible::after { transform: scaleX(1); }

.annual-year {
    flex-shrink: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(40px, 6vw, 64px);
    line-height: 1.2;
    font-variant-numeric: lining-nums tabular-nums;
}

.annual-issue-title { min-width: 0; color: var(--muted); font-family: "Songti SC", "STSong", serif; letter-spacing: 0.15em; line-height: 1.6; overflow-wrap: anywhere; }

.annual-arrow { flex-shrink: 0; margin-left: auto; color: var(--accent); font-size: 28px; }

.annual-loading-page { display: grid; place-items: center; }
.annual-loading { width: min(400px, calc(100% - 48px)); margin: 48px auto; padding: 48px 0; text-align: center; }
.annual-loading .annual-book-mark { width: max-content; margin: 0 auto 40px; }
.annual-loading h1 { font-size: clamp(30px, 6vw, 42px); letter-spacing: 0.04em; }
#loading-status { min-height: 1.7em; margin: 28px 0 24px; color: var(--muted); line-height: 1.7; }
#loading-progress { display: block; width: 100%; height: 5px; appearance: none; border: 0; background: var(--line); color: var(--accent); }
#loading-progress::-webkit-progress-bar { background: var(--line); }
#loading-progress::-webkit-progress-value { background: var(--accent); }
#loading-progress::-moz-progress-bar { background: var(--accent); }
.annual-loading-detail { display: flex; justify-content: space-between; gap: 16px; margin-top: 14px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.annual-loading-actions { display: flex; justify-content: center; gap: 28px; margin-top: 36px; font-size: 14px; }
.annual-loading-actions a, .annual-loading-actions button { padding: 6px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; cursor: pointer; }

@media (max-width: 600px) {
    .annual-shell { width: calc(100% - 40px); }
    .annual-header { min-height: 76px; gap: 16px; }
    .annual-header nav { gap: 18px; }
    main { padding: 48px 0 64px; }
    .annual-catalog { grid-template-columns: 80px minmax(0, 1fr); column-gap: 20px; }
    .annual-heading { gap: 16px; padding-right: 12px; }
    .annual-title { font-size: 64px; }
    .annual-subtitle { font-size: 10px; letter-spacing: 0.1em; }
    .annual-heading .annual-book-mark { padding: 7px; gap: 4px; }
    .annual-heading .annual-book-mark span { width: 7px; height: 24px; }
    .annual-heading .annual-book-mark span:nth-child(2) { height: 28px; }
    .annual-issue { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 20px 4px; gap: 8px; }
    .annual-issue::before { display: none; }
    .annual-year { grid-column: 1; font-size: clamp(32px, 8vw, 44px); }
    .annual-issue-title { grid-column: 1; font-size: 14px; }
    .annual-arrow { grid-column: 2; grid-row: 1; align-self: center; font-size: 24px; }
    .annual-issue-title ~ .annual-arrow { grid-row: 1 / 3; }
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #25221d;
        --ink: #e8ddc9;
        --muted: #b4a48b;
        --line: #544a3a;
        --accent: #d19b78;
        --hover: #66533766;
        --spotlight-wash: #dfb47812;
        --spotlight-dot: #e3bb8280;
    }
}

@media (prefers-reduced-motion: reduce), (forced-colors: active) {
    .annual-directory-page::before { display: none; transition: none; }
    .annual-issue::after { transition: none; }
}