From 13c191becb9d991ddb1ba7d0e72aa9438a5cb536 Mon Sep 17 00:00:00 2001
From: Staaaaaaaaar <2300012435@stu.pku.edu.cn>
Date: Wed, 5 Aug 2026 20:06:02 +0800
Subject: [PATCH 1/5] feat: enhance featured content carousel and site header
 accessibility

- Updated the featured content carousel to improve touch interaction and added pointer event handling for better user experience.
- Enhanced the site header navigation with improved ARIA attributes for better accessibility and user interaction.
- Adjusted styles for carousel arrows and mobile navigation to ensure consistency and responsiveness across breakpoints.
---
 .../content/FeaturedContentCarousel.astro     |  48 ++++-
 src/components/site/SiteHeader.astro          |  50 ++++-
 src/styles/content/carousel.css               |  47 +++--
 src/styles/responsive/1000.css                |   4 +-
 src/styles/responsive/430.css                 |  69 +++++-
 src/styles/responsive/760.css                 | 197 ++++++++++++++++--
 6 files changed, 360 insertions(+), 55 deletions(-)

diff --git a/src/components/content/FeaturedContentCarousel.astro b/src/components/content/FeaturedContentCarousel.astro
index a4e8edb..6fa9716 100644
--- a/src/components/content/FeaturedContentCarousel.astro
+++ b/src/components/content/FeaturedContentCarousel.astro
@@ -70,12 +70,12 @@ const panels = hasMultiple
       <>
         <button class="featured-carousel-arrow is-previous" type="button" aria-label="上一篇精选" data-carousel-previous>
           <svg viewBox="0 0 32 32" aria-hidden="true">
-            <path d="M19.5 6.5 10 16l9.5 9.5M10.5 16H25" />
+            <path d="M20.5 6.5 11 16l9.5 9.5" />
           </svg>
         </button>
         <button class="featured-carousel-arrow is-next" type="button" aria-label="下一篇精选" data-carousel-next>
           <svg viewBox="0 0 32 32" aria-hidden="true">
-            <path d="m12.5 6.5 9.5 9.5-9.5 9.5M21.5 16H7" />
+            <path d="m11.5 6.5 9.5 9.5-9.5 9.5" />
           </svg>
         </button>
         <div class="featured-carousel-footer">
@@ -99,6 +99,7 @@ const panels = hasMultiple
 
 <script>
   document.querySelectorAll<HTMLElement>('[data-featured-carousel]').forEach((carousel) => {
+    const viewport = carousel.querySelector<HTMLElement>('.featured-carousel-viewport');
     const track = carousel.querySelector<HTMLElement>('[data-carousel-track]');
     const panels = [...carousel.querySelectorAll<HTMLElement>('[data-carousel-panel]')];
     const slides = [...carousel.querySelectorAll<HTMLElement>('[data-carousel-original]')];
@@ -106,7 +107,7 @@ const panels = hasMultiple
     const previous = carousel.querySelector<HTMLButtonElement>('[data-carousel-previous]');
     const next = carousel.querySelector<HTMLButtonElement>('[data-carousel-next]');
     const status = carousel.querySelector<HTMLElement>('[data-carousel-status]');
-    if (!track || slides.length < 2 || !previous || !next || !status) return;
+    if (!viewport || !track || slides.length < 2 || !previous || !next || !status) return;
 
     const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
     const autoplayConfigured = carousel.dataset.autoplay === 'true';
@@ -181,6 +182,47 @@ const panels = hasMultiple
     next.addEventListener('click', () => move(1));
     dots.forEach((dot, index) => dot.addEventListener('click', () => goTo(index)));
 
+    let touchStart: { id: number; x: number; y: number } | undefined;
+    let suppressClick = false;
+
+    viewport.addEventListener('pointerdown', (event) => {
+      if (event.pointerType !== 'touch') return;
+      touchStart = { id: event.pointerId, x: event.clientX, y: event.clientY };
+      pausedByInteraction = true;
+      stopTimer();
+    });
+
+    viewport.addEventListener('pointerup', (event) => {
+      if (!touchStart || event.pointerId !== touchStart.id) return;
+      const deltaX = event.clientX - touchStart.x;
+      const deltaY = event.clientY - touchStart.y;
+      touchStart = undefined;
+      pausedByInteraction = false;
+
+      if (Math.abs(deltaX) >= 50 && Math.abs(deltaX) > Math.abs(deltaY) * 1.25) {
+        suppressClick = true;
+        move(deltaX < 0 ? 1 : -1);
+        window.setTimeout(() => {
+          suppressClick = false;
+        }, 0);
+      } else {
+        schedule();
+      }
+    });
+
+    viewport.addEventListener('pointercancel', () => {
+      touchStart = undefined;
+      pausedByInteraction = false;
+      schedule();
+    });
+
+    viewport.addEventListener('click', (event) => {
+      if (suppressClick) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    }, { capture: true });
+
     carousel.addEventListener('mouseenter', () => {
       pausedByInteraction = true;
       stopTimer();
diff --git a/src/components/site/SiteHeader.astro b/src/components/site/SiteHeader.astro
index 85af831..4fbf0a2 100644
--- a/src/components/site/SiteHeader.astro
+++ b/src/components/site/SiteHeader.astro
@@ -36,13 +36,25 @@ const pathname = Astro.url.pathname;
           <path d="M20.4 14.6A8.5 8.5 0 0 1 9.4 3.6 8.5 8.5 0 1 0 20.4 14.6Z"></path>
         </svg>
       </button>
-      <button class="menu-toggle" type="button" aria-label="打开导航" aria-expanded="false">
+      <button
+        class="menu-toggle"
+        type="button"
+        aria-label="打开导航"
+        aria-expanded="false"
+        aria-controls="mobile-navigation"
+      >
         <span></span><span></span>
       </button>
     </div>
   </div>
 
-  <nav class="mobile-nav" aria-label="移动端导航">
+  <nav
+    id="mobile-navigation"
+    class="mobile-nav"
+    aria-label="移动端导航"
+    aria-hidden="true"
+    inert
+  >
     {siteNav.map((item) => (
       <a href={item.href} aria-current={pathname.startsWith(item.href) ? 'page' : undefined}>
         {item.label}
@@ -54,12 +66,42 @@ const pathname = Astro.url.pathname;
 <script>
   const header = document.querySelector('.site-header');
   const menu = header?.querySelector<HTMLButtonElement>('.menu-toggle');
+  const mobileNav = header?.querySelector<HTMLElement>('.mobile-nav');
   const themeToggle = header?.querySelector<HTMLButtonElement>('.theme-toggle');
 
-  menu?.addEventListener('click', () => {
-    const open = header?.classList.toggle('menu-open') ?? false;
+  const setMenuOpen = (open: boolean, restoreFocus = false) => {
+    if (!header || !menu || !mobileNav) return;
+    header.classList.toggle('menu-open', open);
+    document.documentElement.classList.toggle('mobile-menu-open', open);
     menu.setAttribute('aria-expanded', String(open));
     menu.setAttribute('aria-label', open ? '关闭导航' : '打开导航');
+    mobileNav.setAttribute('aria-hidden', String(!open));
+    mobileNav.toggleAttribute('inert', !open);
+    if (!open && restoreFocus) menu.focus();
+  };
+
+  menu?.addEventListener('click', () => {
+    setMenuOpen(!header?.classList.contains('menu-open'));
+  });
+
+  mobileNav?.addEventListener('click', (event) => {
+    if (event.target instanceof Element && event.target.closest('a')) setMenuOpen(false);
+  });
+
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && header?.classList.contains('menu-open')) {
+      setMenuOpen(false, true);
+    }
+  });
+
+  document.addEventListener('pointerdown', (event) => {
+    if (header?.classList.contains('menu-open') && !header.contains(event.target as Node)) {
+      setMenuOpen(false);
+    }
+  });
+
+  window.matchMedia('(min-width: 761px)').addEventListener('change', (event) => {
+    if (event.matches) setMenuOpen(false);
   });
 
   const syncThemeToggle = () => {
diff --git a/src/styles/content/carousel.css b/src/styles/content/carousel.css
index a937dae..4984c99 100644
--- a/src/styles/content/carousel.css
+++ b/src/styles/content/carousel.css
@@ -26,39 +26,52 @@
   z-index: 3;
   top: calc((100% - 54px) / 2);
   display: grid;
-  width: 36px;
-  height: 68px;
+  width: 44px;
+  height: 44px;
   padding: 0;
-  border: 0;
-  color: var(--ink);
-  background: transparent;
-  opacity: .44;
+  border: 1px solid color-mix(in srgb, var(--paper) 28%, transparent);
+  border-radius: 50%;
+  color: var(--paper);
+  background: color-mix(in srgb, var(--ink) 82%, transparent);
+  box-shadow: 0 8px 24px rgba(7,16,15,.18);
+  opacity: .9;
   place-items: center;
   transform: translateY(-50%);
+  backdrop-filter: blur(8px);
   cursor: pointer;
-  transition: color 180ms ease, opacity 180ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1);
+  transition:
+    background 180ms ease,
+    border-color 180ms ease,
+    box-shadow 180ms ease,
+    opacity 180ms ease,
+    transform 220ms cubic-bezier(.22, 1, .36, 1);
 }
 .featured-carousel-arrow svg {
-  width: 27px;
-  height: 27px;
+  width: 22px;
+  height: 22px;
   overflow: visible;
 }
 .featured-carousel-arrow path {
   fill: none;
   stroke: currentColor;
-  stroke-width: 1.2;
+  stroke-width: 2.4;
   stroke-linecap: round;
   stroke-linejoin: round;
   vector-effect: non-scaling-stroke;
 }
-.featured-carousel-arrow.is-previous { left: -36px; }
-.featured-carousel-arrow.is-next { right: -36px; }
-.featured-carousel-arrow:hover {
-  color: var(--primary);
-  opacity: 1;
+.featured-carousel-arrow.is-previous { left: 16px; }
+.featured-carousel-arrow.is-next { right: 16px; }
+.featured-carousel-arrow:active { transform: translateY(-50%) scale(.94); }
+@media (hover: hover) {
+  .featured-carousel-arrow:hover {
+    border-color: var(--primary);
+    color: var(--on-primary);
+    background: var(--primary);
+    box-shadow: 0 10px 28px color-mix(in srgb, var(--primary) 28%, transparent);
+    opacity: 1;
+    transform: translateY(-50%) scale(1.06);
+  }
 }
-.featured-carousel-arrow.is-previous:hover { transform: translate(-3px, -50%); }
-.featured-carousel-arrow.is-next:hover { transform: translate(3px, -50%); }
 .featured-carousel-arrow:focus-visible,
 .featured-carousel-dot:focus-visible {
   outline: 2px solid var(--primary);
diff --git a/src/styles/responsive/1000.css b/src/styles/responsive/1000.css
index 03db145..ab2cbb0 100644
--- a/src/styles/responsive/1000.css
+++ b/src/styles/responsive/1000.css
@@ -18,8 +18,8 @@
   .featured-content-card > .news-art,
   .featured-content-card > .interview-art { min-height: 490px; }
   .featured-content-copy { padding: 42px 40px; }
-  .featured-carousel-arrow.is-previous { left: -20px; }
-  .featured-carousel-arrow.is-next { right: -20px; }
+  .featured-carousel-arrow.is-previous { left: 16px; }
+  .featured-carousel-arrow.is-next { right: 16px; }
   .doc-layout { grid-template-columns: 160px minmax(0, 1fr); gap: 32px; }
   .doc-toc { display: none; }
   .editorial-article-visual { height: clamp(280px, 32vh, 330px); }
diff --git a/src/styles/responsive/430.css b/src/styles/responsive/430.css
index 0f04ad9..2482b31 100644
--- a/src/styles/responsive/430.css
+++ b/src/styles/responsive/430.css
@@ -1,6 +1,7 @@
 /* Overrides for viewports up to 430px, applied after all base styles. */
 @media (max-width: 430px) {
   .site-identity { font-size: 16px; }
+  .header-actions { gap: 0; }
   .footer-bottom { grid-template-columns: 1fr; gap: 8px; }
   .footer-bottom > span,
   .footer-bottom > a {
@@ -10,21 +11,77 @@
   .footer-bottom > span { grid-row: 1; }
   .footer-bottom > a { grid-row: 2; }
   .home-hero .eyebrow { max-width: 220px; }
-  .display { font-size: 45px; }
+  .hero-content { padding-block: 104px 82px; }
+  .display { font-size: clamp(40px, 12.5vw, 52px); letter-spacing: -.055em; }
+  .hero-actions {
+    width: 100%;
+    gap: 12px;
+  }
+  .hero-actions .hero-primary-action,
+  .hero-actions .hero-secondary-action {
+    width: 100%;
+    min-height: 48px;
+  }
   .section-heading { flex-direction: column; gap: 10px; }
-  .portal-card { padding: 20px; }
-  .interview-art.large { min-height: 470px; }
+  .home-news .section-heading {
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 16px;
+  }
+  .home-news .section-note { flex: 0 0 auto; }
+  .planet-facts { grid-template-columns: 1fr; }
+  .planet-facts div,
+  .planet-facts div:first-child,
+  .planet-facts div:last-child {
+    padding: 18px 0;
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+  .planet-facts div:first-child { grid-column: auto; }
+  .planet-facts div:last-child { border-bottom: 0; }
+  .planet-facts strong { font-size: 32px; }
+  .planet-facts span { line-height: 1.55; }
+  .portal-card { min-height: 400px; padding: 20px; }
+  .card-content h3 { font-size: 40px; }
+  .featured-content-card > .document-art,
+  .featured-content-card > .news-art,
+  .featured-content-card > .interview-art { min-height: clamp(200px, 56vw, 240px); }
+  .document > .document-art.large,
+  .document > .news-art.large,
+  .document > .interview-art.large { min-height: clamp(200px, 56vw, 240px); }
+  .featured-content-copy { padding: 32px 22px 36px; }
+  .featured-content-copy h2 { margin-top: 28px; font-size: 34px; }
   .doc-sidebar nav { grid-template-columns: 1fr; }
-  .document-meta { align-items: flex-start; flex-direction: column; gap: 8px; }
+  .meta-row,
+  .document-meta {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 8px;
+  }
   .prose { font-size: 16px; }
   .prose blockquote { font-size: 25px; }
-  .document-pagination { gap: 14px; margin-top: 70px; }
+  .document-pagination {
+    grid-template-columns: 1fr;
+    gap: 14px;
+    margin-top: 70px;
+  }
+  .document-pagination-next { grid-column: 1; }
   .document-pagination a { padding-block: 12px; }
   .document-pagination strong { font-size: 18px; }
   .home-news-list h2 { font-size: 21px; }
   .content-list-card { gap: 0; padding-block: 24px; }
   .content-list-card > .document-art,
   .content-list-card > .news-art,
-  .content-list-card > .interview-art { min-height: 190px; margin-bottom: 22px; }
+  .content-list-card > .interview-art {
+    min-height: clamp(150px, 45vw, 180px);
+    margin-bottom: 22px;
+  }
   .content-list-copy h2 { font-size: 28px; }
+  .about-statement,
+  .about-story { padding-block: 82px; }
+  .about-cta { padding-block: 88px; }
+  .about-cta h2 { font-size: clamp(44px, 14vw, 60px); letter-spacing: -.05em; }
+  .intro-meta { gap: 16px; }
+  .intro-meta > span:last-child { text-align: right; }
 }
diff --git a/src/styles/responsive/760.css b/src/styles/responsive/760.css
index 0d79258..152df49 100644
--- a/src/styles/responsive/760.css
+++ b/src/styles/responsive/760.css
@@ -1,39 +1,63 @@
 /* Overrides for viewports up to 760px, applied after all base styles. */
 @media (max-width: 760px) {
-  :root { --shell: min(680px, calc(100% - 36px)); }
+  :root { --shell: min(680px, calc(100% - max(32px, calc(env(safe-area-inset-left) + env(safe-area-inset-right))))); }
+  html.mobile-menu-open,
+  html.mobile-menu-open body { overflow: hidden; }
+  main { min-width: 0; }
+  a,
+  button { touch-action: manipulation; }
   .site-header { height: 64px; }
   .header-inner { height: 63px; grid-template-columns: 1fr auto; }
   .primary-nav { display: none; }
   .menu-toggle { display: grid; }
   .theme-toggle,
-  .menu-toggle { width: 40px; height: 40px; }
+  .menu-toggle { width: 44px; height: 44px; }
   .theme-toggle svg { width: 17px; }
+  .site-header.menu-open {
+    color: var(--ink);
+    background: var(--paper);
+    border-bottom-color: var(--line);
+  }
   .mobile-nav {
     position: fixed;
     top: 64px;
+    bottom: 0;
     left: 0;
     right: 0;
     display: flex;
     flex-direction: column;
-    padding: 8px 18px 24px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding:
+      8px max(18px, env(safe-area-inset-right))
+      max(24px, env(safe-area-inset-bottom))
+      max(18px, env(safe-area-inset-left));
     background: var(--paper);
     color: var(--ink);
     border-bottom: 1px solid var(--line);
     opacity: 0;
     visibility: hidden;
+    pointer-events: none;
     transform: translateY(-10px);
     transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
   }
   .mobile-nav a {
-    display: block;
-    padding: 15px 0;
+    min-height: 54px;
+    display: flex;
+    align-items: center;
+    padding: 12px 0;
     border-bottom: 1px solid var(--line);
     font-family: var(--serif);
     font-size: 21px;
     line-height: 1.35;
   }
   .mobile-nav a[aria-current="page"] { color: var(--primary); }
-  .menu-open .mobile-nav { opacity: 1; visibility: visible; transform: translateY(0); }
+  .menu-open .mobile-nav {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transform: translateY(0);
+  }
   .menu-open .menu-toggle span:first-child { transform: translate(-50%, 0) rotate(45deg); }
   .menu-open .menu-toggle span:last-child { transform: translate(-50%, 0) rotate(-45deg); }
   .section { padding-block: 78px; }
@@ -45,25 +69,37 @@
   .display { font-size: clamp(48px, 13vw, 70px); line-height: 1.03; }
   .hero-copy { font-size: 15px; }
   .hero-actions {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 22px;
+    width: min(420px, 100%);
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    align-items: center;
+    gap: 16px;
   }
   .hero-actions .hero-primary-action,
-  .hero-actions .hero-secondary-action { width: min(200px, 100%); }
+  .hero-actions .hero-secondary-action { width: 100%; }
   .manifesto,
   .about-statement { grid-template-columns: 1fr; }
   .large-copy { margin-left: 0; }
   .portal-grid,
-  .planet-facts,
   .principles,
   .story-grid { grid-template-columns: 1fr; }
   .portal-card { min-height: 460px; }
   .card-content h3 { font-size: 46px; }
   .quote-inner { padding-block: 86px 72px; }
   .quote-inner blockquote { margin: 40px 0 62px; }
-  .planet-facts { gap: 0; }
-  .planet-facts div { padding: 20px 0; border-bottom: 1px solid var(--line); }
+  .planet-facts {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 0;
+  }
+  .planet-facts div {
+    padding: 20px 16px;
+    border-right: 1px solid var(--line);
+  }
+  .planet-facts div:first-child { padding-left: 0; }
+  .planet-facts div:last-child {
+    padding-right: 0;
+    border-right: 0;
+  }
   .site-footer { padding-block: 50px 20px; }
   .footer-main {
     grid-template-columns: 1fr;
@@ -89,19 +125,50 @@
   .featured-content-card { grid-template-columns: 1fr; }
   .featured-content-card > .document-art,
   .featured-content-card > .news-art,
-  .featured-content-card > .interview-art { min-height: 380px; }
+  .featured-content-card > .interview-art { min-height: clamp(220px, 56vw, 320px); }
+  .document > .document-art.large,
+  .document > .news-art.large,
+  .document > .interview-art.large { min-height: clamp(220px, 60vw, 300px); }
   .featured-content-copy { min-height: 0; padding: 38px 26px 42px; }
   .featured-content-copy h2 { margin-top: 36px; }
   .featured-content-footer { padding-top: 42px; }
+  .featured-carousel-viewport { touch-action: pan-y; }
   .featured-carousel-arrow {
-    top: calc((100% - 52px) / 2);
-    width: 30px;
-    height: 58px;
+    top: calc((100% - 48px) / 2);
+    width: 44px;
+    height: 44px;
+    opacity: .94;
   }
-  .featured-carousel-arrow svg { width: 23px; height: 23px; }
-  .featured-carousel-arrow.is-previous { left: -10px; }
-  .featured-carousel-arrow.is-next { right: -10px; }
+  .featured-carousel-arrow svg { width: 20px; height: 20px; }
+  .featured-carousel-arrow.is-previous { left: 12px; }
+  .featured-carousel-arrow.is-next { right: 12px; }
   .featured-carousel-footer { min-height: 48px; padding-top: 12px; }
+  .featured-carousel-dots { gap: 0; }
+  .featured-carousel-dot {
+    position: relative;
+    width: 44px;
+    height: 44px;
+    display: grid;
+    place-items: center;
+    background: transparent;
+    opacity: 1;
+  }
+  .featured-carousel-dot::before {
+    content: "";
+    width: 6px;
+    height: 6px;
+    display: block;
+    border-radius: 999px;
+    background: var(--faint);
+    opacity: .4;
+    transition: width 260ms cubic-bezier(.22, 1, .36, 1), background-color 180ms ease, opacity 180ms ease;
+  }
+  .featured-carousel-dot.is-current { width: 44px; background: transparent; }
+  .featured-carousel-dot.is-current::before {
+    width: 24px;
+    background: var(--primary);
+    opacity: 1;
+  }
   .content-list-card {
     grid-template-columns: 1fr;
     min-height: 0;
@@ -109,7 +176,7 @@
   }
   .content-list-card > .document-art,
   .content-list-card > .news-art,
-  .content-list-card > .interview-art { min-height: 250px; }
+  .content-list-card > .interview-art { min-height: clamp(170px, 50vw, 220px); }
   .content-list-copy { padding: 28px 0 0; }
   .content-list-copy h2 { margin-top: 36px; }
   .home-news-list > a {
@@ -121,9 +188,24 @@
   .doc-layout { grid-template-columns: 1fr; padding-block: 46px 82px; }
   .doc-sidebar { position: static; }
   .doc-sidebar nav { display: grid; grid-template-columns: 1fr 1fr; }
-  .doc-sidebar nav a { padding-right: 18px; }
+  .doc-sidebar nav a { min-height: 48px; padding-right: 18px; }
   .document { padding-top: 27px; border-top: 1px solid var(--line); }
   .document-header h1 { font-size: clamp(44px, 12vw, 64px); }
+  .prose table {
+    display: block;
+    width: max-content;
+    max-width: 100%;
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    -webkit-overflow-scrolling: touch;
+  }
+  .prose pre {
+    max-width: 100%;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+  .prose :not(pre) > code,
+  .prose a { overflow-wrap: anywhere; }
   .interviews { padding-block: 50px 82px; }
   .collection-list-heading { margin-top: 68px; }
   .news-index { padding-block: 50px 82px; }
@@ -131,7 +213,7 @@
   .editorial-article-header { padding-block: 42px 58px; }
   .editorial-article-header h1 { font-size: clamp(48px, 12.5vw, 70px); }
   .editorial-article-deck { margin-left: 0; font-size: 17px; }
-  .editorial-article-visual { height: clamp(250px, 34vh, 280px); }
+  .editorial-article-visual { height: clamp(200px, 54vw, 250px); }
   .interview-article-body {
     grid-template-columns: 1fr;
     gap: 42px;
@@ -152,4 +234,73 @@
   .story-grid { gap: 32px; }
   .story-copy { padding-top: 0; }
   .about-cta h2 { font-size: clamp(58px, 15vw, 82px); }
+  .footer-sections nav { gap: 0; }
+  .footer-sections a {
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+  }
+  .footer-socials { flex-direction: column; gap: 0; }
+  .footer-socials a {
+    width: 44px;
+    height: 44px;
+    display: grid;
+    place-items: center start;
+  }
+  .content-page-index { gap: 4px; }
+  .content-page-arrow {
+    width: 44px;
+    height: 44px;
+  }
+  .content-page-dots {
+    min-width: 0;
+    flex: 1;
+    gap: 0;
+    overflow-x: auto;
+    justify-content: flex-start;
+    overscroll-behavior-inline: contain;
+    scrollbar-width: none;
+  }
+  .content-page-dots::-webkit-scrollbar { display: none; }
+  .content-page-dot {
+    position: relative;
+    flex: 0 0 44px;
+    width: 44px;
+    height: 44px;
+    background: transparent !important;
+    opacity: 1;
+  }
+  .content-page-dot::before {
+    content: "";
+    width: 7px;
+    height: 7px;
+    display: block;
+    margin: auto;
+    border-radius: 50%;
+    background: var(--faint);
+    opacity: .45;
+  }
+  .content-page-dot.is-current {
+    width: 44px;
+    background: transparent !important;
+  }
+  .content-page-dot.is-current::before {
+    width: 24px;
+    border-radius: 999px;
+    background: var(--primary);
+    opacity: 1;
+  }
+}
+
+@media (max-width: 760px) and (hover: none) {
+  .portal-card:hover,
+  .featured-content-card:hover,
+  .content-list-card:hover,
+  .button:hover,
+  .scroll-to-top:hover { transform: none; }
+
+  .home-news-list > a:hover {
+    padding-inline: 0;
+    background: transparent;
+  }
 }

From 955155cfe781ff4d6b74a6cac651add49343ec14 Mon Sep 17 00:00:00 2001
From: Staaaaaaaaar <2300012435@stu.pku.edu.cn>
Date: Wed, 5 Aug 2026 20:12:07 +0800
Subject: [PATCH 2/5] feat: update responsive styles for improved layout and
 consistency

- Adjusted min-height and padding for various components including portal cards, featured content, and content lists to enhance visual hierarchy and responsiveness.
- Refined typography and spacing for hero sections and content copies to improve readability and aesthetics across breakpoints.
- Implemented clamp functions for dynamic sizing to ensure better adaptability on different screen sizes.
---
 src/styles/responsive/430.css | 25 +++++++++++++++----------
 src/styles/responsive/760.css | 21 +++++++++++----------
 2 files changed, 26 insertions(+), 20 deletions(-)

diff --git a/src/styles/responsive/430.css b/src/styles/responsive/430.css
index 2482b31..b176411 100644
--- a/src/styles/responsive/430.css
+++ b/src/styles/responsive/430.css
@@ -11,11 +11,15 @@
   .footer-bottom > span { grid-row: 1; }
   .footer-bottom > a { grid-row: 2; }
   .home-hero .eyebrow { max-width: 220px; }
-  .hero-content { padding-block: 104px 82px; }
+  .home-hero,
+  .hero-content { min-height: max(560px, 86svh); }
+  .hero-content { padding-block: 88px 54px; }
   .display { font-size: clamp(40px, 12.5vw, 52px); letter-spacing: -.055em; }
+  .hero-copy { margin-top: 24px; }
   .hero-actions {
     width: 100%;
     gap: 12px;
+    margin-top: 28px;
   }
   .hero-actions .hero-primary-action,
   .hero-actions .hero-secondary-action {
@@ -42,18 +46,18 @@
   .planet-facts div:last-child { border-bottom: 0; }
   .planet-facts strong { font-size: 32px; }
   .planet-facts span { line-height: 1.55; }
-  .portal-card { min-height: 400px; padding: 20px; }
+  .portal-card { min-height: 330px; padding: 20px; }
   .card-content h3 { font-size: 40px; }
   .featured-content-card > .document-art,
   .featured-content-card > .news-art,
-  .featured-content-card > .interview-art { min-height: clamp(200px, 56vw, 240px); }
+  .featured-content-card > .interview-art { min-height: clamp(135px, 38vw, 160px); }
   .document > .document-art.large,
   .document > .news-art.large,
-  .document > .interview-art.large { min-height: clamp(200px, 56vw, 240px); }
-  .featured-content-copy { padding: 32px 22px 36px; }
-  .featured-content-copy h2 { margin-top: 28px; font-size: 34px; }
+  .document > .interview-art.large { min-height: clamp(160px, 48vw, 190px); }
+  .featured-content-copy { padding: 22px 18px 26px; }
+  .featured-content-copy h2 { margin-top: 18px; font-size: 30px; }
+  .featured-content-footer { padding-top: 22px; }
   .doc-sidebar nav { grid-template-columns: 1fr; }
-  .meta-row,
   .document-meta {
     align-items: flex-start;
     flex-direction: column;
@@ -74,10 +78,11 @@
   .content-list-card > .document-art,
   .content-list-card > .news-art,
   .content-list-card > .interview-art {
-    min-height: clamp(150px, 45vw, 180px);
-    margin-bottom: 22px;
+    min-height: clamp(105px, 30vw, 125px);
+    margin-bottom: 16px;
   }
-  .content-list-copy h2 { font-size: 28px; }
+  .content-list-copy { padding-top: 16px; }
+  .content-list-copy h2 { margin-top: 18px; font-size: 26px; }
   .about-statement,
   .about-story { padding-block: 82px; }
   .about-cta { padding-block: 88px; }
diff --git a/src/styles/responsive/760.css b/src/styles/responsive/760.css
index 152df49..53d2e60 100644
--- a/src/styles/responsive/760.css
+++ b/src/styles/responsive/760.css
@@ -83,7 +83,7 @@
   .portal-grid,
   .principles,
   .story-grid { grid-template-columns: 1fr; }
-  .portal-card { min-height: 460px; }
+  .portal-card { min-height: clamp(340px, 65vw, 420px); }
   .card-content h3 { font-size: 46px; }
   .quote-inner { padding-block: 86px 72px; }
   .quote-inner blockquote { margin: 40px 0 62px; }
@@ -125,13 +125,14 @@
   .featured-content-card { grid-template-columns: 1fr; }
   .featured-content-card > .document-art,
   .featured-content-card > .news-art,
-  .featured-content-card > .interview-art { min-height: clamp(220px, 56vw, 320px); }
+  .featured-content-card > .interview-art { min-height: clamp(160px, 38vw, 240px); }
   .document > .document-art.large,
   .document > .news-art.large,
-  .document > .interview-art.large { min-height: clamp(220px, 60vw, 300px); }
-  .featured-content-copy { min-height: 0; padding: 38px 26px 42px; }
-  .featured-content-copy h2 { margin-top: 36px; }
-  .featured-content-footer { padding-top: 42px; }
+  .document > .interview-art.large { min-height: clamp(180px, 45vw, 260px); }
+  .featured-content-copy { min-height: 0; padding: 30px 24px 34px; }
+  .featured-content-copy .meta-row { padding-inline: 44px; }
+  .featured-content-copy h2 { margin-top: 28px; }
+  .featured-content-footer { padding-top: 30px; }
   .featured-carousel-viewport { touch-action: pan-y; }
   .featured-carousel-arrow {
     top: calc((100% - 48px) / 2);
@@ -176,9 +177,9 @@
   }
   .content-list-card > .document-art,
   .content-list-card > .news-art,
-  .content-list-card > .interview-art { min-height: clamp(170px, 50vw, 220px); }
-  .content-list-copy { padding: 28px 0 0; }
-  .content-list-copy h2 { margin-top: 36px; }
+  .content-list-card > .interview-art { min-height: clamp(120px, 30vw, 180px); }
+  .content-list-copy { padding: 22px 0 0; }
+  .content-list-copy h2 { margin-top: 28px; }
   .home-news-list > a {
     min-height: 122px;
     grid-template-columns: 1fr auto;
@@ -213,7 +214,7 @@
   .editorial-article-header { padding-block: 42px 58px; }
   .editorial-article-header h1 { font-size: clamp(48px, 12.5vw, 70px); }
   .editorial-article-deck { margin-left: 0; font-size: 17px; }
-  .editorial-article-visual { height: clamp(200px, 54vw, 250px); }
+  .editorial-article-visual { height: clamp(180px, 42vw, 230px); }
   .interview-article-body {
     grid-template-columns: 1fr;
     gap: 42px;

From b0a8056b24e229101469c5a38da49b66312f3010 Mon Sep 17 00:00:00 2001
From: Staaaaaaaaar <2300012435@stu.pku.edu.cn>
Date: Wed, 5 Aug 2026 20:38:11 +0800
Subject: [PATCH 3/5] feat: enhance mobile navigation and table of contents
 functionality

- Introduced a mobile navigation component that dynamically displays chapter links and a table of contents for improved accessibility and user experience.
- Implemented JavaScript to manage disclosure elements for better interaction on mobile devices.
- Updated styles for mobile navigation and table of contents to ensure responsiveness and visual clarity across breakpoints.
---
 src/layouts/DocumentReaderLayout.astro |  64 ++++++++++++-
 src/styles/pages/doc-reader.css        |   1 +
 src/styles/responsive/430.css          |  43 +++++++--
 src/styles/responsive/760.css          | 128 +++++++++++++++++++++++--
 4 files changed, 221 insertions(+), 15 deletions(-)

diff --git a/src/layouts/DocumentReaderLayout.astro b/src/layouts/DocumentReaderLayout.astro
index 45cad45..94bd6ca 100644
--- a/src/layouts/DocumentReaderLayout.astro
+++ b/src/layouts/DocumentReaderLayout.astro
@@ -47,6 +47,7 @@ const {
   previous,
   next,
 } = Astro.props;
+const tocHeadings = headings.filter((heading) => heading.depth <= 3);
 ---
 
 <BaseLayout title={title} description={description}>
@@ -68,6 +69,42 @@ const {
       )}
     </aside>
 
+    <nav
+      class:list={['doc-mobile-navigation', { 'has-page-toc': tocHeadings.length > 0 }]}
+      aria-label="文档导航"
+    >
+      <details class="doc-mobile-disclosure">
+        <summary>
+          <span>章节导航</span>
+        </summary>
+        <div class="doc-mobile-links">
+          <a href={seriesHref} aria-current={seriesCurrent ? 'page' : undefined}>
+            {seriesTitle}
+          </a>
+          {navigation.map((item) => (
+            <a href={item.href} aria-current={item.current ? 'page' : undefined}>
+              {item.title}
+            </a>
+          ))}
+        </div>
+      </details>
+
+      {tocHeadings.length > 0 && (
+        <details class="doc-mobile-disclosure">
+          <summary>
+            <span>本页目录</span>
+          </summary>
+          <div class="doc-mobile-links doc-mobile-toc">
+            {tocHeadings.map((heading) => (
+              <a class:list={[`depth-${heading.depth}`]} href={`#${heading.slug}`}>
+                {heading.text}
+              </a>
+            ))}
+          </div>
+        </details>
+      )}
+    </nav>
+
     <article class="document">
       <header class="document-header">
         <MetaRow
@@ -101,9 +138,34 @@ const {
 
     <aside class="doc-toc">
       <p class="eyebrow">目录</p>
-      {headings.filter((heading) => heading.depth <= 3).map((heading) => (
+      {tocHeadings.map((heading) => (
         <a class:list={[`depth-${heading.depth}`]} href={`#${heading.slug}`}>{heading.text}</a>
       ))}
     </aside>
   </div>
+
+  <script>
+    document.querySelectorAll<HTMLElement>('.doc-mobile-navigation').forEach((navigation) => {
+      const disclosures = [...navigation.querySelectorAll<HTMLDetailsElement>('.doc-mobile-disclosure')];
+      const closeAll = () => disclosures.forEach((disclosure) => {
+        disclosure.open = false;
+      });
+
+      disclosures.forEach((disclosure) => {
+        disclosure.addEventListener('toggle', () => {
+          if (!disclosure.open) return;
+          disclosures.forEach((other) => {
+            if (other !== disclosure) other.open = false;
+          });
+        });
+      });
+
+      document.addEventListener('pointerdown', (event) => {
+        if (!navigation.contains(event.target as Node)) closeAll();
+      });
+      document.addEventListener('keydown', (event) => {
+        if (event.key === 'Escape') closeAll();
+      });
+    });
+  </script>
 </BaseLayout>
diff --git a/src/styles/pages/doc-reader.css b/src/styles/pages/doc-reader.css
index b7d3a40..a9d48de 100644
--- a/src/styles/pages/doc-reader.css
+++ b/src/styles/pages/doc-reader.css
@@ -12,6 +12,7 @@
   top: 30px;
   height: max-content;
 }
+.doc-mobile-navigation { display: none; }
 .doc-sidebar h2 {
   margin: 0 0 25px;
   font-family: var(--serif);
diff --git a/src/styles/responsive/430.css b/src/styles/responsive/430.css
index b176411..d67bc91 100644
--- a/src/styles/responsive/430.css
+++ b/src/styles/responsive/430.css
@@ -57,21 +57,48 @@
   .featured-content-copy { padding: 22px 18px 26px; }
   .featured-content-copy h2 { margin-top: 18px; font-size: 30px; }
   .featured-content-footer { padding-top: 22px; }
-  .doc-sidebar nav { grid-template-columns: 1fr; }
   .document-meta {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 8px;
+    align-items: center;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 16px;
   }
+  .document-header h1 { font-size: clamp(36px, 10.5vw, 46px); }
+  .document-lead { font-size: 17px; }
+  .document > .document-art { margin-block: 30px 36px; }
   .prose { font-size: 16px; }
-  .prose blockquote { font-size: 25px; }
+  .prose p { margin-bottom: 20px; }
+  .prose h2 {
+    margin-block: 48px 18px;
+    font-size: 28px;
+    line-height: 1.35;
+  }
+  .prose h3 {
+    margin-block: 36px 14px;
+    font-size: 20px;
+    line-height: 1.45;
+  }
+  .prose ul,
+  .prose ol {
+    margin-bottom: 23px;
+    padding-left: 1.2em;
+  }
+  .prose blockquote {
+    margin-block: 40px;
+    padding-block: 24px;
+    font-size: 23px;
+  }
   .document-pagination {
     grid-template-columns: 1fr;
-    gap: 14px;
-    margin-top: 70px;
+    gap: 10px;
+    margin-top: 56px;
+    padding-top: 20px;
   }
   .document-pagination-next { grid-column: 1; }
-  .document-pagination a { padding-block: 12px; }
+  .document-pagination a {
+    min-height: 0;
+    padding: 16px 0;
+  }
   .document-pagination strong { font-size: 18px; }
   .home-news-list h2 { font-size: 21px; }
   .content-list-card { gap: 0; padding-block: 24px; }
diff --git a/src/styles/responsive/760.css b/src/styles/responsive/760.css
index 53d2e60..6e0f1fd 100644
--- a/src/styles/responsive/760.css
+++ b/src/styles/responsive/760.css
@@ -186,12 +186,128 @@
     gap: 14px;
   }
   .home-news-list h2 { font-size: 25px; }
-  .doc-layout { grid-template-columns: 1fr; padding-block: 46px 82px; }
-  .doc-sidebar { position: static; }
-  .doc-sidebar nav { display: grid; grid-template-columns: 1fr 1fr; }
-  .doc-sidebar nav a { min-height: 48px; padding-right: 18px; }
-  .document { padding-top: 27px; border-top: 1px solid var(--line); }
-  .document-header h1 { font-size: clamp(44px, 12vw, 64px); }
+  .doc-layout {
+    grid-template-columns: 1fr;
+    gap: 0;
+    padding-block: 36px 72px;
+  }
+  .doc-sidebar,
+  .doc-toc { display: none !important; }
+  .doc-mobile-navigation {
+    position: relative;
+    z-index: 4;
+    display: grid;
+    grid-template-columns: 1fr;
+    margin-bottom: 32px;
+    border-top: 1px solid var(--line);
+    border-bottom: 1px solid var(--line);
+  }
+  .doc-mobile-navigation.has-page-toc {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+  .doc-mobile-disclosure { min-width: 0; }
+  .doc-mobile-navigation.has-page-toc .doc-mobile-disclosure:first-child {
+    border-right: 1px solid var(--line);
+  }
+  .doc-mobile-disclosure summary {
+    min-height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    padding: 12px;
+    cursor: pointer;
+    list-style: none;
+    transition: background-color 180ms ease, color 180ms ease;
+  }
+  .doc-mobile-disclosure summary::-webkit-details-marker { display: none; }
+  .doc-mobile-disclosure summary > span {
+    color: var(--muted);
+    font-family: var(--meta);
+    font-size: 12px;
+    font-weight: 500;
+    letter-spacing: .065em;
+    line-height: 1.4;
+  }
+  .doc-mobile-disclosure summary::after {
+    content: "";
+    width: 16px;
+    height: 16px;
+    flex: 0 0 16px;
+    color: var(--muted);
+    background:
+      linear-gradient(currentColor, currentColor) center / 12px 1px no-repeat,
+      linear-gradient(currentColor, currentColor) center / 1px 12px no-repeat;
+    transform-origin: center;
+    transform: translateY(-.5px) rotate(0);
+    transition: color 180ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1);
+  }
+  .doc-mobile-disclosure[open] summary {
+    background: color-mix(in srgb, var(--primary) 7%, transparent);
+  }
+  .doc-mobile-disclosure[open] summary > span,
+  .doc-mobile-disclosure[open] summary::after { color: var(--primary); }
+  .doc-mobile-disclosure[open] summary::after { transform: translateY(-.5px) rotate(45deg); }
+  .doc-mobile-links {
+    position: absolute;
+    top: calc(100% + 1px);
+    right: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    max-height: min(60svh, 520px);
+    padding: 8px 14px 14px;
+    overflow-y: auto;
+    background: var(--paper);
+    border-bottom: 1px solid var(--line);
+    box-shadow: 0 20px 36px rgba(10, 18, 17, .12);
+    overscroll-behavior: contain;
+    transform-origin: top center;
+    will-change: opacity, transform;
+    animation: doc-mobile-dropdown-in 240ms cubic-bezier(.22, 1, .36, 1);
+  }
+  .doc-mobile-links a {
+    min-height: 44px;
+    display: flex;
+    align-items: center;
+    padding: 10px 12px;
+    border-top: 1px solid var(--line);
+    color: var(--muted);
+    font-size: 14px;
+    line-height: 1.55;
+    transition: color 160ms ease, background-color 160ms ease, padding-left 180ms ease;
+  }
+  .doc-mobile-links a:hover,
+  .doc-mobile-links a[aria-current="page"] {
+    color: var(--primary);
+    background: color-mix(in srgb, var(--primary) 5%, transparent);
+  }
+  .doc-mobile-links a[aria-current="page"] {
+    padding-left: 16px;
+    box-shadow: inset 2px 0 var(--primary);
+  }
+  .doc-mobile-toc .depth-3 { padding-left: 28px; color: var(--faint); }
+  @keyframes doc-mobile-dropdown-in {
+    from { opacity: 0; transform: translateY(-8px) scaleY(.985); }
+    to { opacity: 1; transform: translateY(0); }
+  }
+  .document {
+    min-width: 0;
+    padding-top: 0;
+    border-top: 0;
+  }
+  .document-header h1 {
+    margin-block: 24px 20px;
+    font-size: clamp(38px, 10vw, 56px);
+    line-height: 1.1;
+  }
+  .document-lead {
+    font-size: 18px;
+    line-height: 1.65;
+  }
+  .document > .document-art { margin-block: 36px 42px; }
+  .prose h2,
+  .prose h3 { scroll-margin-top: 24px; }
   .prose table {
     display: block;
     width: max-content;

From 4baf3667bb2d12ba3c51a9b58b5bf65b44f6d819 Mon Sep 17 00:00:00 2001
From: Staaaaaaaaar <2300012435@stu.pku.edu.cn>
Date: Wed, 5 Aug 2026 20:40:56 +0800
Subject: [PATCH 4/5] feat: refine carousel and responsive styles for improved
 aesthetics

- Adjusted background color mixing, box shadow, and opacity for the carousel component to enhance visual appeal.
- Updated opacity for carousel arrows to improve consistency and user experience across breakpoints.
- Reduced backdrop blur effect for a cleaner design in the carousel interface.
---
 src/styles/content/carousel.css | 8 ++++----
 src/styles/responsive/760.css   | 3 +--
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/styles/content/carousel.css b/src/styles/content/carousel.css
index 4984c99..640ceed 100644
--- a/src/styles/content/carousel.css
+++ b/src/styles/content/carousel.css
@@ -32,12 +32,12 @@
   border: 1px solid color-mix(in srgb, var(--paper) 28%, transparent);
   border-radius: 50%;
   color: var(--paper);
-  background: color-mix(in srgb, var(--ink) 82%, transparent);
-  box-shadow: 0 8px 24px rgba(7,16,15,.18);
-  opacity: .9;
+  background: color-mix(in srgb, var(--ink) 58%, transparent);
+  box-shadow: 0 8px 24px rgba(7,16,15,.12);
+  opacity: .86;
   place-items: center;
   transform: translateY(-50%);
-  backdrop-filter: blur(8px);
+  backdrop-filter: blur(2px);
   cursor: pointer;
   transition:
     background 180ms ease,
diff --git a/src/styles/responsive/760.css b/src/styles/responsive/760.css
index 6e0f1fd..c436edc 100644
--- a/src/styles/responsive/760.css
+++ b/src/styles/responsive/760.css
@@ -130,7 +130,6 @@
   .document > .news-art.large,
   .document > .interview-art.large { min-height: clamp(180px, 45vw, 260px); }
   .featured-content-copy { min-height: 0; padding: 30px 24px 34px; }
-  .featured-content-copy .meta-row { padding-inline: 44px; }
   .featured-content-copy h2 { margin-top: 28px; }
   .featured-content-footer { padding-top: 30px; }
   .featured-carousel-viewport { touch-action: pan-y; }
@@ -138,7 +137,7 @@
     top: calc((100% - 48px) / 2);
     width: 44px;
     height: 44px;
-    opacity: .94;
+    opacity: .82;
   }
   .featured-carousel-arrow svg { width: 20px; height: 20px; }
   .featured-carousel-arrow.is-previous { left: 12px; }

From 826f76caf7e55a1912c42ed2af009bf2636720fe Mon Sep 17 00:00:00 2001
From: Staaaaaaaaar <2300012435@stu.pku.edu.cn>
Date: Wed, 5 Aug 2026 22:34:05 +0800
Subject: [PATCH 5/5] feat: preserve collection context when returning from
 articles

Share return-state handling across content sections and document the responsive reading experience for easier maintenance.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 README.md                                     |   7 +-
 docs/components.md                            |  24 +++-
 docs/layouts.md                               |   4 +
 docs/visual-style.md                          |  12 ++
 src/components/content/CollectionIndex.astro  |   2 +
 .../content/CollectionReturnState.astro       | 121 ++++++++++++++++++
 .../content/PaginatedContentList.astro        |   6 +
 src/components/ui/ArticleBackLink.astro       | 110 ++++++++++++++++
 src/layouts/DocumentReaderLayout.astro        |  23 +++-
 src/layouts/EditorialArticleLayout.astro      |  17 ++-
 src/styles/ui/meta.css                        |   7 +
 src/utils/contentListing.ts                   |   3 +
 12 files changed, 325 insertions(+), 11 deletions(-)
 create mode 100644 src/components/content/CollectionReturnState.astro
 create mode 100644 src/components/ui/ArticleBackLink.astro

diff --git a/README.md b/README.md
index 26b7cf7..3b73ca8 100644
--- a/README.md
+++ b/README.md
@@ -31,13 +31,13 @@ npm run dev
 - Astro Content Collections
 - Markdown 内容
 - 原生 CSS
-- 原生 JavaScript 主题切换与移动导航
+- 原生 JavaScript 主题切换、移动导航、轮播分页和阅读位置恢复
 
 页面层不依赖 React、用户系统或客户端状态框架。
 
 ```text
 src/
-├── components/            # 页头、页脚、页面导语和视觉组件
+├── components/            # 站点、通用界面和内容交互组件
 ├── content/
 │   ├── docs/              # 系列文档与章节
 │   ├── interviews/        # 访谈正文与元数据
@@ -50,7 +50,7 @@ src/
 │   ├── news/              # 动态目录与文章详情路由
 │   ├── about.astro
 │   └── index.astro
-└── styles/global.css      # 完整视觉系统和响应式规则
+└── styles/                # 模块化视觉系统与集中响应式规则
 ```
 
 ## 内容约定
@@ -59,6 +59,7 @@ src/
 - 访谈位于 `src/content/interviews/`，单篇 Markdown 对应一个详情页。
 - 三类内容统一公开日期和阅读时间，并通过 `tone: light | mid | dark` 配置单篇视觉色调；文档、访谈和动态均可将任意多篇内容设置为 `featured: true`，集合页会将它们组成精选展板，未指定时自动突出一篇内容。
 - 精选展板是否自动翻页及翻页间隔统一在 `src/data/site.ts` 的 `featuredCarouselConfig` 中按栏目配置。
+- 三个集合页共享阅读返回状态：从列表进入详情后，返回按钮会恢复原分页和滚动位置。
 - 访谈使用 `affiliation` 记录系所；设置 `anonymous: true` 时隐藏姓名，未提供系所则显示“系所信息保密”。
 - 内容字段由 `src/content.config.ts` 校验。
 - 默认语言为简体中文；当前不配置多语言路由。
diff --git a/docs/components.md b/docs/components.md
index f06ee11..8577760 100644
--- a/docs/components.md
+++ b/docs/components.md
@@ -15,6 +15,8 @@ GeoGenesis 的几何站点标记。它没有 Props，颜色继承父元素，可
 - `overlay?: boolean`：让页头覆盖在首页等深色 Hero 上。
 - 导航数据来自 `src/data/site.ts`，不要在组件内重复维护。
 - 主题选择保存到 `localStorage`。
+- 窄屏导航使用全屏抽屉；打开时锁定页面滚动并通过 `inert` 隔离背景内容，点击链接、遮罩或按下 Escape 均会关闭。
+- 菜单按钮同步维护 `aria-expanded`，抽屉开关不依赖前端框架。
 
 ### `SiteFooter.astro`
 
@@ -44,6 +46,15 @@ GeoGenesis 的几何站点标记。它没有 Props，颜色继承父元素，可
 - `primaryDatetime?: Date`：存在时将日期渲染为语义化 `<time>`。
 - `className?: string`：附加样式类。
 
+### `ArticleBackLink.astro`
+
+文档、访谈和动态阅读页共用的返回按钮。默认优先使用浏览器历史返回；当集合页记录了返回状态时，则恢复原栏目 URL、页内分页和滚动位置。
+
+- `href: string`：没有可恢复状态时的栏目入口。
+- `label: string`：无障碍名称与悬停提示。
+- `returnStateKey?: string`：对应栏目返回状态的 `sessionStorage` 键；统一使用 `collectionReturnStateKey()` 生成。
+- 仅拦截无修饰键的主按钮点击，不影响新标签页等浏览器原生操作。
+
 ### `PageIntro.astro`
 
 集合页顶部的栏目名称、主标题、导语和中性站点标识。通常由 `CollectionLayout` 调用，不在页面中重复组合。
@@ -73,13 +84,22 @@ GeoGenesis 的几何站点标记。它没有 Props，颜色继承父元素，可
 
 ### `CollectionIndex.astro`
 
-文档、访谈、动态三个集合索引页共用的页面骨架。它组合 `CollectionLayout`、`FeaturedContentCarousel`、`SectionHeading` 与 `PaginatedContentList`，三个索引页只负责查询和规范化数据后传入。
+文档、访谈、动态三个集合索引页共用的页面骨架。它组合 `CollectionLayout`、`FeaturedContentCarousel`、`SectionHeading`、`PaginatedContentList` 与 `CollectionReturnState`，三个索引页只负责查询和规范化数据后传入。
 
 - `section: 'docs' | 'interviews' | 'news'`：栏目标识，用于读取文案配置、轮播配置和分页数据分片。
 - `featured: ContentListItem[]`：精选内容。
 - `listing: ContentListItem[]`：完整列表数据。
 - 各栏目文案（标题、导语、标识、列表标题等）集中维护在 `src/data/sections.ts` 的 `collectionSections`，轮播自动翻页配置仍在 `src/data/site.ts` 的 `featuredCarouselConfig`。
 
+### `CollectionReturnState.astro`
+
+三个集合页共用的阅读返回状态控制器，由 `CollectionIndex` 自动挂载，不应在具体页面中重复实现。
+
+- `section: 'docs' | 'interviews' | 'news'`：用于生成栏目路径与隔离的状态键。
+- 进入同栏目详情页前记录当前 URL、滚动位置和分页页码。
+- 阅读页通过 `ArticleBackLink` 发起恢复；返回集合页后先恢复分页，再恢复滚动位置，并清除一次性状态。
+- 状态解析包含容错，异常或跨站 URL 不会覆盖正常链接行为。
+
 ### `ContentVisual.astro`
 
 按 `ContentListItem` 的 `visual` 字段选择并渲染对应的视觉组件（`DocumentArt`、`InterviewArt` 或 `NewsArt`），让 `FeaturedContentCarousel` 与 `PaginatedContentList` 不必各自维护类型映射。
@@ -98,6 +118,7 @@ GeoGenesis 的几何站点标记。它没有 Props，颜色继承父元素，可
 - `label?: string`：轮播区域的无障碍名称。
 - 自动翻页由 `src/data/site.ts` 的 `featuredCarouselConfig` 分栏目配置，不在界面中展示额外的播放控制；鼠标悬停、键盘焦点进入或页面进入后台时会暂时停止计时。
 - 首尾使用无障碍隐藏的克隆展板衔接，点击同一方向的翻页按钮时始终保持一致的运动方向。
+- 触屏设备支持横向滑动翻页；窄屏控制按钮固定在卡片内部并跟随明暗主题。
 - 系统开启“减少动态效果”时不启用自动翻页，并将滑动过渡降至最低。
 
 ### `FeaturedContentCard.astro`
@@ -132,6 +153,7 @@ GeoGenesis 的几何站点标记。它没有 Props，颜色继承父元素，可
 - `className?: string`：附加到实际列表容器的样式类。
 - 分页大小统一由 `src/utils/contentListing.ts` 的 `LIST_PAGE_SIZE` 控制。
 - 总页数超过九页时，索引只保留首尾页和当前页附近的分页点，其余范围使用省略标识隐藏。
+- 当前页同步到 `data-current-page`；切换完成后触发 `content-page-change`，供返回状态控制器恢复分页和滚动位置。
 
 ### `NewsArt.astro`
 
diff --git a/docs/layouts.md b/docs/layouts.md
index f8c719a..abf593f 100644
--- a/docs/layouts.md
+++ b/docs/layouts.md
@@ -36,6 +36,7 @@
 - `visual` 插槽：`NewsArt`、`InterviewArt` 或真实图片。
 - `aside` 插槽：访谈页面的受访者简介；动态页面不使用。
 - 默认插槽：Markdown 正文。
+- 提供 `meta` 插槽时，布局会在日期左侧自动加入对应栏目的 `ArticleBackLink`；从集合页进入时可恢复原分页和滚动位置。
 
 ## `DocumentReaderLayout.astro`
 
@@ -50,6 +51,9 @@
 - `next?`：下一章节入口。
 - `visual` 插槽：可选的系列视觉。
 - 默认插槽：Markdown 正文。
+- 桌面端保留左侧章节导航与右侧页内目录；手机端将两者合并为同一行的互斥下拉面板，并支持点击外部或按 Escape 关闭。
+- 日期左侧的 `ArticleBackLink` 返回文档库。切换章节或页内锚点不会覆盖集合页状态，返回时仍可恢复进入阅读页前的位置。
+- 手机端侧栏由断点样式直接隐藏，避免页面加载或章节切换时短暂显示桌面导航。
 
 ## 使用边界
 
diff --git a/docs/visual-style.md b/docs/visual-style.md
index e6e9e75..782cd58 100644
--- a/docs/visual-style.md
+++ b/docs/visual-style.md
@@ -57,11 +57,23 @@ GeoGenesis 使用克制的地球科学编辑风格：大面积采用石灰岩暖
 
 首页地球图片保留低饱和自然色；页脚、深色卡片和关于页 CTA 使用接近黑色的深岩绿。长文阅读区始终保持中性背景，避免颜色干扰阅读。
 
+## 响应式策略
+
+桌面布局是视觉基准，响应式调整集中在 `responsive/1000.css`、`responsive/760.css` 与 `responsive/430.css`，避免在基础模块中散布媒体查询。
+
+- `1000px` 以下收紧页面边距和复杂网格，为平板及小型笔记本保留桌面信息层级。
+- `760px` 以下启用手机导航、文档下拉导航、纵向页脚和紧凑内容卡片；精选轮播按钮移入卡片并保持至少 44px 触控区域。
+- `430px` 以下进一步压缩 Hero、内容视觉和卡片高度；首页数字统计直接切换为单列三行，不经过不稳定的两列状态。
+- 手机端降低抽象视觉与真实图片所占高度，提高标题、摘要和元信息的首屏密度；日期与阅读时间保持分居两侧。
+- 长文表格允许横向滚动，正文宽度和固定控件同时考虑安全区与窄屏边距。
+- 触屏交互不依赖 Hover；按钮颜色、背景和透明度均使用语义令牌，保证明暗主题一致。
+
 ## 交互
 
 - 当前导航使用主题色文字，不添加圆点或粗下划线。
 - 主要按钮使用深海岩绿，悬停时仅轻微改变明度。
 - 正文链接、键盘焦点和阅读进度使用主题色。
 - 明暗切换使用无边框单图标按钮，只通过轻微底色和图标淡入淡出反馈状态。
+- 集合页进入阅读页时保存栏目 URL、分页与滚动位置；阅读页返回按钮恢复该上下文，章节切换和页内锚点不改变返回目标。
 - 中文长篇正文以 18px 为桌面阅读基准，卡片摘要保持在 15–16px；装饰坐标等极小信息不低于 11px。
 - 动效保持轻微，并遵循 `prefers-reduced-motion`。
diff --git a/src/components/content/CollectionIndex.astro b/src/components/content/CollectionIndex.astro
index b933560..dfbda5e 100644
--- a/src/components/content/CollectionIndex.astro
+++ b/src/components/content/CollectionIndex.astro
@@ -1,5 +1,6 @@
 ---
 import CollectionLayout from '../../layouts/CollectionLayout.astro';
+import CollectionReturnState from './CollectionReturnState.astro';
 import FeaturedContentCarousel from './FeaturedContentCarousel.astro';
 import PaginatedContentList from './PaginatedContentList.astro';
 import SectionHeading from '../ui/SectionHeading.astro';
@@ -42,4 +43,5 @@ const carousel = featuredCarouselConfig[section];
 
     <PaginatedContentList items={listing} section={section} className={config.listClass} />
   </section>
+  <CollectionReturnState section={section} />
 </CollectionLayout>
diff --git a/src/components/content/CollectionReturnState.astro b/src/components/content/CollectionReturnState.astro
new file mode 100644
index 0000000..0005211
--- /dev/null
+++ b/src/components/content/CollectionReturnState.astro
@@ -0,0 +1,121 @@
+---
+import { collectionReturnStateKey, type ListingSection } from '../../utils/contentListing';
+import { sitePath } from '../../utils/paths';
+
+interface Props {
+  section: ListingSection;
+}
+
+const { section } = Astro.props;
+const stateKey = collectionReturnStateKey(section);
+const collectionPath = sitePath(`/${section}/`);
+---
+
+<span
+  data-collection-return-state
+  data-state-key={stateKey}
+  data-collection-path={collectionPath}
+  hidden
+></span>
+
+<script>
+  interface ReturnState {
+    url?: string;
+    scrollY?: number;
+    page?: number;
+  }
+
+  const parseReturnState = (value: string | null): ReturnState | undefined => {
+    if (!value) return undefined;
+    try {
+      return JSON.parse(value) as ReturnState;
+    } catch {
+      return undefined;
+    }
+  };
+
+  const normalizePath = (pathname: string) => pathname.replace(/\/+$/, '') || '/';
+
+  document.querySelectorAll<HTMLElement>('[data-collection-return-state]').forEach((container) => {
+    const stateKey = container.dataset.stateKey;
+    const collectionPath = normalizePath(container.dataset.collectionPath ?? '/');
+    if (!stateKey) return;
+
+    const restoreKey = `${stateKey}:restore`;
+    const restoreRequested = sessionStorage.getItem(restoreKey) === 'true';
+
+    if (restoreRequested) {
+      const state = parseReturnState(sessionStorage.getItem(stateKey));
+      const targetPage = Math.max(1, Number(state?.page ?? 1));
+      const targetScroll = Math.max(0, Number(state?.scrollY ?? 0));
+      const pagination = document.querySelector<HTMLElement>('[data-content-pagination]');
+      let restored = false;
+
+      const finishRestore = () => {
+        if (restored) return;
+        restored = true;
+        requestAnimationFrame(() => requestAnimationFrame(() => {
+          window.scrollTo({ top: targetScroll, behavior: 'auto' });
+          sessionStorage.removeItem(restoreKey);
+          sessionStorage.removeItem(stateKey);
+        }));
+      };
+
+      if (targetPage > 1 && pagination) {
+        pagination.addEventListener('content-page-change', (event) => {
+          const page = (event as CustomEvent<{ page?: number }>).detail?.page;
+          if (page === targetPage) finishRestore();
+        });
+
+        let attempts = 0;
+        const selectPage = () => {
+          const pageButton = pagination.querySelector<HTMLButtonElement>(`[data-page="${targetPage}"]`);
+          if (pageButton) {
+            pageButton.click();
+            window.setTimeout(finishRestore, 2500);
+          } else if (attempts < 20) {
+            attempts += 1;
+            window.setTimeout(selectPage, 50);
+          } else {
+            finishRestore();
+          }
+        };
+        selectPage();
+      } else {
+        finishRestore();
+      }
+    } else {
+      sessionStorage.removeItem(stateKey);
+    }
+
+    document.addEventListener('click', (event) => {
+      if (
+        event.defaultPrevented
+        || event.button !== 0
+        || event.metaKey
+        || event.ctrlKey
+        || event.shiftKey
+        || event.altKey
+        || !(event.target instanceof Element)
+      ) return;
+
+      const link = event.target.closest<HTMLAnchorElement>('a[href]');
+      if (!link) return;
+
+      const target = new URL(link.href);
+      const targetPath = normalizePath(target.pathname);
+      if (
+        target.origin === window.location.origin
+        && targetPath !== collectionPath
+        && targetPath.startsWith(`${collectionPath}/`)
+      ) {
+        const pagination = document.querySelector<HTMLElement>('[data-content-pagination]');
+        sessionStorage.setItem(stateKey, JSON.stringify({
+          url: window.location.href,
+          scrollY: window.scrollY,
+          page: Number(pagination?.dataset.currentPage ?? '1'),
+        }));
+      }
+    });
+  });
+</script>
diff --git a/src/components/content/PaginatedContentList.astro b/src/components/content/PaginatedContentList.astro
index e8a8caa..8d02ae9 100644
--- a/src/components/content/PaginatedContentList.astro
+++ b/src/components/content/PaginatedContentList.astro
@@ -169,6 +169,7 @@ const totalPages = Math.ceil(items.length / LIST_PAGE_SIZE);
     };
 
     const renderIndex = () => {
+      pagination.dataset.currentPage = String(currentPage);
       previous.disabled = loading || currentPage === 1;
       next.disabled = loading || currentPage === totalPages;
       dots.replaceChildren();
@@ -187,6 +188,7 @@ const totalPages = Math.ceil(items.length / LIST_PAGE_SIZE);
         const dot = document.createElement('button');
         dot.type = 'button';
         dot.className = 'content-page-dot';
+        dot.dataset.page = String(page);
         dot.setAttribute('aria-label', `第 ${page} 页`);
         dot.title = `第 ${page} 页`;
         if (page === currentPage) {
@@ -226,7 +228,11 @@ const totalPages = Math.ceil(items.length / LIST_PAGE_SIZE);
         }
 
         currentPage = page;
+        pagination.dataset.currentPage = String(currentPage);
         status.textContent = `第 ${page} 页，共 ${totalPages} 页`;
+        pagination.dispatchEvent(new CustomEvent('content-page-change', {
+          detail: { page: currentPage },
+        }));
         const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
         list.scrollIntoView({ behavior: reduceMotion ? 'auto' : 'smooth', block: 'start' });
       } catch {
diff --git a/src/components/ui/ArticleBackLink.astro b/src/components/ui/ArticleBackLink.astro
new file mode 100644
index 0000000..d276c1b
--- /dev/null
+++ b/src/components/ui/ArticleBackLink.astro
@@ -0,0 +1,110 @@
+---
+interface Props {
+  href: string;
+  label: string;
+  returnStateKey?: string;
+}
+
+const { href, label, returnStateKey } = Astro.props;
+---
+
+<a
+  class="article-back-link"
+  href={href}
+  aria-label={label}
+  title={label}
+  data-article-back
+  data-return-state-key={returnStateKey}
+>
+  <svg viewBox="0 0 24 24" aria-hidden="true">
+    <path d="m10 6-6 6 6 6M4.5 12H20"></path>
+  </svg>
+</a>
+
+<script>
+  document.querySelectorAll<HTMLAnchorElement>('[data-article-back]').forEach((link) => {
+    link.addEventListener('click', (event) => {
+      if (
+        event.defaultPrevented
+        || event.button !== 0
+        || event.metaKey
+        || event.ctrlKey
+        || event.shiftKey
+        || event.altKey
+      ) return;
+
+      const normalizePath = (pathname: string) => pathname.replace(/\/+$/, '') || '/';
+      const destination = new URL(link.href);
+      const returnStateKey = link.dataset.returnStateKey;
+      const savedReturnState = returnStateKey
+        ? sessionStorage.getItem(returnStateKey)
+        : null;
+
+      if (returnStateKey && savedReturnState) {
+        try {
+          const state = JSON.parse(savedReturnState) as { url?: string };
+          const returnUrl = state.url ? new URL(state.url) : destination;
+          if (returnUrl.origin === window.location.origin) {
+            event.preventDefault();
+            sessionStorage.setItem(`${returnStateKey}:restore`, 'true');
+            window.location.assign(returnUrl.href);
+            return;
+          }
+        } catch {
+          sessionStorage.removeItem(returnStateKey);
+        }
+      }
+
+      if (window.history.length <= 1 || !document.referrer) return;
+      const previous = new URL(document.referrer);
+      const cameFromDestination = previous.origin === window.location.origin
+        && normalizePath(previous.pathname) === normalizePath(destination.pathname);
+
+      if (cameFromDestination) {
+        event.preventDefault();
+        window.history.back();
+      }
+    });
+  });
+</script>
+
+<style>
+  .article-back-link {
+    width: 44px;
+    height: 44px;
+    display: grid;
+    flex: 0 0 44px;
+    place-items: center;
+    border-radius: 50%;
+    color: var(--muted);
+    transition:
+      color 180ms ease,
+      background-color 180ms ease,
+      transform 220ms cubic-bezier(.22, 1, .36, 1);
+  }
+
+  .article-back-link:hover {
+    color: var(--primary);
+    background: var(--primary-soft);
+    transform: translateX(-2px);
+  }
+
+  .article-back-link svg {
+    width: 19px;
+    height: 19px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 1.5;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  @media (hover: none) {
+    .article-back-link:hover { transform: none; }
+    .article-back-link:active {
+      color: var(--primary);
+      background: var(--primary-soft);
+      transform: scale(.94);
+    }
+  }
+</style>
diff --git a/src/layouts/DocumentReaderLayout.astro b/src/layouts/DocumentReaderLayout.astro
index 94bd6ca..29fba08 100644
--- a/src/layouts/DocumentReaderLayout.astro
+++ b/src/layouts/DocumentReaderLayout.astro
@@ -2,6 +2,9 @@
 import BaseLayout from './BaseLayout.astro';
 import { formatContentDate } from '../utils/content';
 import MetaRow from '../components/ui/MetaRow.astro';
+import ArticleBackLink from '../components/ui/ArticleBackLink.astro';
+import { collectionReturnStateKey } from '../utils/contentListing';
+import { sitePath } from '../utils/paths';
 
 interface NavigationItem {
   title: string;
@@ -48,6 +51,7 @@ const {
   next,
 } = Astro.props;
 const tocHeadings = headings.filter((heading) => heading.depth <= 3);
+const returnStateKey = collectionReturnStateKey('docs');
 ---
 
 <BaseLayout title={title} description={description}>
@@ -107,12 +111,19 @@ const tocHeadings = headings.filter((heading) => heading.depth <= 3);
 
     <article class="document">
       <header class="document-header">
-        <MetaRow
-          className="document-meta"
-          primary={formatContentDate(publishedAt)}
-          secondary={readTime}
-          primaryDatetime={publishedAt}
-        />
+        <div class="article-meta-row">
+          <ArticleBackLink
+            href={sitePath('/docs/')}
+            label="返回文档库"
+            returnStateKey={returnStateKey}
+          />
+          <MetaRow
+            className="document-meta"
+            primary={formatContentDate(publishedAt)}
+            secondary={readTime}
+            primaryDatetime={publishedAt}
+          />
+        </div>
         <h1>{title}</h1>
         {description && <p class="document-lead">{description}</p>}
       </header>
diff --git a/src/layouts/EditorialArticleLayout.astro b/src/layouts/EditorialArticleLayout.astro
index 7767815..6b0db06 100644
--- a/src/layouts/EditorialArticleLayout.astro
+++ b/src/layouts/EditorialArticleLayout.astro
@@ -1,5 +1,8 @@
 ---
 import BaseLayout from './BaseLayout.astro';
+import ArticleBackLink from '../components/ui/ArticleBackLink.astro';
+import { collectionReturnStateKey } from '../utils/contentListing';
+import { sitePath } from '../utils/paths';
 
 interface Props {
   title: string;
@@ -10,13 +13,25 @@ interface Props {
 
 const { title, description, eyebrow, variant } = Astro.props;
 const isNews = variant === 'news';
+const returnHref = sitePath(isNews ? '/news/' : '/interviews/');
+const returnLabel = isNews ? '返回动态列表' : '返回访谈列表';
+const returnStateKey = collectionReturnStateKey(isNews ? 'news' : 'interviews');
 ---
 
 <BaseLayout title={title} description={description}>
   <article class={isNews ? 'news-article' : 'interview-article'}>
     <header class="editorial-article-header shell">
       {Astro.slots.has('meta')
-        ? <slot name="meta" />
+        ? (
+          <div class="article-meta-row">
+            <ArticleBackLink
+              href={returnHref}
+              label={returnLabel}
+              returnStateKey={returnStateKey}
+            />
+            <slot name="meta" />
+          </div>
+        )
         : eyebrow && <p class="eyebrow">{eyebrow}</p>}
       <h1>{title}</h1>
       <p class="editorial-article-deck">{description}</p>
diff --git a/src/styles/ui/meta.css b/src/styles/ui/meta.css
index a883b70..b271ee7 100644
--- a/src/styles/ui/meta.css
+++ b/src/styles/ui/meta.css
@@ -20,6 +20,13 @@
   line-height: 1.5;
   white-space: nowrap;
 }
+.article-meta-row {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+}
+.article-meta-row > .meta-row { min-width: 0; }
 
 /* Section heading row */
 .section-heading {
diff --git a/src/utils/contentListing.ts b/src/utils/contentListing.ts
index 6fb0b51..8945c18 100644
--- a/src/utils/contentListing.ts
+++ b/src/utils/contentListing.ts
@@ -9,6 +9,9 @@ export type ListingSection = 'docs' | 'interviews' | 'news';
 export type ListingVisual = 'documents' | 'interviews' | 'news';
 export type ListingTone = 'light' | 'mid' | 'dark';
 
+export const collectionReturnStateKey = (section: ListingSection) =>
+  `geogenesis-${section}-return-state`;
+
 export interface ContentListItem {
   href: string;
   title: string;