/* 导航页沿用首页的信笺纸面，入场动画与纸面交互分别放在外、内两层。 */
.directory-page {
  --directory-paper: var(--color-bg-soft);
  --directory-back: color-mix(in srgb, var(--color-bg-soft) 94%, var(--color-accent));
  --directory-shadow: color-mix(in srgb, var(--color-text) 8%, transparent);
  padding: calc(var(--header-height) + 24px) 0 80px;
}
.directory-container { max-width: var(--max-width); width: 100%; }

/* 题头是一张紧凑的信封题签。 */
.directory-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 136px;
  margin: 0 5px 27px 0;
  padding: 23px 31px 28px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background-color: var(--directory-paper);
  background-image: radial-gradient(color-mix(in srgb, var(--color-text) 3%, transparent) .6px, transparent .9px);
  background-size: 6px 7px;
  box-shadow: 4px 5px 0 -1px var(--directory-back), 4px 5px 0 var(--color-border), 0 7px 20px var(--directory-shadow);
}
.directory-hero::before { content: ''; position: absolute; inset: 7px; border: 1px solid color-mix(in srgb, var(--color-border) 65%, transparent); border-left: 2px dotted color-mix(in srgb, var(--color-accent) 52%, var(--color-border)); pointer-events: none; }
.directory-hero::after { content: ''; position: absolute; inset: auto 8px 7px; height: 18px; background: linear-gradient(3deg, transparent 48%, var(--color-border) 49%, var(--color-border) 51%, transparent 52%) left bottom / 50% 100% no-repeat, linear-gradient(-3deg, transparent 48%, var(--color-border) 49%, var(--color-border) 51%, transparent 52%) right bottom / 50% 100% no-repeat; opacity: .65; pointer-events: none; }
.directory-hero-copy { position: relative; z-index: 1; min-width: 0; max-width: 58%; }
.directory-title-line { display: flex; align-items: center; gap: 12px; }
.directory-letter-mark { display: block; flex: 0 0 29px; width: 29px; height: 25px; color: var(--color-accent); transform: rotate(-6deg); animation: directory-mark-arrive .65s var(--ease-out) .04s both; }
.directory-letter-mark svg { display: block; width: 100%; height: 100%; }
.directory-hero h1 { margin: 0; font-size: clamp(1.8rem, 3vw, 2.15rem); font-weight: 550; line-height: 1.25; letter-spacing: .055em; overflow-wrap: anywhere; }
.directory-intro { margin: 8px 0 0 41px; color: var(--color-text-secondary); font-size: 13px; line-height: 1.65; }
.directory-hero h1,.directory-intro { animation: directory-title-reveal .8s var(--ease-out) .08s both; }

/* 海风中的虚线只铺在题签右侧，投递的纸飞机在两端淡入淡出。 */
.directory-delivery { position: absolute; top: 50%; right: clamp(24px, 4vw, 76px); width: clamp(220px, 32vw, 440px); height: 112px; color: var(--color-accent); transform: translateY(-50%); pointer-events: none; }
.directory-delivery svg { display: block; width: 100%; height: 100%; overflow: visible; }
.directory-delivery path,.directory-delivery rect { vector-effect: non-scaling-stroke; }
.directory-delivery-route { stroke: currentColor; stroke-width: 1; stroke-dasharray: 3 7; opacity: .28; animation: directory-breeze-line 18s linear infinite; }
.directory-delivery-breeze { stroke: currentColor; stroke-width: 1; stroke-linecap: round; opacity: .15; }
.directory-delivery-flight { offset-path: path('M25 79C85 18 113 104 179 58S271 17 332 41'); offset-distance: 56%; offset-rotate: auto; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; opacity: .8; animation: directory-deliver 16s linear infinite; }
.directory-delivery-flight path:first-child { fill: color-mix(in srgb, var(--directory-paper) 93%, var(--color-accent)); }
.directory-delivery-letter { fill: var(--directory-paper); stroke: currentColor; stroke-width: 1; stroke-linejoin: round; opacity: .52; animation: directory-letter-breeze 6s ease-in-out infinite; }
.directory-delivery-letter path { fill: none; }
.directory-delivery-spark { fill: currentColor; opacity: .35; animation: directory-spark-breathe 4.8s ease-in-out infinite; }
.directory-delivery-spark-two { animation-delay: -1.6s; }
.directory-delivery-spark-three { animation-delay: -3.2s; }

.directory-layout { display: grid; grid-template-columns: clamp(170px, 13vw, 218px) minmax(0, 1fr); gap: clamp(24px, 2.3vw, 44px); align-items: start; }
.directory-sidebar { --entry-delay: 40ms; }
.directory-search-wrap { --entry-delay: 90ms; }
/* 正文在视窗中逐项从下方进入；整张纸面携带文字移动，内层继续负责悬停。 */
.directory-entry-ready .directory-entry { opacity: 0; transform: translate3d(0, 80px, 0); }
.directory-entry-ready .directory-entry.is-visible { animation: directory-section-enter .8s cubic-bezier(.25,.46,.45,.94) var(--entry-delay, 0ms) both; }
.directory-entry-ready .directory-entry.is-entered { opacity: 1; transform: none; animation: none; }
.directory-sidebar { position: sticky; top: calc(var(--header-height) + 22px); min-width: 0; padding: 15px 10px 12px; border: 1px solid var(--color-border); border-radius: 3px; background: var(--directory-paper); box-shadow: 3px 4px 0 -1px var(--directory-back), 3px 4px 0 var(--color-border); }
.directory-sidebar-title { margin: 0 10px 11px; padding: 0 0 11px; border-bottom: 1px dashed var(--color-border); color: var(--color-text-secondary); font-size: 12px; font-weight: 500; letter-spacing: .06em; }
.directory-categories { display: flex; flex-direction: column; gap: 6px; }
.directory-category { display: flex; align-items: center; gap: 9px; width: 100%; min-width: 0; padding: 10px; border: 1px solid transparent; border-left: 2px dotted var(--color-border); border-radius: 2px; color: var(--color-text-secondary); text-align: left; transition: background .25s, color .25s, transform .25s, border-color .25s; }
.directory-category.is-active { border-color: color-mix(in srgb, var(--color-accent) 26%, var(--color-border)); border-left-color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, var(--directory-paper)); color: var(--color-accent); }
.directory-category-mark,.directory-group-mark { display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.directory-category-mark { flex: 0 0 16px; width: 16px; height: 16px; opacity: .8; }
.directory-category-name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13px; font-weight: 500; }
.directory-category-count { opacity: .7; font-size: 11px; }

.directory-content { min-width: 0; }
.directory-search-wrap { display: flex; align-items: center; gap: 11px; height: 47px; margin-right: 5px; padding: 0 16px; border: 1px solid var(--color-border); border-bottom: 2px solid color-mix(in srgb, var(--color-accent) 23%, var(--color-border)); border-radius: 3px; background: var(--directory-paper); box-shadow: 2px 3px 0 -1px var(--directory-back), 2px 3px 0 var(--color-border); transition: border-color .25s, box-shadow .25s; }
.directory-search-wrap:focus-within { border-color: var(--color-accent); box-shadow: 2px 3px 0 -1px var(--directory-back), 2px 3px 0 var(--color-border), 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent); }
.directory-search-wrap svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--color-accent); }
.directory-search-wrap input { width: 100%; min-width: 0; color: var(--color-text); background: none; border: 0; outline: none; font: inherit; font-size: 13px; }
.directory-search-wrap input::placeholder { color: var(--color-text-muted); }

.directory-group { margin-top: 27px; }
.directory-group-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 13px; }
.directory-group-title { display: inline-flex; align-items: center; gap: 9px; margin: 0; padding: 5px 10px 5px 8px; border-left: 2px dotted var(--color-accent); border-bottom: 1px solid var(--color-border); background: var(--directory-paper); color: var(--color-text); font-size: 16px; font-weight: 500; line-height: 1.5; }
.directory-group-mark { width: 15px; height: 15px; flex: 0 0 15px; color: var(--color-accent); }
.directory-group-count { color: var(--color-text-muted); font-size: 11px; font-weight: 400; }
.directory-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.directory-tag { padding: 3px 9px; border: 1px dashed var(--color-border); border-radius: 2px; background: var(--directory-paper); color: var(--color-text-secondary); font-size: 11px; transition: color .2s, background .2s, border-color .2s; }
.directory-tag.is-active { border-color: color-mix(in srgb, var(--color-accent) 48%, var(--color-border)); color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, var(--directory-paper)); }

.directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 17px 16px; padding: 0 5px 5px 0; }
.directory-card { position: relative; display: block; min-width: 0; color: var(--color-text); text-decoration: none; }
.directory-card > .mail-paper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  min-height: 110px;
  height: 100%;
  padding: 18px 16px 26px;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  background-color: var(--directory-paper);
  background-image: radial-gradient(color-mix(in srgb, var(--color-text) 3%, transparent) .6px, transparent .9px);
  background-size: 6px 7px;
  box-shadow: 3px 4px 0 -1px var(--directory-back), 3px 4px 0 var(--color-border), 0 5px 14px var(--directory-shadow);
  transition: transform .28s cubic-bezier(.22,.65,.3,1), border-color .25s, box-shadow .28s;
}
.directory-card > .mail-paper::before { content: ''; position: absolute; inset: 6px; border: 1px solid color-mix(in srgb, var(--color-border) 56%, transparent); pointer-events: none; }
.directory-card > .mail-paper::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 15px; height: 15px; background: linear-gradient(135deg, transparent 48%, var(--directory-back) 49%, var(--color-border) 100%); pointer-events: none; transition: width .25s, height .25s; }
.directory-card-icon { position: relative; display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; overflow: hidden; border: 1px dashed color-mix(in srgb, var(--color-accent) 35%, var(--color-border)); border-radius: 3px; background: color-mix(in srgb, var(--color-accent) 7%, var(--directory-paper)); color: var(--color-accent); font-size: 20px; font-weight: 600; }
.directory-card-icon img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 5px; object-fit: contain; background: #fff; }
.directory-card-info { position: relative; display: block; flex: 1; min-width: 0; padding-right: 7px; }
.directory-card-name,.directory-card-description { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.directory-card-name { width: fit-content; max-width: 100%; padding-bottom: 3px; color: var(--color-text); background: linear-gradient(var(--color-accent), var(--color-accent)) 0 100% / 0 1px no-repeat; font-size: 13px; font-weight: 600; line-height: 1.5; transition: color .25s, background-size .28s; }
.directory-card-description { margin-top: 3px; color: var(--color-text-secondary); font-size: 11px; line-height: 1.6; }
.directory-card-arrow { position: absolute; top: 9px; right: 11px; color: var(--color-text-muted); font-size: 14px; line-height: 1; transition: color .25s, transform .25s; }
.directory-card-postmark { position: absolute; right: 17px; bottom: 7px; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--color-accent); border-radius: 50%; color: var(--color-accent); opacity: .24; font-size: 10px; line-height: 1; transform: translateY(-3px) rotate(-13deg); transition: opacity .25s, transform .28s; pointer-events: none; }
.directory-card-postmark::before { content: ''; position: absolute; inset: 3px; border: 1px solid color-mix(in srgb, var(--color-accent) 45%, transparent); border-radius: 50%; }

.directory-category:focus-visible { background: color-mix(in srgb, var(--color-accent) 8%, var(--directory-paper)); color: var(--color-accent); transform: translateX(2px); }
.directory-tag:focus-visible { border-color: var(--color-accent); color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, var(--directory-paper)); }
.directory-card:focus-visible > .mail-paper { transform: translateY(-4px) rotate(-.4deg); border-color: var(--color-accent); box-shadow: 4px 6px 0 -1px var(--directory-back), 4px 6px 0 var(--color-border), 0 11px 23px var(--directory-shadow); }
.directory-card:focus-visible .directory-card-name { color: var(--color-accent); background-size: 100% 1px; }
.directory-card:focus-visible .directory-card-postmark { opacity: .68; transform: translateY(0) rotate(-13deg); }
.directory-card:focus-visible .directory-card-arrow { color: var(--color-accent); transform: translate(2px, -2px); }
.directory-card:focus-visible .directory-card-icon { animation: directory-icon-hop 1.2s ease-out; }
.directory-page button:focus-visible,.directory-page a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 5px; }

@media (hover: hover) and (pointer: fine) {
  .directory-category:hover { background: color-mix(in srgb, var(--color-accent) 8%, var(--directory-paper)); color: var(--color-accent); transform: translateX(2px); }
  .directory-tag:hover { border-color: var(--color-accent); color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 8%, var(--directory-paper)); }
  .directory-card:hover > .mail-paper { transform: translateY(-4px) rotate(-.4deg); border-color: var(--color-accent); box-shadow: 4px 6px 0 -1px var(--directory-back), 4px 6px 0 var(--color-border), 0 11px 23px var(--directory-shadow); }
  .directory-card:hover .directory-card-name { color: var(--color-accent); background-size: 100% 1px; }
  .directory-card:hover .directory-card-postmark { opacity: .68; transform: translateY(0) rotate(-13deg); }
  .directory-card:hover .directory-card-arrow { color: var(--color-accent); transform: translate(2px, -2px); }
  .directory-card:hover .directory-card-icon { animation: directory-icon-hop 1.2s ease-out; }
}
.directory-card:active > .mail-paper { transform: translateY(1px); box-shadow: 1px 2px 0 -1px var(--directory-back), 1px 2px 0 var(--color-border); }

.directory-empty { padding: 65px 12px; color: var(--color-text-secondary); text-align: center; }
.directory-empty[hidden] { display: none; }
.directory-empty span { display: block; color: var(--color-accent); font-size: 29px; }
.directory-empty p { margin-top: 8px; }
.directory-empty small { display: block; margin-top: 4px; color: var(--color-text-muted); }
@keyframes directory-section-enter { from { opacity: 0; transform: translate3d(0, 80px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes directory-icon-hop {
  0%,100% { transform: translateY(0) scale(1); }
  10% { transform: translateY(6px) scale(1.16, .84); }
  30% { transform: translateY(-5px) rotate(4deg); }
  50% { transform: translateY(2px); }
  60% { transform: translateY(0) scale(1.07, .93); }
  75% { transform: translateY(-3px) rotate(-2deg); }
  85% { transform: translateY(0); }
}
@keyframes directory-title-reveal { from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(7px); } to { opacity: 1; clip-path: inset(0); transform: translateY(0); } }
@keyframes directory-mark-arrive { from { opacity: 0; transform: translateY(5px) rotate(-12deg); } to { opacity: 1; transform: translateY(0) rotate(-6deg); } }
@keyframes directory-soft-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes directory-breeze-line { to { stroke-dashoffset: -100; } }
@keyframes directory-deliver { 0% { offset-distance: 0%; opacity: 0; } 9% { opacity: .8; } 86% { opacity: .8; } 100% { offset-distance: 100%; opacity: 0; } }
@keyframes directory-letter-breeze { 0%,100% { transform: translateY(1px) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@keyframes directory-spark-breathe { 0%,100% { opacity: .22; } 50% { opacity: .65; } }

@media (max-width: 1000px) {
  .directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .directory-layout { grid-template-columns: 170px minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 640px) {
  .directory-page { padding-top: calc(var(--header-height) + 17px); padding-bottom: 60px; }
  .directory-hero { min-height: 123px; margin-bottom: 23px; padding: 21px 20px 26px; }
  .directory-hero-copy { max-width: calc(100% - 64px); }
  .directory-hero h1 { font-size: 1.8rem; }
  .directory-title-line { gap: 9px; }
  .directory-letter-mark { flex-basis: 25px; width: 25px; height: 23px; }
  .directory-intro { margin-left: 0; font-size: 12px; }
  .directory-delivery { right: 3px; width: clamp(126px, 32vw, 190px); height: 88px; opacity: .58; mask-image: linear-gradient(90deg, transparent 30%, #000 55%); }
  .directory-layout { display: block; }
  .directory-sidebar { position: static; margin-bottom: 13px; padding: 0; border: 0; background: none; box-shadow: none; }
  .directory-sidebar-title { display: none; }
  .directory-categories { flex-direction: row; overflow-x: auto; gap: 9px; padding: 3px 5px 8px 1px; scrollbar-width: none; }
  .directory-categories::-webkit-scrollbar { display: none; }
  .directory-category { flex: none; width: auto; gap: 7px; padding: 8px 10px; border-color: var(--color-border); border-left: 2px dotted color-mix(in srgb, var(--color-accent) 45%, var(--color-border)); background: var(--directory-paper); box-shadow: 2px 3px 0 -1px var(--directory-back), 2px 3px 0 var(--color-border); }
  .directory-category-name { font-size: 12px; white-space: nowrap; }
  .directory-category-mark { flex-basis: 14px; width: 14px; height: 14px; }
  .directory-search-wrap { height: 44px; padding: 0 12px; }
  .directory-search-wrap input { font-size: 12px; }
  .directory-group { margin-top: 23px; }
  .directory-group-title { font-size: 15px; }
  .directory-grid { gap: 15px 13px; }
  .directory-card > .mail-paper { min-height: 112px; padding: 15px 11px 27px; gap: 8px; }
  .directory-card-icon { flex-basis: 32px; width: 32px; height: 32px; font-size: 16px; }
  .directory-card-info { padding-right: 0; }
  .directory-card-name { font-size: 12px; }
  .directory-card-description { font-size: 10px; }
  .directory-card-postmark { right: 13px; bottom: 8px; width: 24px; height: 24px; font-size: 9px; }
  .directory-card-arrow { top: 8px; right: 9px; font-size: 12px; }
}
@media (max-width: 420px) {
  .directory-grid { grid-template-columns: minmax(0, 1fr); }
  .directory-card > .mail-paper { min-height: 94px; padding: 16px 18px 23px; gap: 12px; }
  .directory-card-icon { flex-basis: 38px; width: 38px; height: 38px; font-size: 18px; }
  .directory-card-info { padding-right: 24px; }
  .directory-card-name { font-size: 13px; }
  .directory-card-description { font-size: 11px; }
}
@media (hover: none), (pointer: coarse) {
  .directory-letter-mark { animation-name: directory-soft-enter; animation-duration: .45s; }
  .directory-card:focus-visible .directory-card-icon { animation: none; }
  .directory-card > .mail-paper,.directory-category,.directory-card-arrow { transform: none !important; }
  .directory-card-postmark { opacity: .4; transform: rotate(-13deg) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .directory-page *,.directory-page *::before,.directory-page *::after { animation: none !important; transition: none !important; }
  .directory-entry-ready .directory-entry { opacity: 1; transform: none !important; }
  .directory-hero h1,.directory-intro,.directory-letter-mark,.directory-card,.directory-card-icon,.directory-card-name,.directory-card-description,.directory-card > .mail-paper,.directory-category,.directory-card-arrow,.directory-card-postmark { opacity: 1; clip-path: none; transform: none !important; }
}