/* 正文=系统无衬线栈（角色变量在 design-tokens.css，本文件在其后加载）。
   原 Google Fonts Noto Sans SC 首屏外链已移除：正文回退系统字体，
   标题由 --font-heading（自托管 Noto Serif SC 子集）承担。 */
:root {
  font-family: var(--font-body);
  color: #e9e8de;
  background: #191511;
  font-synthesis: none;
  scroll-behavior: smooth;
}
* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; }
button, input { font: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin-top: 0; }
::selection { color: #11160f; background: #d7bd7e; }
.page-width { width: min(1200px, calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: absolute; top: -50px; left: 20px; z-index: 100; padding: 9px 14px; color: #191511; background: #e4c981; }
.skip-link:focus { top: 10px; }

.notice-bar { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 28px; padding: 5px 16px; color: #d8c592; background: #373729; font-size: 10px; letter-spacing: .025em; text-align: center; }
.notice-bar span { opacity: .5; }
.site-header { position: relative; z-index: 20; background: #201a15; border-bottom: 1px solid #554535; }
/* 无限之门倒计时条：页面最顶部、标题栏上方居中细条，链到 /roadmap（SSR 直出，无需 JS）。 */
.header-countdown { background: linear-gradient(180deg, #221a10, #161009); border-bottom: 1px solid #332a1c; }
.header-countdown-link { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 3px 12px; padding: 6px 16px; color: #cfc3ae; font-size: 12px; letter-spacing: .08em; }
.header-countdown-link::before, .header-countdown-link::after { content: ''; flex: none; width: 36px; height: 1px; background: linear-gradient(90deg, transparent, #8d7a52); }
.header-countdown-link::after { background: linear-gradient(90deg, #8d7a52, transparent); }
.header-countdown-link:hover { color: #eeddb0; text-decoration: none; }
.header-countdown-portal { color: #e4c981; font-size: 11px; animation: portal-glow 2.8s ease-in-out infinite; }
.header-countdown-label { font-weight: 600; color: #e4c981; }
.header-countdown-timer strong { padding: 0 3px; color: #f2dc9e; font-size: 16px; font-variant-numeric: tabular-nums; text-shadow: 0 0 10px rgba(228, 201, 129, .45); }
.header-countdown-more { color: #93836c; font-size: 11px; }
@keyframes portal-glow { 0%, 100% { text-shadow: 0 0 5px rgba(228, 201, 129, .35); } 50% { text-shadow: 0 0 12px rgba(228, 201, 129, .8); } }
@media (prefers-reduced-motion: reduce) { .header-countdown-portal { animation: none; } }
@media (max-width: 640px) { .header-countdown-link { font-size: 11px; padding: 5px 12px; } .header-countdown-link::before, .header-countdown-link::after { width: 20px; } .header-countdown-timer strong { font-size: 15px; } .header-countdown-more { display: none; } }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; min-height: 72px; gap: 0 24px; padding-top: 14px; }
.brand { display: flex; align-items: center; flex: none; gap: 11px; }
.brandmark { display: block; flex: none; width: 81px; height: 46px; }
.brand-name { display: flex; flex-direction: column; gap: 5px; white-space: nowrap; }
.brand-name strong { font: bold 19px Georgia, serif; letter-spacing: .02em; }
.brand-name em, .footer-main em { color: #d5b976; font-style: normal; }
.brand-name small { color: #b9aa97; font-size: 11px; letter-spacing: .04em; }
.main-nav { display: flex; flex-wrap: wrap; order: 3; width: 100%; align-items: center; gap: 8px 26px; min-height: 48px; margin-left: 0; }
.main-nav a { display: inline-flex; align-items: center; min-height: 44px; color: #c9bdac; font-size: 13px; font-weight: 600; white-space: nowrap; border-bottom: 2px solid transparent; }
.main-nav a:hover, .main-nav a:focus-visible { color: #e4ca8b; border-color: #c8a968; }
/* 当前页指示：与 hover 同款金色，栏目页/首页各自标亮（导航兜底 + 面包屑以外的位置感来源） */
.main-nav a[aria-current='page'] { color: #e4ca8b; border-color: #c8a968; }
.main-nav .nav-hot-anchor { position: relative; display: inline-block; }
/* 角标悬浮在文字上方偏右（非右侧探出），红色光晕随脉冲呼吸 */
.main-nav .nav-hot { position: absolute; top: -16px; right: 4px; padding: 3px 8px 2px; color: #fff; background: linear-gradient(135deg, #ff7043, #d63031); font-size: 10px; font-weight: 800; line-height: 1.3; letter-spacing: .08em; border-radius: 9px 9px 9px 3px; box-shadow: 0 0 12px rgba(255, 82, 82, .75), 0 1px 5px rgba(140, 25, 25, .55); transform: rotate(6deg); animation: nav-hot-pulse 1.8s ease-in-out infinite; }
@keyframes nav-hot-pulse { 0%, 100% { transform: rotate(6deg) scale(1); box-shadow: 0 0 9px rgba(255, 82, 82, .65), 0 1px 5px rgba(140, 25, 25, .5); } 50% { transform: rotate(6deg) scale(1.12); box-shadow: 0 0 18px rgba(255, 82, 82, .95), 0 1px 5px rgba(140, 25, 25, .55); } }
@media (prefers-reduced-motion: reduce) { .main-nav .nav-hot { animation: none; } }
.header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.search-trigger { display: flex; align-items: center; gap: 7px; padding: 8px 11px; color: #a8b2a6; background: transparent; border: 1px solid #4c584a; font-size: 11px; white-space: nowrap; }
.search-trigger:hover { color: #e3e9df; border-color: #87917a; }
.search-trigger span:first-child { font: 23px Georgia, serif; line-height: .55; }
.sim-link { padding: 10px 14px; color: #192016; background: #d7b96f; border: 1px solid #e9d59c; font-size: 11px; font-weight: 800; white-space: nowrap; }
.sim-link:hover { background: #e7ca83; }
.sim-link .wow-icon { margin-left: 7px; }
.wow-icon { display: inline-block; flex: none; width: 19px; height: 19px; vertical-align: -5px; border: 1px solid #756442; border-radius: 3px; background-color: #11170f; background-position: center; background-size: cover; box-shadow: 0 0 0 1px #121811; }
.icon-book { background-image: url('./assets/wow-icon-book.jpg'); }
.icon-sword { background-image: url('./assets/wow-icon-sword.jpg'); }
.icon-helmet { background-image: url('./assets/wow-icon-helmet.jpg'); }
.icon-map { background-image: url('./assets/wow-icon-map.jpg'); }
.wow-chevron { display: inline-block; flex: none; width: 15px; height: 15px; background: url('./assets/talent-arrow-right2.png') right center / 200px 15px no-repeat; }
.lang-toggle { padding: 9px 11px; color: #a8b2a6; background: transparent; border: 1px solid #4c584a; font-size: 11px; font-weight: 700; white-space: nowrap; }
.lang-toggle:hover { color: #e3e9df; border-color: #87917a; }
.menu-toggle { display: none; }

.hero { position: relative; min-height: 445px; height: auto; isolation: isolate; overflow: hidden; background: #34291f; }
.hero-image { position: absolute; z-index: -2; inset: 0; }
/* 背景轮播层：首层（暴风城）背景随 CSS 加载保证首绘；其余层由 hero-carousel.js
   首屏加载完再赋 background-image 懒加载，切换时新层以 is-entering 提级交叉淡入。 */
.hero-slide { position: absolute; inset: 0; background: center 53% / cover no-repeat; opacity: 0; transition: opacity 1.4s ease; }
.hero-slide.is-entering { z-index: 1; }
.hero-slide.is-active { opacity: 1; }
.hero-slide--stormwind { background-image: url('./assets/official-stormwind-city.jpg'); }
@media (prefers-reduced-motion: reduce) {
  .hero-slide { transition: none; }
}
.hero-overlay { position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, #1b120df2 0%, #1b120dc7 27%, #1b120d49 64%, #1b120d2e 100%), linear-gradient(0deg, #191511b8, transparent 32%); }
.hero-content { position: relative; display: flex; align-items: center; min-height: 445px; padding-block: 48px; }
.hero-copy { max-width: 660px; margin-top: -7px; }
.eyebrow, .section-kicker { color: #d6b56e; font: bold 11px Georgia, serif; letter-spacing: .17em; }
.eyebrow span { color: #8e8c71; padding-inline: 6px; }
.hero h1 { font-size: clamp(39px, 4.4vw, 61px); line-height: 1.35; letter-spacing: -.06em; margin: 20px 0 15px; font-weight: 800; text-shadow: 0 2px 16px #0a100c; }
.hero h1 em { color: #e0c67f; font-style: normal; }
/* Local, OFL-licensed title subset: sculpted serif lettering inspired by the WoW welcome banner. */
@font-face {
  font-family: 'Tavern Title';
  src: url('/assets/tavern-title-serif-900.ttf') format('truetype');
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}
.hero h1 {
  color: #f4ead0;
  text-shadow: 0 1px 0 #fff7df, 1px 2px 0 #86704a, 2px 3px 0 #493520, 0 6px 14px #110c08;
}
.hero h1 em {
  color: #e8d29a;
  text-shadow: 0 1px 0 #fff0c8, 1px 2px 0 #806039, 2px 3px 0 #422c17, 0 6px 14px #110c08;
}
html[lang="en"] .hero h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.18;
  letter-spacing: -.015em;
}
html[lang="en"] .hero h1 em { display: inline-block; margin-top: .12em; }
html[lang^="zh"] .hero h1 {
  font-family: 'Tavern Title', 'Songti SC', 'SimSun', serif;
  font-weight: 900;
  font-size: clamp(42px, 4.9vw, 68px);
  line-height: 1.3;
  letter-spacing: .055em;
}
@media (max-width: 640px) {
  html[lang^="zh"] .hero h1 { font-size: clamp(36px, 10.5vw, 48px); line-height: 1.4; letter-spacing: .04em; }
  html[lang="en"] .hero h1 { font-size: clamp(29px, 7.8vw, 44px); line-height: 1.25; }
}

.hero-deck { color: #e4d8c4; font-size: 13px; line-height: 1.9; margin-bottom: 25px; text-shadow: 0 1px 7px #191511; }
.hero-actions { display: flex; gap: 10px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 42px; padding: 0 19px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.button-primary { color: #1a2118; background: #d9bb78; border: 1px solid #ebd39a; }
.button-primary:hover { background: #e8ca83; }
.button-quiet { color: #f0edda; background: #10191094; border: 1px solid #879282; }
.button-quiet:hover { background: #34291f; }
.hero-caption { position: absolute; right: 0; bottom: 16px; color: #c3c8bb; font-size: 9px; text-shadow: 0 1px 5px #000; }
.hero-caption span { color: #d5b874; padding-inline: 5px; }
.topic-strip { background: #30261d; border-block: 1px solid #5a4836; }
.topic-inner { display: flex; align-items: center; min-height: 54px; flex-wrap: wrap; gap: 10px 0; padding-block: 10px; }
.topic-inner > * { padding-inline: 19px; border-right: 1px solid #5a4836; }
.topic-inner > *:first-child { padding-left: 0; }
.topic-inner > *:last-child { border: 0; }
.topic-label { color: #9da993; font-size: 10px; white-space: nowrap; }
.topic-inner a { display: inline-flex; align-items: center; gap: 8px; color: #dde2d4; font-size: 11px; font-weight: 700; white-space: nowrap; }
.topic-inner a:hover { color: #e3c581; }
.topic-inner a .wow-icon { width: 17px; height: 17px; }

.section { padding-block: 76px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 29px; }
.section-kicker { margin: 0 0 10px; }
.section-heading h2 { margin: 0 0 8px; font-size: 29px; letter-spacing: -.035em; }
.section-description { margin: 0; color: #b9ab99; font-size: 12px; line-height: 1.7; }
.section-status { margin-bottom: 2px; padding-left: 11px; color: #b6ae86; border-left: 2px solid #ad965f; font-size: 10px; white-space: nowrap; }
.section-action { color: #d8be7b; font-size: 11px; font-weight: 700; white-space: nowrap; }
.section-action .wow-icon { margin-left: 7px; }
.section-action:hover { text-decoration: underline; text-underline-offset: 4px; }

.news-grid { display: grid; grid-template-columns: minmax(0, 1.26fr) minmax(0, 1fr); gap: 32px; }
/* 头条焦点轮播：无 JS 时三层卡片堆叠、内容全量可见（爬虫/免 JS 友好）；html.has-js 下
   grid 同格堆叠成单层交叉淡入（容器高度取最高层，切换不跳版）。圆点压画面右下角，
   与左下角的图片来源行错开；轮播类名同时挂在 slide 与 .lead-image 上，背景规则只认后者。 */
.lead-story { position: relative; min-height: 338px; border: 1px solid #67513d; background: #2b221b; }
/* news-grid 会把 story 拉到与右侧书架同高：slides 撑满 story，画面列才填满整卡，
   圆点（相对 story 右下角定位）正好落在画面右下角而不是卡片空带上。 */
.lead-slides { height: 100%; }
.lead-slide { display: grid; grid-template-columns: 47% 53%; }
.lead-slide + .lead-slide { border-top: 1px solid #67513d; }
html.has-js .lead-slides { display: grid; }
html.has-js .lead-slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; }
html.has-js .lead-slide.is-active { z-index: 1; opacity: 1; visibility: visible; transition: opacity .6s ease; }
html.has-js .lead-slide + .lead-slide { border-top: 0; }
.lead-dots { position: absolute; z-index: 2; right: calc(53% + 14px); bottom: 14px; display: flex; gap: 7px; }
html:not(.has-js) .lead-dots { display: none; }
.lead-dot { width: 9px; height: 9px; padding: 0; border: 1px solid #c8a968; border-radius: 999px; background: #14100ccc; cursor: pointer; }
.lead-dot.is-active { width: 22px; border-color: #f0c75e; background: linear-gradient(90deg, #e05d46, #f0c75e); }
.lead-dot:focus-visible { outline: 2px solid #c8a968; outline-offset: 2px; }
.lead-image { position: relative; min-width: 0; background-color: #14100c; background-size: cover; background-position: center; background-repeat: no-repeat; }
.lead-image.lead-art--lordaeron { background-image: url('./assets/official-lordaeron.jpg'); }
.lead-image.lead-art--stormwind-city { background-image: url('./assets/official-stormwind-city.jpg'); }
.lead-image.lead-art--orgrimmar { background-image: url('./assets/official-orgrimmar.jpg'); }
/* 《魔兽世界：无限》官方页美术（README 图片来源表）：轮播兜底池按天轮换取用 */
.lead-image.lead-art--ashenvale-night { background-image: url('./assets/official-ashenvale-night.jpg'); }
.lead-image.lead-art--ashenvale-day { background-image: url('./assets/official-ashenvale-day.jpg'); }
.lead-image.lead-art--barrens { background-image: url('./assets/official-barrens.jpg'); }
.lead-image.lead-art--felwood { background-image: url('./assets/official-felwood.jpg'); }
.lead-image.lead-art--darkshore { background-image: url('./assets/official-darkshore.jpg'); }
.lead-image.lead-art--dustwallow { background-image: url('./assets/official-dustwallow.jpg'); }
.lead-image.lead-art--skyborne { background-image: url('./assets/official-skyborne.jpg'); }
.lead-image.lead-art--forever-keyart { background-image: url('./assets/official-forever-keyart.jpg'); }
/* 主城与经典副本场景图（warcraft.wiki.gg，README 图片来源表） */
.lead-image.lead-art--ironforge { background-image: url('./assets/scene-ironforge.jpg'); }
.lead-image.lead-art--undercity { background-image: url('./assets/scene-undercity.jpg'); }
.lead-image.lead-art--darnassus { background-image: url('./assets/scene-darnassus.jpg'); }
.lead-image.lead-art--thunder-bluff { background-image: url('./assets/scene-thunder-bluff.jpg'); }
.lead-image.lead-art--scarlet-monastery { background-image: url('./assets/scene-scarlet-monastery.jpg'); }
.lead-image.lead-art--stratholme { background-image: url('./assets/scene-stratholme.jpg'); }
.lead-image.lead-art--dire-maul { background-image: url('./assets/scene-dire-maul.jpg'); }
.lead-image.lead-art--brd { background-image: url('./assets/scene-brd.jpg'); }
.lead-image.lead-art--forever-camp { background-image: url('./assets/official-forever-camp.jpg'); }
.lead-image.lead-art--forever-mounts { background-image: url('./assets/official-forever-mounts.jpg'); }
.lead-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, #0d151092, transparent 50%); }
.image-credit { position: absolute; z-index: 1; left: 15px; bottom: 14px; color: #e0e0d3; font: 9px Georgia, serif; letter-spacing: .08em; }
.lead-content { position: relative; display: flex; flex-direction: column; padding: 30px 28px 25px; }
.story-meta { display: flex; gap: 8px; align-items: center; color: #98a394; font-size: 10px; }
.story-meta .category { color: #d6b876; }
.meta-divider { color: #6a7969; }
.lead-content h3 { margin: 27px 0 13px; font-size: 24px; line-height: 1.45; letter-spacing: -.03em; }
.lead-content p { color: #c2b5a2; font-size: 11px; line-height: 1.85; }
/* 整卡可点（stretched-link）：lead-content 内已有 read-link 锚，不能整块包 <a>（嵌套 a 非法），
   用伪元素铺满卡片区域，点击任意处落到「阅读全文」链接；键盘焦点框由 :has 提升到整卡。 */
.lead-content .read-link::after { content: ''; position: absolute; inset: 0; }
.lead-content:hover .read-link, .lead-content:focus-within .read-link { color: #f4db9d; }
.lead-content:has(.read-link:focus-visible) { outline: 2px solid #c8a968; outline-offset: 4px; }
.read-link { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-top: auto; padding: 15px 0 0; color: #dec184; background: transparent; border: 0; border-top: 1px solid #455044; font-size: 11px; font-weight: 700; text-align: left; }
.read-link:hover { color: #f4db9d; }
.news-rail { border-top: 1px solid #a98f59; }
.rail-heading { display: flex; align-items: center; justify-content: space-between; height: 39px; border-bottom: 1px solid #3a453a; }
.rail-heading strong { font-size: 11px; }
.rail-heading small { color: #889386; font: 9px Georgia, serif; letter-spacing: .12em; }
.news-row { display: flex; align-items: flex-start; gap: 16px; width: 100%; min-height: 99px; padding: 15px 2px 14px; color: inherit; background: transparent; border: 0; border-bottom: 1px solid #4b3b2e; text-align: left; }
.news-row:hover, .guide-row:hover { background: #34281e; }
.news-index, .guide-number { color: #b79c60; font: 16px Georgia, serif; }
.news-row-body, .guide-body { display: flex; flex: 1; flex-direction: column; gap: 5px; min-width: 0; }
.news-row-body small, .guide-body small { color: #c6a967; font-size: 10px; }
.news-row-body strong, .guide-body strong { color: #e9ebe2; font-size: 14px; line-height: 1.45; }
.news-row-body > span, .guide-body > span { color: #b5a593; font-size: 10px; line-height: 1.55; }
.news-row-body > span, .guide-body > span, .gear-summary, .explore-summary { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.row-arrow { margin-left: auto; color: #c0a870; font-size: 13px; }
/* 「新/new」每日更新角标（方案 B）：红金渐变 + 呼吸光晕，与导航 HOT 角标同语言；发布当天显示，次日消失 */
.badge-new { display: inline-block; margin-right: 9px; padding: 2px 8px 1px; color: #fff; background: linear-gradient(135deg, #ff7043, #d63031); border-radius: 3px; font-size: 10px; font-weight: 800; letter-spacing: .14em; line-height: 1.5; vertical-align: 2px; box-shadow: 0 0 8px #ff704355; animation: badge-new-pulse 2.6s ease-in-out infinite; }
@keyframes badge-new-pulse { 0%, 100% { box-shadow: 0 0 5px #ff704340; } 50% { box-shadow: 0 0 11px #ff704380; } }
@media (prefers-reduced-motion: reduce) { .badge-new { animation: none; } }
@media (prefers-reduced-motion: reduce) { html.has-js .lead-slide { transition: none; } }
/* 方案 B：最近更新书架行入场错峰浮现（html.has-js 且 news-carousel.js 观察到滚入视口
   才 arm+play；无 IO 支持时不 arm，行保持常显）+ 悬停整行右移 4px 微反馈 */
html.has-js .news-rail.is-armed .news-row { opacity: 0; }
html.has-js .news-rail.is-armed .news-row.play { animation: rail-row-in .5s ease forwards; }
html.has-js .news-rail.is-armed .news-row.play:nth-child(2) { animation-delay: .1s; }
html.has-js .news-rail.is-armed .news-row.play:nth-child(3) { animation-delay: .2s; }
html.has-js .news-rail.is-armed .news-row.play:nth-child(4) { animation-delay: .3s; }
html.has-js .news-rail.is-armed .news-row.play:nth-child(5) { animation-delay: .4s; }
@keyframes rail-row-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
html.has-js .news-rail .news-row { transition: background .25s ease, transform .25s ease; }
html.has-js .news-rail .news-row:hover { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
  html.has-js .news-rail.is-armed .news-row { opacity: 1; animation: none; }
  html.has-js .news-rail .news-row:hover { transform: none; }
}

.focus-section { background: #261f19; border-block: 1px solid #4d3d2f; }
.focus-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .95fr); gap: 52px; }
.guide-list { border-top: 1px solid #a98f59; }
.guide-row { display: flex; align-items: flex-start; gap: 24px; width: 100%; min-height: 120px; padding: 21px 8px 19px 2px; color: inherit; background: transparent; border: 0; border-bottom: 1px solid #584432; text-align: left; }
.guide-number { width: 32px; flex: none; font-size: 22px; }
.guide-body { gap: 9px; }
.guide-body strong { font-size: 18px; }
.guide-body > span { font-size: 11px; }
.method-panel { padding: 27px 30px 22px; background: #382b20; border: 1px solid #796043; }
.method-label { color: #ddbe79; font-size: 10px; letter-spacing: .08em; }
.method-panel h3 { margin: 16px 0 23px; font-size: 26px; line-height: 1.4; }
.method-panel ul { list-style: none; margin: 0 0 24px; padding: 0; }
.method-panel li { display: flex; gap: 16px; padding: 12px 0; border-top: 1px solid #69513b; }
.method-panel li > span { color: #d9bd79; font: 17px Georgia, serif; }
.method-panel li div { display: flex; flex-direction: column; gap: 5px; }
.method-panel li strong { font-size: 12px; }
.method-panel li small { color: #c0af98; font-size: 10px; line-height: 1.5; }
.method-panel > a { color: #e5c884; font-size: 11px; font-weight: 700; }
.method-panel > a span { margin-left: 8px; }

.gear-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 36px; }
.gear-editorial { display: flex; flex-direction: column; align-items: flex-start; min-height: 306px; padding: 26px 29px; background: radial-gradient(circle at 78% 24%, #95734236, transparent 43%), linear-gradient(140deg, #403021, #2b2118); border: 1px solid #6b674a; }
.gear-overline { color: #d9be7c; font: 10px Georgia, serif; letter-spacing: .14em; }
.gear-editorial h3 { margin: 12px 0 18px; font-size: 27px; line-height: 1.38; }
.gear-editorial p { max-width: 350px; color: #c4b5a2; font-size: 11px; line-height: 1.9; }
.gear-editorial a { margin-top: auto; color: #e5c887; font-size: 11px; font-weight: 700; }
.gear-editorial a span { margin-left: 8px; }
.gear-stories { border-top: 1px solid #a98f59; }
.gear-row { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-height: 153px; padding: 19px 4px; color: inherit; background: transparent; border: 0; border-bottom: 1px solid #4b3b2e; text-align: left; }
.gear-row:hover { background: #2b221b; }
.gear-tag { color: #cfb372; font-size: 10px; }
.gear-row strong { margin: 8px 0 6px; font-size: 17px; }
.gear-summary { color: #b8a792; font-size: 11px; line-height: 1.6; }
.gear-arrow { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; color: #d7b87a; font-size: 10px; }

.explore-section { background: #231c17; border-block: 1px solid #4b3b2e; }
.explore-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.explore-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 228px; padding: 24px 27px; color: inherit; background: #31261e; border: 1px solid #66503b; text-align: left; }
.explore-card:nth-child(2) { background: #35291f; }
.explore-card:hover { border-color: #c4aa70; background: #413023; }
.explore-number { color: #8f9e8e; font: 10px Georgia, serif; letter-spacing: .12em; }
.explore-category { margin-top: 0; color: #d5b674; font-size: 10px; }
.explore-card strong { margin: 8px 0 8px; font-size: 18px; line-height: 1.45; }
.explore-summary { color: #c0b09c; font-size: 11px; line-height: 1.7; }
.explore-arrow { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 17px; color: #dfc181; font-size: 11px; font-weight: 700; }

.closing { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-block: 57px; }
.closing h2 { margin: 0 0 8px; font-size: 23px; }
.closing p:last-child { margin: 0; color: #b5a28c; font-size: 11px; line-height: 1.7; }
.site-footer { background: #201a15; border-top: 1px solid #554535; }
.footer-main { display: flex; justify-content: space-between; gap: 30px; padding-block: 31px; }
.footer-main strong { font: bold 19px Georgia, serif; }
.footer-main p { color: #b9a68f; font-size: 11px; margin: 8px 0 0; }
.footer-main nav { display: flex; flex-wrap: wrap; align-items: center; gap: 23px; color: #c2ccbd; font-size: 11px; }
.footer-main nav a:hover { color: #dfc486; }
.footer-legal { display: flex; justify-content: space-between; gap: 20px; padding-block: 15px; color: #a4927d; border-top: 1px solid #4c3b2c; font-size: 9px; line-height: 1.6; }
.footer-legal a { flex: none; color: #b6a474; }

.search-dialog, .story-dialog { width: min(630px, calc(100% - 28px)); max-height: min(82vh, 720px); margin: auto; padding: 0; color: #e9e8de; background: #2b211a; border: 1px solid #927e56; box-shadow: 0 25px 80px #000b; }
.search-dialog::backdrop, .story-dialog::backdrop { background: #100b07bf; backdrop-filter: blur(3px); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 23px 10px; }
.dialog-head h2 { margin: 0; font-size: 18px; }
.dialog-head > span { color: #d6b974; font-size: 11px; }
.dialog-head button { color: #dce1d6; background: transparent; border: 0; font-size: 25px; line-height: 1; }
.search-field { display: flex; align-items: center; gap: 9px; height: 43px; margin: 8px 23px 0; padding-inline: 12px; background: #1e1711; border: 1px solid #70583e; }
.search-field span { color: #d7b977; font: 23px Georgia, serif; }
.search-field input { width: 100%; color: #f2f3ed; background: transparent; border: 0; outline: 0; font-size: 12px; }
/* iOS Safari 聚焦字号 <16px 的输入框会强制放大视口，移动端提到 16px */
@media (max-width: 640px) { .search-field input { font-size: 16px; } }
.search-dialog > p { margin: 10px 23px; color: #899987; font-size: 10px; }
.search-results { max-height: 440px; overflow: auto; padding: 0 23px 22px; }
.search-result { display: flex; align-items: center; gap: 13px; width: 100%; padding: 13px 8px; color: inherit; background: transparent; border: 0; border-bottom: 1px solid #594430; text-align: left; }
.search-result:hover { background: #2b3a2b; }
.search-result span { width: 65px; flex: none; color: #d4b675; font-size: 10px; }
.search-result strong { font-size: 12px; font-weight: 600; }
.search-result .wow-chevron { width: 15px; margin-left: auto; }
.search-empty { color: #a4b1a0; font-size: 12px; }
.story-dialog-body { padding: 8px 28px 27px; }
.preview-label { color: #a79d7c; font-size: 10px; }
.story-dialog h2 { margin: 14px 0 10px; font-size: 25px; line-height: 1.45; }
.story-dialog-body > p { color: #adbbab; font-size: 12px; line-height: 1.8; }
.preview-points { margin: 20px 0; border-top: 1px solid #53604f; }
.preview-point { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid #445142; }
.preview-point span { color: #d5b675; font: 16px Georgia, serif; }
.preview-point p { margin: 0; color: #d1d9cb; font-size: 11px; line-height: 1.7; }
.preview-note { color: #829282 !important; font-size: 10px !important; }

@media (max-width: 1060px) {
  .page-width { width: min(100% - 56px, 1200px); }
  .header-inner { gap: 20px; }
  .main-nav { gap: 20px; margin-left: 0; }
  .focus-grid { gap: 25px; }
  .topic-inner > * { padding-inline: 10px; }
  .topic-inner a { font-size: 10px; }
}
@media (max-width: 820px) {
  .header-inner { flex-wrap: wrap; gap: 0; padding-top: 8px; }
  .main-nav { order: 3; width: 100%; min-height: 42px; justify-content: space-between; }
  .main-nav a { min-height: 42px; }
  .header-actions { margin-left: auto; }
  .topic-inner { flex-wrap: wrap; padding-block: 8px; }
  .topic-inner > * { padding-block: 5px; }
  .news-grid, .focus-grid, .gear-layout { grid-template-columns: 1fr; }
  .method-panel { max-width: none; }
}
@media (max-width: 600px) {
  .page-width { width: calc(100% - 36px); }
  .notice-bar { font-size: 9px; }
  .header-inner { min-height: 64px; padding: 9px 0; flex-wrap: nowrap; }
  .brandmark { width: auto; height: 34px; }
  .brand-name strong { font-size: 16px; }
  .brand-name small { font-size: 8px; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 33px; height: 33px; margin-left: auto; color: #d7b977; background: transparent; border: 1px solid #62715e; }
  .menu-toggle span { display: block; width: 15px; height: 1px; background: currentColor; }
  .main-nav { display: none; position: absolute; top: 100%; right: 0; left: 0; width: auto; height: auto; padding: 9px 18px 15px; background: #261d16; border-bottom: 1px solid #7d704d; }
  .main-nav.open { display: grid; grid-template-columns: 1fr 1fr; }
  .main-nav a { height: 40px; }
  .header-actions { margin-left: 8px; }
  .search-trigger { width: 33px; height: 33px; justify-content: center; padding: 0; }
  .search-trigger span:last-child, .sim-link { display: none; }
  .hero { min-height: 480px; }
  .hero-content { min-height: 480px; padding-block: 38px 54px; }
  .hero-slide--stormwind { background-position: 58% center; }
  .hero-slide--orgrimmar { background-position: 50% center; }
  .hero-slide--ashenvale-night { background-position: 55% center; }
  .hero-slide--barrens { background-position: 50% center; }
  .hero-slide--felwood { background-position: 50% center; }
  .hero-slide--forever-keyart { background-position: 38% center; }
  .hero-slide--skyborne { background-position: 50% center; }
  .hero-slide--dustwallow { background-position: 45% center; }
  .hero-slide--darkshore { background-position: 50% center; }
  .hero-slide--forever-camp { background-position: 45% center; }
  .hero-slide--forever-mounts { background-position: 50% center; }
  .hero-overlay { background: linear-gradient(90deg, #1b120dec, #1b120d95 68%, #1b120d5e), linear-gradient(0deg, #191511d1, transparent 40%); }
  .hero-copy { margin-top: -10px; }
  .eyebrow { font-size: 8px; letter-spacing: .1em; }
  .hero h1 { font-size: 36px; line-height: 1.4; margin-block: 20px 13px; }
  .hero-deck { max-width: 360px; font-size: 13px; }
  .hero-deck br { display: none; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .button { min-width: 193px; }
  .hero-caption { font-size: 8px; }
  .topic-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding-block: 7px; }
  .topic-label { grid-column: 1 / -1; }
  .topic-inner > * { padding: 7px 0; border: 0; }
  .topic-inner a { font-size: 9px; }
  .section { padding-block: 57px; }
  .section-heading { align-items: flex-start; margin-bottom: 25px; }
  .section-heading h2 { font-size: 23px; }
  .section-description { font-size: 11px; }
  .section-status, .section-action { display: none; }
  .lead-slide { grid-template-columns: 1fr; }
  .lead-image { min-height: 175px; }
  .lead-dots { right: 15px; bottom: auto; top: 152px; }
  .lead-content { min-height: 240px; padding: 22px 21px; }
  .lead-content h3 { margin-top: 17px; font-size: 20px; }
  .news-grid { gap: 29px; }
  .news-row { gap: 11px; }
  .news-row-body strong { font-size: 13px; }
  .guide-row { gap: 12px; min-height: 116px; }
  .guide-number { width: 25px; font-size: 17px; }
  .guide-body strong { font-size: 15px; }
  .guide-body > span { font-size: 10px; }
  .method-panel { padding: 22px; }
  .gear-editorial { min-height: 270px; }
  .gear-editorial h3 { font-size: 24px; }
  .explore-grid { grid-template-columns: 1fr; }
  .explore-card { min-height: 211px; padding: 22px; }
  .closing { align-items: flex-start; flex-direction: column; padding-block: 48px; }
  .closing h2 { font-size: 20px; }
  .footer-main, .footer-legal { flex-direction: column; }
  .footer-main nav { gap: 17px; }
  .footer-legal { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { :root { scroll-behavior: auto; } }

/* Homepage talent planner: the engine/data live in the generated WoWSims bundle. */
.header-inner { gap: 24px; }
.main-nav { gap: 22px; margin-left: 0; }
#talents { scroll-margin-top: 24px; }
/* 天赋页签视图（www/site.js 按 hash 挂类）：只留天赋区块，导航点击=页签切换而非长滚动 */
body.view-talents #main > :not(#talents) { display: none; }
body.view-talents .main-nav a[href$='#talents'] { color: #e4ca8b; border-color: #c8a968; }
.talent-workbench { border: 1px solid #59654d; background: #171f19; }
.talent-workbench > label[for="talent-version"] { display: block; margin: 16px 16px 6px; font-size: 12px; color: #d8c592; }
#talent-version { max-width: calc(100% - 32px); margin: 0 16px; padding: 8px 12px; border: 1px solid #59654d; border-radius: 4px; background: #202b23; color: #e9e8de; font: inherit; }
#talent-snapshot-status { margin: 8px 16px 16px; }
.build-migration { margin: 24px 0; padding: 20px; border: 1px solid #59654d; background: #171f19; }
.build-migration h2 { margin-top: 0; color: #e4c981; font-size: 20px; }
.build-migration p, .build-migration li { line-height: 1.8; }
.build-migration li + li { margin-top: 8px; }
.build-migration details { margin: 12px 0; }
.talent-classes { display: flex; flex-wrap: wrap; padding: 12px 18px; gap: 6px; background: #20291f; border-bottom: 1px solid #45523f; }
.talent-classes button { flex: 1; min-width: 75px; padding: 12px 8px; border: 1px solid transparent; background: transparent; color: #a4b09f; font-size: 12px; }
.talent-classes button::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 8px; border-radius: 50%; background: var(--class-color); }
/* 官方职业图标加载成功后隐藏色点；失败时色点保留（纯文字回退）。 */
.talent-classes button.has-icon::before { display: none; }
.talent-classes button .class-icon { width: 20px; height: 20px; margin-right: 7px; vertical-align: -5px; border-radius: 4px; background: #10160f; box-shadow: 0 0 0 1px #45523f, 0 1px 3px #0008; }
.talent-classes button:hover, .talent-classes button[aria-pressed='true'] { color: var(--class-color); border-color: #687559; background: #101810; }
.talent-toolbar { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 24px 24px 12px; }
.talent-toolbar > div:first-child { display: flex; flex-direction: column; gap: 9px; }
.talent-build-label { color: #e4cb90; font-size: 11px; letter-spacing: .1em; }
#talent-summary { font-size: 18px; }
.talent-actions { display: flex; align-items: center; gap: 10px; }
.talent-actions button, .talent-code button { padding: 9px 14px; color: #e0c589; background: #2c3528; border: 1px solid #6b7356; font-size: 11px; white-space: nowrap; }
.talent-actions button:hover, .talent-code button:hover { background: #404b34; }
.talent-actions button:disabled { opacity: .35; cursor: not-allowed; }
#talent-export { color: #182015; background: #d9bb78; border-color: #d9bb78; }
.talent-help { margin: 0 24px 20px; color: #95a38f; font-size: 11px; line-height: 1.8; }
.talent-trees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0 24px; }
.talent-tree { min-width: 0; border: 1px solid #43513e; background: #101810; }
.talent-tree-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 14px 16px; }
.talent-tree-head h3 { margin: 0; font-size: 16px; }
.talent-tree-head small { color: #8e9e88; font: 11px Georgia, serif; }
.talent-tree-head strong { margin-left: auto; color: #dcc180; font-size: 11px; }
.talent-grid { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(var(--rows), 65px); align-items: center; justify-items: center; padding: 14px 10px 20px; background-position: center; background-size: cover; }
.talent-lines { position: absolute; z-index: -1; top: 14px; left: 10px; width: calc(100% - 20px); height: calc(100% - 34px); overflow: visible; }
.talent-node { position: relative; width: 42px; height: 42px; padding: 0; background: #24372e; color: #a8bbab; border: 2px solid #596452; border-radius: 4px; box-shadow: 0 2px 5px #0009; }
.talent-node img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 2px; opacity: .4; }
.talent-initial { display: grid; place-items: center; height: 100%; font: 12px Georgia, serif; }
.talent-node.is-available { border-color: #749d66; }
.talent-node.is-available img, .talent-node.has-points img { opacity: 1; }
.talent-node.has-points { border-color: #d8b665; }
.talent-node.is-selected, .talent-node:focus-visible { outline: 2px solid #f3dda5; outline-offset: 4px; }
.talent-badge { position: absolute; bottom: -8px; right: -5px; padding: 1px 4px; background: #0a100a; border: 1px solid #687254; color: #c5cdbb; font: 10px/1.3 system-ui, sans-serif; border-radius: 2px; }
.has-points .talent-badge { color: #f0d18a; border-color: #b99b56; }
.talent-detail { display: flex; align-items: center; justify-content: space-between; min-height: 103px; gap: 20px; margin: 20px 24px; padding: 18px 20px; background: #252f23; border-left: 2px solid #c7a55e; }
.talent-detail-kicker { font: 9px Georgia, serif; letter-spacing: .1em; color: #bba873; }
.talent-detail h3 { margin: 6px 0; font-size: 16px; }
/* 详情面板中文名后的英文原名小字对照 */
.talent-detail h3 small { margin-left: 8px; color: #8a9b85; font-size: 11px; font-weight: 400; }
.talent-detail p { margin: 0; color: #a7b39e; font-size: 11px; line-height: 1.8; }
/* 模拟器面板 → 天赋详情页直链（选中天赋时由 talents.js 填 href 并显示） */
.sp-panel-link { display: inline-block; margin-top: 8px; color: #d8c592; font-size: 11px; }
.sp-panel-link:hover { color: #e4c981; }
.sp-panel-link[hidden] { display: none; }
/* 天赋树悬停气泡（www/talent-tooltip.js）：WoW 金边黑底、内衬双线，pointer-events 保留可点链接 */
.talent-bubble { position: fixed; z-index: 60; width: 264px; padding: 8px 11px; border: 1px solid #8a6d3b; border-radius: 4px; background: rgba(8, 6, 3, .97); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .85), 0 6px 18px rgba(0, 0, 0, .65); color: #e9e8de; font-size: 12px; line-height: 1.6; }
.talent-bubble[hidden] { display: none; }
.talent-bubble-title { color: #ffd100; font-size: 13px; font-weight: 600; }
.talent-bubble-title small { margin-left: 7px; color: #a89a7e; font-weight: 400; font-size: 10px; }
.talent-bubble-rank { color: #ffffff; font-variant-numeric: tabular-nums; }
.talent-bubble-meta { margin-top: 2px; color: #b9ab99; font-size: 11px; }
.talent-bubble-prereq { margin-top: 2px; color: #c9a06a; font-size: 11px; }
.talent-bubble-link { display: inline-block; margin-top: 5px; color: #d8c592; font-size: 11px; }
.talent-bubble-link:hover { color: #e4c981; }
#talent-rank { white-space: nowrap; font-size: 12px; }
.talent-code { margin: 0 24px; }
.talent-code label { display: block; margin-bottom: 9px; color: #c3cbbd; font-size: 11px; }
.talent-code label span { margin-left: 10px; color: #8a9b85; font-size: 10px; }
.talent-code > div { display: flex; gap: 10px; }
.talent-code input { min-width: 0; width: 100%; padding: 10px 12px; border: 1px solid #52604b; color: #ebdbb4; background: #0f180f; font: 12px monospace; }
.talent-message { margin: 12px 24px 22px; color: #a6ba96; font-size: 11px; line-height: 1.7; }
.talent-message.is-error { color: #f1ae94; }
/* 本地存档槽位（talent-save.js 填充）：空容器不占版面（无 JS / 引擎未加载时）。 */
.talent-save:empty { display: none; }
.talent-save { margin: 16px 24px 0; padding: 12px 14px; border: 1px dashed #52604b; background: #0d140d; }
.talent-save-title { display: block; margin: 0 0 8px; color: #95a38f; font-size: 10px; }
.talent-save-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.talent-save-name { flex: none; min-width: 34px; color: #c3cbbd; font-size: 11px; font-weight: 600; }
.talent-save-summary { flex: 1; min-width: 0; color: #7f8f79; font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.talent-save-row button { flex: none; padding: 5px 12px; color: #e0c589; background: #2c3528; border: 1px solid #6b7356; font-size: 10px; white-space: nowrap; }
.talent-save-row button:hover { background: #404b34; }
.talent-save-row button:disabled { opacity: .35; cursor: not-allowed; }
@media (max-width: 600px) { .talent-save { margin-inline: 16px; } }
.talent-source { color: #8e9e87; font-size: 10px; line-height: 1.9; margin: 14px 0 0; }
.talent-source a { color: #d2b679; }
@media (max-width: 1100px) and (min-width: 821px) { .header-inner { gap: 14px; } .main-nav { gap: 14px; } .search-trigger span:last-child { display: none; } }
@media (max-width: 820px) { .talent-trees { gap: 9px; padding-inline: 14px; } .talent-tree-head { padding: 12px 9px; } .talent-tree-head small { display: none; } .talent-grid { padding-inline: 4px; } .talent-node { width: 36px; height: 36px; } .talent-lines { left: 4px; width: calc(100% - 8px); } }
@media (max-width: 600px) {
  .header-inner { gap: 0; }
  .talent-classes { padding: 10px; gap: 4px; display: grid; grid-template-columns: repeat(3, 1fr); }
  .talent-classes button { min-width: 0; padding: 10px 4px; font-size: 11px; }
  .talent-toolbar { flex-direction: column; align-items: flex-start; padding: 20px 16px 12px; }
  #talent-summary { font-size: 16px; }
  .talent-help { margin-inline: 16px; }
  .talent-trees { grid-template-columns: 1fr; padding-inline: 16px; gap: 18px; }
  .talent-tree-head { padding: 14px; }
  .talent-tree-head small { display: inline; }
  .talent-node { width: 42px; height: 42px; }
  .talent-grid { grid-template-rows: repeat(var(--rows), 59px); }
  .talent-detail { margin-inline: 16px; padding: 16px; flex-direction: column; align-items: flex-start; }
  .talent-code { margin-inline: 16px; }
  .talent-code label span { display: block; margin: 6px 0 0; }
  .talent-code > div { flex-direction: column; }
  .talent-code input { font-size: 16px; }
  .talent-message { margin-inline: 16px; }
  .talent-actions { flex-wrap: wrap; }
}
.has-icon .talent-initial { visibility: hidden; }
.talent-tree-tabs { display: none; }
@media (max-width: 600px) {
  .talent-tree-tabs { display: flex; margin: 0 16px 12px; border-bottom: 1px solid #43513e; }
  .talent-tree-tabs button { flex: 1; padding: 11px 4px; color: #9eac97; background: transparent; border: 0; border-bottom: 2px solid transparent; font-size: 12px; }
  .talent-tree-tabs button[aria-pressed='true'] { color: #e5c584; border-bottom-color: #d3b06d; }
  .talent-tree:not(.mobile-active) { display: none; }
}

/* ===== 天赋板块 · 种族天赋 ===== */
.race-block { margin-top: 16px; padding: 16px 18px; border: 1px solid #584432; border-radius: 12px; background: #2a211a; }
.race-block-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.race-block-head h3 { margin: 0; color: #f2f3ec; font-size: 16px; }
.race-kicker { color: #c6a967; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; }
.race-block-head small { color: #b5a593; font-size: 11px; }
.race-classes { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 10px; }
.race-classes button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 14px; color: #c9bdac; background: #2b221b; border: 1px solid #584432; border-radius: 999px; font-size: 12px; font-weight: 600; cursor: pointer; }
.race-classes button .race-icon { width: 17px; height: 17px; border-radius: 50%; background: #10160f; box-shadow: 0 0 0 1px #ffffff26; }
.race-classes button .faction-icon { width: auto; height: 11px; opacity: .85; }
.race-classes button:hover { background: #31261e; }
.race-classes button[aria-pressed='true'] { color: #16200f; background: #d8c47c; border-color: #d8c47c; }
.race-traits { display: grid; gap: 6px; }
.race-trait { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 9px 12px; background: #2b221b; border: 1px solid #4b3b2e; border-radius: 8px; }
.race-trait-name { display: flex; align-items: baseline; gap: 8px; }
.race-trait-name .trait-icon { align-self: center; width: 20px; height: 20px; border-radius: 3px; background: #10160f; box-shadow: 0 0 0 1px #ffffff1f; }
.race-trait-name b { color: #d8c47c; font-size: 12px; }
.race-trait-name span { color: #e9ebe2; font-size: 13px; font-weight: 600; }
.race-trait-name small { color: #b5a593; font-size: 11px; }
.race-trait-side { display: flex; align-items: baseline; gap: 12px; }
.race-trait-side a { color: #e5c584; font-size: 12px; white-space: nowrap; }
.race-trait-note { color: #b5a593; font-size: 12px; }
.race-trait-foot { margin: 8px 0 0; color: #ae9c85; font-size: 11px; }
@media (max-width: 600px) {
  .race-trait { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ===== 服务端渲染的列表页与文章详情页 ===== */
.section-empty { margin: 10px 0; padding: 26px 20px; border: 1px dashed #584432; color: #b5a593; font-size: 13px; text-align: center; }

.list-section { padding-top: 42px; padding-bottom: 64px; }
.list-search { display: flex; gap: 10px; margin: 18px 0 14px; }
.list-search input { flex: 1; padding: 10px 14px; color: #e9ebe2; background: #2a211a; border: 1px solid #584432; border-radius: 8px; }
.list-search input::placeholder { color: #ae9c85; }
.list-search button { padding: 10px 20px; color: #16200f; background: #d8c47c; border: 0; border-radius: 8px; font-weight: 700; cursor: pointer; }
.list-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.list-filters a { padding: 7px 14px; border: 1px solid #584432; border-radius: 999px; color: #c9bdac; font-size: 12px; font-weight: 600; }
.list-filters a[aria-current='true'] { color: #16200f; background: #d8c47c; border-color: #d8c47c; }
.list-results { border-top: 1px solid #4b3b2e; }
.list-row { min-height: 88px; padding: 16px 2px; }
.list-pagination { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; color: #b5a593; font-size: 13px; }
.list-pagination a { color: #d8c47c; font-weight: 600; }

.article-page { max-width: 860px; margin: 0 auto; padding-top: 42px; padding-bottom: 64px; }
.article-breadcrumb { margin-bottom: 18px; color: #b5a593; font-size: 12px; }
.article-breadcrumb a { color: #c9bdac; }
.article-breadcrumb a:hover { color: #d8c47c; }
.article-language-note { display: inline-block; margin: 0 0 14px; padding: 6px 10px; border: 1px solid #465443; color: #cdd7c6; background: #1b241b; font-size: 12px; }
.article-head h1 { margin: 0 0 12px; font-size: 30px; line-height: 1.35; color: #f2f3ec; }
.article-summary { margin: 0 0 14px; color: #c9bdac; font-size: 16px; line-height: 1.7; }
.article-meta { display: flex; flex-wrap: wrap; gap: 14px; padding-bottom: 18px; border-bottom: 1px solid #4b3b2e; color: #b5a593; font-size: 12px; }
.article-cover { display: block; width: 100%; margin: 22px 0 8px; border-radius: 12px; }
.article-rights { margin: 0 0 6px; color: #ae9c85; font-size: 11px; }
.article-toc { margin-top: 22px; padding: 14px 16px; background: #241d16; border: 1px solid #4b3b2e; border-radius: 12px; }
.article-toc strong { display: block; margin-bottom: 10px; color: #c6a967; font-size: 12px; letter-spacing: 0.04em; }
.article-toc-links { display: flex; flex-wrap: wrap; gap: 8px; }
.article-toc-links a { padding: 6px 12px; background: #2a211a; border: 1px solid #584432; border-radius: 999px; color: #c9bdac; font-size: 13px; text-decoration: none; }
.article-toc-links a:hover { border-color: #d8c47c; color: #e5c584; }
.article-body h2, .article-body h3 { scroll-margin-top: 16px; }
.article-body { padding-top: 24px; color: #e2d6c4; font-size: 16px; line-height: 1.95; }
.article-body h2, .article-body h3, .article-body h4 { margin: 28px 0 12px; color: #f2f3ec; line-height: 1.4; }
.article-body h2 { font-size: 22px; }
.article-body h3 { font-size: 18px; }
.article-body h4 { font-size: 15px; }
.article-body p { margin: 0 0 14px; }
.article-body ul, .article-body ol { margin: 0 0 14px; padding-left: 22px; }
.article-body li { margin-bottom: 6px; }
.article-body a { color: #e5c584; text-decoration: underline; text-underline-offset: 3px; }
.article-body code { padding: 2px 6px; background: #2a211a; border: 1px solid #584432; border-radius: 5px; font-size: 13px; }
.article-body img { display: block; max-width: 100%; margin: 16px auto; border-radius: 10px; }
.article-footer { margin-top: 34px; padding-top: 18px; border-top: 1px solid #4b3b2e; display: flex; flex-direction: column; gap: 12px; }
.article-evidence { padding: 14px 16px; background: #2a211a; border: 1px solid #584432; border-radius: 10px; }
.article-evidence summary { cursor: pointer; display: block; margin-bottom: 6px; color: #c6a967; font-size: 12px; }
.article-evidence p { margin: 0; color: #c9bdac; font-size: 13px; line-height: 1.7; }
.article-note { margin: 0; color: #ae9c85; font-size: 11px; }

@media (max-width: 600px) {
  .article-page { padding-top: 28px; }
  .article-head h1 { font-size: 24px; }
  .article-meta { gap: 8px; }
}

/* 文章正文：表格与引用块（受限 Markdown 白名单扩展） */
.article-body table { width: 100%; margin: 0 0 16px; border-collapse: collapse; font-size: 13.5px; line-height: 1.6; }
.article-body th, .article-body td { border: 1px solid #4b3b2e; padding: 7px 10px; text-align: left; vertical-align: top; }
.article-body thead th { background: #2a211a; color: #f2f3ec; font-weight: 600; }
.article-body tbody tr:nth-child(even) { background: rgba(42, 33, 26, 0.5); }
.article-body blockquote { margin: 0 0 16px; padding: 10px 16px; border-left: 3px solid #d8c47c; background: #2a211a; border-radius: 0 8px 8px 0; color: #c9bdac; }
.article-body blockquote p { margin: 0 0 8px; }
.article-body blockquote p:last-child { margin-bottom: 0; }

@media (max-width: 600px) {
  .article-body table { display: block; overflow-x: auto; font-size: 12.5px; }
}

/* 首页文章总览 banner：洛丹伦官方游戏画面，整块可点直达 /articles */
.articles-banner { position: relative; display: flex; align-items: center; min-height: 250px; overflow: hidden; border: 1px solid #554535; border-radius: 14px; background: #101711; }
.articles-banner-image { position: absolute; inset: 0; background: url('./assets/official-lordaeron.jpg') center 58% / cover no-repeat; }
.articles-banner-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, #1b120df0 0%, #1b120dc2 32%, #1b120d3b 70%, #1b120d1f 100%); }
.articles-banner-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 9px; max-width: 620px; padding: 30px 34px; }
.articles-banner-title { color: #f2f3ec; font-size: 27px; line-height: 1.3; letter-spacing: -.02em; }
.articles-banner-desc { color: #c9cfc2; font-size: 12.5px; line-height: 1.8; }
.articles-banner-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 7px; padding: 9px 14px; color: #192016; background: #d7b96f; border: 1px solid #e9d59c; font-size: 11px; font-weight: 800; white-space: nowrap; transition: background .15s ease; }
.articles-banner:hover .articles-banner-cta, .articles-banner:focus-visible .articles-banner-cta { background: #e7ca83; }
.articles-banner-caption { position: absolute; right: 13px; bottom: 11px; color: #b9bfae; font-size: 9px; text-shadow: 0 1px 5px #000; }
@media (max-width: 600px) {
  .articles-banner { min-height: 208px; }
  .articles-banner-copy { padding: 22px 20px; }
  .articles-banner-title { font-size: 21px; }
}

/* 文章总览页头：与首页 articles-banner 同款画面（h1 在图中，非链接） */
.list-hero { position: relative; display: flex; align-items: flex-end; min-height: 230px; margin-bottom: 30px; overflow: hidden; border: 1px solid #554535; border-radius: 14px; background: #101711; }
.list-hero-image { position: absolute; inset: 0; background: url('./assets/official-lordaeron.jpg') center 58% / cover no-repeat; }
.list-hero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, #1b120df0 0%, #1b120dc2 32%, #1b120d3b 70%, #1b120d1f 100%); }
.list-hero-copy { position: relative; display: flex; flex-direction: column; gap: 9px; max-width: 620px; padding: 28px 34px; }
.list-hero-copy h1 { margin: 0; color: #f2f3ec; font-size: 30px; line-height: 1.3; letter-spacing: -.02em; }
.list-hero-copy .section-description { margin: 0; color: #c9cfc2; }
@media (max-width: 600px) {
  .list-hero { min-height: 190px; }
  .list-hero-copy { padding: 20px; }
  .list-hero-copy h1 { font-size: 23px; }
}

/* Reading surfaces use larger secondary text; talent board density stays unchanged. */
.section-description { font-size: 14px; line-height: 1.9; }
.lead-content p, .news-row-body > span, .guide-body > span, .gear-summary, .explore-summary { font-size: 13px; line-height: 1.8; }
.method-panel li small { font-size: 12px; line-height: 1.7; }
.article-evidence[open] summary { margin-bottom: 12px; }
.talent-source summary { cursor: pointer; color: #cfb581; }
.talent-source[open] summary { margin-bottom: 8px; }

/* ===== 天赋方案库（/builds）与首页推荐方案条带 ===== */
/* 首页 #talents 内的推荐方案条带：对齐工作台绿色调，卡片横排可滚动 */
.talent-build-strip { margin: 0 24px 18px; border: 1px solid #45523f; background: #121a12; }
.talent-build-strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 12px 16px 10px; }
.talent-build-strip-head h3 { margin: 0; color: #e4c981; font-size: 13px; letter-spacing: .04em; }
.talent-build-strip-head a { color: #cfb581; font-size: 11px; white-space: nowrap; }
.talent-build-strip-head a:hover { color: #e9d59c; }
.talent-build-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 0 16px 16px; }
.talent-build-card { display: flex; flex-direction: column; gap: 7px; padding: 13px 14px; border: 1px solid #52604b; background: #18221a; transition: border-color .15s ease, background .15s ease; }
.talent-build-card:hover, .talent-build-card:focus-visible { border-color: #8f9b78; background: #1d2a1e; }
.talent-build-spec { color: #f0f0e4; font-size: 14px; font-weight: 700; }
.talent-build-points { color: #a4b09f; font: 12px monospace; letter-spacing: .06em; }
.talent-build-role { align-self: flex-start; padding: 2px 8px; color: #d7bb78; border: 1px solid #6b7356; font-size: 10px; }
.talent-build-load { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: #e0c589; font-size: 11px; font-weight: 600; }
.talent-build-card:hover .talent-build-load { color: #f4dd9e; }

/* 首页 builds 促销横幅（articles-banner 与 #talents 之间）：无图纯色，金色 CTA */
.builds-banner { display: flex; align-items: center; border: 1px solid #6b5c3d; border-radius: 14px; background: linear-gradient(90deg, #241d13 0%, #191511 70%); transition: border-color .15s ease; }
.builds-banner:hover { border-color: #a08a58; }
.builds-banner-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 26px 34px; }
.builds-banner-title { color: #f2f3ec; font-size: 22px; letter-spacing: -.02em; }
.builds-banner-desc { color: #c9cfc2; font-size: 12.5px; line-height: 1.8; }
.builds-banner-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 5px; padding: 9px 14px; color: #192016; background: #d7b96f; border: 1px solid #e9d59c; font-size: 11px; font-weight: 800; white-space: nowrap; }
.builds-banner:hover .builds-banner-cta { background: #e7ca83; }

/* 开服清单促销横幅（上线前一周日期门控渲染，server/checklist.mjs renderLaunchBanner） */
.checklist-banner { display: flex; align-items: center; border: 1px solid #a98f59; border-radius: 14px; background: linear-gradient(90deg, #2a2115 0%, #241d16 55%, #1b1610 100%); padding: 22px 30px; }
.checklist-banner-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.checklist-banner-title { color: #e9d59c; font-size: 21px; line-height: 1.35; letter-spacing: -.01em; }
.checklist-banner-desc { color: #c9cfc2; font-size: 12px; line-height: 1.7; }
.checklist-banner-cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 5px; padding: 8px 13px; color: #192016; background: #d7b96f; border: 1px solid #e9d59c; font-size: 11px; font-weight: 800; white-space: nowrap; }
.checklist-banner:hover .checklist-banner-cta, .checklist-banner:focus-visible .checklist-banner-cta { background: #e7ca83; }
@media (max-width: 640px) { .checklist-banner { padding: 16px 18px; } .checklist-banner-title { font-size: 17px; } }

/* /builds 系列页 */
.builds-hub-head { margin-bottom: 26px; }
.builds-hub-head h1 { margin-bottom: 10px; color: #f2f3ec; font-size: 30px; letter-spacing: -.02em; }
.builds-hub .article-breadcrumb { margin-bottom: 16px; }
.builds-class-block { margin-bottom: 30px; }
.builds-class-block h2 { margin-bottom: 12px; padding-bottom: 8px; color: #e4c981; border-bottom: 1px solid #3a332b; font-size: 19px; }
.build-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.build-card { display: flex; flex-direction: column; gap: 9px; padding: 17px 18px; border: 1px solid #454033; border-radius: 12px; background: #1e1913; transition: border-color .15s ease, background .15s ease; }
.build-card:hover, .build-card:focus-visible { border-color: #907c51; background: #262017; }
.build-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.build-card-head strong { color: #f0f0e4; font-size: 15.5px; }
.build-card-points { color: #a49b8a; font: 12px monospace; letter-spacing: .06em; }
.build-card-role { justify-self: start; align-self: flex-start; padding: 2px 9px; color: #d7bb78; border: 1px solid #6b5c3d; font-size: 10.5px; }
.build-card-note { color: #b9b2a2; font-size: 12px; line-height: 1.75; }
.build-card-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; color: #e0c589; font-size: 11px; font-weight: 600; }
.build-card:hover .build-card-cta { color: #f4dd9e; }

/* 系详情页 */
.build-spec .article-breadcrumb { margin-bottom: 18px; }
.build-head h1 { margin-bottom: 12px; color: #f2f3ec; font-size: 28px; letter-spacing: -.02em; }
.build-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; color: #b9b2a2; font-size: 12px; }
.build-note { max-width: 760px; color: #c9cfc2; font-size: 13.5px; line-height: 1.85; }
.build-stale { padding: 12px 16px; border: 1px solid #8a5a3d; border-radius: 10px; color: #e8b98a; background: #2a2018; font-size: 12.5px; line-height: 1.7; }
.build-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 20px 0 26px; }
.build-points { margin-bottom: 26px; }
.build-points h2, .build-talents h2 { margin-bottom: 14px; color: #e4c981; font-size: 18px; }
.build-points-row { display: flex; flex-wrap: wrap; gap: 12px; }
.build-tree { display: flex; align-items: baseline; gap: 10px; min-width: 150px; padding: 13px 17px; border: 1px solid #454033; border-radius: 10px; background: #1e1913; }
.build-tree strong { color: #f0f0e4; font-size: 14px; }
.build-tree span { color: #d7bb78; font: bold 17px monospace; }
.build-tree-lists { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.build-tree-list { padding: 15px 17px; border: 1px solid #454033; border-radius: 10px; background: #1e1913; }
.build-tree-list h3 { display: flex; justify-content: space-between; margin-bottom: 10px; color: #e9e8de; font-size: 14px; }
.build-tree-list h3 span { color: #d7bb78; font: bold 13px monospace; }
.build-tree-list ul { margin: 0; padding: 0; list-style: none; }
.build-tree-list li { padding: 4.5px 0; border-bottom: 1px dashed #332e26; color: #c9c2b2; font-size: 12.5px; }
.build-tree-list li:last-child { border-bottom: 0; }
.build-datanote { margin: 18px 0 26px; color: #8a9b85; font-size: 11.5px; }
.build-related { margin-bottom: 30px; }
.build-related h2 { margin-bottom: 14px; color: #e4c981; font-size: 18px; }
/* FAQ 块已集中到「酒馆问答」/faq；各页仅保留这条引导链接（faq.mjs faqMoreHtml）。 */
.faq-more { margin: 26px 0 0; font-size: 13px; }
.faq-more a { color: #d8c592; }
.faq-more a:hover { color: #e4c981; }

@media (max-width: 860px) {
  .build-cards, .build-tree-lists { grid-template-columns: 1fr; }
  .builds-hub-head h1 { font-size: 24px; }
  .build-head h1 { font-size: 22px; }
}
@media (max-width: 600px) {
  .talent-build-strip { margin-inline: 12px; }
  .talent-build-cards { grid-template-columns: 1fr; padding-inline: 10px; }
  .builds-banner-copy { padding: 20px; }
  .builds-banner-title { font-size: 18px; }
}

@media (max-width: 380px) {
  .brand { gap: 7px; }
  .brandmark { width: auto; height: 30px; }
  .brand-name strong { font-size: 14px; }
  .header-actions { gap: 6px; }
  .lang-toggle { padding-inline: 7px; }
}

/* 方案页树落位可视化（www/build-trees.js 只读渲染，几何口径同 .talent-grid） */
.build-viz { margin-top: 26px; }
.build-viz-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 14px; }
.btree { border: 1px solid #554535; background: #201a15; border-radius: 10px; overflow: hidden; }
.btree-head { display: flex; align-items: baseline; gap: 10px; padding: 12px 16px; border-bottom: 1px solid #37342c; }
.btree-head h3 { margin: 0; font-size: 15px; color: #e9e8de; }
.btree-points { margin-left: auto; color: #e4c981; font-size: 18px; font-variant-numeric: tabular-nums; }
.btree-open { font-size: 12px; color: #d8c592; border: 1px solid #554535; border-radius: 999px; padding: 3px 10px; }
.btree-open:hover { color: #e4c981; border-color: #a98f59; }
.btree-grid { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(var(--rows), 56px); align-items: center; justify-items: center; padding: 12px 8px 18px; background-position: center; background-size: cover; }
.btree-lines { position: absolute; z-index: -1; top: 12px; left: 8px; width: calc(100% - 16px); height: calc(100% - 30px); overflow: visible; }
.btree-node { position: relative; width: 40px; height: 40px; padding: 0; background: #24372e; border: 2px solid #596452; border-radius: 4px; box-shadow: 0 2px 5px #0009; cursor: pointer; }
.btree-node img { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 2px; opacity: .35; }
.btree-node.is-taken { border-color: #d8b665; }
.btree-node.is-taken img { opacity: 1; }
.btree-node.is-maxed { box-shadow: 0 0 0 1px #d8b665, 0 2px 6px #000a; }
.btree-node:focus-visible { outline: 2px solid #f3dda5; outline-offset: 3px; }
.btree-fallback { display: grid; place-items: center; height: 100%; font: 12px 'Noto Sans SC', sans-serif; color: #a8bbab; }
.btree-rank { position: absolute; bottom: -8px; right: -5px; padding: 1px 4px; background: #0a100a; border: 1px solid #687254; color: #c5cdbb; font: 10px/1.3 system-ui, sans-serif; border-radius: 2px; }
.is-taken .btree-rank { color: #f0d18a; border-color: #b99b56; }
@media (max-width: 640px) { .btree-grid { grid-template-rows: repeat(var(--rows), 46px); } .btree-node { width: 34px; height: 34px; } .btree-rank { font-size: 9px; } }

/* 升级加点路线：里程碑时间线（builds.mjs buildLeveling 引擎校验序列） */
.build-leveling { margin-bottom: 26px; }
.build-leveling h2 { margin-bottom: 10px; color: #e4c981; font-size: 18px; }
.build-leveling .section-description { margin-bottom: 16px; }
.build-leveling-stages { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.build-leveling-stages li { padding: 14px 16px; border: 1px solid #454033; border-radius: 10px; background: #1e1913; }
.build-leveling-stages li strong { display: block; margin-bottom: 8px; color: #d7bb78; font-size: 13px; }
.build-leveling-stages li p { margin: 0; color: #c9c2b2; font-size: 12px; line-height: 1.85; }
@media (max-width: 960px) { .build-leveling-stages { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .build-leveling-stages { grid-template-columns: 1fr; } }

/* Player discovery and explicit source freshness. */
.global-search { max-width: 620px; margin: 20px 0; }
.global-search label { display:block; margin-bottom:8px; color:#e8d4a6; font-size:14px; }
.global-search > div { display:flex; gap:8px; }
.global-search input[type=search] { min-width:0; width:100%; border:1px solid #806746; border-radius:6px; padding:12px; background:#171410; color:#f4ebdc; font:inherit; }
.global-search button { flex:none; border:1px solid #bd9957; background:#b78e49; color:#171410; padding:10px 22px; border-radius:6px; font:inherit; cursor:pointer; }
.player-shortcuts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; padding-top:22px; padding-bottom:22px; }
.player-shortcuts a,.search-results article,.growth-grid article { border:1px solid #5a4730; border-radius:8px; background:#211b15; padding:18px; }
.player-shortcuts a { text-decoration:none; color:#efdab0; }
.player-shortcuts strong,.player-shortcuts span { display:block; }
.player-shortcuts span { margin-top:6px; color:#bbae96; font-size:13px; }
.version-notice { border-left:3px solid #c29b59; background:#2b2115; color:#e0ceb0; padding:14px 18px; margin:20px 0; font-size:13px; line-height:1.7; }
.version-notice p { margin:4px 0; }
.version-notice a,.search-results a,.search-pages a,.growth-grid a { color:#e8c47d; }
.search-results { display:grid; gap:12px; }
.search-results h2 { font-size:20px; margin:8px 0; }
.search-results p { margin:6px 0; }
.search-results article > span { color:#c1ad87; font-size:12px; }
.search-pages { display:flex; gap:24px; margin-top:24px; }
.growth-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; line-height:1.8; }
.talent-bubble-effect,#talent-effect { color:#ebdcae; line-height:1.7; white-space:pre-line; font-size:13px; }
@media(max-width:700px) { .player-shortcuts { grid-template-columns:repeat(2,minmax(0,1fr)); } .growth-grid { grid-template-columns:1fr; } .global-search button { padding:10px 16px; } }

/* The old discovery archive remains addressable while the interactive map takes over navigation. */
.map-upgrade{padding:18px 0}.map-upgrade p{font-size:12px;opacity:.75;margin:10px 0}

/* Readable, crawlable current talent hierarchy. */
.talent-directory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 24px 0 36px; }
.talent-directory-card { display: grid; gap: 10px; padding: 20px; border: 1px solid #514430; border-radius: 8px; background: #241e17; color: #eee0c2; }
.talent-directory-card strong { color: #e4c981; font-size: 22px; }
.talent-directory-card span, .talent-directory-card small { color: #c1b49e; font-size: 13px; }
.talent-directory-card:hover { border-color: #cfb477; background: #30271c; text-decoration: none; }
.talent-directory-trees { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
.talent-directory-tree ul { padding: 0; list-style: none; }
.talent-directory-tree li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 5px 10px; padding: 10px 0; border-bottom: 1px solid #413827; }
.talent-directory-tree li a { color: #e4c981; }
.talent-directory-tree li span { color: #b2a690; font-size: 12px; }
@media (max-width: 760px) { .talent-directory-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .talent-directory-trees { grid-template-columns: 1fr; } }
@media (max-width: 380px) { .talent-directory-grid { grid-template-columns: 1fr; } }