/* Huayue visual rebuild v2 — ported CSS (rebuild-20261030).
   Base: liandong/rebuild-20261030/sample/site.css (reference NOT modified).
   Palette mapped to huayue (Material Laboratory): ink charcoal #22272b,
   paper #f4f2ec, accent cellular slate #5f7d84, deep rubber black #1c1e20,
   line #d5d0c4, soft #e8e4d8, amber glass #d9a441.
   Two deliberate deviations from the v2 base, both recorded in PORTING-RECORD.md:
   (a) the v2 base's banned mobile-comment wording scrubbed to
       "evidence row" in this PORTED COPY only;
   (b) brandbar button scoped to a.brandcta ONLY (ningjiu lesson: the brand
       link is also an <a> and must never pick up button styling) — the v2
       generic brandbar-descendant-anchor selector is replaced throughout. */
:root{--ink:#22272b;--paper:#f4f2ec;--accent:#5f7d84;--deep:#1c1e20;--line:#d5d0c4;--soft:#e8e4d8;--amber:#d9a441;--card:#ffffff}
*{box-sizing:border-box}body{margin:0;font-family:Georgia,'Times New Roman',serif;color:var(--ink);background:var(--paper);line-height:1.7}
a{color:var(--deep)}a:hover{color:var(--accent)}
/* --- compact header: topbar + brandbar + solid CTA button (was a plain link) --- */
.topbar{background:var(--ink);color:#fff;padding:7px 5vw;font-size:13px;display:flex;gap:20px;flex-wrap:wrap}
.topbar a{color:#ffe9a8}.brandbar{padding:16px 5vw 10px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.brand{font-size:30px;font-weight:700;letter-spacing:1px}.brand small{display:block;font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--accent)}
a.brandcta{display:inline-block;background:var(--accent);color:#fff !important;padding:11px 22px;text-decoration:none;font-family:Arial,Helvetica,sans-serif;font-weight:700;font-size:15px;border-radius:3px;box-shadow:0 2px 6px rgba(28,30,32,.25)}
a.brandcta:hover{background:var(--deep);color:#fff}
/* --- two-tier nav: product row (primary) + secondary row; mobile = scroll rows, never a 5-row stack --- */
.mainnav{background:#fff;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);font-family:Arial,Helvetica,sans-serif}
.nav-primary{display:flex;gap:22px;padding:11px 5vw 10px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.nav-primary a{text-decoration:none;color:var(--ink);font-size:16px;font-weight:700;white-space:nowrap}
.nav-primary a:hover{color:var(--accent);text-decoration:underline}
.nav-secondary{display:flex;gap:18px;padding:8px 5vw;flex-wrap:wrap}
.nav-secondary a{text-decoration:none;color:#4a5a64;font-size:13px;white-space:nowrap}
.nav-secondary a:hover{color:var(--accent);text-decoration:underline}
/* --- compact hero so the product figure enters the first screen --- */
.hero{padding:28px 5vw 22px;background:linear-gradient(180deg,#fff 0%,var(--paper) 100%);border-bottom:3px solid var(--accent)}
.eyebrow{font-family:Arial,sans-serif;text-transform:uppercase;letter-spacing:3px;font-size:13px;color:var(--accent);font-weight:700}
.hero h1{font-size:36px;line-height:1.15;margin:8px 0}.lede{font-size:18px;max-width:840px;line-height:1.6}
.evidence{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:18px}
.evidence-item{border:1px solid var(--line);border-top:4px solid var(--accent);background:#fff;padding:12px 16px}
.evidence-item b{display:block;font-family:Arial,sans-serif;font-size:13px;text-transform:uppercase;letter-spacing:1px}
.evidence-item span{font-size:14px;color:#444}
/* --- product showcase figure: full-width, framed, caption as a strip --- */
.disc-motif{height:110px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-family:Arial,sans-serif;letter-spacing:2px;text-transform:uppercase;font-size:13px;margin:24px 0}
.motif-materials{background:radial-gradient(circle,#d8efec 0 34%,#f7f5f0 35% 58%,#bfe3df 59% 72%,#f7f5f0 73%)}
.motif-equipment{background:radial-gradient(circle,#dbe9f2 0 34%,#f7f5f0 35% 58%,#bcd6e8 59% 72%,#f7f5f0 73%)}
.motif-guides{background:radial-gradient(circle,#f5e8c8 0 34%,#f7f5f0 35% 58%,#ecd9a0 59% 72%,#f7f5f0 73%)}
.motif-company{background:radial-gradient(circle,#dde3e6 0 34%,#f7f5f0 35% 58%,#c3ced4 59% 72%,#f7f5f0 73%)}
/* --- reading rhythm: narrower measure, breathing paragraphs, alternating h2 treatments --- */
main{padding:28px 5vw 10px;max-width:880px;margin:0 auto}
main h2{font-size:26px;margin-top:44px;border-left:6px solid var(--accent);padding-left:12px;line-height:1.25}
main h2:nth-of-type(odd)::after{content:"";display:block;height:3px;width:64px;background:var(--accent);margin-top:10px}
main h2:nth-of-type(even){border-left:0;background:var(--deep);color:#fff;padding:12px 16px}
main h2 + p{font-size:18px}
main p{font-size:17px;line-height:1.85;margin:0 0 1.15em}
.cardgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:24px 0}
.card{border:1px solid var(--line);border-top:4px solid var(--deep);background:#fff;padding:18px;box-shadow:0 1px 4px rgba(34,39,43,.06)}
.card:nth-child(2n){background:var(--soft)}
.card h3{margin:6px 0}.card p{font-size:15px;line-height:1.7}
.card img,.figure img{width:100%;height:auto;display:block}
.figure{margin:8px 0 28px;border:1px solid var(--line);background:#fff;padding:10px;box-shadow:0 2px 10px rgba(34,39,43,.10)}
.figure figcaption{font-size:14px;color:#fff;background:var(--deep);font-style:normal;margin:10px -10px -10px;padding:9px 14px}
.cta-band{background:var(--ink);color:#fff;padding:28px 5vw;margin-top:34px}.cta-band a{color:#ffe9a8}.cta-band .cta-title{font-size:1.5em;font-weight:700;margin:0.83em 0;font-family:Arial,sans-serif}
.cta-band .btn{display:inline-block;background:var(--accent);color:#fff;padding:12px 22px;text-decoration:none;font-family:Arial,sans-serif;font-weight:700;margin-right:12px}
.note{background:var(--soft);border-left:4px solid var(--deep);padding:14px 18px;margin:20px 0}
.warn{background:#fff4e6;border-left:4px solid var(--amber);padding:14px 18px;margin:20px 0}
footer{background:#101c2e;color:#d9dee6;padding:34px 5vw;font-family:Arial,sans-serif;font-size:14px;border-top:4px solid var(--accent)}
.footgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px}
footer a{color:#ffe9a8}footer h4{color:#fff;margin:0 0 8px}.footbase{border-top:1px solid #33415c;margin-top:24px;padding-top:14px}
form{max-width:640px;background:#fff;border:1px solid var(--line);padding:22px}
label{display:block;font-family:Arial,sans-serif;font-weight:700;margin:14px 0 4px}
input[type=text],input[type=email],textarea{width:100%;padding:10px;border:1px solid #999;font-size:16px}
textarea{min-height:140px}button{background:var(--accent);color:#fff;border:0;padding:13px 26px;font-size:16px;font-weight:700;cursor:pointer}
.breadcrumb{font-family:Arial,sans-serif;font-size:13px;color:#666}
.cta-inner{max-width:1080px}.btn-secondary{display:inline-block;border:1px solid #ffe9a8;color:#ffe9a8;padding:12px 22px;text-decoration:none;font-family:Arial,sans-serif;font-weight:700}
.small{font-size:13px}.related-list{list-style:none;padding:0}.related-list li{margin:6px 0}.related-heading{font-family:Arial,sans-serif;font-size:18px;margin-top:30px}
.tag{display:inline-block;border:1px dashed var(--accent);padding:2px 8px;font-family:Arial,sans-serif;font-size:11px;letter-spacing:2px;text-transform:uppercase}
.divider{margin:0}.highlight{background:#fff3d6;padding:2px 6px}.muted{color:#555}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:18px}.step-list{counter-reset:step}
.callout{border:2px solid var(--deep);background:#fff;padding:18px;margin:22px 0}
.badge{display:inline-block;background:var(--deep);color:#fff;font-family:Arial,sans-serif;font-size:12px;padding:3px 9px;letter-spacing:1px;text-transform:uppercase}
.intro-box{background:#fff;border:1px solid var(--line);padding:18px}.footer-note{font-size:13px;color:#aeb8c6}
.quote{border-left:4px solid var(--accent);padding:8px 16px;font-style:italic;background:#fff}
.spec-table{border-collapse:collapse;width:100%;margin:20px 0}.spec-table th,.spec-table td{border:1px solid var(--line);padding:8px 12px;text-align:left;font-size:15px}
.spec-table th{background:var(--soft);font-family:Arial,sans-serif}
/* --- tablet: evidence as one compact row of five (fixes 4+1 wrap) --- */
@media (max-width:1100px){
.evidence{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.evidence-item{padding:10px 12px}.evidence-item span{font-size:13px;line-height:1.5}
}
/* --- mobile: compact header, scroll-row nav + evidence row with fade scroll cues --- */
@media (max-width:640px){
.topbar{font-size:12px;gap:8px;padding:5px 4vw}
.brandbar{padding:10px 4vw 6px}.brand{font-size:24px}.brand small{font-size:11px}
a.brandcta{padding:8px 14px;font-size:14px}
.nav-primary,.nav-secondary{flex-wrap:nowrap;overflow-x:auto;padding-left:4vw;padding-right:4vw;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
.nav-primary::-webkit-scrollbar,.nav-secondary::-webkit-scrollbar{display:none}
.nav-primary{gap:16px;padding-top:7px;padding-bottom:7px}
.nav-secondary{gap:14px;padding-top:6px;padding-bottom:6px}
details.lang-switch summary{padding:6px 4vw;font-family:Arial,Helvetica,sans-serif;font-size:13px}
.hero{padding:16px 4vw 12px}.hero h1{font-size:26px}.lede{font-size:16px;line-height:1.55}
main{padding:20px 4vw 10px}main h2{font-size:23px;margin-top:34px}
main p{font-size:16px}
.two-col{grid-template-columns:1fr}
.evidence{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:6px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,#000 88%,transparent 100%)}
.evidence-item{flex:0 0 230px;scroll-snap-align:start}
.evidence-item span{font-size:13px}
}
/* ================= huayue appendix (adapter: site classes, v2 values) ================= */
/* Header: dark brandbar band + white nav band inside .site-header. */
.site-header{background:var(--ink);color:#fff;padding:0}
.site-header a{color:#fff;text-decoration:none}
.brandbar>div{min-width:0}
.brand-sub{font-size:14px;color:#cfd6da;margin-top:2px}
.main-nav{background:#fff;border-top:2px solid var(--ink);border-bottom:1px solid var(--line);font-family:Arial,Helvetica,sans-serif}
/* Nav link colours must beat .site-header a (equal specificity, later
   source order): without these, nav links render white-on-white — R1
   regression caught by Codex review 2026-10-30, fixed before R2. */
.main-nav .nav-primary a{color:var(--ink)}
.main-nav .nav-secondary a{color:#4a5a64}
.main-nav .nav-primary a:hover{color:var(--accent);text-decoration:underline}
.main-nav .nav-secondary a:hover{color:var(--accent);text-decoration:underline}
.main-nav a{text-decoration:none}
/* Hero intro mirrors v2 .lede. */
.hero-intro{font-size:18px;max-width:840px;line-height:1.6;margin:0}
/* Signature .strata band: kept VERBATIM from pre-rebuild CSS (widths vary by page group). */
.strata{display:flex;height:16px;margin:0}
.strata span{display:block}
.strata .s-rock{background:#5a5f63}
.strata .s-glass{background:#d9a441}
.strata .s-rubber{background:#1c1e20}
.strata .s-cell{background:#5f7d84}
.strata-home .s-rock{flex:1}.strata-home .s-glass{flex:1}.strata-home .s-rubber{flex:1}.strata-home .s-cell{flex:1}
.strata-rock .s-rock{flex:3}.strata-rock .s-glass{flex:1}.strata-rock .s-rubber{flex:1}.strata-rock .s-cell{flex:1}
.strata-glass .s-rock{flex:1}.strata-glass .s-glass{flex:3}.strata-glass .s-rubber{flex:1}.strata-glass .s-cell{flex:1}
.strata-rubber .s-rock{flex:1}.strata-rubber .s-glass{flex:1}.strata-rubber .s-rubber{flex:3}.strata-rubber .s-cell{flex:1}
.strata-cellular .s-rock{flex:1}.strata-cellular .s-glass{flex:1}.strata-cellular .s-rubber{flex:1}.strata-cellular .s-cell{flex:3}
.strata-guide .s-rock{flex:1}.strata-guide .s-glass{flex:1}.strata-guide .s-rubber{flex:1}.strata-guide .s-cell{flex:1}
/* Evidence defence: no bullets even if an evidence list is ever used. */
.evidence{list-style:none}
/* At-a-glance: SINGLE-<p> evidence (homepage only). Standalone full-row card,
   never a 230px scroll card: it is a block outside <main>, so it spans the row
   at every viewport; the mobile rule below only tightens its side margins. */
.at-a-glance{background:#fff;border:1px solid var(--line);border-top:4px solid var(--accent);padding:12px 16px;margin:20px 5vw}
.glance-text{margin:0;font-size:15px;line-height:1.7}
/* Sections: v2 h2 rhythm under the site's .section-title. Each h2 is the sole
   h2 in its <section>, so v2's main-h2 nth-of-type alternation cannot fire;
   section-based alternation below reproduces it (dark even sections, bar
   suppressed on dark titles). */
.section{margin-bottom:8px}
.section-title{font-size:26px;margin-top:44px;border-left:6px solid var(--accent);padding-left:12px;line-height:1.25}
.section:nth-of-type(odd) .section-title::after{content:"";display:block;height:3px;width:64px;background:var(--accent);margin-top:10px}
.section:nth-of-type(even) .section-title{border-left:0;background:var(--deep);color:#fff;padding:12px 16px}
.section:nth-of-type(even) .section-title::after{display:none}
/* Related links, CTA band, footer, form, blog, cards: v2 values under site classes. */
.related{margin:28px 0;padding:14px 18px;background:var(--soft);border:1px solid var(--line)}
.related-link{margin-right:14px}
.cta{background:var(--ink);color:#fff;padding:28px 5vw;margin-top:34px}
.cta a{color:#ffe9a8}
.cta-title{font-size:1.5em;font-weight:700;margin:0.83em 0;font-family:Arial,sans-serif}
.cta-text{margin:8px 0}
.site-footer{background:var(--ink);color:#d9dee6;padding:34px 5vw;font-family:Arial,sans-serif;font-size:14px;border-top:4px solid var(--accent)}
.site-footer a{color:#ffe9a8}
.footer-brand{margin:0 0 12px}
.footer-nav{margin:12px 0}
.footer-link{margin-right:12px}
.inquiry-form{margin:24px 0}
.blog-list{margin:20px 0}
.blog-item{margin:14px 0}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:24px 0}
.card-title{font-size:20px;margin:0 0 8px}
/* Spec table scroll wrap (SOP table-wrap rule; wrapper added at generator layer). */
.table-scroll{overflow-x:auto;margin:20px 0}
.table-scroll .spec-table{margin:0}
@media (max-width:640px){
.hero-intro{font-size:16px;line-height:1.55}
.section-title{font-size:23px;margin-top:34px}
.at-a-glance{margin:16px 4vw}
.spec-table th,.spec-table td{font-size:13px;padding:6px 8px}
}