@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&family=Noto+Serif+SC:wght@500;600;700;900&display=swap');

:root { --ink:#192b2a; --ink-2:#29403e; --paper:#f2f0e8; --cream:#e6e1d3; --gold:#e8b85f; --teal:#7db5ae; --line:rgba(25,43,42,.18); --muted:#6b7670; --sans:'Manrope','PingFang SC',sans-serif; --serif:'Noto Serif SC','Songti SC',serif; --mono:'DM Mono','SFMono-Regular',monospace; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); }
button, input { font:inherit; }
button, a { -webkit-tap-highlight-color:transparent; }
a { color:inherit; text-decoration:none; }
.shell { display:grid; grid-template-columns:230px minmax(0,1fr); min-height:100vh; }
.sidebar { background:var(--ink); color:var(--paper); padding:32px 24px 24px; display:flex; flex-direction:column; position:sticky; top:0; height:100vh; }
.brand-mark { display:flex; gap:3px; height:28px; align-items:flex-end; margin-bottom:17px; }
.brand-mark span { width:4px; background:var(--gold); display:block; transform:skew(-27deg); }
.brand-mark span:nth-child(1){height:15px}.brand-mark span:nth-child(2){height:24px}.brand-mark span:nth-child(3){height:19px}
.brand-name { font:800 21px/0.93 var(--sans); letter-spacing:.14em; }.brand-name em { color:var(--gold); font-style:normal; font-size:14px; letter-spacing:.27em; }
.brand-note { color:#a4b1aa; font:13px/1.6 var(--serif); margin:20px 0 55px; }
.nav-list { display:grid; gap:7px; }.nav-item { color:#9aaba3; font-size:13px; display:flex; align-items:center; gap:11px; padding:11px 12px; border-left:2px solid transparent; transition:.2s ease; }.nav-item:hover,.nav-item.active { color:var(--paper); border-left-color:var(--gold); background:rgba(255,255,255,.06); }.nav-icon { width:17px; color:var(--gold); font-size:18px; text-align:center; }
.sidebar-foot { margin-top:auto; display:flex; align-items:flex-start; gap:9px; color:#a4b1aa; font-size:11px; line-height:1.35; }.sidebar-foot strong { display:block; font-weight:500; color:var(--paper); }.sidebar-foot small { display:block; margin-top:3px; color:#71827a; }.status-dot { width:7px; height:7px; border-radius:50%; background:#88c5a1; margin-top:4px; box-shadow:0 0 0 4px rgba(136,197,161,.12); }
.main-content { min-width:0; max-width:1540px; width:100%; padding:0 clamp(28px,5vw,78px) 28px; }
.topbar { height:78px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); }.crumb,.eyebrow { font:500 10px var(--mono); letter-spacing:.12em; color:var(--muted); }.bookmark-btn { border:0; background:transparent; color:var(--ink); font-size:12px; cursor:pointer; display:flex; align-items:center; gap:8px; }.bookmark-btn span { color:#aa8250; font-size:20px; }.bookmark-btn b { font:10px var(--mono); color:var(--muted); background:#dedbd0; border-radius:20px; padding:4px 7px; }
.hero { display:grid; grid-template-columns:minmax(320px, .9fr) minmax(390px,1.1fr); gap:40px; padding:76px 0 60px; align-items:center; }.hero-copy { max-width:560px; }.eyebrow { margin:0 0 16px; }.hero h1 { font:900 clamp(52px,6.2vw,92px)/.99 var(--serif); letter-spacing:-.07em; margin:0 0 23px; }.hero h1 span { color:#ae7b3a; }.hero-intro { max-width:410px; font:16px/1.8 var(--serif); color:#57645f; margin:0 0 29px; }.search-wrap { display:flex; align-items:center; max-width:480px; border-bottom:1px solid var(--ink); padding:7px 0 11px; }.search-icon { font-size:25px; line-height:1; margin-right:10px; }.search-wrap input { border:0; outline:0; background:transparent; flex:1; color:var(--ink); min-width:0; font-size:14px; }.search-wrap input::placeholder { color:#89918a; }.search-wrap kbd { font:10px var(--mono); border:1px solid #b4b9ae; border-radius:3px; padding:4px 6px; color:#728078; }.quick-links { display:flex; gap:9px; margin-top:17px; flex-wrap:wrap; }.quick-link { border:1px solid #c9c9bd; background:transparent; color:#68746d; font-size:11px; padding:7px 10px; cursor:pointer; transition:.2s; }.quick-link:hover { border-color:var(--ink); color:var(--ink); }.quick-link span { color:#ad7d3e; margin-left:5px; }
.hero-graphic { background:var(--ink); color:var(--gold); min-height:330px; position:relative; overflow:hidden; }.hero-graphic svg { width:100%; height:100%; display:block; }.bike-line { color:#e7b75d; }.callouts { color:#9fc8bc; }.callouts path { stroke:currentColor; stroke-width:1; fill:none; stroke-dasharray:2 3; }.graphic-caption { position:absolute; bottom:16px; left:18px; right:18px; display:flex; justify-content:space-between; color:#718d83; font:10px var(--mono); letter-spacing:.08em; }
.stats-strip { border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); padding:20px 0; margin-bottom:72px; }.stat { border-right:1px solid var(--line); padding:0 24px; display:flex; flex-direction:column; gap:4px; }.stat:first-child { padding-left:0; }.stat:last-child { border-right:0; }.stat strong { font:700 25px var(--mono); color:var(--ink); }.stat span { color:var(--muted); font-size:11px; }.stat-note { align-items:flex-end; text-align:right; }.stat-note strong { font-size:12px; color:#aa7d45; }
.section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:24px; }.section-heading h2 { font:700 30px var(--serif); letter-spacing:-.05em; margin:0; }.text-link { color:#8e683b; font-size:12px; padding-bottom:4px; border-bottom:1px solid #b99a6d; }.text-link span { margin-left:8px; }.category-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }.category-card { min-height:225px; border:0; padding:20px; position:relative; text-align:left; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease; }.category-card:hover { transform:translateY(-5px); box-shadow:0 10px 20px rgba(25,43,42,.12); }.category-card--gold { background:var(--gold); }.category-card--teal { background:var(--teal); }.category-card--ink { background:var(--ink); color:var(--paper); }.category-card--paper { background:#d9d5c7; }.category-number { font:11px var(--mono); opacity:.7; }.category-card h3 { position:absolute; bottom:42px; left:20px; font:700 22px var(--serif); margin:0; letter-spacing:-.04em; }.category-card p { position:absolute; bottom:20px; left:20px; margin:0; font-size:10px; opacity:.7; }.card-arrow { position:absolute; right:18px; top:17px; font-size:22px; }.category-illustration { position:absolute; top:46px; right:20px; font:88px/.7 var(--serif); opacity:.22; }.wheel { font-size:82px; }.cockpit { font-size:100px; transform:rotate(-14deg); }.brake { font-size:76px; }
.split-section { display:grid; grid-template-columns:1.08fr .92fr; gap:12px; margin:74px 0; }.feature-panel,.torque-panel { padding:30px; min-height:345px; }.feature-panel { background:#e3dfd2; }.torque-panel { background:#cfddd5; }.compact { margin-bottom:29px; }.compact h2 { font-size:24px; }.date-stamp,.wrench-mark { color:#a27a43; font:11px var(--mono); }.wrench-mark { font-size:24px; }.feature-article { max-width:530px; }.article-kicker { font:10px var(--mono); color:#a07845; margin-bottom:17px; }.feature-article h3 { font:700 clamp(25px,3vw,38px)/1.15 var(--serif); letter-spacing:-.05em; margin:0 0 15px; }.feature-article p { max-width:400px; color:#64706a; font:14px/1.7 var(--serif); margin:0 0 24px; }.read-link { font-size:12px; color:#966b38; border-bottom:1px solid #bda479; padding-bottom:5px; }.read-link span { margin-left:10px; }.repair-list { border-top:1px solid rgba(25,43,42,.2); }.repair-row { width:100%; background:transparent; border:0; border-bottom:1px solid rgba(25,43,42,.2); display:grid; grid-template-columns:37px 1fr 20px; gap:10px; align-items:center; padding:16px 0; text-align:left; color:var(--ink); cursor:pointer; }.repair-row:hover strong { color:#9c6e35; }.repair-icon { font:10px var(--mono); color:#9c6e35; }.repair-row strong { display:block; font-size:13px; font-weight:700; }.repair-row small { color:#6c7770; display:block; font-size:11px; margin-top:3px; }.row-arrow { color:#9c6e35; font-size:18px; }
.footer { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:18px; color:#7d8780; font:10px var(--mono); letter-spacing:.03em; }
.footer-info { display:flex; flex-direction:column; gap:5px; }
.footer-beian { display:flex; flex-direction:column; align-items:flex-end; gap:5px; text-align:right; }
.footer-beian a { color:#8b8377; border-bottom:1px solid transparent; transition:.2s; }
.footer-beian a:hover { color:var(--ink); border-bottom-color:var(--ink); }.toast { position:fixed; left:50%; bottom:25px; transform:translate(-50%,20px); background:var(--ink); color:var(--paper); padding:11px 16px; font-size:12px; opacity:0; pointer-events:none; transition:.25s; }.toast.show { opacity:1; transform:translate(-50%,0); }
@media (max-width:1000px) { .shell { grid-template-columns:190px minmax(0,1fr); }.sidebar { padding:28px 18px; }.hero { grid-template-columns:1fr; padding-top:55px; }.hero-copy { max-width:700px; }.hero-graphic { max-width:700px; }.category-grid { grid-template-columns:repeat(2,1fr); }.split-section { grid-template-columns:1fr; } }
@media (max-width:650px) { .shell { display:block; }.sidebar { height:auto; position:relative; padding:18px 20px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; }.brand-mark { margin:0; }.brand-name { font-size:17px; }.brand-name em { font-size:11px; }.brand-note,.sidebar-foot { display:none; }.nav-list { grid-column:1/-1; grid-template-columns:repeat(4,1fr); gap:3px; }.nav-item { justify-content:center; padding:8px 3px; font-size:11px; border-left:0; border-bottom:2px solid transparent; gap:4px; }.nav-item:hover,.nav-item.active { border-bottom-color:var(--gold); background:transparent; }.nav-icon { display:none; }.main-content { padding:0 18px 24px; }.topbar { height:60px; }.bookmark-btn { font-size:0; }.bookmark-btn span { font-size:21px; }.hero { padding:48px 0 40px; gap:32px; }.hero h1 { font-size:56px; }.hero-intro { font-size:14px; }.hero-graphic { min-height:230px; }.graphic-caption { font-size:8px; }.stats-strip { margin-bottom:48px; padding:16px 0; }.stat { padding:0 10px; }.stat strong { font-size:17px; }.stat span { font-size:9px; }.stat-note strong { font-size:9px; }.category-grid { gap:8px; }.category-card { min-height:180px; padding:14px; }.category-card h3 { left:14px; bottom:37px; font-size:18px; }.category-card p { left:14px; bottom:14px; font-size:9px; max-width:110px; }.category-illustration { top:42px; right:13px; font-size:65px; }.section-heading h2 { font-size:26px; }.text-link { font-size:10px; }.split-section { margin:50px 0; gap:8px; }.feature-panel,.torque-panel { padding:22px 18px; min-height:315px; }.feature-article h3 { font-size:28px; }.footer { display:block; line-height:1.8; }.footer span { display:block; }.footer-beian { align-items:flex-start; text-align:left; margin-top:8px; } }
@media (prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; transition:none!important; } }