:root {
  --content-ink: #183552;
  --content-paper: #f6fbff;
  --content-blue: #2b6fff;
  --content-orange: #ff8555;
  --content-line: rgba(43, 111, 255, 0.18);
}
.content-page { min-width: 320px; overflow-x: hidden; background: #fff; }
.content-page .site-header { position: relative; }
.content-hero { position: relative; overflow: hidden; padding: clamp(60px, 10vw, 132px) clamp(18px, 5vw, 72px) clamp(58px, 8vw, 98px); border-bottom: 1px solid var(--content-line); background: linear-gradient(90deg, rgba(43, 111, 255, .07) 1px, transparent 1px) 0 0 / 52px 52px, linear-gradient(rgba(43, 111, 255, .07) 1px, transparent 1px) 0 0 / 52px 52px, linear-gradient(135deg, #fff 0%, #f0f8ff 100%); }
.content-hero::after { position: absolute; top: -180px; right: -120px; width: 440px; height: 440px; border: 1px solid rgba(43,111,255,.22); border-radius: 50%; box-shadow: 0 0 0 68px rgba(43,111,255,.045), 0 0 0 136px rgba(43,111,255,.03); content: ""; }
.content-hero-inner, .content-shell { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
.content-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .42fr); gap: clamp(28px, 7vw, 108px); align-items: end; }
.page-kicker, .article-meta, .source-note, .metric-label { color: var(--content-blue); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.content-hero h1 { max-width: 850px; margin: 12px 0 20px; font-size: clamp(38px, 6vw, 76px); }
.content-hero .lead { max-width: 740px; margin-bottom: 0; font-size: clamp(17px, 2vw, 21px); }
.hero-index { padding: 22px; border: 1px solid var(--content-line); background: rgba(255,255,255,.72); }
.hero-index span { display: block; margin-bottom: 10px; color: var(--content-orange); font-size: 40px; font-weight: 700; line-height: 1; }
.hero-index p { margin: 0; font-size: 13px; }
.content-section { padding: clamp(58px, 8vw, 100px) clamp(18px, 5vw, 72px); }
.content-section.alt { background: var(--content-paper); }
.content-section.dark { background: var(--content-blue); }
.content-section.dark h2, .content-section.dark h3, .content-section.dark p, .content-section.dark a { color: #fff; }
.content-section.dark .page-kicker, .content-section.dark .metric-label { color: #d5efff; }
.content-intro { display: grid; grid-template-columns: minmax(0,.83fr) minmax(250px,.42fr); gap: clamp(30px,8vw,120px); align-items: start; margin-bottom: 42px; }
.content-intro h2 { margin-bottom: 0; font-size: clamp(29px,4.2vw,52px); }
.content-intro > p { max-width: 470px; margin: 7px 0 0; font-size: 16px; }
.operation-steps { display: grid; grid-template-columns: repeat(6,1fr); gap: 0; border: 1px solid var(--content-line); background: #fff; }
.operation-step { min-height: 174px; padding: 20px; border-right: 1px solid var(--content-line); }
.operation-step:last-child { border-right: 0; }
.operation-step span { display: block; margin-bottom: 30px; color: var(--content-orange); font-size: 12px; font-weight: 700; }
.operation-step strong { display: block; color: var(--content-blue); font-size: 15px; }
.operation-step small { display: block; margin-top: 7px; color: var(--soft-ink); font-size: 12px; line-height: 1.45; }
.content-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.content-card, .article-card, .event-card { min-height: 100%; padding: 26px; border: 1px solid var(--content-line); background: #fff; }
.content-card .card-number { display: block; margin-bottom: 42px; color: var(--content-orange); font-size: 12px; font-weight: 700; }
.content-card p, .article-card p, .event-card p { margin-bottom: 0; font-size: 14px; }
.card-link { display: inline-flex; margin-top: 20px; color: var(--content-blue); font-size: 13px; font-weight: 700; text-decoration: none; }
.card-link:hover { color: var(--content-orange); }
.metrics { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(255,255,255,.26); }
.metric { min-height: 176px; padding: 26px; background: var(--content-blue); }
.metric strong { display: block; margin-bottom: 13px; color: #fff; font-size: clamp(31px,4vw,51px); line-height: 1; }
.metric p { margin: 0; color: #d5efff; font-size: 13px; }
.directory-layout { display: grid; grid-template-columns: minmax(0,.5fr) minmax(280px,.5fr); gap: 18px; }
.directory-panel { padding: 28px; border: 1px solid var(--content-line); background: #fff; }
.directory-panel h3 { margin-bottom: 18px; }
.city-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; padding: 0; margin: 0; list-style: none; }
.city-list a { display: block; padding: 11px 10px; border-top: 1px solid var(--content-line); color: var(--content-blue); font-size: 13px; font-weight: 600; text-decoration: none; }
.city-list a:hover { color: var(--content-orange); background: #f5faff; }
.article-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.article-card.featured { grid-column: span 2; display: grid; grid-template-columns: minmax(0,.72fr) minmax(160px,.28fr); gap: 28px; background: #f0f8ff; }
.article-card h3 { margin-top: 11px; font-size: 20px; }
.article-card.featured h3 { font-size: clamp(24px,3.1vw,37px); }
.article-card .article-type { display: inline-flex; align-items: center; min-height: 27px; padding: 4px 9px; border: 1px solid var(--content-line); color: var(--content-blue); font-size: 11px; font-weight: 700; }
.article-card .source-note { margin-top: 18px; color: var(--muted); font-size: 10px; }
.event-list { display: grid; gap: 12px; }
.event-card { display: grid; grid-template-columns: 130px minmax(0,1fr) auto; gap: 30px; align-items: center; }
.event-date { color: var(--content-orange); font-size: 17px; font-weight: 700; line-height: 1.2; }
.event-card h3 { margin: 0 0 7px; }
.event-card p { margin: 0; }
.event-card .card-link { margin: 0; white-space: nowrap; }
.source-panel { padding: 24px 26px; border-left: 4px solid var(--content-orange); background: #fff5f0; }
.source-panel p { margin-bottom: 0; font-size: 13px; }
.content-cta { display: flex; justify-content: space-between; gap: 28px; align-items: center; padding: 34px; border: 1px solid rgba(255,255,255,.34); }
.content-cta h2 { max-width: 600px; margin: 0; font-size: clamp(25px,3.5vw,42px); }
.content-cta .button { flex: 0 0 auto; }
.content-footer { padding: 45px clamp(18px,5vw,72px); border-top: 1px solid var(--content-line); background: #fff; }
.content-footer-inner { display: flex; justify-content: space-between; gap: 28px; max-width: 1180px; margin: 0 auto; }
.content-footer p { margin: 0; font-size: 12px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 11px 20px; }
.footer-links a { color: var(--content-blue); font-size: 12px; font-weight: 700; text-decoration: none; }
@media (max-width:900px) { .content-hero-inner,.content-intro,.directory-layout { grid-template-columns:1fr; } .hero-index { max-width:300px; } .operation-steps { grid-template-columns:repeat(3,1fr); } .operation-step:nth-child(3) { border-right:0; } .operation-step:nth-child(-n+3) { border-bottom:1px solid var(--content-line); } .content-grid,.article-grid { grid-template-columns:repeat(2,1fr); } .article-card.featured { grid-column:span 2; } .event-card { grid-template-columns:105px minmax(0,1fr); } .event-card .card-link { grid-column:2; } }
@media (max-width:620px) { .content-page .site-header { align-items:flex-start; } .content-page .site-nav { gap:7px 12px; justify-content:flex-start; } .content-hero::after { right:-220px; } .operation-steps,.content-grid,.article-grid,.metrics,.city-list { grid-template-columns:1fr; } .operation-step,.operation-step:nth-child(3) { min-height:0; border-right:0; border-bottom:1px solid var(--content-line); } .operation-step:last-child { border-bottom:0; } .article-card.featured { grid-column:auto; grid-template-columns:1fr; } .event-card { grid-template-columns:1fr; gap:12px; } .event-card .card-link { grid-column:auto; } .content-cta,.content-footer-inner { align-items:flex-start; flex-direction:column; } .footer-links { justify-content:flex-start; } }