:root {
  color-scheme: light;
  --paper: #f5f2df;
  --paper-deep: #eee8cf;
  --ink: #405744;
  --ink-soft: #6c7660;
  --moss: #63875c;
  --moss-light: #a9bd8a;
  --river: #76c9c2;
  --line: rgba(88, 113, 79, 0.38);
  --ease-gentle: cubic-bezier(0.22, 0.61, 0.36, 1);
  font-family: "Noto Serif SC", "Songti SC", "SimSun", "Yu Mincho", serif;
  font-synthesis: none;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 18% 10%, rgba(255, 255, 255, 0.78), transparent 35%),
    radial-gradient(ellipse at 83% 67%, rgba(205, 217, 169, 0.22), transparent 37%),
    repeating-linear-gradient(4deg, rgba(112, 125, 76, 0.025) 0 1px, transparent 1px 7px),
    var(--paper);
}

button,
a {
  color: inherit;
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.archive-page {
  width: min(1440px, 100% - 56px);
  margin: 0 auto;
  padding: 24px 0 18px;
}

.site-header,
.site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-soft);
}

.site-header {
  padding: 0 8px 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
}

.archive-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.mark-leaf {
  color: var(--moss);
  font-size: 1.3rem;
  line-height: 1;
}

.header-note {
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
}

.foraging-module {
  position: relative;
  display: grid;
  grid-template-columns: minmax(205px, 0.78fr) minmax(510px, 2fr) minmax(174px, 0.64fr);
  gap: clamp(20px, 2.2vw, 38px);
  align-items: center;
  min-height: 680px;
  padding: clamp(28px, 4vw, 58px) clamp(24px, 4vw, 58px);
  isolation: isolate;
}

.module-frame {
  position: absolute;
  z-index: -1;
  inset: 0;
  border: 1px dashed rgba(93, 119, 79, 0.44);
  border-radius: 9px 13px 7px 12px;
  background:
    radial-gradient(ellipse at 22% 34%, rgba(255, 255, 255, 0.32), transparent 44%),
    radial-gradient(ellipse at 76% 68%, rgba(194, 213, 165, 0.18), transparent 40%),
    repeating-linear-gradient(97deg, rgba(96, 111, 67, 0.018) 0 1px, transparent 1px 9px),
    rgba(247, 245, 225, 0.62);
  box-shadow: 0 12px 34px rgba(82, 91, 55, 0.05);
  transform: rotate(-0.08deg);
}

.intro-column {
  align-self: start;
  padding-top: 20px;
}

.kicker,
.detail-kicker {
  margin: 0 0 18px;
  color: var(--moss);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
}

h1 {
  margin: 0;
  color: #334c39;
  font-size: clamp(2.1rem, 3.3vw, 3.7rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  line-height: 1.2;
}

.english-title {
  margin: 10px 0 30px;
  color: #576e52;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  letter-spacing: 0.2em;
}

.intro-copy {
  max-width: 28em;
  margin: 0;
  color: #596553;
  font-size: 0.98rem;
  line-height: 2.05;
  text-wrap: pretty;
}

.intro-aside {
  margin: 26px 0 0;
  color: #7a846c;
  font-size: 0.79rem;
  letter-spacing: 0.08em;
}

.map-column {
  min-width: 0;
}

.map-heading {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  width: fit-content;
  margin: 0 auto 8px;
  padding: 7px 13px 6px;
  border: 1px solid rgba(88, 110, 78, 0.54);
  background: rgba(248, 247, 229, 0.84);
  color: #435943;
  font-size: 0.98rem;
  letter-spacing: 0.08em;
}

.map-subtitle {
  color: #78836c;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}

.map-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 7444 / 3945;
  isolation: isolate;
}

.base-map {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.map-label {
  position: absolute;
  color: rgba(56, 88, 62, 0.85);
  font-size: clamp(0.55rem, 0.7vw, 0.78rem);
  letter-spacing: 0.16em;
  pointer-events: none;
  writing-mode: vertical-rl;
}

.label-river { left: 55%; top: 63%; color: #397e82; }
.label-woods { left: 78%; top: 41%; }
.label-fields { left: 44%; top: 72%; }

.village-hotspot {
  position: absolute;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  border: 1px solid rgba(74, 91, 60, 0.62);
  border-radius: 2px;
  background: rgba(248, 247, 229, 0.9);
  color: #435641;
  cursor: pointer;
  font-size: clamp(0.62rem, 0.8vw, 0.79rem);
  letter-spacing: 0.04em;
  transition: background-color 650ms var(--ease-gentle), box-shadow 650ms var(--ease-gentle), transform 650ms var(--ease-gentle);
}

.tingtang-hotspot { left: 38%; top: 76%; }
.chuanchang-hotspot { left: 80%; top: 31%; }

.hotspot-dot {
  width: 7px;
  height: 7px;
  border: 1px solid #fff7dc;
  border-radius: 50%;
  background: #b96d56;
  box-shadow: 0 0 0 3px rgba(185, 109, 86, 0.24);
}

.village-hotspot:hover,
.village-hotspot:focus-visible,
.village-hotspot[aria-expanded="true"] {
  background: #f7edcf;
  box-shadow: 0 3px 14px rgba(65, 75, 48, 0.18);
  transform: scale(1.035);
}

.map-node {
  position: absolute;
  z-index: 3;
  display: grid;
  width: clamp(33px, 4.1vw, 54px);
  aspect-ratio: 1;
  place-items: center;
  padding: 2px;
  border: 1px solid rgba(95, 116, 73, 0.5);
  border-radius: 50%;
  background: rgba(250, 248, 224, 0.84);
  box-shadow: 0 2px 7px rgba(61, 76, 54, 0.12);
  cursor: pointer;
  transition: opacity 780ms var(--ease-gentle), transform 650ms var(--ease-gentle), box-shadow 650ms var(--ease-gentle), background-color 650ms var(--ease-gentle);
}

.map-node img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
  mix-blend-mode: multiply;
}

.map-node:hover,
.map-node:focus-visible,
.map-node.is-selected {
  z-index: 6;
  background: #fff9e7;
  box-shadow: 0 3px 13px rgba(61, 76, 54, 0.2);
  transform: scale(1.14);
}

.node-rice-a { left: 45%; top: 72%; }
.node-rice-b { left: 55%; top: 66%; }
.node-garden-a { left: 65%; top: 51%; }
.node-garden-b { left: 39%; top: 57%; }
.node-wild-a { left: 23%; top: 24%; }
.node-wild-b { left: 27%; top: 64%; }
.node-wild-c { left: 73%; top: 19%; }

.map-tooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 9px);
  z-index: 8;
  width: max-content;
  max-width: 145px;
  padding: 5px 8px;
  border: 1px solid rgba(88, 110, 78, 0.38);
  background: rgba(249, 247, 228, 0.97);
  color: var(--ink);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 5px);
  transition: opacity 450ms var(--ease-gentle), transform 450ms var(--ease-gentle);
  white-space: nowrap;
}

.map-node:hover .map-tooltip,
.map-node:focus-visible .map-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

.node-tooltip { display: none; }

.map-stage.has-filter [data-category] {
  opacity: 0.22;
}

.map-stage.has-filter [data-category].is-active {
  opacity: 1;
}

.village-lens {
  position: absolute;
  z-index: 8;
  display: grid;
  width: clamp(140px, 29%, 230px);
  aspect-ratio: 1;
  place-items: center;
  overflow: hidden;
  border: 5px solid #f7f2dc;
  border-radius: 50%;
  background: #e8edce;
  box-shadow: 0 0 0 2px #526a52, 0 10px 26px rgba(53, 69, 48, 0.23);
  clip-path: circle(0% at 50% 50%);
  opacity: 0;
  transform: scale(0.88);
  transition: clip-path 850ms var(--ease-gentle), opacity 650ms var(--ease-gentle), transform 850ms var(--ease-gentle);
}

.village-lens[hidden],
.detail-card[hidden] {
  display: none;
}

.village-lens.is-open {
  clip-path: circle(50% at 50% 50%);
  opacity: 1;
  transform: scale(1);
}

.village-lens[data-village="tingtang"] { left: 8%; top: 28%; }
.village-lens[data-village="chuanchang"] { right: 7%; top: 38%; }

.lens-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.lens-caption {
  position: absolute;
  bottom: 12%;
  left: 50%;
  padding: 4px 11px;
  border: 1px solid rgba(74, 91, 60, 0.5);
  background: rgba(248, 247, 229, 0.92);
  color: #405744;
  font-size: 0.77rem;
  letter-spacing: 0.11em;
  transform: translateX(-50%);
  white-space: nowrap;
}

.lens-close,
.detail-close {
  position: absolute;
  z-index: 2;
  display: grid;
  width: 28px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(81, 98, 69, 0.48);
  border-radius: 50%;
  background: rgba(249, 247, 228, 0.94);
  color: var(--ink);
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  line-height: 1;
}

.lens-close { top: 10%; right: 10%; }

.detail-card {
  position: absolute;
  right: 2%;
  bottom: 3%;
  z-index: 9;
  width: min(275px, 54%);
  padding: 19px 21px 17px;
  border: 1px solid rgba(88, 110, 78, 0.62);
  border-radius: 4px 8px 3px 6px;
  background:
    repeating-linear-gradient(2deg, rgba(96, 111, 67, 0.026) 0 1px, transparent 1px 6px),
    rgba(248, 246, 225, 0.97);
  box-shadow: 0 8px 23px rgba(53, 69, 48, 0.16);
  animation: card-reveal 700ms var(--ease-gentle) both;
}

.detail-close { top: 9px; right: 9px; }
.detail-kicker { margin-bottom: 8px; font-size: 0.67rem; }
.detail-title { margin: 0 25px 9px 0; font-size: 1.05rem; font-weight: 500; letter-spacing: 0.08em; }
.detail-copy { margin: 0; color: #66705d; font-size: 0.8rem; line-height: 1.8; }
.detail-placeholder { display: block; margin-top: 11px; color: #879078; font-size: 0.63rem; letter-spacing: 0.04em; }

@keyframes card-reveal {
  from { opacity: 0; transform: translateY(7px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.map-instruction {
  margin: 9px 0 0;
  color: #7c856d;
  font-size: 0.68rem;
  letter-spacing: 0.055em;
  text-align: center;
}

.map-instruction span {
  margin-right: 5px;
  color: #9d9f61;
}

.category-column {
  align-self: center;
  padding: 6px 0 0;
}

.category-heading {
  margin: 0 0 17px;
  color: #738069;
  font-size: 0.71rem;
  letter-spacing: 0.14em;
}

.category-filter {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 10px 7px;
  border: 0;
  border-bottom: 1px dashed rgba(91, 115, 75, 0.31);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  transition: opacity 650ms var(--ease-gentle), transform 650ms var(--ease-gentle), background-color 650ms var(--ease-gentle);
}

.category-filter:hover,
.category-filter:focus-visible,
.category-filter[aria-pressed="true"] {
  background: rgba(221, 230, 193, 0.42);
  transform: translateX(3px);
}

.category-filter img {
  flex: 0 0 45px;
  width: 45px;
  height: 42px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.category-filter strong,
.category-filter small {
  display: block;
  font-weight: 400;
}

.category-filter strong {
  font-size: 0.86rem;
  letter-spacing: 0.08em;
}

.category-filter small {
  margin-top: 3px;
  color: #8a927a;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.category-note {
  margin: 17px 5px 0;
  color: #858d76;
  font-size: 0.68rem;
  line-height: 1.8;
}

.reset-filter {
  margin: 15px 0 0 5px;
  padding: 5px 0;
  border: 0;
  border-bottom: 1px solid rgba(89, 112, 76, 0.45);
  background: transparent;
  color: #667b5f;
  cursor: pointer;
  font-size: 0.71rem;
}

.reset-filter[hidden] { display: none; }

.site-footer {
  padding: 15px 8px 0;
  font-size: 0.63rem;
  letter-spacing: 0.12em;
}

:focus-visible {
  outline: 2px solid #5d815a;
  outline-offset: 3px;
}

@media (max-width: 1120px) {
  .foraging-module {
    grid-template-columns: minmax(190px, 0.72fr) minmax(430px, 1.7fr);
    gap: 25px;
  }

  .category-column {
    grid-column: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    padding: 0;
  }

  .category-heading {
    width: 100%;
    margin: 0 0 2px;
  }

  .category-filter {
    width: auto;
    min-width: 31%;
    border: 1px dashed rgba(91, 115, 75, 0.31);
    border-radius: 4px;
    padding: 6px;
  }

  .category-note { flex: 1 1 100%; margin: 2px 0 0; }
}

@media (max-width: 760px) {
  .archive-page {
    width: min(100% - 24px, 620px);
    padding-top: 15px;
  }

  .site-header {
    padding: 0 4px 12px;
    font-size: 0.65rem;
  }

  .header-note { font-size: 0.62rem; }

  .foraging-module {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 22px;
    min-height: 0;
    padding: 25px 18px 24px;
  }

  .intro-column { padding: 0; }
  .kicker { margin-bottom: 11px; }
  h1 { font-size: 2.35rem; }
  .english-title { margin: 5px 0 16px; }
  .intro-copy { max-width: none; font-size: 0.91rem; line-height: 1.9; }
  .intro-aside { margin-top: 13px; }

  .map-heading {
    flex-wrap: wrap;
    gap: 2px 9px;
    margin-bottom: 5px;
    padding: 6px 9px;
    font-size: 0.84rem;
  }

  .map-subtitle { font-size: 0.6rem; }
  .map-stage { margin: 0 -5px; width: calc(100% + 10px); }
  .map-node { width: clamp(31px, 10vw, 44px); }
  .village-hotspot { padding: 4px 6px; font-size: 0.61rem; }
  .tingtang-hotspot { left: 36%; top: 77%; }
  .chuanchang-hotspot { left: 78%; top: 30%; }
  .village-lens { width: clamp(132px, 44%, 190px); }
  .village-lens[data-village="tingtang"] { left: 3%; top: 10%; }
  .village-lens[data-village="chuanchang"] { right: 2%; top: 35%; }
  .detail-card { right: 1%; bottom: -17%; width: min(255px, 76%); padding: 15px 17px; }
  .map-instruction { margin-top: 10px; font-size: 0.63rem; line-height: 1.6; }

  .category-column {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
  }

  .category-heading,
  .category-note { grid-column: 1 / -1; }
  .category-heading { margin-bottom: 3px; }
  .category-filter { min-width: 0; width: 100%; min-height: 90px; flex-direction: column; justify-content: center; gap: 2px; text-align: center; }
  .category-filter img { flex-basis: 38px; width: 41px; height: 38px; }
  .category-filter strong { font-size: 0.72rem; }
  .category-filter small { font-size: 0.56rem; }
  .category-note { margin: 4px 0 0; }
  .reset-filter { grid-column: 1 / -1; justify-self: start; margin-top: 0; }
  .site-footer { padding: 12px 4px 0; font-size: 0.57rem; }
}

@media (max-width: 420px) {
  .header-note { max-width: 128px; text-align: right; line-height: 1.5; }
  .village-hotspot { gap: 4px; font-size: 0.55rem; }
  .hotspot-dot { width: 6px; height: 6px; }
  .map-label { font-size: 0.52rem; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}