:root { --blog-navy:#0a1d38; --blog-blue:#1766c2; --blog-blue-deep:#0e4e9b; --blog-soft:#eaf3ff; --blog-ink:#162238; --blog-muted:#607088; --blog-line:#dce5ef; --blog-canvas:#f4f7fb; --blog-green:#d7f2ad; --blog-white:#fff; --blog-shadow:0 22px 52px rgba(10,29,56,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body.blog-index-page { margin:0; min-width:320px; background:var(--blog-canvas); color:var(--blog-ink); font-family:"Aptos","Segoe UI","Helvetica Neue",Arial,sans-serif; font-size:16px; line-height:1.55; }
a { color:inherit; }
a:focus-visible, button:focus-visible { outline:3px solid #f2bf2d; outline-offset:4px; }
::selection { color:#fff; background:var(--blog-blue); }
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-thumb { background:#9eafc3; border:3px solid var(--blog-canvas); border-radius:999px; }
.blog-shell, .blog-breadcrumb { width:min(1180px,calc(100% - 48px)); margin-inline:auto; }
.blog-global-header { background:#000 !important; }
.blog-global-header .region > .container { max-width:100%; padding-inline:28px; }
.blog-global-header .region > .container > .row { flex-wrap:nowrap; align-items:center; }
.blog-global-header .block--logo { flex:0 0 178px; width:178px !important; max-width:178px; }
.blog-global-header .block--menu--primary { flex:1 1 auto; max-width:none; }
.blog-global-header .logo a { width:172px; height:74px; background-size:auto 63%; }
.blog-global-header .blog-global-menu > ul { display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-end; float:none; margin:0; padding:0; white-space:nowrap; }
.blog-global-header .blog-global-menu > ul > li { list-style:none; }
.blog-global-header .menu--primary ul li > a { padding:10px 12px 28px; font-size:.84rem; }
.blog-global-header .menu--primary ul li.active > a, .blog-global-header .menu--primary ul li > a:hover { border-color:#d64c22; }
.blog-breadcrumb { padding-block:20px 14px; }
.breadcrumb { display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; color:var(--blog-muted); font-size:.875rem; list-style:none; }
.breadcrumb li + li::before { margin-right:8px; color:#a0adbd; content:"/"; }
.breadcrumb a { color:var(--blog-blue); }
.blog-hero { position:relative; overflow:hidden; min-height:420px; color:#fff; background:linear-gradient(90deg,rgba(1,11,25,.92),rgba(9,35,69,.82) 52%,rgba(17,102,194,.46)),url('/images/gaoqiao-hero-20260802-1440.webp') center/cover no-repeat; }
.blog-hero::after { position:absolute; right:6%; bottom:-55%; width:360px; height:360px; border:1px solid rgba(255,255,255,.3); border-radius:50%; content:""; }
.blog-hero__content { position:relative; z-index:1; padding-block:82px 78px; }
.blog-hero__label { margin:0 0 20px; color:#d7f2ad; font-size:.76rem; font-weight:800; letter-spacing:.15em; }
.blog-hero h1 { max-width:18ch; margin:0; font-size:clamp(2.45rem,5vw,5.2rem); font-weight:800; letter-spacing:-.055em; line-height:.96; text-wrap:balance; }
.blog-hero__content > p:not(.blog-hero__label) { max-width:64ch; margin:26px 0 0; color:#e1ecfb; font-size:clamp(1rem,1.7vw,1.2rem); line-height:1.75; }
.blog-hero__cta, .blog-contact > a { display:inline-flex; align-items:center; gap:12px; margin-top:34px; padding:13px 18px; color:var(--blog-navy); background:#d7f2ad; font-weight:800; text-decoration:none; transition:transform 180ms ease, background 180ms ease; }
.blog-hero__cta:hover, .blog-contact > a:hover { background:#fff; transform:translateY(-2px); }
.blog-feature { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr); margin-top:64px; background:var(--blog-white); box-shadow:var(--blog-shadow); }
.blog-feature__image { min-height:430px; overflow:hidden; }
.blog-feature__image img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 700ms cubic-bezier(.2,.8,.2,1); }
.blog-feature:hover img { transform:scale(1.035); }
.blog-feature__copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:54px 52px; }
.article-meta { display:flex; flex-wrap:wrap; gap:12px; margin:0; color:var(--blog-muted); font-size:.78rem; font-weight:700; letter-spacing:.045em; text-transform:uppercase; }
.article-meta span:first-child { color:var(--blog-blue); }
.article-meta span + span::before, .article-meta time::before { margin-right:12px; color:#a0adbd; content:"•"; }
.blog-feature h2 { max-width:15ch; margin:18px 0 18px; color:var(--blog-navy); font-size:clamp(1.9rem,3vw,3rem); letter-spacing:-.045em; line-height:1.02; text-wrap:balance; }
.blog-feature h2 a, .blog-entry h3 a { text-decoration:none; }
.blog-feature h2 a:hover, .blog-entry h3 a:hover { color:var(--blog-blue); }
.blog-feature__copy > p:not(.article-meta) { max-width:50ch; margin:0; color:var(--blog-muted); }
.article-link { display:inline-flex; gap:10px; margin-top:28px; color:var(--blog-blue-deep); font-weight:800; text-decoration-thickness:2px; text-underline-offset:5px; }
.blog-topics { display:flex; flex-wrap:wrap; gap:9px; padding:44px 0 14px; }
.blog-topics a { padding:9px 13px; border:1px solid var(--blog-line); color:#38506f; background:transparent; font-size:.9rem; font-weight:700; text-decoration:none; transition:color 150ms ease,background 150ms ease,border-color 150ms ease; }
.blog-topics a:hover, .blog-topics a.is-active { border-color:var(--blog-navy); color:#fff; background:var(--blog-navy); }
.blog-feed { padding-block:34px 76px; }
.blog-feed__heading { display:flex; align-items:end; justify-content:space-between; gap:36px; padding-bottom:24px; border-bottom:2px solid var(--blog-navy); }
.blog-feed__heading h2 { margin:0; color:var(--blog-navy); font-size:clamp(1.85rem,3.2vw,3.2rem); letter-spacing:-.045em; line-height:1; }
.blog-feed__heading p { max-width:43ch; margin:0; color:var(--blog-muted); }
.blog-list { background:var(--blog-white); }
.blog-entry { display:grid; grid-template-columns:112px minmax(0,1fr) 54px; gap:26px; align-items:center; min-height:164px; padding:28px 30px; border-bottom:1px solid var(--blog-line); transition:background 180ms ease; }
.blog-entry:hover { background:#f8fbff; }
.blog-entry__date { display:flex; flex-direction:column; color:var(--blog-muted); font-size:.7rem; font-weight:800; letter-spacing:.1em; line-height:1.1; }
.blog-entry__date strong { margin:3px 0; color:var(--blog-navy); font-size:2.25rem; letter-spacing:-.06em; line-height:1; }
.blog-entry__date span { font-size:.7rem; }
.blog-entry h3 { max-width:34ch; margin:9px 0 8px; color:var(--blog-navy); font-size:clamp(1.15rem,1.9vw,1.48rem); letter-spacing:-.025em; line-height:1.2; text-wrap:balance; }
.blog-entry__content > p:not(.article-meta) { max-width:65ch; margin:0; color:var(--blog-muted); font-size:.94rem; }
.blog-entry__arrow { display:grid; width:42px; height:42px; place-items:center; border:1px solid var(--blog-line); color:var(--blog-navy); font-size:1.35rem; text-decoration:none; transition:background 160ms ease,color 160ms ease,transform 160ms ease; }
.blog-entry:hover .blog-entry__arrow { color:#fff; background:var(--blog-blue); transform:translateX(3px); }
.blog-feed__more { margin:30px 0 0; text-align:right; }
.blog-feed__more a { color:var(--blog-blue-deep); font-weight:800; text-decoration-thickness:2px; text-underline-offset:5px; }
.blog-contact { display:flex; align-items:center; justify-content:space-between; gap:32px; margin-bottom:72px; padding:48px 52px; color:#fff; background:var(--blog-navy); box-shadow:var(--blog-shadow); }
.blog-contact h2 { max-width:21ch; margin:0; font-size:clamp(1.65rem,3vw,2.5rem); letter-spacing:-.04em; line-height:1.06; }
.blog-contact p { max-width:59ch; margin:14px 0 0; color:#dceafa; }
.blog-contact > a { flex:none; margin:0; }
.blog-footer { padding:40px 0 46px; color:#d5e0ed; background:#071425; }
.blog-footer .blog-shell { display:grid; grid-template-columns:auto 1fr auto; gap:26px; align-items:center; }
.blog-footer__logo { color:#fff; font-size:1.35rem; font-weight:900; letter-spacing:.05em; text-decoration:none; }
.blog-footer p { margin:0; color:#9fb0c4; font-size:.9rem; }
.blog-footer nav { display:flex; flex-wrap:wrap; gap:16px; }
.blog-footer nav a { color:#d5e0ed; font-size:.9rem; font-weight:700; text-decoration:none; }
.blog-footer nav a:hover { color:#d7f2ad; }
@media (max-width:992.98px) { .blog-global-header .region > .container { padding-inline:15px; } .blog-global-header .block--logo { flex:0 0 88px; width:88px !important; max-width:88px; } .blog-global-header .block--menu--primary { display:flex; width:auto !important; justify-content:flex-end; } .blog-global-header .logo a { width:88px; background-size:auto 52%; } .blog-global-header .blog-global-menu { display:none; } .blog-global-header .blog-global-menu.is-open { position:absolute; z-index:30; top:74px; right:15px; display:block; width:min(320px,calc(100vw - 30px)); padding:14px 20px; background:#071425; box-shadow:var(--blog-shadow); } .blog-global-header .blog-global-menu.is-open > ul { display:block; } .blog-global-header .blog-global-menu.is-open li a { display:block; padding:11px 0; } .blog-global-header .hamburger { display:flex; } .blog-feature { grid-template-columns:1fr; } .blog-feature__image { min-height:340px; } }
@media (max-width:680px) { .blog-shell, .blog-breadcrumb { width:min(100% - 32px,1180px); } .blog-hero { min-height:0; } .blog-hero__content { padding-block:62px 58px; } .blog-hero h1 { font-size:clamp(2.35rem,12vw,3.7rem); } .blog-feature { margin-top:34px; } .blog-feature__image { min-height:230px; } .blog-feature__copy { padding:34px 28px 38px; } .blog-topics { padding-top:32px; } .blog-feed { padding-block:28px 52px; } .blog-feed__heading { display:block; } .blog-feed__heading p { margin-top:12px; } .blog-entry { grid-template-columns:56px minmax(0,1fr); gap:18px; min-height:0; padding:25px 18px; } .blog-entry__date strong { font-size:1.8rem; } .blog-entry__arrow { display:none; } .blog-entry__content > p:not(.article-meta) { font-size:.9rem; } .blog-contact { display:block; margin-bottom:42px; padding:36px 28px; } .blog-contact > a { margin-top:26px; } .blog-footer .blog-shell { grid-template-columns:1fr; gap:12px; } .blog-footer nav { margin-top:5px; } }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior:auto !important; transition-duration:.01ms !important; } }