/* roulang page: index */
:root {
  --bg-primary: #0E0D0B;
  --bg-secondary: #16130F;
  --bg-card: #201B16;
  --bg-footer: #12100D;
  --accent: #B4874A;
  --accent-hover: #D19A5C;
  --accent-soft: rgba(180,135,74,.12);
  --success: #7FA08C;
  --danger: #B2533C;
  --text-primary: #EFE9DF;
  --text-secondary: #A89E93;
  --border: rgba(255,255,255,.08);
  --border-hover: rgba(180,135,74,.35);
  --radius-sm: 6px;
  --radius: 16px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
  --shadow-hover: 0 20px 48px rgba(0,0,0,.5);
  --font-serif: "Songti SC", "SimSun", "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
  --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Menlo", "Consolas", "Courier New", monospace;
  --container: 1200px;
  --section-pad: clamp(4rem, 8vw, 6.5rem);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-sans); background:var(--bg-primary); color:var(--text-primary); line-height:1.75; font-size:1rem; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { font-family:inherit; cursor:pointer; }
input, select, textarea { font-family:inherit; font-size:1rem; }
ul, ol { list-style:none; }
.container { max-width:var(--container); margin:0 auto; padding:0 24px; }
.section { padding:var(--section-pad) 0; position:relative; }
.section-header { max-width:720px; margin-bottom:48px; }
.section-tag { display:inline-block; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); border:1px solid rgba(180,135,74,.3); padding:4px 12px; border-radius:999px; margin-bottom:12px; }
.section-header h2 { font-family:var(--font-serif); font-size:clamp(1.5rem, 2.5vw, 2.2rem); font-weight:700; letter-spacing:.02em; line-height:1.3; color:var(--text-primary); margin-bottom:8px; }
.section-header p { color:var(--text-secondary); font-size:1rem; line-height:1.7; }
.section-header .header-row { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:12px; padding:11px 24px; font-size:.9375rem; font-weight:600; line-height:1.4; transition:all .3s ease; text-decoration:none; }
.btn-primary { background:var(--accent); color:#0E0D0B; box-shadow:0 4px 14px rgba(180,135,74,.25); }
.btn-primary:hover { background:var(--accent-hover); color:#0E0D0B; transform:translateY(-2px); box-shadow:0 8px 24px rgba(180,135,74,.35); }
.btn-outline { background:transparent; color:var(--text-primary); border:1px solid rgba(255,255,255,.2); }
.btn-outline:hover { background:rgba(255,255,255,.1); border-color:var(--accent); transform:translateY(-2px); }
.btn-lg { padding:14px 32px; font-size:1rem; border-radius:14px; }
.btn-sm { padding:6px 16px; font-size:.8125rem; border-radius:8px; }
.btn-block { width:100%; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

.site-header { position:sticky; top:0; z-index:100; background:rgba(14,13,11,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.nav-top { padding:12px 0; }
.nav-top-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo { display:flex; align-items:center; gap:10px; font-family:var(--font-serif); font-size:1.2rem; font-weight:700; color:var(--text-primary); letter-spacing:.02em; white-space:nowrap; }
.logo .logo-mark { width:36px; height:36px; background:linear-gradient(135deg, var(--accent), #D19A5C); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.9rem; color:#0E0D0B; font-weight:700; flex-shrink:0; }
.logo .logo-text-new { color:var(--accent); }
.nav-top-right { display:flex; align-items:center; gap:16px; }
.search-box { display:flex; align-items:center; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:999px; padding:4px 6px 4px 16px; min-width:220px; transition:border-color .3s; }
.search-box:focus-within { border-color:rgba(180,135,74,.5); }
.search-box input { background:transparent; border:none; outline:none; color:var(--text-primary); width:100%; font-size:.875rem; }
.search-box input::placeholder { color:rgba(255,255,255,.35); }
.search-box button { background:var(--accent); border:none; width:32px; height:32px; border-radius:50%; color:#0E0D0B; font-size:.8rem; flex-shrink:0; transition:background .3s; }
.search-box button:hover { background:var(--accent-hover); }
.nav-bottom { border-top:1px solid var(--border); }
.nav-bottom-inner { display:flex; gap:4px; overflow-x:auto; padding:8px 0; scrollbar-width:none; -ms-overflow-style:none; }
.nav-bottom-inner::-webkit-scrollbar { display:none; }
.nav-link { display:inline-flex; align-items:center; gap:6px; padding:6px 16px; border-radius:999px; font-size:.875rem; color:var(--text-secondary); white-space:nowrap; transition:all .3s; }
.nav-link i { font-size:.75rem; opacity:.7; }
.nav-link:hover { color:var(--text-primary); background:rgba(255,255,255,.06); }
.nav-link.active { background:var(--accent); color:var(--bg-primary); font-weight:600; }
.nav-link.active i { opacity:1; }

.hero { position:relative; min-height:82vh; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; z-index:0; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(135deg, rgba(14,13,11,.94) 0%, rgba(31,26,18,.72) 50%, rgba(14,13,11,.55) 100%); z-index:1; }
.hero-body { position:relative; z-index:2; padding:80px 0 40px; }
.hero-inner { max-width:800px; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; background:rgba(180,135,74,.12); border:1px solid rgba(180,135,74,.35); border-radius:999px; color:var(--accent); font-size:.8125rem; margin-bottom:24px; backdrop-filter:blur(8px); }
.hero-badge i { font-size:.6rem; color:var(--success); }
.hero-title { font-family:var(--font-serif); font-size:clamp(2.2rem, 5vw, 3.5rem); font-weight:700; line-height:1.15; letter-spacing:.02em; margin-bottom:20px; }
.hero-title .text-accent { color:var(--accent); }
.hero-desc { font-size:1.0625rem; line-height:1.8; color:var(--text-secondary); margin-bottom:32px; max-width:660px; }
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; }
.hero-ticker { position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.1); background:rgba(14,13,11,.45); backdrop-filter:blur(14px); }
.hero-ticker-inner { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 0; flex-wrap:wrap; }
.ticker-item { display:flex; align-items:center; gap:12px; }
.ticker-icon { width:38px; height:38px; background:rgba(180,135,74,.12); border:1px solid rgba(180,135,74,.25); border-radius:10px; display:flex; align-items:center; justify-content:center; color:var(--accent); font-size:.875rem; flex-shrink:0; }
.ticker-item strong { font-family:var(--font-mono); font-size:1.25rem; line-height:1.1; color:var(--text-primary); }
.ticker-item span { display:block; font-size:.75rem; color:var(--text-secondary); }
.ticker-cta { display:inline-flex; align-items:center; gap:8px; color:var(--accent); font-size:.875rem; font-weight:600; padding:8px 18px; border:1px solid rgba(180,135,74,.35); border-radius:999px; transition:all .3s; }
.ticker-cta:hover { background:rgba(180,135,74,.15); border-color:var(--accent); }

.metrics-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:20px; }
.metric-card { position:relative; background:linear-gradient(145deg, rgba(32,27,22,.9), rgba(22,19,15,.9)); border:1px solid var(--border); border-radius:var(--radius); padding:28px 20px; min-height:180px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; transition:all .4s ease; }
.metric-card::before { content:""; position:absolute; top:0; left:0; width:36px; height:3px; background:var(--accent); border-radius:0 0 4px 0; }
.metric-card:hover { transform:translateY(-4px); border-color:var(--border-hover); box-shadow:var(--shadow-hover); }
.metric-number { font-family:var(--font-mono); font-size:clamp(2rem, 4vw, 3rem); font-weight:800; line-height:1; color:var(--text-primary); }
.metric-suffix { font-family:var(--font-mono); font-size:.9rem; color:var(--accent); margin-left:2px; }
.metric-name { font-size:.875rem; color:var(--text-secondary); margin-top:8px; font-weight:500; }
.metric-badge { display:inline-flex; align-items:center; gap:4px; font-size:.6875rem; padding:2px 10px; border-radius:999px; background:rgba(255,255,255,.04); color:var(--text-secondary); margin-top:12px; width:fit-content; }
.metric-badge.success-badge { color:var(--success); background:rgba(127,160,140,.12); }
.metric-badge i { font-size:.55rem; }
.metric-number-row { display:flex; align-items:baseline; gap:4px; }

.services-section { background:var(--bg-secondary); }
.services-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.service-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; position:relative; transition:all .4s ease; }
.service-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-hover); border-color:var(--border-hover); }
.service-img { background-size:cover; background-position:center; aspect-ratio:16/9; position:relative; overflow:hidden; }
.service-img::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 40%, rgba(14,13,11,.6) 100%); }
.service-card:hover .service-img { transform:scale(1.03); }
.service-body { padding:24px; display:flex; flex-direction:column; flex-grow:1; }
.service-tag { display:inline-block; font-size:.75rem; color:var(--accent); background:rgba(180,135,74,.1); border:1px solid rgba(180,135,74,.25); padding:2px 10px; border-radius:6px; margin-bottom:10px; width:fit-content; }
.service-body h3 { font-family:var(--font-serif); font-size:1.375rem; font-weight:700; margin-bottom:8px; letter-spacing:.01em; }
.service-body p { font-size:.875rem; color:var(--text-secondary); line-height:1.65; flex-grow:1; }
.service-footer { display:flex; justify-content:space-between; align-items:center; margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.06); }
.service-price { font-family:var(--font-mono); font-size:.875rem; color:var(--accent); font-weight:600; }
.service-card-wide { grid-column:1 / -1; flex-direction:row; align-items:stretch; }
.service-card-wide .service-img { width:40%; aspect-ratio:auto; min-height:200px; }
.service-card-wide .service-body { padding:32px; }
@media (max-width:768px) {
  .service-card-wide { flex-direction:column; }
  .service-card-wide .service-img { width:100%; aspect-ratio:16/9; }
}

.compare-section { background:var(--bg-secondary); border-top:1px solid var(--border); }
.compare-grid { display:grid; grid-template-columns:1fr 1px 1fr; gap:0; margin-bottom:40px; }
.compare-col { padding:32px; border-radius:var(--radius-lg); }
.compare-col-left { background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.04); }
.compare-col-right { background:linear-gradient(145deg, rgba(180,135,74,.08), rgba(32,27,22,.5)); border:1px solid rgba(180,135,74,.25); }
.compare-col h3 { font-family:var(--font-serif); font-size:1.25rem; margin-bottom:16px; color:var(--text-primary); }
.compare-col-left h3 { color:var(--text-secondary); }
.compare-col-right h3 { color:var(--accent); }
.compare-list li { display:flex; gap:10px; align-items:flex-start; padding:10px 0; font-size:.9rem; line-height:1.6; }
.compare-list li i { margin-top:4px; font-size:.75rem; flex-shrink:0; }
.compare-col-left .compare-list li i { color:var(--danger); }
.compare-col-right .compare-list li i { color:var(--success); }
.compare-col-left .compare-list li { color:var(--text-secondary); }
.compare-col-right .compare-list li { color:var(--text-primary); }
.compare-divider { background:var(--border); width:1px; height:100%; }
.compare-cta { text-align:center; }

.faq-section { border-top:none; }
.faq-list { max-width:800px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.faq-item { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; transition:border-color .3s; }
.faq-item:hover { border-color:rgba(180,135,74,.3); }
.faq-item summary { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:18px 24px; cursor:pointer; list-style:none; font-size:.9375rem; font-weight:600; color:var(--text-primary); transition:background .3s; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary i { color:var(--accent); transition:transform .3s; font-size:.875rem; flex-shrink:0; }
.faq-item[open] summary { border-bottom:1px solid var(--border); background:rgba(255,255,255,.02); }
.faq-item[open] summary i { transform:rotate(180deg); }
.faq-content { padding:18px 24px; font-size:.89375rem; line-height:1.75; color:var(--text-secondary); }

.updates-section { background:var(--bg-secondary); border-top:1px solid var(--border); }
.updates-list { display:flex; flex-direction:column; gap:16px; }
.update-card { display:flex; gap:20px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; padding:0; transition:all .3s ease; }
.update-card:hover { border-color:var(--border-hover); box-shadow:var(--shadow-hover); transform:translateY(-2px); }
.update-img { width:200px; background-size:cover; background-position:center; flex-shrink:0; position:relative; }
.update-body { padding:20px 24px; flex-grow:1; }
.update-cat { display:inline-block; font-size:.72rem; color:var(--accent); background:rgba(180,135,74,.1); border:1px solid rgba(180,135,74,.2); padding:2px 10px; border-radius:6px; margin-bottom:8px; }
.update-body h3 { font-family:var(--font-serif); font-size:1.125rem; font-weight:700; margin-bottom:6px; line-height:1.4; }
.update-body h3 a { transition:color .3s; }
.update-body h3 a:hover { color:var(--accent-hover); }
.update-body p { font-size:.84375rem; color:var(--text-secondary); line-height:1.65; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.update-meta { display:flex; justify-content:space-between; align-items:center; margin-top:12px; font-size:.75rem; color:var(--text-secondary); }
.update-meta .read-more { color:var(--accent); font-weight:600; transition:gap .3s, color .3s; display:inline-flex; align-items:center; gap:4px; }
.update-meta .read-more:hover { gap:8px; color:var(--accent-hover); }
.empty-state { text-align:center; padding:48px 24px; background:var(--bg-card); border:1px dashed var(--border); border-radius:var(--radius); color:var(--text-secondary); font-size:.875rem; }
@media (max-width:768px) {
  .update-card { flex-direction:column; }
  .update-img { width:100%; aspect-ratio:16/7; }
}

.booking-section { background:var(--bg-primary); }
.booking-wrap { display:grid; grid-template-columns:1.4fr 1fr; gap:32px; background:var(--bg-card); border:1px solid var(--border); border-radius:calc(var(--radius-lg) + 4px); overflow:hidden; }
.booking-form-side { padding:40px; }
.booking-form-side h2 { font-family:var(--font-serif); font-size:1.5rem; font-weight:700; margin-bottom:8px; }
.booking-form-side > p { color:var(--text-secondary); font-size:.875rem; margin-bottom:28px; }
.form-group { margin-bottom:18px; }
.form-group label { display:block; font-size:.8125rem; color:var(--text-secondary); margin-bottom:6px; font-weight:500; }
.form-group input, .form-group select, .form-group textarea { width:100%; background:rgba(255,255,255,.03); border:1px solid var(--border); border-radius:10px; padding:12px 14px; color:var(--text-primary); font-size:.875rem; transition:border-color .3s, background .3s, box-shadow .3s; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline:none; border-color:var(--accent); background:rgba(255,255,255,.05); box-shadow:0 0 0 3px rgba(180,135,74,.12); }
.form-group input::placeholder, .form-group textarea::placeholder { color:rgba(255,255,255,.3); }
.form-group textarea { min-height:100px; resize:vertical; }
.form-note { font-size:.75rem; color:var(--text-secondary); margin-top:12px; text-align:center; }
.booking-info-side { background:linear-gradient(160deg, rgba(180,135,74,.08), rgba(22,19,15,.6)); padding:40px 32px; display:flex; flex-direction:column; gap:28px; border-left:1px solid rgba(180,135,74,.15); }
.info-block h3 { font-family:var(--font-serif); font-size:1rem; color:var(--accent); margin-bottom:8px; }
.info-block p { font-size:.84375rem; color:var(--text-secondary); line-height:1.6; }
.info-block i { margin-right:6px; color:var(--accent); opacity:.7; }
@media (max-width:900px) {
  .booking-wrap { grid-template-columns:1fr; }
  .booking-info-side { border-left:none; border-top:1px solid rgba(180,135,74,.15); }
  .booking-form-side { padding:28px 24px; }
  .booking-info-side { padding:28px 24px; }
}

.site-footer { background:var(--bg-footer); border-top:1px solid var(--border); margin-top:0; }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.4fr; gap:40px; padding:56px 0 40px; }
.footer-brand .footer-logo { font-family:var(--font-serif); font-size:1.2rem; font-weight:700; color:var(--text-primary); display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.footer-brand .footer-logo .logo-mark { background:linear-gradient(135deg, var(--accent), #D19A5C); color:#0E0D0B; border-radius:8px; width:30px; height:30px; display:flex; align-items:center; justify-content:center; font-size:.8rem; }
.footer-brand p { font-size:.8125rem; color:var(--text-secondary); max-width:240px; line-height:1.6; }
.footer-col h4 { font-size:.84375rem; color:var(--text-primary); margin-bottom:14px; font-weight:600; letter-spacing:.05em; }
.footer-col a { display:block; font-size:.84375rem; color:var(--text-secondary); padding:5px 0; transition:color .3s, padding-left .3s; }
.footer-col a:hover { color:var(--accent); padding-left:4px; }
.footer-col p { font-size:.84375rem; color:var(--text-secondary); line-height:1.6; }
.footer-bottom { border-top:1px solid rgba(255,255,255,.05); padding:16px 0; }
.footer-bottom-inner { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; font-size:.75rem; color:rgba(255,255,255,.35); }
@media (max-width:900px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:520px) {
  .footer-grid { grid-template-columns:1fr; gap:24px; }
  .footer-bottom-inner { flex-direction:column; text-align:center; }
}

.fade-up { opacity:0; transform:translateY(12px); transition:opacity .5s ease, transform .5s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity:1; transform:none; transition:none; }
  .metric-number { transition:none!important; }
  .hero-title { transition:none!important; }
  .btn, .service-card, .update-card { transition:none!important; }
}

.metrics-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:20px; }
@media (max-width:1024px) {
  .metrics-grid { grid-template-columns:repeat(3, 1fr); }
  .services-grid { grid-template-columns:1fr; }
  .compare-grid { grid-template-columns:1fr; gap:0; }
  .compare-divider { display:none; }
  .hero-ticker-inner { justify-content:center; }
}
@media (max-width:768px) {
  .search-box { display:none; }
  .nav-top-inner { padding:0 4px; }
  .nav-bottom-inner { padding:6px 4px; }
  .nav-link { font-size:.8125rem; padding:5px 12px; }
  .hero-body { padding:56px 0 32px; }
  .hero-title { font-size:clamp(1.9rem, 4vw, 2.6rem); }
  .hero-desc { font-size:1rem; }
  .hero-ticker-inner { gap:10px; }
  .ticker-item { flex:1 1 calc(50% - 10px); min-width:120px; }
  .ticker-cta { width:100%; justify-content:center; margin-top:8px; }
  .metrics-grid { grid-template-columns:repeat(2, 1fr); gap:12px; }
  .metric-card { padding:20px 16px; min-height:150px; }
  .compare-col { padding:20px; }
  .faq-item summary { padding:14px 16px; }
  .faq-content { padding:14px 16px; }
  .section-header { margin-bottom:28px; }
  .booking-wrap { grid-template-columns:1fr; }
  .booking-form-side { padding:24px 20px; }
  .booking-info-side { padding:24px 20px; }
}
@media (max-width:520px) {
  .container { padding:0 16px; }
  .logo { font-size:1rem; }
  .logo .logo-mark { width:30px; height:30px; font-size:.75rem; }
  .nav-top-right .btn { padding:8px 14px; font-size:.8125rem; }
  .hero-actions .btn { width:100%; }
  .metrics-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .metric-number { font-size:1.6rem; }
  .metric-number-row { font-size:1.2rem; }
  .service-body { padding:18px; }
  .footer-grid { grid-template-columns:1fr; }
}

/* roulang page: article */
:root {
  --bg-primary: #0E0D0B;
  --bg-secondary: #16130F;
  --bg-card: #201B16;
  --bg-footer: #12100D;
  --accent: #B4874A;
  --accent-hover: #D19A5C;
  --accent-soft: rgba(180,135,74,.12);
  --success: #7FA08C;
  --danger: #B2533C;
  --text-primary: #EFE9DF;
  --text-secondary: #A89E93;
  --border: rgba(255,255,255,.08);
  --border-hover: rgba(180,135,74,.35);
  --radius-sm: 6px;
  --radius: 16px;
  --radius-lg: 20px;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
  --shadow-hover: 0 20px 48px rgba(0,0,0,.5);
  --font-serif: "Songti SC", "SimSun", "Noto Serif SC", "Source Han Serif SC", Georgia, serif;
  --font-sans: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Menlo", "Consolas", "Courier New", monospace;
  --container: 1200px;
  --section-pad: clamp(4rem, 8vw, 6.5rem);
}
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--font-sans); background:var(--bg-primary); color:var(--text-primary); line-height:1.75; font-size:1rem; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
button { font-family:inherit; cursor:pointer; }
input, select, textarea { font-family:inherit; font-size:1rem; }
.container { max-width:var(--container); margin:0 auto; padding:0 24px; }
.section { padding:var(--section-pad) 0; position:relative; }
.section-header { max-width:720px; margin-bottom:48px; }
.section-tag { display:inline-block; font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); background:var(--accent-soft); border:1px solid rgba(180,135,74,.3); padding:4px 12px; border-radius:999px; margin-bottom:12px; }
.section-header h2 { font-family:var(--font-serif); font-size:clamp(1.5rem, 2.5vw, 2.2rem); font-weight:700; letter-spacing:.02em; line-height:1.3; color:var(--text-primary); margin-bottom:8px; }
.section-header p { color:var(--text-secondary); font-size:1rem; line-height:1.7; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:none; border-radius:12px; padding:11px 24px; font-size:.9375rem; font-weight:600; line-height:1.4; transition:all .3s ease; text-decoration:none; }
.btn-primary { background:var(--accent); color:#0E0D0B; box-shadow:0 4px 14px rgba(180,135,74,.25); }
.btn-primary:hover { background:var(--accent-hover); color:#0E0D0B; transform:translateY(-2px); box-shadow:0 8px 24px rgba(180,135,74,.35); }
.btn-outline { background:transparent; color:var(--text-primary); border:1px solid rgba(255,255,255,.2); }
.btn-outline:hover { background:rgba(255,255,255,.1); border-color:var(--accent); transform:translateY(-2px); }
.btn-lg { padding:14px 32px; font-size:1rem; border-radius:14px; }
.btn-sm { padding:6px 16px; font-size:.8125rem; border-radius:8px; }
.btn-block { width:100%; }
.btn:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.site-header { position:sticky; top:0; z-index:100; background:rgba(14,13,11,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border); }
.nav-top { padding:12px 0; }
.nav-top-inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo { display:flex; align-items:center; gap:10px; font-family:var(--font-serif); font-size:1.2rem; font-weight:700; color:var(--text-primary); letter-spacing:.02em; white-space:nowrap; }
.logo .logo-mark { width:36px; height:36px; background:linear-gradient(135deg, var(--accent), #D19A5C); border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:.9rem; color:#0E0D0B; font-weight:700; flex-shrink:0; }
.logo .logo-text-new { color:var(--accent); }
.nav-top-right { display:flex; align-items:center; gap:16px; }
.search-box { display:flex; align-items:center; background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:999px; padding:4px 6px 4px 16px; min-width:220px; transition:border-color .3s; }
.search-box:focus-within { border-color:rgba(180,135,74,.5); }
.search-box input { background:transparent; border:none; outline:none; color:var(--text-primary); width:100%; font-size:.875rem; }
.search-box input::placeholder { color:rgba(255,255,255,.35); }
.search-box button { background:var(--accent); border:none; width:32px; height:32px; border-radius:50%; color:#0E0D0B; font-size:.8rem; flex-shrink:0; transition:background .3s; }
.search-box button:hover { background:var(--accent-hover); }
.nav-bottom { border-top:1px solid var(--border); }
.nav-bottom-inner { display:flex; gap:4px; overflow-x:auto; padding:8px 0; scrollbar-width:none; -ms-overflow-style:none; }
.nav-bottom-inner::-webkit-scrollbar { display:none; }
.nav-link { display:inline-flex; align-items:center; gap:6px; padding:6px 16px; border-radius:999px; font-size:.875rem; color:var(--text-secondary); white-space:nowrap; transition:all .3s; }
.nav-link i { font-size:.75rem; opacity:.7; }
.nav-link:hover { color:var(--text-primary); background:rgba(255,255,255,.06); }
.nav-link.active { background:var(--accent); color:var(--bg-primary); font-weight:600; }
.nav-link.active i { opacity:1; }
.article-banner { position:relative; padding:64px 0 56px; overflow:hidden; background:var(--bg-primary); border-bottom:1px solid var(--border); }
.article-banner-bg { position:absolute; inset:0; background-size:cover; background-position:center; opacity:.3; z-index:0; }
.article-banner-overlay { position:absolute; inset:0; background:linear-gradient(135deg, rgba(14,13,11,.96) 0%, rgba(41,33,25,.78) 100%); z-index:1; }
.article-banner-inner { position:relative; z-index:2; max-width:860px; margin:0 auto; text-align:center; }
.breadcrumb { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; font-size:.8125rem; color:var(--text-secondary); margin-bottom:20px; }
.breadcrumb a { color:var(--text-secondary); transition:color .3s; display:inline-flex; align-items:center; gap:5px; }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb-sep { color:rgba(255,255,255,.25); }
.breadcrumb-current { color:var(--accent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:280px; }
.article-title { font-family:var(--font-serif); font-size:clamp(1.8rem, 3.5vw, 2.8rem); font-weight:700; line-height:1.35; color:var(--text-primary); letter-spacing:.02em; margin-bottom:18px; word-break:break-word; }
.article-meta { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap; }
.meta-item { display:inline-flex; align-items:center; gap:6px; font-size:.8125rem; color:var(--text-secondary); background:rgba(255,255,255,.04); border:1px solid var(--border); padding:4px 14px; border-radius:999px; }
.meta-item i { color:var(--accent); }
.article-content-wrap { padding:clamp(3rem, 6vw, 5rem) 0; background:var(--bg-secondary); position:relative; }
.article-container { max-width:780px; margin:0 auto; }
.article-body { font-size:1.0625rem; line-height:1.85; color:var(--text-primary); background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); padding:clamp(28px, 4vw, 48px); box-shadow:var(--shadow); }
.article-body > * + * { margin-top:1.5em; }
.article-body h2 { font-family:var(--font-serif); font-size:1.55rem; font-weight:700; line-height:1.4; margin-top:2.2em; margin-bottom:.6em; padding-left:14px; border-left:3px solid var(--accent); color:var(--text-primary); }
.article-body h3 { font-family:var(--font-serif); font-size:1.25rem; font-weight:700; margin-top:1.8em; margin-bottom:.5em; color:var(--accent); }
.article-body h4 { font-size:1.05rem; font-weight:700; margin-top:1.5em; margin-bottom:.4em; color:var(--text-primary); }
.article-body p { line-height:1.85; margin-bottom:1.2em; }
.article-body p:last-child { margin-bottom:0; }
.article-body a { color:var(--accent); border-bottom:1px solid rgba(180,135,74,.4); transition:all .3s; }
.article-body a:hover { color:var(--accent-hover); border-bottom-color:var(--accent-hover); }
.article-body ul, .article-body ol { padding-left:1.5em; margin:1.5em 0; }
.article-body ul li, .article-body ol li { margin-bottom:.5em; line-height:1.7; }
.article-body ul li::marker { color:var(--accent); }
.article-body ol li::marker { color:var(--accent); font-weight:600; }
.article-body blockquote { border-left:3px solid var(--accent); background:var(--accent-soft); padding:18px 24px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; color:var(--text-secondary); font-style:italic; margin:1.8em 0; line-height:1.7; }
.article-body blockquote p { margin-bottom:0; }
.article-body img { border-radius:var(--radius); margin:1.8em auto; box-shadow:var(--shadow); max-width:100%; }
.article-body figure { margin:1.8em 0; }
.article-body figcaption { font-size:.8125rem; color:var(--text-secondary); text-align:center; margin-top:8px; }
.article-body code { background:rgba(255,255,255,.06); border:1px solid var(--border); padding:2px 8px; border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:.875rem; color:var(--accent); }
.article-body table { width:100%; border-collapse:collapse; font-size:.9375rem; margin:1.8em 0; display:block; overflow-x:auto; }
.article-body th, .article-body td { padding:12px 16px; border:1px solid var(--border); text-align:left; }
.article-body th { background:rgba(180,135,74,.08); font-weight:600; color:var(--accent); }
.article-body td { color:var(--text-primary); }
.article-body hr { border:none; border-top:1px solid var(--border); margin:2em 0; }
.article-not-found { text-align:center; padding:60px 24px; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow); }
.not-found-icon { width:72px; height:72px; margin:0 auto 20px; background:var(--accent-soft); border:1px solid rgba(180,135,74,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1.6rem; color:var(--accent); }
.article-not-found h2 { font-family:var(--font-serif); font-size:1.6rem; margin-bottom:12px; color:var(--text-primary); }
.article-not-found p { color:var(--text-secondary); margin-bottom:28px; max-width:420px; margin-left:auto; margin-right:auto; }
.not-found-actions { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; }
.related-section { padding:var(--section-pad) 0; background:var(--bg-primary); }
.related-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; }
.related-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; transition:all .35s ease; display:flex; flex-direction:column; }
.related-card:hover { transform:translateY(-6px); border-color:var(--border-hover); box-shadow:var(--shadow-hover); }
.related-cover { position:relative; height:190px; overflow:hidden; }
.related-cover img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.related-card:hover .related-cover img { transform:scale(1.05); }
.related-tag { position:absolute; top:12px; left:12px; background:rgba(14,13,11,.8); backdrop-filter:blur(8px); color:var(--accent); font-size:.75rem; padding:4px 12px; border-radius:999px; border:1px solid rgba(180,135,74,.4); }
.related-body { padding:24px; flex:1; display:flex; flex-direction:column; }
.related-body h3 { font-family:var(--font-serif); font-size:1.125rem; font-weight:700; line-height:1.5; color:var(--text-primary); margin-bottom:8px; transition:color .3s; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.related-card:hover .related-body h3 { color:var(--accent); }
.related-body p { font-size:.875rem; color:var(--text-secondary); line-height:1.6; flex:1; margin-bottom:16px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.related-more { font-size:.8125rem; color:var(--accent); font-weight:500; display:inline-flex; align-items:center; gap:6px; transition:gap .3s; }
.related-more i { transition:transform .3s; }
.related-card:hover .related-more i { transform:translateX(4px); }
.site-footer { background:var(--bg-footer); border-top:1px solid var(--border); }
.footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding:64px 0 48px; }
.footer-brand p { font-size:.875rem; color:var(--text-secondary); line-height:1.7; margin-top:16px; max-width:320px; }
.footer-logo { display:inline-flex; align-items:center; gap:10px; font-family:var(--font-serif); font-size:1.1rem; font-weight:700; color:var(--text-primary); }
.footer-logo .logo-mark { width:34px; height:34px; background:linear-gradient(135deg, var(--accent), #D19A5C); border-radius:9px; display:flex; align-items:center; justify-content:center; font-size:.85rem; color:#0E0D0B; font-weight:700; flex-shrink:0; }
.footer-col h4 { font-size:.875rem; font-weight:600; color:var(--text-primary); letter-spacing:.06em; margin-bottom:16px; position:relative; padding-bottom:8px; }
.footer-col h4::after { content:''; position:absolute; left:0; bottom:0; width:24px; height:2px; background:var(--accent); border-radius:2px; }
.footer-col a { display:block; font-size:.875rem; color:var(--text-secondary); padding:6px 0; transition:all .3s; }
.footer-col a:hover { color:var(--accent); padding-left:6px; }
.footer-col p { font-size:.875rem; color:var(--text-secondary); padding:4px 0; }
.footer-bottom { border-top:1px solid var(--border); padding:20px 0; background:rgba(0,0,0,.2); }
.footer-bottom-inner { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; font-size:.8125rem; color:rgba(255,255,255,.4); }
@media (max-width:1024px) {
  .related-grid { grid-template-columns:repeat(2, 1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width:768px) {
  .container { padding:0 16px; }
  .nav-top-inner { flex-wrap:wrap; }
  .search-box { min-width:160px; flex:1; }
  .article-title { font-size:clamp(1.5rem, 5vw, 2rem); }
  .article-body { padding:24px 20px; }
  .article-body h2 { font-size:1.35rem; }
  .related-grid { grid-template-columns:1fr; }
  .footer-grid { grid-template-columns:1fr; gap:24px; }
}
@media (max-width:520px) {
  .nav-top-inner { flex-direction:column; align-items:stretch; gap:10px; }
  .nav-top-right { justify-content:space-between; gap:10px; }
  .search-box { min-width:0; flex:1; }
  .article-banner { padding:44px 0 36px; }
  .article-container { padding:0 16px; }
  .article-body { font-size:1rem; padding:20px 16px; }
  .breadcrumb { font-size:.75rem; gap:5px; }
  .breadcrumb-current { max-width:140px; }
  .not-found-actions { flex-direction:column; }
  .not-found-actions .btn { width:100%; }
  .footer-bottom-inner { flex-direction:column; text-align:center; justify-content:center; }
}