/* roulang page: index */
:root {
  --paper: #FBF6F1;
  --card: #FFFCF9;
  --ink: #241820;
  --muted: #5C4A55;
  --plum: #6E2A58;
  --plum-deep: #4E1C3E;
  --rouge: #E36A8C;
  --peach: #F2B089;
  --peach-bg: #F8E6DC;
  --inkband: #2A1824;
  --pine: #3F6B62;
  --line: #E7D9D4;
  --shadow: 0 10px 30px rgba(36,24,32,.08);
  --shadow-hover: 0 16px 36px rgba(36,24,32,.14);
  --radius-lg: 24px;
  --radius: 16px;
  --radius-btn: 14px;
  --radius-input: 12px;
  --grad: linear-gradient(135deg, #6E2A58, #E36A8C, #F2B089);
  --err: #C4846A;
  --max: 1120px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  font-size: 16px;
  line-height: 28px;
}
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--plum); text-decoration: none; }
a:visited { color: var(--plum-deep); }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--pine);
  outline-offset: 2px;
}
h1, h2, h3, p { margin: 0; }
h1 { font-size: 40px; line-height: 48px; font-weight: 700; letter-spacing: 0; }
h2 { font-size: 28px; line-height: 36px; font-weight: 700; }
h3 { font-size: 18px; line-height: 26px; font-weight: 700; }
.container { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
.section { padding: 72px 0; }
.bg-paper { background: var(--paper); }
.bg-peach { background: var(--peach-bg); }
.bg-card { background: #FFF7F2; }
.bg-dark { background: var(--inkband); color: #FBF6F1; }
.kicker { font-size: 13px; line-height: 20px; color: var(--rouge); font-weight: 700; letter-spacing: .04em; }
.bg-dark .kicker { color: var(--peach); }
.lead { margin-top: 14px; color: var(--muted); max-width: 760px; }
.bg-dark .lead { color: #E7D4DC; }
.sub { margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 28px; }
.bg-dark .sub { color: #F2D5C8; }
.promo {
  height: 36px;
  background: var(--grad);
  color: #fff;
  display: flex;
  align-items: center;
}
.promo-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
.promo p { font-size: 13px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo button { color: #fff; background: transparent; border: 0; min-width: 36px; height: 28px; border-radius: 999px; }
.promo button:hover { background: rgba(255,255,255,.16); }
.site-header { position: sticky; top: 0; z-index: 30; background: var(--card); box-shadow: var(--shadow); }
.bar { min-height: 76px; display: flex; align-items: center; gap: 18px; padding: 12px 0; }
.logo { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 0 1 280px; text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo-main { font-size: 15px; line-height: 22px; font-weight: 800; color: var(--ink); }
.logo-sub { font-size: 11px; line-height: 16px; color: var(--muted); }
.mid { flex: 1; display: flex; align-items: center; gap: 14px; min-width: 0; }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a {
  color: var(--ink);
  padding: 8px 10px 10px;
  font-size: 15px;
  line-height: 22px;
  border-radius: 10px;
  text-decoration: none;
}
.nav-links a:visited { color: var(--ink); }
.nav-links a:hover { color: var(--plum); text-decoration: none; }
.nav-links a.active { color: var(--plum); box-shadow: inset 0 -2px 0 var(--plum); }
.search { flex: 1; display: flex; min-width: 0; }
.search input {
  width: 100%;
  height: 44px;
  border-radius: var(--radius-input);
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 0 14px;
}
.search input:hover { border-color: #d8c2bc; }
.tools { display: flex; align-items: center; gap: 8px; }
.icon-btn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--card);
  display: grid;
  place-items: center;
  color: var(--plum);
  text-decoration: none;
}
.icon-btn:visited { color: var(--plum); }
.icon-btn:hover { border-color: var(--plum); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.nav-toggle { display: none; width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--plum); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 16px; height: 2px; background: var(--plum); position: relative; margin: 0 auto; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after { top: 5px; }
.drawer { display: none; }
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  text-decoration: none;
  font-weight: 700;
  transition: .2s ease;
}
.btn:visited { color: #fff; }
.btn-main { background: var(--grad); color: #fff; }
.btn-main:hover { text-decoration: none; filter: saturate(1.2); border-color: var(--plum); color: #fff; }
.btn-main:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--plum); border-color: var(--plum); }
.btn-ghost:visited { color: var(--plum); }
.btn-ghost:hover { text-decoration: none; background: rgba(110,42,88,.06); }
.btn-ghost:active { background: rgba(110,42,88,.12); }
.board-shell { padding: 2px; border-radius: var(--radius-lg); background: var(--grad); box-shadow: var(--shadow); }
.board {
  background: var(--inkband);
  color: #FBF6F1;
  border-radius: 22px;
  padding: 36px;
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 28px;
}
.brand-line { margin-top: 8px; font-size: 13px; line-height: 20px; color: var(--peach); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: center; }
.stat {
  background: #3A2432;
  border-radius: 18px;
  padding: 16px;
  border: 1px solid transparent;
  background-image: linear-gradient(#3A2432, #3A2432), var(--grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
.stat b { display: block; font-size: 28px; line-height: 36px; }
.stat span { display: block; font-size: 13px; line-height: 20px; color: #F2D5C8; }
.stat em { font-style: normal; font-size: 12px; line-height: 18px; color: var(--peach); }
.zone-grid { margin-top: 22px; display: grid; grid-template-columns: 1.45fr .85fr; gap: 18px; }
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px;
  transition: .2s ease;
}
a.card { display: block; color: inherit; text-decoration: none; }
a.card:visited { color: inherit; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); text-decoration: none; }
.card p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 26px; }
.zone-card { min-height: 230px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.zone-no { font-size: 40px; line-height: 48px; color: var(--plum); font-weight: 800; }
.cover {
  aspect-ratio: 16/10;
  border-radius: var(--radius);
  background: var(--grad);
  color: #fff;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 12px;
  font-weight: 700;
  line-height: 26px;
}
.cover small { display: block; font-weight: 500; font-size: 13px; line-height: 20px; opacity: .92; }
.matrix { margin-top: 22px; display: grid; grid-template-columns: repeat(12, 1fr); gap: 18px; }
.span-7 { grid-column: span 7; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-8 { grid-column: span 8; }
.card-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.badge {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 20px;
  font-weight: 700;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge-pine { color: var(--pine); background: #E7F2EF; border-color: #b7d2cb; }
.badge-rouge { color: #8E3050; background: #FDE7EE; border-color: #f3c2d0; }
.badge-plum { color: var(--plum); background: #F6E7F0; border-color: #e3c6d6; }
.badge-peach { color: #8A4E32; background: #FDE8DA; border-color: #f0cbb6; }
.compare { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.compare-col { display: flex; flex-direction: column; gap: 12px; }
.compare-head { padding: 14px 18px; border-radius: 16px; color: #fff; background: #5C4A55; }
.compare-col.good .compare-head { background: var(--grad); }
.row-card { border-radius: 16px; border: 1px solid var(--line); background: var(--card); padding: 14px 16px; box-shadow: var(--shadow); }
.row-card strong { display: block; }
.row-card span { color: var(--muted); font-size: 14px; line-height: 24px; }
.scene-list { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.scene-bar {
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
}
.scene-bar:visited { color: inherit; }
.scene-bar:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); text-decoration: none; }
.scene-bar b { color: var(--plum); }
.scene-bar p { color: var(--muted); font-size: 14px; line-height: 22px; }
.timeline { margin-top: 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.mile { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); position: relative; }
.mile::before { content: ""; position: absolute; left: 16px; right: 16px; top: 0; height: 3px; border-radius: 999px; background: var(--grad); }
.mile em { font-style: normal; color: var(--pine); font-size: 13px; line-height: 20px; font-weight: 700; }
.mile p { margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 24px; }
.news-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-end; }
.more { font-weight: 700; }
.news-item {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.news-item h3 a { color: var(--ink); }
.news-item h3 a:visited { color: var(--plum-deep); }
.meta { margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 20px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.feature {
  margin-top: 22px;
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 18px;
  align-items: center;
  background: var(--card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  padding: 22px;
}
.guard-list { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.guard {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 14px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 16px;
}
.guard i {
  width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center;
  background: #F6E7F0; color: var(--plum); font-style: normal; font-weight: 800;
}
.guard p { color: var(--muted); font-size: 14px; line-height: 24px; }
.pills { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.pill { background: var(--card); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.pill.open { border-radius: 18px; }
.pill button { width: 100%; text-align: left; background: transparent; border: 0; padding: 12px 18px; font-weight: 700; }
.pill button:hover { color: var(--plum); }
.pill .ans { display: none; padding: 0 18px 14px; color: var(--muted); }
.pill.open .ans { display: block; }
.badge-grid { margin-top: 22px; display: grid; grid-template-columns: 1.2fr .8fr .8fr 1.2fr; gap: 14px; }
.badge-card { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 16px; box-shadow: var(--shadow); }
.badge-card p { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 24px; }
.faq-list { margin-top: 22px; display: flex; flex-direction: column; gap: 10px; }
.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.faq-item.open { border-left: 3px solid var(--plum); }
.faq-item button { width: 100%; text-align: left; background: transparent; border: 0; padding: 14px 16px; font-weight: 700; display: flex; justify-content: space-between; gap: 12px; }
.faq-item button:hover { color: var(--plum); }
.faq-item .ans { display: none; padding: 0 16px 14px; color: var(--muted); }
.faq-item.open .ans { display: block; }
.steps { margin-top: 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.step { background: var(--card); border-radius: 18px; border: 1px solid var(--line); padding: 18px; box-shadow: var(--shadow); }
.step b { color: var(--plum); font-size: 13px; line-height: 20px; }
.step p { margin-top: 6px; color: var(--muted); }
.hscroll { margin-top: 22px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 34%); gap: 14px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; }
.hscroll a { scroll-snap-align: start; color: inherit; text-decoration: none; }
.hscroll a:visited { color: inherit; }
.hscroll a:hover { text-decoration: none; }
.form-card { margin-top: 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 22px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 22px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field span { font-size: 13px; line-height: 20px; color: var(--muted); }
.field input, .field textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: var(--radius-input);
  padding: 10px 12px;
  min-height: 44px;
}
.field textarea { min-height: 110px; resize: vertical; }
.field input.is-error, .field textarea.is-error { border-color: var(--err); background: #FBF3EF; }
.form-note { color: var(--muted); font-size: 13px; line-height: 20px; margin-top: 8px; }
.form-msg { margin-top: 10px; font-size: 14px; line-height: 24px; color: var(--pine); min-height: 24px; }
.form-msg.bad { color: #8A4E32; }
.site-footer { background: var(--inkband); color: #F6E7EE; padding: 48px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr .8fr 1fr .8fr; gap: 22px; }
.site-footer a { color: #F2B089; }
.site-footer a:visited { color: #E36A8C; }
.site-footer h2 { font-size: 18px; line-height: 26px; }
.site-footer p, .site-footer li { color: #E7D4DC; font-size: 14px; line-height: 24px; }
.site-footer ul { margin: 10px 0 0; padding: 0; list-style: none; }
.copyright { margin-top: 26px; padding-top: 16px; border-top: 1px solid rgba(231,217,212,.25); font-size: 13px; line-height: 20px; color: #D9C2CC; }
@media (max-width: 1200px) {
  .matrix { grid-template-columns: 1fr 1fr; }
  .span-7, .span-5, .span-4, .span-8 { grid-column: auto; }
}
@media (max-width: 1024px) {
  .mid, .tools .icon-btn, .tools .btn-main { display: none; }
  .nav-toggle { display: inline-grid; place-items: center; }
  .bar { min-height: 64px; }
  .drawer { display: block; background: var(--card); border-top: 1px solid var(--line); }
  .drawer[hidden] { display: none; }
  .drawer-inner { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; padding: 12px 0 18px; display: flex; flex-direction: column; gap: 10px; }
  .drawer a { padding: 10px 4px; font-weight: 700; }
  .board, .zone-grid, .compare, .feature, .form-card, .steps, .badge-grid, .foot-grid { grid-template-columns: 1fr 1fr; }
  .timeline { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .section { padding: 56px 0; }
  .promo p { white-space: nowrap; }
  .board, .zone-grid, .compare, .feature, .form-card, .steps, .badge-grid, .foot-grid, .news-item, .timeline, .form-grid { grid-template-columns: 1fr; }
  .matrix { grid-template-columns: 1fr; }
  .scene-bar { grid-template-columns: 1fr; gap: 6px; }
  .hscroll { grid-auto-columns: 86%; }
  .news-head { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 520px) {
  .container, .promo-inner { width: min(var(--max), calc(100% - 32px)); }
}
@media (max-width: 480px) {
  h1 { font-size: 32px; line-height: 40px; }
  h2 { font-size: 24px; line-height: 32px; }
  body { font-size: 15px; line-height: 26px; }
  .card, .board, .form-card, .feature { padding: 16px; }
  .btn, .btn-main, .btn-ghost { width: 100%; }
  .logo-main { font-size: 13px; line-height: 18px; }
  .stat b { font-size: 24px; line-height: 32px; }
}

/* roulang page: category2 */
:root {
 --paper: #FBF6F1;
 --card: #FFFCF9;
 --ink: #241820;
 --muted: #5C4A55;
 --plum: #6E2A58;
 --plum-deep: #4E1C3E;
 --rouge: #E36A8C;
 --peach: #F2B089;
 --peach-bg: #F8E6DC;
 --inkband: #2A1824;
 --pine: #3F6B62;
 --line: #E7D9D4;
 --shadow: 0 10px 30px rgba(36,24,32,.08);
 --shadow-hover: 0 16px 36px rgba(36,24,32,.14);
 --radius-lg: 24px;
 --radius: 16px;
 --radius-btn: 14px;
 --radius-input: 12px;
 --grad: linear-gradient(135deg, #6E2A58, #E36A8C, #F2B089);
 --err: #C4846A;
 --max: 1120px;
}
/* roulang page: category2 */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 background: var(--paper);
 color: var(--ink);
 font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
 font-size: 16px;
 line-height: 28px;
}
body.lock { overflow: hidden; }
img { max-width: 100%; display: block; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--plum); text-decoration: none; }
a:visited { color: var(--plum-deep); }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
 outline: 2px solid var(--pine);
 outline-offset: 2px;
}
.container { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
.section { padding: 72px 0; }
.bg-paper { background: var(--paper); }
.bg-card { background: #FFF7F2; }
.bg-peach { background: var(--peach-bg); }
.bg-ink { background: var(--inkband); color: #F8EEE8; }
h1 { font-size: 40px; line-height: 48px; font-weight: 800; letter-spacing: 0; }
h2 { font-size: 28px; line-height: 36px; font-weight: 800; }
h3 { font-size: 18px; line-height: 26px; font-weight: 800; }
.lead { margin-top: 14px; color: var(--muted); max-width: 760px; }
.bg-ink .lead, .band-inner .lead { color: #E7D4DC; }
.promo {
 background: var(--grad);
 color: #fff;
 min-height: 36px;
}
.promo-inner {
 min-height: 36px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 12px;
}
.promo p {
 margin: 0;
 font-size: 13px;
 line-height: 20px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}
.promo button {
 color: #fff;
 background: transparent;
 border: 0;
 min-width: 36px;
 height: 28px;
 border-radius: 999px;
}
.promo button:hover { background: rgba(255,255,255,.16); }
.site-header { position: sticky; top: 0; z-index: 30; background: var(--card); box-shadow: var(--shadow); }
.head-bar {
 display: flex;
 align-items: center;
 gap: 12px;
 min-height: 74px;
}
.logo { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 0 1 280px; text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo-main { font-size: 15px; line-height: 22px; font-weight: 800; color: var(--ink); }
.logo-sub { font-size: 11px; line-height: 16px; color: var(--muted); }
.nav-links { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.nav-links a {
 color: var(--ink);
 padding: 8px 10px 10px;
 font-size: 15px;
 line-height: 22px;
 border-radius: 10px;
 text-decoration: none;
}
.nav-links a:visited { color: var(--ink); }
.nav-links a:hover { color: var(--plum); text-decoration: none; }
.nav-links a.active { color: var(--plum); box-shadow: inset 0 -2px 0 var(--plum); }
.search { flex: 1; display: flex; min-width: 160px; }
.search input {
 width: 100%;
 height: 44px;
 border-radius: var(--radius-input);
 border: 1px solid var(--line);
 background: var(--paper);
 padding: 0 14px;
}
.search input:hover { border-color: #d8c2bc; }
.search input.is-error { border-color: var(--err); background: #FBF1EC; }
.head-tools { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.icon-btn {
 width: 44px;
 height: 44px;
 border-radius: 14px;
 border: 1px solid var(--line);
 background: var(--card);
 display: grid;
 place-items: center;
 color: var(--plum);
 text-decoration: none;
 padding: 0;
}
.icon-btn:visited { color: var(--plum); }
.icon-btn:hover { border-color: var(--plum); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.icon-btn:active { transform: translateY(0); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.search-toggle { display: none; }
.nav-toggle {
 display: none;
 width: 44px;
 height: 44px;
 border-radius: 14px;
 border: 1px solid var(--line);
 background: var(--card);
 color: var(--plum);
 place-items: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
 display: block;
 width: 16px;
 height: 2px;
 background: var(--plum);
 position: relative;
}
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after { top: 5px; }
.drawer { display: none; border-top: 1px solid var(--line); background: var(--card); }
.drawer-inner { padding: 16px 0 20px; display: flex; flex-direction: column; gap: 14px; }
.drawer-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 44px;
 padding: 0 16px;
 border-radius: var(--radius-btn);
 border: 1px solid transparent;
 text-decoration: none;
 font-weight: 700;
 transition: .2s ease;
}
.btn:visited { color: #fff; }
.btn-main { background: var(--grad); color: #fff; }
.btn-main:hover { text-decoration: none; filter: saturate(1.2); border-color: var(--plum); color: #fff; }
.btn-main:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--plum); border-color: var(--plum); }
.btn-ghost:visited { color: var(--plum); }
.btn-ghost:hover { text-decoration: none; background: rgba(110,42,88,.06); }
.btn-ghost:active { background: rgba(110,42,88,.12); }
.cat-head { display: grid; grid-template-columns: 1.4fr .8fr; gap: 28px; align-items: end; }
.tag-rail { margin-top: 18px; display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.side-note {
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 background: var(--card);
 box-shadow: var(--shadow);
 padding: 18px;
}
.side-note strong { display: block; font-size: 18px; line-height: 26px; }
.side-note span { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 24px; }
.xl-grid { display: grid; grid-template-columns: 1.35fr .85fr; gap: 18px; margin-top: 22px; }
.card {
 background: var(--card);
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow);
 padding: 22px;
 transition: .2s ease;
}
a.card { display: block; color: inherit; text-decoration: none; }
a.card:visited { color: inherit; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); text-decoration: none; }
.card p { margin-top: 8px; color: var(--muted); font-size: 15px; line-height: 26px; }
.xl-card { min-height: 340px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.cover {
 aspect-ratio: 16/9;
 border-radius: var(--radius);
 display: flex;
 align-items: flex-end;
 padding: 16px;
 color: #fff;
 font-weight: 800;
 font-size: 18px;
 line-height: 26px;
 background: linear-gradient(160deg, #6E2A58 0%, #8E3A62 48%, #F2B089 140%);
}
.cover-b { background: linear-gradient(160deg, #2A1824 0%, #6E2A58 55%, #E36A8C 130%); }
.card-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.badge {
 display: inline-flex;
 align-items: center;
 min-height: 26px;
 padding: 0 10px;
 border-radius: 999px;
 font-size: 13px;
 line-height: 20px;
 font-weight: 700;
 border: 1px solid transparent;
 white-space: nowrap;
}
.badge-pine { color: var(--pine); background: #E7F2EF; border-color: #b7d2cb; }
.badge-rouge { color: #8E3050; background: #FDE7EE; border-color: #f3c2d0; }
.badge-plum { color: var(--plum); background: #F6E7F0; border-color: #e3c6d6; }
.badge-peach { color: #8A4E32; background: #FDE8DA; border-color: #f0cbb6; }
.compact-list { margin-top: 18px; border-top: 1px solid var(--line); }
.compact-item {
 display: grid;
 grid-template-columns: 72px 1fr auto;
 gap: 14px;
 align-items: center;
 padding: 14px 0;
 border-bottom: 1px solid var(--line);
}
.num {
 width: 72px;
 height: 48px;
 border-radius: 14px;
 display: grid;
 place-items: center;
 background: #F6E7F0;
 color: var(--plum);
 font-weight: 800;
 font-size: 14px;
}
.compact-item h3 { font-size: 16px; line-height: 24px; }
.compact-item p { margin-top: 2px; color: var(--muted); font-size: 14px; line-height: 22px; }
.meta-line { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 20px; }
.more-row { display: flex; justify-content: flex-end; margin-top: 16px; }
.band-wrap { background: var(--grad); padding: 1px; border-radius: var(--radius-lg); }
.band-inner { background: var(--inkband); color: #F8EEE8; border-radius: 23px; padding: 22px; }
.metric-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.metric {
 background: rgba(255,252,249,.06);
 border: 1px solid rgba(242,176,137,.35);
 border-radius: var(--radius);
 padding: 16px;
}
.metric b { display: block; font-size: 28px; line-height: 36px; color: #fff; }
.metric span { display: block; margin-top: 4px; color: #E7D4DC; font-size: 13px; line-height: 20px; }
.metric-note { margin-top: 12px; color: #E7D4DC; font-size: 13px; line-height: 20px; }
.scene-list { margin-top: 22px; display: flex; flex-direction: column; gap: 12px; }
.scene-row {
 display: grid;
 grid-template-columns: 120px 1fr auto;
 gap: 16px;
 align-items: center;
 padding: 16px 18px;
 border-radius: var(--radius-lg);
 border: 1px solid var(--line);
 background: var(--card);
 box-shadow: var(--shadow);
 color: inherit;
 text-decoration: none;
}
.scene-row:visited { color: inherit; }
.scene-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); text-decoration: none; }
.scene-kicker { color: var(--plum); font-weight: 800; }
.scene-row p { color: var(--muted); font-size: 14px; line-height: 24px; }
.guard-list { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.guard-row {
 display: grid;
 grid-template-columns: 42px 1fr;
 gap: 12px;
 align-items: start;
 padding: 14px 0;
 border-bottom: 1px solid var(--line);
}
.guard-ico {
 width: 42px;
 height: 42px;
 border-radius: 14px;
 display: grid;
 place-items: center;
 color: var(--pine);
 background: #E7F2EF;
 border: 1px solid #b7d2cb;
 font-weight: 800;
}
.guard-row p { margin-top: 4px; color: var(--muted); font-size: 15px; line-height: 26px; }
.qa-list { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.qa-line {
 border: 1px solid var(--line);
 border-radius: var(--radius);
 background: var(--card);
 box-shadow: var(--shadow);
 overflow: hidden;
}
.qa-line.open { box-shadow: inset 3px 0 0 var(--plum), var(--shadow); }
.qa-line button {
 width: 100%;
 text-align: left;
 background: transparent;
 border: 0;
 min-height: 52px;
 padding: 12px 16px;
 font-weight: 700;
 display: flex;
 justify-content: space-between;
 gap: 12px;
 align-items: center;
}
.qa-line button span:last-child { color: var(--rouge); font-weight: 800; }
.qa-panel { display: none; padding: 0 16px 14px; color: var(--muted); }
.qa-line.open .qa-panel { display: block; }
.cta-bar {
 display: flex;
 align-items: center;
 justify-content: space-between;
 gap: 18px;
 padding: 18px 22px;
 border-radius: var(--radius-lg);
 background: var(--grad);
 color: #fff;
}
.cta-bar h2 { font-size: 24px; line-height: 32px; }
.cta-bar p { margin-top: 6px; color: #fff; font-size: 14px; line-height: 24px; }
.cta-bar .btn-ghost { color: #fff; border-color: #fff; background: transparent; }
.cta-bar .btn-ghost:visited { color: #fff; }
.cta-bar .btn-ghost:hover { background: rgba(255,255,255,.16); color: #fff; }
.site-footer { background: var(--inkband); color: #F6E9EE; padding: 48px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr .8fr 1.1fr .9fr; gap: 22px; }
.site-footer h2 { font-size: 16px; line-height: 24px; margin-bottom: 10px; }
.site-footer p, .site-footer li { color: #E7D4DC; font-size: 14px; line-height: 24px; }
.site-footer a { color: var(--peach); }
.site-footer a:visited { color: var(--peach); }
.site-footer a:hover { color: #fff; }
.site-footer li + li { margin-top: 6px; }
.copyright { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(231,217,212,.2); font-size: 13px; line-height: 20px; color: #E7D4DC; }
@media (max-width: 1200px) {
 .metric-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
 .head-bar > .nav-links, .head-bar > .search, .head-tools .icon-btn:not(.search-toggle), .head-tools .btn-main { display: none; }
 .search-toggle, .nav-toggle { display: grid; }
 .drawer.open { display: block; }
 .drawer .nav-links { display: flex; flex-direction: column; align-items: flex-start; width: 100%; }
 .drawer .search { display: flex; width: 100%; }
 .drawer .btn { width: 100%; }
 .cat-head, .xl-grid { grid-template-columns: 1fr 1fr; }
 .foot-grid { grid-template-columns: 1fr 1fr; }
 .metric-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
 .section { padding: 56px 0; }
 .cat-head, .xl-grid, .foot-grid, .scene-row, .compact-item { grid-template-columns: 1fr; }
 .compact-item { align-items: start; }
 .scene-row { gap: 8px; }
 .cta-bar { flex-direction: column; align-items: flex-start; }
 .promo p { white-space: nowrap; }
 .logo { flex-basis: auto; }
 .more-row { justify-content: stretch; }
 .more-row .btn { width: 100%; }
}
@media (max-width: 520px) {
 .container { width: min(var(--max), calc(100% - 32px)); }
 .metric-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
 h1 { font-size: 32px; line-height: 40px; }
 h2 { font-size: 24px; line-height: 32px; }
 body { font-size: 15px; line-height: 26px; }
 .card, .band-inner, .cta-bar { padding: 16px; }
 .section .btn, .cta-bar .btn, .more-row .btn { width: 100%; }
 .logo-main { font-size: 13px; line-height: 18px; }
 .head-bar { gap: 8px; }
}

/* roulang page: category1 */
:root {
 --paper: #FBF6F1;
 --card: #FFFCF9;
 --ink: #241820;
 --muted: #5C4A55;
 --plum: #6E2A58;
 --plum-deep: #4E1C3E;
 --rouge: #E36A8C;
 --peach: #F2B089;
 --peach-bg: #F8E6DC;
 --inkband: #2A1824;
 --pine: #3F6B62;
 --line: #E7D9D4;
 --shadow: 0 10px 30px rgba(36,24,32,.08);
 --shadow-hover: 0 16px 36px rgba(36,24,32,.14);
 --radius-lg: 24px;
 --radius: 16px;
 --radius-btn: 14px;
 --radius-input: 12px;
 --grad: linear-gradient(135deg, #6E2A58, #E36A8C, #F2B089);
 --err: #C4846A;
 --max: 1120px;
}
/* roulang page: jiujiumulu */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
 margin: 0;
 background: var(--paper);
 color: var(--ink);
 font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
 font-size: 16px;
 line-height: 28px;
}
body.lock { overflow: hidden; }
img { max-width: 100%; display: block; }
p, h1, h2, h3 { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--plum); text-decoration: none; }
a:visited { color: var(--plum-deep); }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
 outline: 2px solid var(--pine);
 outline-offset: 2px;
}
::selection { background: #F2B089; color: #241820; }
.container { width: min(var(--max), calc(100% - 48px)); margin: 0 auto; }
.section { padding: 72px 0; }
.bg-peach { background: var(--peach-bg); }
.bg-soft { background: #FFF7F2; }
.sub { margin-top: 10px; color: var(--muted); font-size: 16px; line-height: 28px; }
.promo { background: var(--grad); color: #fff; min-height: 36px; }
.promo-inner { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.promo p { font-size: 13px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.promo button { color: #fff; background: transparent; border: 0; min-width: 36px; height: 28px; border-radius: 999px; }
.promo button:hover { background: rgba(255,255,255,.16); }
.site-header { position: sticky; top: 0; z-index: 30; background: var(--card); box-shadow: var(--shadow); }
.bar { min-height: 76px; display: flex; align-items: center; gap: 16px; }
.logo { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 0 1 280px; text-decoration: none; }
.logo:hover { text-decoration: none; }
.logo-main { font-size: 15px; line-height: 22px; font-weight: 800; color: var(--ink); }
.logo-sub { font-size: 11px; line-height: 16px; color: var(--muted); }
.nav-links { display: flex; align-items: center; gap: 6px; }
.nav-links a {
 color: var(--ink);
 padding: 8px 10px 10px;
 font-size: 15px;
 line-height: 22px;
 border-radius: 10px;
 text-decoration: none;
}
.nav-links a:visited { color: var(--ink); }
.nav-links a:hover { color: var(--plum); text-decoration: none; }
.nav-links a.active { color: var(--plum); box-shadow: inset 0 -2px 0 var(--plum); }
.search { flex: 1; display: flex; min-width: 160px; }
.search input {
 width: 100%;
 height: 44px;
 border-radius: var(--radius-input);
 border: 1px solid var(--line);
 background: var(--paper);
 padding: 0 14px;
}
.search input::placeholder { color: #8A7380; }
.search input:hover { border-color: #d8c2bc; }
.bar-tools { display: flex; align-items: center; gap: 8px; }
.icon-btn {
 width: 44px;
 height: 44px;
 border-radius: 14px;
 border: 1px solid var(--line);
 background: var(--card);
 display: grid;
 place-items: center;
 color: var(--plum);
 text-decoration: none;
 padding: 0;
}
.icon-btn:visited { color: var(--plum); }
.icon-btn:hover { border-color: var(--plum); text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.icon-btn:active { transform: translateY(0); }
.icon-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.search-launch, .nav-toggle { display: none; }
.nav-toggle { width: 44px; height: 44px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); color: var(--plum); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { display: block; width: 16px; height: 2px; background: var(--plum); position: relative; margin: 0 auto; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after { top: 5px; }
.drawer { display: none; border-top: 1px solid var(--line); background: var(--card); }
.drawer.open { display: block; }
.drawer-inner { padding: 14px 0 18px; display: flex; flex-direction: column; gap: 12px; }
.drawer .nav-links { flex-direction: column; align-items: stretch; }
.drawer .nav-links a { padding: 12px; }
.drawer-icons { display: flex; gap: 8px; }
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 44px;
 padding: 0 16px;
 border-radius: var(--radius-btn);
 border: 1px solid transparent;
 text-decoration: none;
 font-weight: 700;
 transition: .2s ease;
 white-space: nowrap;
}
.btn:visited { color: #fff; }
.btn-main { background: var(--grad); color: #fff; }
.btn-main:hover { text-decoration: none; filter: saturate(1.2); border-color: var(--plum); color: #fff; }
.btn-main:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--plum); border-color: var(--plum); }
.btn-ghost:visited { color: var(--plum); }
.btn-ghost:hover { text-decoration: none; background: rgba(110,42,88,.06); }
.btn-ghost:active { background: rgba(110,42,88,.12); }
.head-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 22px; align-items: stretch; }
.kicker { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: #fff; color: var(--plum); border: 1px solid #e3c6d6; font-size: 13px; line-height: 20px; font-weight: 700; }
.head-copy h1 { margin-top: 12px; font-size: 40px; line-height: 48px; font-weight: 800; }
.filter-card {
 background: var(--card);
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow);
 padding: 22px;
}
.filter-card h2 { font-size: 18px; line-height: 26px; }
.facet { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 24px; }
.facet:last-of-type { border-bottom: 0; }
.facet b { font-weight: 800; }
.note { margin-top: 8px; color: var(--muted); font-size: 13px; line-height: 20px; }
.badge {
 display: inline-flex;
 align-items: center;
 min-height: 26px;
 padding: 0 10px;
 border-radius: 999px;
 font-size: 13px;
 line-height: 20px;
 font-weight: 700;
 border: 1px solid transparent;
 white-space: nowrap;
}
.badge-pine { color: var(--pine); background: #E7F2EF; border-color: #b7d2cb; }
.badge-rouge { color: #8E3050; background: #FDE7EE; border-color: #f3c2d0; }
.badge-plum { color: var(--plum); background: #F6E7F0; border-color: #e3c6d6; }
.badge-peach { color: #8A4E32; background: #FDE8DA; border-color: #f0cbb6; }
.entry {
 display: grid;
 grid-template-columns: 148px 1fr auto;
 gap: 18px;
 align-items: center;
 padding: 18px 0;
 border-bottom: 1px solid var(--line);
}
.entry:hover .cover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.cover {
 height: 92px;
 border-radius: 16px;
 background: var(--grad);
 color: #fff;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 padding: 10px 12px;
 box-shadow: var(--shadow);
 transition: .2s ease;
 position: relative;
 overflow: hidden;
}
.cover::after {
 content: "";
 position: absolute;
 inset: auto 0 0 0;
 height: 46%;
 background: linear-gradient(transparent, rgba(36,24,32,.28));
}
.cover b, .cover span { position: relative; z-index: 1; }
.cover b { font-size: 18px; line-height: 24px; }
.cover span { font-size: 12px; line-height: 18px; }
.entry h3 { font-size: 18px; line-height: 26px; }
.entry p { margin-top: 6px; color: var(--muted); font-size: 15px; line-height: 26px; }
.meta-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.more-row, .consult-card, .split {
 display: flex;
 justify-content: space-between;
 align-items: center;
 gap: 18px;
}
.more-row {
 background: var(--card);
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow);
 padding: 22px;
}
.section h2 { font-size: 28px; line-height: 36px; }
.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 22px; }
.compare-col { display: flex; flex-direction: column; gap: 12px; }
.compare-head {
 border-radius: 16px;
 padding: 14px 16px;
 color: #fff;
 background: #5C4A55;
 font-weight: 800;
}
.compare-col.good .compare-head { background: var(--grad); }
.row-card { border-radius: 16px; border: 1px solid var(--line); background: var(--card); padding: 14px 16px; box-shadow: var(--shadow); transition: .2s ease; }
.row-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
.row-card strong { display: block; font-size: 16px; line-height: 26px; }
.row-card span { color: var(--muted); font-size: 14px; line-height: 24px; }
.timeline { margin-top: 22px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; position: relative; }
.timeline::before {
 content: "";
 position: absolute;
 left: 8%;
 right: 8%;
 top: 28px;
 height: 2px;
 background: #E7D9D4;
}
.node {
 position: relative;
 background: var(--card);
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow);
 padding: 18px;
}
.node i {
 display: grid;
 place-items: center;
 width: 28px;
 height: 28px;
 border-radius: 50%;
 background: var(--grad);
 color: #fff;
 font-style: normal;
 font-size: 12px;
 font-weight: 800;
 margin-bottom: 12px;
 position: relative;
 z-index: 1;
}
.node strong { display: block; font-size: 16px; line-height: 26px; }
.node span { display: block; margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 24px; }
.rail {
 margin-top: 22px;
 display: flex;
 gap: 16px;
 overflow-x: auto;
 scroll-snap-type: x mandatory;
 padding-bottom: 8px;
}
.rail-card {
 flex: 0 0 280px;
 scroll-snap-align: start;
 background: var(--card);
 border: 1px solid var(--line);
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow);
 padding: 16px;
 color: inherit;
 text-decoration: none;
 transition: .2s ease;
}
.rail-card:visited { color: inherit; }
.rail-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); text-decoration: none; }
.rail-cover { height: 120px; border-radius: 16px; margin-bottom: 12px; background: linear-gradient(160deg, #6E2A58, #E36A8C 55%, #F2B089); color: #fff; display: flex; align-items: flex-end; padding: 12px; font-weight: 800; }
.rail-card h3 { font-size: 18px; line-height: 26px; }
.rail-card p { margin-top: 6px; color: var(--muted); font-size: 14px; line-height: 24px; }
.faq { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.faq details {
 background: var(--card);
 border: 1px solid var(--line);
 border-radius: 16px;
 box-shadow: var(--shadow);
 padding: 0 16px;
}
.faq details[open] { box-shadow: inset 3px 0 0 var(--plum), var(--shadow); }
.faq summary { min-height: 56px; display: flex; align-items: center; cursor: pointer; font-weight: 800; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq details p { padding: 0 0 16px; color: var(--muted); }
.consult-card {
 background: var(--inkband);
 color: #fff;
 border-radius: var(--radius-lg);
 padding: 22px 24px;
 box-shadow: var(--shadow);
}
.grad-line { width: 72px; height: 3px; border-radius: 999px; background: var(--grad); margin-bottom: 12px; }
.consult-card p { margin-top: 8px; color: #E7D4DC; }
.consult-card .btn:visited { color: #fff; }
.site-footer { background: var(--inkband); color: #F6E7EE; padding: 48px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr .8fr 1.1fr .9fr; gap: 28px; }
.site-footer h2 { color: #fff; font-size: 16px; line-height: 24px; margin-bottom: 10px; }
.site-footer p, .site-footer li { color: #E7D4DC; font-size: 14px; line-height: 24px; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.site-footer a { color: #F2B089; }
.site-footer a:visited { color: #F2B089; }
.site-footer a:hover { color: #fff; }
.copyright { margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(231,217,212,.25); font-size: 13px; line-height: 20px; color: #E7D4DC; }
@media (max-width: 1024px) {
 .nav-links.desk, .search.desk, .desk-only { display: none; }
 .search-launch, .nav-toggle { display: grid; }
 .head-grid, .versus, .foot-grid { grid-template-columns: 1fr 1fr; }
 .timeline { grid-template-columns: 1fr 1fr; }
 .timeline::before { display: none; }
 .entry { grid-template-columns: 120px 1fr; }
 .entry .btn { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
 .section { padding: 56px 0; }
 .head-grid, .versus, .foot-grid, .timeline, .entry { grid-template-columns: 1fr; }
 .more-row, .consult-card { flex-direction: column; align-items: flex-start; }
 .head-copy h1 { font-size: 32px; line-height: 40px; }
 .section h2 { font-size: 24px; line-height: 32px; }
 .promo p { white-space: nowrap; }
}
@media (max-width: 480px) {
 .container { width: min(var(--max), calc(100% - 32px)); }
 .logo-sub { display: none; }
 .logo-main { font-size: 13px; line-height: 18px; }
 .head-copy h1 { font-size: 28px; line-height: 36px; }
 .section h2 { font-size: 22px; line-height: 30px; }
 .filter-card, .more-row, .node, .rail-card, .consult-card { padding: 16px; }
 .entry .btn, .more-row .btn, .consult-card .btn, .drawer .btn { width: 100%; }
 .cover { height: 84px; }
}
@media (min-width: 1025px) {
 .drawer { display: none !important; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { transition: none !important; }
}