:root {
    --paper: #f4f9fd;
    --white: #ffffff;
    --ink: #284963;
    --muted: #4c6a80;
    --blue: #187ca6;
    --blue-strong: #126c90;
    --turquoise: #0d928c;
    --mist: #e1f2fa;
    --border: #c6dfe9;
    --line: #9dc8d8;
    --soft: #eaf5f9;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.7 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: var(--blue-strong); text-decoration: none; }
a:hover { color: var(--turquoise); }
a:focus-visible { outline: 3px solid #da8e29; outline-offset: 3px; border-radius: 2px; }
h1 { font-size: 40px; line-height: 1.17; letter-spacing: -.035em; font-weight: 770; margin: 0 0 22px; text-wrap: balance; }
h2 { font-size: 28px; line-height: 1.25; letter-spacing: -.025em; font-weight: 730; margin: 0 0 22px; text-wrap: balance; }
h3 { font-size: 20px; line-height: 1.35; letter-spacing: -.01em; margin: 0 0 12px; }
p { font-size: 16px; margin: 0 0 20px; }
p:last-child { margin-bottom: 0; }
.frame { width: min(calc(100% - 72px), 1220px); margin-inline: auto; }
.skip-link { position: absolute; left: 14px; top: -90px; background: var(--white); padding: 10px 16px; z-index: 99; }
.skip-link:focus { top: 12px; }
.site-header { background: var(--white); border-bottom: 1px solid var(--border); }
.head-bar { display: flex; align-items: center; gap: 24px; min-height: 88px; }
.identity { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-size: 15px; font-weight: 740; letter-spacing: .06em; color: var(--ink); text-decoration: none; }
.identity strong { color: var(--blue-strong); }
.identity-symbol { width: 29px; height: 29px; border: 3px solid var(--blue); border-radius: 8px; position: relative; flex: 0 0 auto; }
.identity-symbol::before { content: ""; width: 11px; height: 11px; border: 2px solid var(--turquoise); border-radius: 50%; position: absolute; inset: 6px; }
.main-nav { display: flex; flex: 1; align-items: center; justify-content: flex-end; flex-wrap: wrap; column-gap: 16px; row-gap: 4px; }
.main-nav a { color: var(--muted); text-decoration: none; font-size: 13px; padding: 7px 0; font-weight: 650; white-space: nowrap; border-bottom: 2px solid transparent; }
.main-nav a[aria-current="page"] { color: var(--blue-strong); border-bottom-color: var(--turquoise); }
.region-link { border: 1px solid var(--line); border-radius: 5px; padding: 8px 12px; font-size: 12px; font-weight: 750; text-decoration: none; white-space: nowrap; }
.hero { background: linear-gradient(150deg, #e4f5fb 0%, #f6fbfd 66%, #e9f6fa 100%); border-bottom: 1px solid var(--border); }
.hero-layout { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(0,.92fr); align-items: center; column-gap: clamp(32px, 6vw, 88px); padding-top: 70px; padding-bottom: 70px; }
.hero-copy { min-width: 0; }
.eyebrow { text-transform: uppercase; color: var(--blue-strong); font-weight: 800; font-size: 12px; letter-spacing: .12em; display: flex; align-items: center; gap: 11px; margin-bottom: 24px; }
.eyebrow-line { height: 2px; width: 24px; background: var(--turquoise); }
.hero-lead { color: var(--muted); font-size: 16px; line-height: 1.8; max-width: 63ch; }
.hero-keywords { display: flex; flex-wrap: wrap; gap: 7px; padding-top: 8px; }
.hero-keywords span { font-size: 12px; color: var(--blue-strong); border: 1px solid #b6dbe8; padding: 5px 10px; border-radius: 30px; font-weight: 700; }
.machine-art { border-radius: 13px; border: 1px solid #b5d8e5; background: #f9fdff; padding: 15px; box-shadow: 15px 15px 0 #d3ebf4; min-width: 0; }
.machine-screen { min-height: 306px; border-radius: 7px; background: #e7f5fa; border: 1px solid #d3e8f1; position: relative; padding: 22px 22px 20px; display: flex; flex-direction: column; overflow: hidden; }
.machine-screen::after { content:""; position:absolute; width:250px; height:250px; right:-140px; top:-125px; border:42px solid #d7edf5; border-radius:50%; pointer-events:none; }
.screen-label { font-size: 11px; letter-spacing: .1em; font-weight: 800; color: var(--blue-strong); z-index: 1; }
.cycle-halo { display: flex; justify-content: center; align-items: center; margin: 12px auto 8px; width: 130px; height: 130px; border-radius: 50%; border: 9px solid #c4e2ed; border-left-color: var(--turquoise); border-top-color: var(--blue); }
.cycle-core { height: 86px; width: 86px; border: 2px dashed var(--line); border-radius: 50%; background: #f6fcff; display: grid; place-items: center; color: var(--blue-strong); font-weight: 850; font-size: 18px; letter-spacing: .07em; }
.cycle-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; margin-top: auto; }
.cycle-node { min-width:0; display:flex; align-items:center; gap:8px; background:#f8fdff; border:1px solid #cce4ec; padding:8px 9px; color:var(--ink); font-size:12px; font-weight:690; border-radius:4px; }
.cycle-dot { width:8px; height:8px; border:2px solid var(--turquoise); border-radius:50%; flex:0 0 auto; }
.machine-foot { padding-top:12px; display:flex; justify-content:space-between; gap:10px; color:var(--blue-strong); font-size:10px; font-weight:750; letter-spacing:.12em; }
.section-label { color:var(--blue-strong); text-transform:uppercase; letter-spacing:.11em; font-size:12px; font-weight:790; margin-bottom:17px; }
.section-label span { color:var(--turquoise); margin: 0 6px; }
.editorial-intro { padding-top:68px; padding-bottom:48px; border-bottom:1px solid var(--border); }
.editorial-intro > p { color: var(--muted); }
.chapter-list { padding-top:12px; }
.zone-chapter { padding:48px 0 50px; border-bottom:1px solid var(--border); }
.zone-heading { display:flex; gap:23px; align-items:flex-start; margin-bottom:22px; }
.zone-index { flex: 0 0 57px; width:57px; height:57px; border:2px solid #bddde8; display:grid; place-items:center; color:var(--blue-strong); font-weight:800; font-size:21px; line-height:1; border-radius:11px; }
.zone-heading-copy { min-width:0; }
.zone-heading h2 { margin: 0; }
.overline { color:var(--turquoise); font-size:12px; font-weight:850; text-transform:uppercase; letter-spacing:.11em; margin-bottom:4px; }
.zone-copy { width:100%; }
.zone-copy p { line-height: 1.9; }
.zone-copy a,.local-row a { font-weight:inherit; color:var(--blue-strong); text-decoration:none; border:0; }
.zone-copy a:hover,.local-row a:hover { color:var(--turquoise); }
.technical-note { display: flex; align-items: stretch; gap: 18px; margin-top: 25px; background: #e8f3f8; padding: 21px 26px; border-radius: 7px; }
.technical-accent { flex:0 0 4px; border-radius:4px; background:var(--turquoise); }
.technical-note h3 { font-size: 18px; margin: 0 0 6px; }
.technical-note p { margin:0; color: var(--muted); }
.closing-note { margin-top:64px; margin-bottom:70px; border-left:5px solid var(--turquoise); background:#e4f3f8; padding:28px 34px; }
.closing-note h2 { margin-bottom:12px; }
.closing-note p { color:var(--ink); }
.bibliography { font-size:13px; line-height:1.6; margin-top:18px; padding-top:14px; border-top:1px solid #bedce7; }
.next-cities { padding-bottom:60px; }
.city-link-row { display:flex; gap:10px; flex-wrap:wrap; }
.city-chip { border:1px solid var(--line); padding:9px 16px; color:var(--blue-strong); background:#fdfefe; text-decoration:none; font-weight:700; border-radius:5px; }
.city-chip:hover { border-color:var(--turquoise); background:#e4f4f7; }
.city-chip.emphasized { background:var(--blue); color:#fff; border-color:var(--blue); }
.overview-section { padding:72px 0 55px; }
.knowledge-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.knowledge-row { min-width:0; display:flex; gap:16px; align-items:flex-start; padding:24px; border:1px solid var(--border); background:#fff; border-radius:6px; }
.knowledge-index { font-size:12px; font-weight:850; color:var(--turquoise); padding-top:4px; }
.knowledge-row h3 { font-size:18px; }
.knowledge-row p { color:var(--muted); margin:0; }
.city-directory { padding-top:15px; }
.city-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-bottom:36px; }
.city-tile { display:flex; align-items:center; gap:10px; min-width:0; border:1px solid #b5dbe6; border-radius:6px; padding:17px 13px; background:#e4f2f9; font-size:15px; font-weight:750; text-decoration:none; color:var(--blue-strong); }
.city-tile:hover { background:#d1edf4; }
.tile-dot { height:8px; width:8px; border:2px solid var(--turquoise); border-radius:50%; flex:0 0 auto; }
.tile-mark { margin-left:auto; font-size:19px; font-weight:500; color:var(--turquoise); }
.local-articles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.local-row { border-top:3px solid #9dcfda; background:#fff; padding:22px 25px; border-radius:2px 2px 6px 6px; }
.local-row-head { display:flex; gap:13px; align-items:center; margin-bottom:12px; }
.local-row-head > span { color:var(--turquoise); font-size:13px; font-weight:850; }
.local-row h3 { font-size:18px; margin:0; }
.local-row p { color:var(--muted); margin:0; }
.reading-link { display:inline-block; font-size:14px; font-weight:750; margin-top:20px; }
.site-footer { margin-top:15px; background:#deeff5; border-top:1px solid var(--border); }
.footer-inner { display:flex; gap:25px; align-items:center; justify-content:space-between; padding-top:27px; padding-bottom:30px; }
.footer-title { font-weight:750; color:var(--ink); white-space:nowrap; }
.footer-title span { color:var(--turquoise); }
.footer-nav { display:flex; gap:14px; flex-wrap:wrap; justify-content:flex-end; }
.footer-nav a { color:var(--blue-strong); font-size:13px; font-weight:660; text-decoration:none; }
@media (max-width: 1150px) {
    .head-bar { flex-wrap:wrap; padding-top:15px; padding-bottom:15px; row-gap:8px; }
    .main-nav { order:3; flex-basis:100%; justify-content:flex-start; }
    .region-link { margin-left:auto; }
    .hero-layout { column-gap:34px; }
    .city-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width: 780px) {
    .frame { width:min(calc(100% - 38px), 1220px); }
    .hero-layout { grid-template-columns:1fr; padding-top:43px; padding-bottom:50px; gap:29px; }
    .machine-art { box-shadow:9px 9px 0 #d3ebf4; }
    .machine-screen { min-height:270px; }
    .cycle-halo { margin-top:8px; height:108px; width:108px; }
    .cycle-core { height:72px; width:72px; }
    .knowledge-list,.local-articles { grid-template-columns:1fr; }
    .city-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .editorial-intro { padding-top:48px; padding-bottom:35px; }
    .zone-chapter { padding:36px 0; }
    .overview-section { padding-top:48px; padding-bottom:30px; }
    .footer-inner { flex-direction:column; align-items:flex-start; gap:12px; }
    .footer-nav { justify-content:flex-start; }
}
@media (max-width: 420px) {
    .frame { width:calc(100% - 32px); }
    .head-bar { column-gap:10px; }
    .region-link { padding:6px 8px; }
    .identity { font-size:14px; }
    .main-nav { column-gap:12px; }
    .main-nav a { font-size:12px; }
    .hero-layout { padding-top:35px; }
    h1 { font-size:40px; overflow-wrap:anywhere; }
    h2 { font-size:28px; overflow-wrap:anywhere; }
    .zone-heading { gap:12px; }
    .zone-index { flex-basis:42px; width:42px; height:42px; font-size:16px; }
    .zone-heading h2 { font-size:28px; }
    .technical-note { padding:17px 15px; gap:12px; }
    .technical-note h3 { font-size:18px; }
    .closing-note { padding:23px 19px; }
    .city-grid { grid-template-columns:1fr; }
    .city-tile { padding:11px 13px; }
    .cycle-node { font-size:11px; }
    .knowledge-row { padding:17px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

.regional-directory { padding-top:18px; padding-bottom:58px; }
.region-grid { column-count:2; column-gap:14px; }
.region-item { display:flex; flex-direction:column; gap:9px; break-inside:avoid; page-break-inside:avoid; background:var(--white); border:1px solid var(--border); padding:16px 19px; border-radius:5px; margin-bottom:14px; }
.province-link { font-size:15px; font-weight:750; color:var(--blue-strong); }
.region-city-links { display:flex; flex-wrap:wrap; column-gap:16px; row-gap:6px; align-items:baseline; }
.region-capital { font-size:14px; color:var(--muted); line-height:1.5; }
a.region-capital { color:#ba2539; font-weight:400; text-decoration:none; }
a.region-capital:hover { color:#a51e31; text-decoration:none; }
@media (max-width:720px) { .region-grid { column-count:1; } .region-item { margin-bottom:10px; } }

.diagnostics-section { padding-top: 66px; padding-bottom: 24px; }
.diagnostics-section > h2 { margin-bottom: 30px; }
.diagnostics-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap: 14px; }
.diagnostics-grid .technical-note { margin-top: 0; min-width: 0; }
.zone-chapter { padding-top: 36px; padding-bottom: 36px; }
@media (max-width:780px) { .diagnostics-grid { grid-template-columns: 1fr; } .diagnostics-section { padding-top: 48px; } }