:root{--bg:#101a22;--panel:#15232c;--line:#2b3d47;--muted:#99adb9;--white:#edf3f2;--teal:#78c8b5;--red:#df7b69}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--white);font:15px/1.65 system-ui,-apple-system,sans-serif}header,main{max-width:1320px;margin:auto}header{padding:28px 38px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}a{color:var(--teal);text-decoration:none}a:hover{text-decoration:underline}.brand{display:flex;gap:14px;align-items:center;font-weight:750;letter-spacing:2px;color:var(--white);font-size:17px}.light{font-weight:400;color:var(--muted)}.edition{font:12px monospace;letter-spacing:1px}.edition span{margin-left:15px;border:1px solid var(--line);padding:7px;color:var(--muted)}main{padding:0 38px}.intro{display:grid;grid-template-columns:1.25fr 1fr;gap:70px;padding:64px 0 45px;align-items:center}.eyebrow{font-size:10px;font-weight:650;letter-spacing:2px;color:var(--muted)}h1{font-size:55px;line-height:1.1;letter-spacing:-2.5px;margin:18px 0 20px;font-weight:600}h1 em{color:var(--teal);font-style:normal}.intro p{color:var(--muted)}.headline{padding-left:50px;border-left:1px solid var(--line)}.big{font-size:110px;line-height:1.2;font-weight:550;letter-spacing:-7px}.big span{font-size:45px;color:var(--teal);margin-left:10px;letter-spacing:0}.meter{height:6px;background:#2a3943;margin:12px 0 16px}.meter i{display:block;width:42.8813%;height:100%;background:var(--red)}.small{font-size:12px;color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0;margin-bottom:36px}.stats>div{padding:0 22px;border-right:1px solid var(--line)}.stats>div:first-child{padding-left:0}.stats>div:last-child{border:0}.stats span{display:block;font-size:9px;letter-spacing:1.4px;color:var(--muted)}.stats strong{display:block;font-size:27px;line-height:1.5;margin-top:8px;font-weight:500}.stats small{font-size:13px;color:var(--muted)}.stats p{font-size:11px;margin:0;color:var(--muted)}.stats .status{font-size:18px;color:var(--teal)}h2{font-size:26px;line-height:1.3;letter-spacing:-.8px;margin:10px 0 18px;font-weight:500}.mapcard{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}.maptop{display:flex;align-items:center;justify-content:space-between;padding:25px 28px}.maptop h2{margin-bottom:0}.controls{display:flex;gap:10px;align-items:center}.controls label{font-size:12px;color:var(--muted);white-space:nowrap}input{accent-color:var(--teal)}button{cursor:pointer;border:1px solid #41555f;background:#21343f;color:var(--white);border-radius:6px;padding:8px 12px;font:inherit;font-size:12px}button:hover{background:#35515c}button:focus-visible,a:focus-visible{outline:2px solid var(--teal);outline-offset:4px}.mapwrap{position:relative;background:#12202a;background-image:radial-gradient(#283d4920 1px,transparent 1px);background-size:18px 18px}#map{display:block;width:100%;max-height:670px;touch-action:pan-y}#map .region:hover{fill:#344c58}#tooltip{position:absolute;bottom:20px;left:25px;font-size:12px;color:var(--muted);pointer-events:none}.mapnote{position:absolute;right:25px;bottom:20px;text-align:right;font:10px/1.7 monospace;color:var(--muted)}.mapnote span{font-size:9px}.legend{display:flex;gap:24px;flex-wrap:wrap;padding:20px 28px 8px;font-size:11px;color:var(--muted)}.legend span{display:flex;align-items:center;gap:8px}.swatch{display:inline-block;width:12px;height:12px;border-radius:3px}.eastern{background:#2d7265}.occupied{background:var(--red)}.river{background:#8acfeb;height:3px}.excluded{background:#293b47}.caption{color:var(--muted);font-size:11px;line-height:1.6}.mapcard>.caption{padding:0 28px 16px}.lower{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin:52px 0}.history table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;color:var(--muted);font-size:10px;font-weight:400;text-transform:uppercase}td,th{border-bottom:1px solid var(--line);padding:11px 0}td:last-child,th:last-child{text-align:right}.gain{color:var(--red)}.context p,.prophecy p{color:var(--muted);font-size:14px}strong{color:var(--white)}.formula{background:var(--panel);border-left:3px solid var(--teal);padding:17px 20px;font:18px/1.8 monospace}.formula span{color:var(--muted);font-size:12px}h3{font-size:15px;font-weight:550;margin:25px 0 8px}details{border-top:1px solid var(--line);padding:15px 0;margin-top:24px}summary{cursor:pointer;color:var(--teal);font-size:13px}.prophecy{border-top:1px solid var(--line);padding:35px 0;max-width:900px}.prophecy a{font-size:12px}footer{padding:25px 0 40px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;align-items:center}footer strong{font-size:12px}footer p{font-size:11px;color:var(--muted);margin:5px 0}#historyChart svg{width:100%;height:135px;margin:4px 0 14px}@media(max-width:850px){header{padding:20px}.edition span{display:none}main{padding:0 20px}.intro{gap:25px;padding-top:40px}h1{font-size:40px}.headline{padding-left:25px}.big{font-size:76px}.big span{font-size:30px}.stats{grid-template-columns:1fr 1fr;gap:24px}.stats>div:nth-child(3){padding-left:0}.stats>div:nth-child(2){border:0}.maptop{display:block}.controls{margin-top:20px;flex-wrap:wrap}.lower{gap:30px}.legend{gap:12px}}@media(max-width:600px){.brand{font-size:13px}.edition{font-size:9px}.intro{grid-template-columns:1fr}.headline{padding:20px 0 0;border-left:0;border-top:1px solid var(--line)}.big{font-size:90px}.desktop{display:none}.stats strong{font-size:22px}.stats .status{font-size:15px}.lower{grid-template-columns:1fr;margin-top:35px}.maptop{padding:20px}#tooltip{bottom:10px;left:10px;font-size:9px}.mapnote{display:none}.legend{padding:15px;font-size:10px}.mapcard>.caption{padding:0 15px 10px}.controls{gap:8px}.controls label{font-size:11px}footer{display:block}footer button{margin-top:15px}h2{font-size:23px}}

/* Compact overview: retain map space and readable metrics. */
.intro{gap:36px;padding:26px 0 22px;grid-template-columns:1.25fr 1fr}
.intro h1{font-size:clamp(30px,3.2vw,42px);line-height:1.15;letter-spacing:-1.3px;margin:8px 0 10px}
.intro p{font-size:13px;margin:0;max-width:540px}
.headline{padding-left:30px}.big{font-size:68px;line-height:1.1;letter-spacing:-3px}.big span{font-size:30px}
.headline .eyebrow{font-size:9px;letter-spacing:1.4px}.meter{margin:10px 0;height:5px}
.stats{padding:16px 0;margin-bottom:24px}.stats strong{font-size:23px;margin-top:5px}
@media(max-width:850px){.intro{padding:24px 0 20px;gap:22px}.big{font-size:58px}.headline{padding-left:22px}}
@media(max-width:600px){.intro{grid-template-columns:1fr;gap:16px}.intro h1{font-size:32px}.headline{padding:14px 0 0}.big{font-size:58px}.stats strong{font-size:20px}}

/* Compact overview: retain map space and readable metrics. */
.intro{gap:36px;padding:26px 0 22px;grid-template-columns:1.25fr 1fr}
.intro h1{font-size:clamp(30px,3.2vw,42px);line-height:1.15;letter-spacing:-1.3px;margin:8px 0 10px}
.intro p{font-size:13px;margin:0;max-width:540px}
.headline{padding-left:30px}.big{font-size:68px;line-height:1.1;letter-spacing:-3px}.big span{font-size:30px}
.headline .eyebrow{font-size:9px;letter-spacing:1.4px}.meter{margin:10px 0;height:5px}
.stats{padding:16px 0;margin-bottom:24px}.stats strong{font-size:23px;margin-top:5px}
@media(max-width:850px){.intro{padding:24px 0 20px;gap:22px}.big{font-size:58px}.headline{padding-left:22px}}
@media(max-width:600px){.intro{grid-template-columns:1fr;gap:16px}.intro h1{font-size:32px}.headline{padding:14px 0 0}.big{font-size:58px}.stats strong{font-size:20px}}

/* Slim overview v2 */
.intro{padding:14px 0 12px;gap:24px;grid-template-columns:1.35fr 1fr}
.intro h1{font-size:28px;line-height:1.15;letter-spacing:-.8px;margin:5px 0 6px}
.intro .eyebrow{font-size:8px;letter-spacing:1.4px}
.intro p{font-size:11px;line-height:1.5;margin:0}
.headline{padding-left:22px}
.headline .eyebrow{font-size:8px;letter-spacing:1.2px}
.big{font-size:44px;line-height:1.05;letter-spacing:-1.8px;margin-top:4px}
.big span{font-size:22px;margin-left:4px}
.meter{height:4px;margin:6px 0}
.headline .small{font-size:10px;line-height:1.4}
.stats{padding:10px 0;margin-bottom:16px;gap:0}
.stats>div{padding:0 14px}
.stats span{font-size:8px;letter-spacing:1px}
.stats strong{font-size:18px;line-height:1.3;margin-top:4px}
.stats p{font-size:10px;line-height:1.4;margin-top:3px}
.stats .status{font-size:14px}
@media(max-width:850px){.intro{padding:14px 0 12px;gap:18px}.intro h1{font-size:25px}.big{font-size:40px}.headline{padding-left:18px}.stats{gap:12px}.stats>div:nth-child(3){padding-left:0}}
@media(max-width:600px){.intro{grid-template-columns:1fr;gap:12px}.intro h1{font-size:25px}.headline{padding:10px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;align-items:center}.headline .eyebrow{grid-column:1}.headline .big{grid-column:2;grid-row:1 / 3;text-align:right;font-size:40px}.headline .meter{grid-column:1}.headline .small{grid-column:1 / -1}.stats{padding:10px 0;gap:12px}.stats strong{font-size:17px}.stats .status{font-size:13px}}

/* Fit the complete geographic extent inside the existing card. */
#map{width:100%;height:clamp(320px,55vw,640px);max-height:none}

/* Larger map layer controls. */
.controls label{display:inline-flex;align-items:center;gap:8px;font-size:16px;font-weight:550;line-height:1.4;color:var(--white);padding:6px 3px;cursor:pointer}
.controls label input[type=checkbox]{width:19px;height:19px;margin:0;flex-shrink:0;cursor:pointer}
.controls button:disabled{opacity:.4;cursor:not-allowed}
@media(max-width:600px){.controls label{font-size:15px;padding:7px 3px}.controls label input[type=checkbox]{width:20px;height:20px}}

/* User-supplied prophecy map: separate from live geographic layers. */
.prophecy-map-reference{position:absolute;left:18px;bottom:54px;width:28%;max-width:300px;margin:0;z-index:2;background:#101a22;border:1px solid #52636c;border-radius:7px;overflow:hidden;box-shadow:0 4px 18px #0005}
.prophecy-map-reference a{display:block;line-height:0}
.prophecy-map-reference img{display:block;width:100%;height:auto}
.prophecy-map-reference figcaption{padding:7px 9px;color:var(--white);font-size:10px;line-height:1.4}
.prophecy-map-reference figcaption span{display:block;color:var(--muted);font-size:9px}
@media(max-width:600px){.prophecy-map-reference{left:8px;bottom:32px;width:30%;max-width:170px}.prophecy-map-reference figcaption{padding:4px 5px;font-size:8px}.prophecy-map-reference figcaption span{display:none}}

/* Tiny reference thumbnail in the lower-left blank map area. */
.prophecy-map-reference{width:120px;max-width:18%;left:18px;bottom:54px;border-radius:3px;box-shadow:none}
.prophecy-map-reference figcaption{display:none}
@media(max-width:600px){.prophecy-map-reference{width:90px;max-width:23%;left:10px;bottom:32px}}

/* Reference thumbnail enlarged threefold at the user's request. */
.prophecy-map-reference{width:360px;max-width:54%}
@media(max-width:600px){.prophecy-map-reference{width:270px;max-width:69%}}

/* Region identification stays in the upper-left of the map. */
#tooltip{top:18px;left:25px;bottom:auto;z-index:3}
@media(max-width:600px){#tooltip{top:10px;left:10px;bottom:auto}}

/* Caption for the 2007 prophecy reference image. */
.prophecy-map-reference figcaption{display:block;padding:7px 9px;font-size:11px;line-height:1.4;text-align:center;color:var(--white)}
@media(max-width:600px){.prophecy-map-reference figcaption{display:block;padding:5px 6px;font-size:10px}}

/* Lower the reference image and its caption toward the card edge. */
.prophecy-map-reference{bottom:12px}
@media(max-width:600px){.prophecy-map-reference{bottom:8px}}

/* Readable supporting text across every page, including mobile. */
.small,.caption,.eyebrow,.intro .eyebrow,.headline .eyebrow,
.headline .small,.stats span,.stats p,.stats small,.edition,
.mapnote,.mapnote span,.legend,.formula span,summary,
footer p,footer strong,.coming-footer,.prophecy a,
.azovmena-header .azovmena-logo-credit,.maptop .map-purpose,
.prophecy-map-reference figcaption,.prophecy-map-reference figcaption span,
.history th,th,button,#tooltip{font-size:14px!important;line-height:1.6!important}
.intro p{font-size:15px!important;line-height:1.6!important}
.history table,.history td{font-size:15px!important;line-height:1.6!important}
.context p,.prophecy p{font-size:16px;line-height:1.7}
.eyebrow,.stats span{letter-spacing:.8px}
.stats{padding-top:15px;padding-bottom:15px}
.stats p{overflow-wrap:anywhere}
.caption{margin-top:14px;margin-bottom:16px}
.legend{gap:14px 24px}
.mapnote{max-width:46%}
footer{flex-wrap:wrap}
@media(max-width:600px){
 .stats>div{min-width:0}
 .history table{table-layout:auto}
 .history td:first-child,.history td:nth-child(2){white-space:normal}
 .headline{grid-template-columns:minmax(0,1fr) auto}
 .prophecy-map-reference figcaption{padding:6px 8px}
}

/* Compact phone layout; desktop readability remains unchanged. */
@media(max-width:600px){
 body{font-size:14px;line-height:1.5}
 main{padding:0 14px}
 header.azovmena-header{padding:14px 18px;gap:12px}
 .azovmena-header .azovmena-logo{font-size:24px;gap:3px}
 .azovmena-header .azovmena-logo-credit{font-size:12px!important;line-height:1.35!important;letter-spacing:.2px}
 .azovmena-header nav{width:100%;justify-content:space-between;gap:8px}
 .azovmena-header nav a{font-size:13px;padding:5px 0}
 .intro{padding:14px 0 12px;gap:10px}
 .intro h1{font-size:22px;letter-spacing:-.6px;margin:4px 0 6px}
 .intro p{font-size:13px!important;line-height:1.5!important}
 .eyebrow,.intro .eyebrow,.headline .eyebrow{font-size:11px!important;line-height:1.4!important;letter-spacing:.8px}
 .headline{padding-top:10px;gap:3px 12px;grid-template-columns:minmax(0,1fr) auto}
 .headline .big{font-size:34px;letter-spacing:-1.4px}
 .headline .big span{font-size:20px}
 .headline .small{font-size:12px!important;line-height:1.5!important}
 .meter{height:4px;margin:5px 0}
 .stats{padding:12px 0;gap:14px 0;margin-bottom:14px}
 .stats>div{padding:0 10px;min-width:0}
 .stats>div:nth-child(odd){padding-left:0}
 .stats>div:nth-child(even){padding-right:0;border-right:0}
 .stats span{font-size:11px!important;line-height:1.4!important;letter-spacing:.4px}
 .stats strong{font-size:17px;line-height:1.35;margin-top:5px}
 .stats p,.stats small{font-size:12px!important;line-height:1.5!important;margin-top:4px}
 .maptop{padding:14px}
 .maptop h2{font-size:18px;line-height:1.3;letter-spacing:-.4px;margin:5px 0 0}
 .controls{margin-top:12px;gap:6px 10px;flex-wrap:wrap}
 .controls label{font-size:13px;padding:3px 0;gap:5px;line-height:1.4}
 .controls label input[type=checkbox]{width:17px;height:17px}
 .controls button{font-size:13px!important;line-height:1.3!important;padding:6px 9px;min-height:32px}
 #map{height:360px}
 #tooltip{font-size:12px!important;line-height:1.4!important;max-width:90%}
 .prophecy-map-reference{width:145px;max-width:42%;left:8px;bottom:8px}
 .prophecy-map-reference figcaption{font-size:11px!important;line-height:1.35!important;padding:5px}
 .legend,.caption,.small,.formula span,summary,footer p,footer strong,.coming-footer,.prophecy a{font-size:13px!important;line-height:1.55!important}
 .legend{padding:12px 14px 4px;gap:8px 14px}
 .mapcard>.caption{padding:0 14px 12px;margin:10px 0 0}
 .lower{gap:24px;margin:28px 0}
 .history>h2,.context>h2{font-size:17px;letter-spacing:1px}
 .history th{font-size:11px!important;line-height:1.4!important}
 .history td{font-size:13px!important;line-height:1.5!important;padding:9px 5px}
 .context p,.prophecy p{font-size:14px;line-height:1.6}
 .formula{font-size:15px;padding:12px;overflow-wrap:anywhere}
 .prophecy{padding:22px 0}
 footer{padding:18px 0 24px;gap:12px}
 .coming-soon{padding:32px 18px 50px}
 .coming-soon h1{font-size:28px}
}
@media(max-width:360px){
 .azovmena-header .azovmena-logo{font-size:22px}
 .azovmena-header nav a{font-size:12px}
 .headline .big{font-size:30px}
 .stats strong{font-size:15px}
}

/* Phone controls: three equal columns, with zoom actions on row two. */
@media(max-width:600px){
 .controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 8px;align-items:center}
 .controls>label{grid-row:1;justify-content:center;white-space:nowrap;margin:0;min-width:0}
 .controls>button{grid-row:2;width:100%;min-height:36px;justify-self:stretch}
 .mapwrap .prophecy-map-reference{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:240px;max-width:calc(100% - 28px);margin:0 auto 16px}
 .mapwrap .prophecy-map-reference figcaption{font-size:12px!important;line-height:1.45!important;padding:7px 9px}
}

/* Remove excess SVG letterboxing before the phone reference image. */
@media(max-width:600px){
 #map{height:auto;aspect-ratio:1005.388 / 707.043}
 .mapwrap .prophecy-map-reference{margin-top:4px}
}

/* Same-page enlargement of the prophecy reference image. */
.image-popup-open{overflow:hidden}
#prophecy-image-dialog{width:min(1100px,94vw);max-width:94vw;max-height:92dvh;padding:0;border:1px solid #52636c;border-radius:10px;background:#101a22;color:var(--white);box-shadow:0 20px 80px #0009;overflow:auto}
#prophecy-image-dialog::backdrop{background:#000c}
.reference-popup-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 16px}
.reference-popup-bar h2{font-size:16px;line-height:1.4;margin:0;letter-spacing:0}
.reference-popup-bar button{flex-shrink:0;min-height:40px}
#prophecy-image-dialog>img{display:block;width:100%;height:auto}
.prophecy-map-reference a{cursor:zoom-in}
@media(max-width:600px){.reference-popup-bar{padding:10px;gap:8px}.reference-popup-bar h2{font-size:13px}}

/* Stack all map legend entries consistently on phones. */
@media(max-width:600px){
 .legend{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;padding:12px 14px 4px}
 .legend>span{display:flex;align-items:center;gap:10px;min-width:0}
 .legend .swatch{flex:0 0 12px}
}

/* Constrain phone layout to its viewport; shrink grid tracks and wrap content. */
@media(max-width:600px){
 html,body{width:100%;max-width:100%;margin:0}
 body>main,body>header.azovmena-header{width:100%;max-width:100%;min-width:0;margin-left:auto;margin-right:auto}
 main>*,.intro>*,.lower>*,.headline>*,.stats>*,.maptop>*,footer>*{min-width:0;max-width:100%}
 .intro,.lower{grid-template-columns:minmax(0,1fr)}
 .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .headline{width:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .headline .big{font-size:clamp(26px,8vw,34px);white-space:nowrap;min-width:0}
 .headline .eyebrow,.stats span,.stats strong,.stats p{overflow-wrap:anywhere}
 header.azovmena-header nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;min-width:0;gap:5px;align-items:center}
 header.azovmena-header nav a{font-size:12px;text-align:center;min-width:0;white-space:normal;overflow-wrap:anywhere;padding:7px 0}
 header.azovmena-header .azovmena-logo{max-width:100%;white-space:normal;font-size:24px}
 .mapcard,.maptop,.mapwrap,.controls,.legend{width:100%;min-width:0;max-width:100%}
 #map{min-width:0;max-width:100%}
 .history table{width:100%;table-layout:fixed}
 .history th,.history td{overflow-wrap:anywhere;white-space:normal!important}
 .formula,footer p,details p{overflow-wrap:anywhere}
 .coming-soon{width:100%;max-width:100%}
}

/* Short introduction in a compact, readable size. */
.intro h1.intro-description{font-size:18px;line-height:1.5;letter-spacing:0;font-weight:400;margin:6px 0}
@media(max-width:600px){.intro h1.intro-description{font-size:15px;line-height:1.5;margin:6px 0}}

.intro h1.intro-description{font-size:20px}
@media(max-width:600px){.intro h1.intro-description{font-size:16px}}

/* Attributed DeepState map updates and frontline reports. */
.frontline-updates{margin:32px 0;border-top:1px solid var(--line);padding-top:22px;min-width:0}
.frontline-updates>h2{font-size:22px;margin:0 0 8px}
.frontline-updates>.caption{margin:0 0 8px}
.frontline-meta{font-size:13px;line-height:1.5;color:var(--muted);margin:0 0 6px}
.frontline-item{padding:16px 0;border-bottom:1px solid var(--line);min-width:0}
.frontline-item h3{margin:0 0 7px;font-size:17px;line-height:1.5;overflow-wrap:anywhere}
.frontline-excerpt{font-size:14px;line-height:1.6;color:var(--muted);margin:0 0 10px;overflow-wrap:anywhere}
.frontline-links{display:flex;flex-wrap:wrap;gap:8px 20px}
.frontline-links a{font-size:14px;line-height:1.6;overflow-wrap:anywhere}
@media(max-width:600px){
 .frontline-updates{margin:24px 0;padding-top:18px}
 .frontline-updates>h2{font-size:19px}
 .frontline-item{padding:14px 0}
 .frontline-item h3{font-size:16px}
 .frontline-links{gap:8px 14px}
}