/* boda visual rebuild v2 — Material Lab, adapted from the liandong v2 system.
   Same palette/brand/motifs, new component system. Text unchanged; only layout,
   spacing, hierarchy and colour application change. No images; all motifs are CSS. */
:root{--ink:#1d2b2b;--paper:#f7f5f0;--accent:#0e6b6b;--deep:#0e4f4f;--line:#d8d2c2;--soft:#eef3f1;--amber:#c98a2e;--card:#ffffff}
*{box-sizing:border-box}body{margin:0;font-family:Georgia,'Times New Roman',serif;color:#222;background:var(--paper);line-height:1.65}
a{color:var(--accent)}a:hover{color:var(--deep)}
/* --- compact header: brandbar + solid CTA button + two-tier nav --- */
.site-header{background:var(--ink);color:#f2ede3;padding:0}
.brandbar{padding:18px 5vw 12px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.brand{font-size:1.35em;font-weight:700;letter-spacing:.02em}
.brand-sub{font-size:.9em;color:#c9d6d0}
.brand-cta{display:inline-block;background:var(--amber);color:var(--ink) !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(0,0,0,.25)}
.brand-cta:hover{background:#e8b95a;color:var(--ink)}
.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 --- */
.hero{background:#e9e4d8;padding:28px 5vw 22px;border-bottom:4px solid var(--accent)}
.hero h1{margin:0 0 10px;font-size:2em;line-height:1.25}
.hero-lede{font-size:1.08em;max-width:820px}
/* --- evidence cards: grid on desktop, one row of five on tablet, scroll row on mobile --- */
.evidence{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-top:18px;list-style:none}
.evidence-item{border:1px solid var(--line);border-top:4px solid var(--accent);background:#fff;padding:12px 16px}
.evidence-item span{font-size:14px;color:#444}
/* --- roll-section motifs (site signature, verbatim classes) --- */
.roll-strip{height:26px;margin:18px 0 4px;border:1px solid #999;display:flex;overflow:hidden}
.roll-layer{flex:1}
.layer-a{background:#0e6b6b}.layer-b{background:#e8b95a}.layer-c{background:#7a9a8f}
.layer-d{background:#d8d2c2}.layer-e{background:#3a4a4a}.layer-f{background:#b7c4bd}
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;margin:16px 0}
.swatch{border:1px solid #c9c2b2;padding:22px 8px;text-align:center;font-size:.85em;background:#fff}
.swatch-a{background:#dfe9e4}.swatch-b{background:#f3e6c8}.swatch-c{background:#e4ddd0}
.swatch-d{background:#d5dee0}.swatch-e{background:#efe8da}.swatch-f{background:#e0e6d8}
.ruler{height:14px;background:repeating-linear-gradient(90deg,#333 0 2px,transparent 2px 20px);border-bottom:1px solid #333;margin:14px 0}
/* --- reading rhythm: narrower measure, breathing paragraphs, alternating h2 treatments --- */
main{max-width:880px;margin:0 auto;padding:28px 5vw 10px}
main h2{font-size:26px;margin-top:44px;border-left:6px solid var(--accent);padding-left:12px;line-height:1.25;color:var(--deep)}
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}
.lede{font-size:1.08em}
.note-box{background:#eef3f1;border-left:5px solid #0e6b6b;padding:12px 16px;margin:18px 0}
.warn-box{background:#fdf6e3;border-left:5px solid #c98a2e;padding:12px 16px;margin:18px 0}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin:24px 0}
.card{background:#fff;border:1px solid #d8d2c2;border-top:4px solid var(--deep);padding:18px;box-shadow:0 1px 4px rgba(18,33,43,.06)}
.card:nth-child(2n){background:var(--soft)}
.card h3{margin-top:0;color:#0e4f4f}
.card a{text-decoration:none}
.card p{font-size:15px;line-height:1.7}
.topic-list{columns:2;column-gap:28px}
.topic-list li{margin-bottom:6px}
.cta-band{background:#1d2b2b;color:#f2ede3;padding:28px 5vw;margin-top:34px}
.cta-band a{color:#e8b95a}
.cta-title{font-size:1.5em;font-weight:700;margin:.4em 0}
.cta-text{max-width:820px}
.btn{display:inline-block;background:#c98a2e;color:#1d2b2b !important;padding:12px 22px;text-decoration:none;font-weight:700;margin-top:8px}
.form-wrap{max-width:640px;background:#fff;border:1px solid var(--line);padding:22px}
.form-field{margin-bottom:14px}
.form-field label{display:block;font-weight:700;margin-bottom:4px}
.form-field input,.form-field textarea,.form-field select{width:100%;padding:9px;border:1px solid #999;font-size:1em;box-sizing:border-box}
.form-field textarea{min-height:140px}
.form-note{font-size:.9em;color:#555}
.site-footer{background:#1d2b2b;color:#d9dee6;padding:34px 5vw;border-top:4px solid var(--accent)}
.footer-links{display:flex;flex-wrap:wrap;gap:4px 14px;list-style:none;padding:0;margin:0 0 14px}
.footer-links a{text-decoration:none;color:#ffe9a8}
.footer-note{font-size:.88em;color:#aeb8c6}
.blog-list{list-style:none;padding:0}
.blog-list li{background:#fff;border:1px solid #d8d2c2;padding:12px 16px;margin-bottom:10px}
.notfound{text-align:center;padding:60px 5%}
/* --- 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){
.brandbar{padding:12px 4vw 8px}.brand{font-size:1.15em}
.brand-cta{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}
.hero{padding:16px 4vw 12px}.hero h1{font-size:26px}.hero-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}
.topic-list{columns:1}
.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}
}
