:root{color-scheme:dark;--bg:#000000;--bg-2:#181818;--surface:#181818;--panel:#1f1f1f;--raised:#272727;--ink:#ededed;--ink-2:#c4c4c4;--muted:#9b9b9b;--faint:#6e6e6e;--brass:#e2b45f;--brass-2:#f3d39a;--brass-line:#e2b45f40;--brass-glow:#e2b45f26;--crimson:#d0415f;--crimson-deep:#8e2a5c;--crimson-glow:#d0415f33;--teal:#4fc1c6;--green:#68b07a;--flag-blue:#00b5e2;--flag-red:#ef3340;--flag-green:#509e2f;--border:#ffffff28;--border-strong:#ffffff42;--font:'Manrope',system-ui,sans-serif;--serif:'Manrope',system-ui,sans-serif;--mono:'Geist Mono',ui-monospace,monospace;--gutter:clamp(16px,4.5vw,64px);--radius:16px;--stars:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cg fill='none' stroke='%23e2b45f' stroke-opacity='.07'%3E%3Crect x='28' y='28' width='16' height='16'/%3E%3Crect x='28' y='28' width='16' height='16' transform='rotate(45 36 36)'/%3E%3C/g%3E%3Ccircle cx='0' cy='0' r='1.2' fill='%23e2b45f' fill-opacity='.12'/%3E%3C/svg%3E");
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body:before{content:'';position:fixed;inset:0;pointer-events:none;z-index:40;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;cursor:pointer;color:inherit;background:none;border:0;padding:0;transition:color .3s var(--ease),background-color .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:6px}
button:disabled{cursor:default;opacity:.3}
button:hover:not(:disabled){color:var(--brass-2)}
::selection{background:var(--crimson);color:#fff}
.skip-link{position:fixed;top:-80px;left:20px;z-index:50;background:var(--brass);color:var(--bg);padding:12px 16px;border-radius:8px;font-weight:700}
.skip-link:focus{top:12px}
.eyebrow{font-size:12px;letter-spacing:.18em;font-weight:700;color:var(--brass);text-transform:uppercase}
.flag-line{height:3px;background:linear-gradient(90deg,var(--flag-blue) 0 33.33%,var(--flag-red) 33.33% 66.66%,var(--flag-green) 66.66%)}
.ornament{height:16px;max-width:1600px;margin:0 auto;opacity:.9;mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.ornament-thin{opacity:.45;margin-top:12px}

/* Header */
.header{height:76px;max-width:1600px;margin:auto;padding:0 var(--gutter);display:flex;align-items:center;gap:32px}
.brand{display:flex;align-items:center;gap:16px;white-space:nowrap}
.brand-mark{display:grid;place-items:center;flex-shrink:0}
.brand-seal{width:44px;height:44px;display:block;overflow:visible}
.mark-ring,.mark-ticks{fill:none;stroke:var(--brass)}
.mark-star{fill:var(--brass);transform-box:fill-box;transform-origin:center;transition:transform .8s var(--ease)}
.brand:hover .mark-star{transform:rotate(45deg)}
.mark-z{fill:#15110a}
.brand-text{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
.brand small{display:block;font-size:12px;color:var(--muted);letter-spacing:.22em;margin-top:4px;font-weight:600}
.header nav{display:flex;gap:8px;margin:auto;padding:4px;border:1px solid var(--border);border-radius:999px;background:rgb(var(--hi) / .02);backdrop-filter:blur(8px)}
.nav-item{font-size:14px;font-weight:600;padding:8px 16px;border-radius:999px;color:var(--muted)}
.nav-item[aria-current="page"]{color:var(--bg);background:var(--brass)}
.nav-item[aria-current="page"]:hover{color:var(--bg)!important}
.nav-item:not([aria-current]):hover{background:rgb(var(--hi) / .039);color:var(--brass-2)}
.header-right{display:flex;align-items:center;gap:16px}

.language{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.06em;border:1px solid var(--border-strong);padding:4px 8px;border-radius:6px;color:var(--ink-2)}
.lang-switch{display:flex;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden;flex:none}
.lang-switch button{font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;padding:8px 8px;color:var(--muted)}
.lang-switch button.on{background:var(--brass);color:#1a1408}
.lang-switch button:hover:not(.on){color:var(--ink)}
/* Light / dark switch (theme.js): an icon button the height of the language switch beside it. */
.header-right .theme-toggle{margin-left:-8px}
.theme-toggle{display:grid;place-items:center;width:37px;height:37px;flex:none;border:1px solid var(--border-strong);border-radius:8px;color:var(--muted)}
.theme-toggle:hover:not(:disabled){color:var(--ink);border-color:var(--brass-line)}
.theme-toggle .i{width:17px;height:17px}

/* Hero */
main{max-width:1600px;margin:auto;padding:0 var(--gutter)}

.eyebrow-star{width:16px;height:16px;fill:var(--crimson)}
h1{font-family:var(--serif);font-size:clamp(36px,5.6vw,72px);font-weight:600;letter-spacing:-.025em;line-height:1;margin:16px 0 0}
h1 em{font-style:normal;background:linear-gradient(100deg,var(--brass-2) 10%,var(--brass) 45%,var(--crimson) 110%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}

.hero-actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.start-button{font-size:14px;font-weight:700;background:var(--brass-2);color:#1a1408;border-radius:12px;padding:16px 24px;white-space:nowrap;display:flex;gap:16px;align-items:center;box-shadow:0 0 0 1px #ffffff30 inset,0 14px 34px -14px rgb(var(--brass-rgb) / .627)}
.start-button:hover:not(:disabled){color:#1a1408;transform:translateY(-2px);box-shadow:0 0 0 1px #ffffff40 inset,0 20px 40px -14px rgb(var(--brass-rgb) / .753)}
.start-button>span{font-size:18px;line-height:1;transition:transform .3s var(--ease)}
.start-button:hover>span{transform:translateX(4px)}
.ghost-button{font-size:14px;font-weight:600;padding:16px 24px;border-radius:12px;border:1px solid var(--border-strong);color:var(--ink-2);background:rgb(var(--hi) / .02)}
.ghost-button:hover:not(:disabled){border-color:var(--brass);background:rgb(var(--hi) / .05);color:var(--ink)}

@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* Atlas shell */
.atlas-shell{display:grid;grid-template-columns:minmax(0,1fr) 420px;border:1px solid var(--border-strong);border-radius:var(--radius);overflow:hidden;background:var(--surface);box-shadow:0 50px 100px -50px rgb(0 0 0 / var(--shade)),0 0 0 1px rgb(0 0 0 / calc(.376 * var(--shade)));margin-top:32px;scroll-margin-top:16px}
.map-column{min-width:0;position:relative;display:flex;flex-direction:column}
.map-toolbar{height:62px;display:flex;align-items:center;gap:16px;padding:0 16px;border-bottom:1px solid var(--border);background:var(--surface)}
.text-button{font-size:14px;font-weight:600;display:flex;gap:8px;align-items:center;color:var(--ink-2);padding:8px 12px;border-radius:8px;border:1px solid transparent}
.text-button:hover:not(:disabled){background:rgb(var(--hi) / .031);border-color:var(--border)}
.text-button>span{color:var(--teal);font-size:14px}

/* Map */
.map-frame{flex:1;min-height:clamp(460px,62vh,660px);position:relative;background:var(--surface);overflow:hidden}
#map{position:absolute;inset:0}
.map-vignette{position:absolute;inset:0;pointer-events:none;background:rgb(var(--surface-rgb) / .933)}
.map-grid{position:absolute;inset:0;pointer-events:none;background-image:transparent;background-size:80px 80px;mask-image:radial-gradient(80% 80% at 50% 50%,#000 40%,transparent);-webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000 40%,transparent)}
.map-heading{position:absolute;left:26px;top:24px;pointer-events:none;display:flex;flex-direction:column;transition:opacity .3s var(--ease)}
.map-heading>span{font-size:12px;font-weight:700;letter-spacing:.2em;color:var(--teal)}
.map-heading>strong{font-family:var(--serif);font-size:36px;font-weight:600;letter-spacing:-.02em;line-height:1.1;margin:8px 0 2px;color:var(--ink)}
.map-heading>small{font-size:14px;color:var(--ink-2)}
.map-coordinates{position:absolute;bottom:64px;left:26px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--brass-2);pointer-events:none;font-variant-numeric:tabular-nums;display:flex;align-items:center;gap:8px;opacity:.85}
.map-coordinates:before{content:'';width:18px;height:1px;background:var(--brass)}
.map-compass{position:absolute;top:22px;right:22px;display:flex;align-items:center;flex-direction:column;gap:2px;color:var(--brass-2);font-family:var(--mono);font-size:12px;pointer-events:none}
.map-compass svg{width:40px;height:40px;opacity:.85}
.map-controls{display:flex;flex-direction:column;position:absolute;right:16px;bottom:56px;border:1px solid var(--border-strong);border-radius:12px;background:rgb(var(--surface-rgb) / .941);backdrop-filter:blur(10px);overflow:hidden;box-shadow:0 10px 30px -10px rgb(0 0 0 / var(--shade))}
.map-controls button{width:42px;height:42px;font-size:18px;line-height:1;border-bottom:1px solid var(--border);display:grid;place-items:center;color:var(--ink-2)}
.map-controls button:hover:not(:disabled){background:rgb(var(--hi) / .031)}
.map-controls button:last-child{border:0}
.map-controls #map-info-open{font-family:var(--serif);font-weight:600;font-size:18px;font-style:normal}
.map-bottom{position:absolute;left:16px;bottom:14px;display:flex}
.legend{font-size:12px;display:flex;gap:4px;background:rgb(var(--surface-rgb) / .902);backdrop-filter:blur(8px);padding:4px;border:1px solid var(--border);border-radius:12px;color:var(--ink-2)}
.legend-toggle{display:flex;align-items:center;gap:8px;padding:4px 8px;border-radius:8px;font-size:12px;font-weight:600;color:var(--ink-2)}
.legend-toggle small{font-size:12px;color:var(--faint);font-weight:500}
.legend-toggle[aria-pressed="false"]{opacity:.45}
.legend-toggle[aria-pressed="false"] i{filter:grayscale(1)}
.legend-toggle:hover:not(:disabled){background:rgb(var(--hi) / .039);color:var(--ink)}
.legend i{display:block;flex-shrink:0}
.lg-area{width:12px;height:10px;border:1.5px solid var(--brass);background:rgb(var(--brass-rgb) / .251);border-radius:2px}
.lg-place{width:8px;height:8px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 2px rgb(0 0 0 / var(--shade)),0 0 0 3px rgb(var(--brass-rgb) / .376)}
.lg-strike{width:10px;height:10px;border-radius:50%;background:var(--crimson);box-shadow:0 0 0 2px rgb(var(--crimson-rgb) / .251)}
.lg-build{width:9px;height:9px;border-radius:50%;background:var(--green);border:1.5px solid var(--brass);box-shadow:0 0 0 2px rgb(var(--green-rgb) / .2)}
.map-status{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:14px;color:var(--ink-2);display:flex;gap:12px;align-items:center;white-space:nowrap;pointer-events:none;background:rgb(var(--surface-rgb) / .847);padding:12px 16px;border-radius:999px;border:1px solid var(--border);max-width:calc(100% - 32px)}
.loading-dot{width:8px;height:8px;background:var(--brass);border-radius:50%;animation:breath 1.2s infinite}
@keyframes breath{50%{opacity:.35;transform:scale(.7)}}
.map-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:40px;text-align:center;background:var(--bg-2)}
.map-fallback h3{font-family:var(--serif);font-size:24px;font-weight:600;margin:16px 0 8px}
.map-fallback p{color:var(--muted);font-size:14px;max-width:340px;margin:0}
.fallback-icon{width:46px;height:46px;fill:none;stroke:var(--brass);stroke-width:1.2}
.outline-button{border:1px solid var(--border-strong);border-radius:12px;padding:12px 24px;font-size:14px;font-weight:600;margin-top:16px}
.maplibregl-ctrl-attrib{font-size:12px!important;background:rgb(var(--surface-rgb) / .902)!important;color:var(--muted)!important}
.maplibregl-ctrl-attrib a{color:inherit!important}
.maplibregl-ctrl-attrib-button{filter:invert(1);background-color:transparent!important}
.maplibregl-ctrl-attrib.maplibregl-compact{min-height:24px}
.maplibregl-cooperative-gesture-screen{font-family:var(--font)!important;font-size:16px!important;background:#000000b8!important}

@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(var(--crimson-rgb) / .565)}100%{box-shadow:0 0 0 26px rgb(var(--crimson-rgb) / 0)}}

/* Timeline */
.timeline{padding:24px 24px 16px;border-top:1px solid var(--border);background:var(--bg-2)}
.timeline-top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.timeline-top>div{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.timeline .eyebrow{font-size:12px}
.timeline-hint{font-size:12px;color:var(--faint)}
.play-button{display:flex;gap:12px;align-items:center;font-size:14px;font-weight:700;color:var(--brass);padding:4px 12px 4px 4px;border-radius:999px;border:1px solid transparent}
.play-button:hover:not(:disabled){border-color:var(--brass-line)}
#play-icon{font-size:12px;width:32px;height:32px;border:1px solid var(--brass-line);border-radius:50%;display:grid;place-items:center;background:var(--brass-glow)}
.play-button[aria-pressed="true"] #play-icon{background:var(--brass);color:#1a1408;animation:breath 1.6s infinite}
.day-ruler{display:grid;grid-template-columns:repeat(45,1fr);grid-template-rows:16px 34px;column-gap:2px;margin-top:16px;align-items:end}
.ruler-month{grid-row:1;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--faint);white-space:nowrap;overflow:hidden;border-left:1px solid var(--border-strong);padding-left:4px;align-self:stretch;line-height:16px}
.day-ruler{grid-template-rows:16px 34px 8px!important}
.tick{grid-row:2;height:var(--h,8px);border-radius:2px;background:rgb(var(--hi) / .11);position:relative;cursor:pointer;transition:background-color .3s var(--ease),height .38s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease),opacity .3s var(--ease)}
.tick:hover{background:rgb(var(--hi) / .4);transform:scaleX(1.22);z-index:2}
.tick.lib{height:var(--h);background:rgb(var(--brass-rgb) / .333)}
.tick.event-only{height:var(--h);background:rgb(var(--brass-rgb) / .212);box-shadow:inset 0 2px 0 var(--brass)}
.tick.event-only.hit{background:rgb(var(--crimson-rgb) / .271);box-shadow:inset 0 2px 0 var(--rose)}
.tick.statement{height:var(--h);background:transparent;box-shadow:0 0 10px rgb(var(--teal-rgb) / .333)}
.tick.past{background:rgb(var(--hi) / .2)}
.tick.lib.past{background:var(--brass-2)}
.tick.event-only.past{background:rgb(var(--hi) / .259)}
.tick.truce{box-shadow:inset 0 0 0 1px var(--teal)}
.tick.hit:before{content:'';position:absolute;left:50%;top:calc(100% + 3px);width:5px;height:5px;margin-left:-2px;border-radius:50%;background:var(--crimson);box-shadow:0 0 6px var(--crimson);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.tick.hit:hover:before,.tick.hit.current:before{transform:scale(1.35);box-shadow:0 0 10px var(--crimson),0 0 0 3px rgb(var(--crimson-rgb) / .22)}
.tick.current{height:34px;background:var(--ink)!important;box-shadow:0 0 18px rgb(var(--ink-rgb) / .565),0 0 0 3px rgb(var(--ink-rgb) / .22);z-index:3}
.tick.after{background:transparent;box-shadow:inset 0 0 0 1px rgb(var(--hi) / .251)}
.tick.after.lib{background:rgb(var(--teal-rgb) / .4)}
.tick.after.past{background:rgb(var(--hi) / .149);box-shadow:none}
.tick:after{content:attr(data-label);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(4px) scale(.96);opacity:0;font-family:var(--mono);font-size:12px;white-space:nowrap;background:var(--raised);color:var(--ink);padding:4px 8px;border-radius:8px;border:1px solid var(--border-strong);box-shadow:0 10px 24px -8px rgb(0 0 0 / calc(.8 * var(--shade)));z-index:8;pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.tick.edge-l:after{left:0;transform:translateX(0) translateY(4px) scale(.96)}
.tick.edge-r:after{left:auto;right:0;transform:translateX(0) translateY(4px) scale(.96)}
.tick:hover:after{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}
.tick.edge-l:hover:after,.tick.edge-r:hover:after{transform:translateX(0) translateY(0) scale(1)}
.moments{display:flex;gap:8px;margin-top:16px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:rgb(var(--hi) / .133) transparent}
.moment{flex:0 0 auto;min-width:112px;text-align:left;padding:8px 12px;color:var(--muted);border-radius:12px;border:1px solid var(--border);background:rgb(var(--hi) / .012);position:relative;overflow:hidden;scroll-snap-align:start;transition:border-color .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)}
.moment:hover:not(:disabled){border-color:var(--brass-line);background:rgb(var(--hi) / .031);color:var(--ink-2);transform:translateY(-1px)}
.moment.in-era:not(.selected){border-color:rgb(var(--hi) / .133);background:rgb(var(--hi) / .024)}
.moment.selected{color:var(--ink);border-color:var(--brass-line);background:transparent;box-shadow:0 8px 22px -12px rgb(0 0 0 / var(--shade))}
.moment.selected:before{content:'';position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 4px 4px 0;background:var(--era,var(--crimson))}
.stop-day{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--faint);margin-bottom:4px;white-space:nowrap}
.stop-day .i{width:12px;height:12px;color:var(--brass)}
.stop-day em{margin-left:auto;padding-left:8px;font-style:normal;font-size:12px;letter-spacing:.02em;color:var(--ink-2);opacity:.8}
.moment.selected .stop-day{color:var(--brass)}
.moment.selected .stop-day em{color:var(--brass-2);opacity:1}
.moment strong{font-size:12px;font-weight:700;display:block;line-height:1.25}
.moment small{display:block;font-size:12px;margin-top:2px;color:var(--faint)}

/* Story panel */
.story{background:transparent;padding:24px 32px 24px;border-left:1px solid var(--border);min-width:0;display:flex;flex-direction:column}
.story:focus{outline:none}
.story-heading{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.day-ring{position:relative;width:48px;height:48px;flex-shrink:0}
.day-ring svg{width:48px;height:48px;transform:rotate(-90deg)}
.day-ring circle{fill:none;stroke-width:3}
.ring-bg{stroke:rgb(var(--hi) / .078)}
.ring-fg{stroke:var(--brass);stroke-linecap:round;stroke-dasharray:0 100;transition:stroke-dasharray .8s var(--ease)}
.day-ring span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:500;color:var(--brass-2)}
.badge-stack{display:flex;flex-direction:column;gap:4px}
.badge-stack small{font-size:12px;color:var(--faint)}
.chapter-badge{color:var(--brass);letter-spacing:.16em;font-size:12px;font-weight:700}
.story-arrows{display:flex;gap:8px;margin-left:auto}
.story-arrows button{font-size:16px;border:1px solid var(--border-strong);border-radius:50%;width:40px;height:40px;display:grid;place-items:center}
.story-arrows button:hover:not(:disabled){border-color:var(--brass);background:var(--brass-glow)}
#story-content.enter>*{animation:rise .52s var(--ease) both}
#story-content.enter>*:nth-child(2){animation-delay:.04s}
#story-content.enter>*:nth-child(3){animation-delay:.08s}
#story-content.enter>*:nth-child(4){animation-delay:.12s}
#story-content.enter>*:nth-child(5){animation-delay:.16s}
#story-content.enter>*:nth-child(6){animation-delay:.2s}
#story-content.enter>*:nth-child(n+7){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(12px);filter:blur(3px)}}
.story-date{display:flex;align-items:center;gap:12px;margin:0 0 16px}
.story-date b{font-family:var(--serif);font-weight:600;font-size:36px;line-height:.9;color:var(--brass-2)}
.story-date span{font-size:12px;font-weight:700;letter-spacing:.18em;color:var(--muted);line-height:1.5;border-left:1px solid var(--brass-line);padding-left:12px}
.story h2{font-family:var(--serif);font-size:clamp(30px,2.7vw,36px);letter-spacing:-.02em;line-height:1.08;font-weight:600;margin:0 0 16px}
.story h2 em{color:var(--brass);font-style:normal}
.story-summary{font-size:14px;color:var(--ink-2);line-height:1.72;margin:0 0 24px}
.day-stats{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--border);border-radius:16px;background:rgb(var(--hi) / .016);margin:0 0 8px}
.day-stats div{padding:12px 12px 12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.day-stats div+div{border-left:1px solid var(--border)}
.day-stats b{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1;color:var(--brass-2);font-variant-numeric:tabular-nums}
.day-stats b small{font-family:var(--mono);font-size:12px;color:var(--faint);margin-left:2px}
.day-stats span{font-size:12px;color:var(--faint);line-height:1.3}
.day-stats .hot b{color:var(--rose)}
.event-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.ev{border:1px solid var(--border);border-left:3px solid var(--brass);border-radius:12px;padding:12px 16px 12px;background:rgb(var(--hi) / .016)}
.ev-strike{border-left-color:var(--crimson);background:transparent}
.ev-truce{border-left-color:var(--teal)}
.ev-mile{border-left-color:var(--green)}
.ev-loss{border-left-color:var(--crimson-deep);background:transparent}
.ev-claim{border-left-style:dashed}
.ev-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px}
.ev-tag{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brass)}
.ev-strike .ev-tag,.ev-loss .ev-tag{color:var(--rose)}
.ev-truce .ev-tag{color:var(--teal)}
.ev-mile .ev-tag{color:var(--green)}
.ev-num{font-family:var(--mono);font-size:12px;color:var(--rose-2);background:rgb(var(--crimson-rgb) / .149);border-radius:999px;padding:2px 8px;white-space:nowrap}
.ev p{margin:0;font-size:14px;line-height:1.6;color:var(--ink-2)}
.ev-foot{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px}
.ev-fly{font-size:12px;font-weight:700;color:var(--brass-2);display:flex;gap:4px;align-items:center;padding:4px 8px;border:1px solid var(--brass-line);border-radius:999px}
.ev-fly:hover:not(:disabled){background:var(--brass-glow)}
.src-chips{display:flex;flex-wrap:wrap;gap:4px;margin-left:auto}
.src-chips a{font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--muted);border:1px solid var(--border);border-radius:6px;padding:2px 8px;text-decoration:none}
.src-chips a:hover{color:var(--ink);border-color:var(--border-strong)}
.place-group{margin:0 0 12px}
.place-group>strong{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:8px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:12px;padding:4px 12px;border-radius:999px;border:1px solid var(--border-strong);color:var(--ink-2);background:rgb(var(--hi) / .02)}
.chip.major{border-color:var(--brass-line);color:var(--brass-2);font-weight:700}
.chip:hover:not(:disabled){border-color:var(--brass);color:var(--ink)}
.chip:disabled{opacity:.55;border-style:dashed}
.photo{margin:0 0 24px;border-radius:16px;overflow:hidden;border:1px solid var(--border-strong);position:relative;background:var(--raised)}
.photo img{width:100%;height:180px;object-fit:cover;filter:saturate(.7) contrast(1.05) brightness(.82) sepia(.15);display:block;transition:transform 1.2s var(--ease),filter .6s var(--ease)}
.photo:hover img{transform:scale(1.05);filter:saturate(.95) contrast(1.05) brightness(.92)}
.photo:after{content:'';position:absolute;left:0;right:0;top:0;height:180px;background:transparent;pointer-events:none}
.photo figcaption{font-size:12px;color:var(--ink-2);padding:8px 12px;background:var(--bg);display:flex;justify-content:space-between;gap:12px}
.photo figcaption a{color:var(--brass);text-decoration:underline;text-underline-offset:3px}
.detail-caption{font-size:12px;letter-spacing:.18em;margin:24px 0 12px;font-weight:700;color:var(--ink-2);display:flex;align-items:center;gap:12px}
.detail-caption:after{content:'';flex:1;height:1px;background:var(--border)}

.story-note{font-size:12px;line-height:1.65;color:var(--muted);background:rgb(var(--teal-rgb) / .047);border:1px solid rgb(var(--teal-rgb) / .149);border-radius:12px;padding:12px 16px 12px 40px;margin:16px 0 0;position:relative}
.story-note:before{content:'i';position:absolute;left:12px;top:11px;width:16px;height:16px;border-radius:50%;border:1px solid var(--teal);color:var(--teal);font-family:var(--serif);font-weight:600;font-style:normal;font-size:12px;display:grid;place-items:center;line-height:1}
.story-actions{display:flex;gap:12px;margin-top:auto;padding-top:24px}
.source-button{display:flex;align-items:center;gap:12px;flex:1;padding:12px 16px;border:1px solid var(--brass-line);border-radius:12px;font-size:14px;font-weight:700;color:var(--brass-2);background:var(--brass-glow)}
.source-button:hover:not(:disabled){border-color:var(--brass);background:rgb(var(--brass-rgb) / .188)}
.source-count{font-family:var(--mono);font-size:12px;padding:2px 8px;background:var(--brass);color:#1a1408;border-radius:999px}
.source-arrow{margin-left:auto}
.share-button{border:1px solid var(--border-strong);border-radius:12px;width:50px;display:grid;place-items:center}
.share-button:hover:not(:disabled){border-color:var(--brass-line);background:rgb(var(--hi) / .024)}
.share-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}

.document-art{height:160px;margin:0 0 24px;border-radius:16px;position:relative;overflow:hidden;background:transparent;display:flex;align-items:center;padding:24px 24px;gap:24px;border:1px solid var(--border-strong)}
.document-art:before,.document-art:after{content:'';position:absolute;left:0;right:0;height:16px;opacity:.55}
.document-art:before{top:0}.document-art:after{bottom:0}
.document-art>span{font-family:var(--serif);font-weight:600;font-size:72px;line-height:1;color:var(--brass);text-shadow:0 0 40px rgb(var(--brass-rgb) / .333)}
.document-art strong{display:block;font-family:var(--serif);font-size:20px;font-weight:600;color:var(--ink)}
.document-art small{font-family:var(--mono);font-size:12px;color:var(--muted);display:block;margin-top:8px;letter-spacing:.1em}

/* Map popup */
.atlas-popup .maplibregl-popup-content{background:rgb(var(--surface-rgb) / .961);border:1px solid var(--border-strong);border-radius:12px;padding:8px 12px;color:var(--ink);font-family:var(--font);box-shadow:0 12px 30px -10px rgb(0 0 0 / var(--shade));display:flex;flex-direction:column;gap:2px}
.atlas-popup .maplibregl-popup-tip{border-top-color:rgb(var(--surface-rgb) / .961)!important;border-bottom-color:rgb(var(--surface-rgb) / .961)!important}
.atlas-popup strong{font-size:14px}.atlas-popup strong.crim{color:var(--rose)}
.atlas-popup span{font-size:12px;color:var(--ink-2)}
.atlas-popup small{font-family:var(--mono);font-size:12px;color:var(--brass)}

/* Losses */
.losses{padding:8px 0 0}
.loss-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.loss-card{border:1px solid var(--border);border-radius:16px;padding:24px 16px 16px;background:rgb(var(--hi) / .016);display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden}
.loss-card.major{grid-column:span 2;background:transparent}
.loss-card.crim{background:transparent;border-color:rgb(var(--crimson-rgb) / .2)}
.loss-card.wide{grid-column:span 2}
.loss-card.full{grid-column:1/-1}
.loss-card.full>b{font-size:clamp(30px,3vw,36px)}
.loss-card>b{font-family:var(--serif);font-weight:600;font-size:clamp(36px,4.4vw,60px);line-height:1;color:var(--brass-2);letter-spacing:-.02em}
.loss-card.crim>b{color:var(--rose)}
.loss-card>strong{font-size:14px;margin-top:8px}
.loss-card>span{font-family:var(--mono);font-size:12px;color:var(--ink-2)}
.loss-card>p{font-size:12px;color:var(--muted);line-height:1.6;margin:8px 0 12px}
.loss-card .src-chips{margin:auto 0 0}
.strike-table-wrap{padding-top:64px;scroll-margin-top:16px}
.table-scroll{overflow-x:auto;border:1px solid var(--border);border-radius:16px}
.strike-table{width:100%;border-collapse:collapse;font-size:14px;min-width:680px}
.strike-table th,.strike-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle}
.strike-table thead th{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint);font-weight:700;background:rgb(var(--hi) / .016)}
.strike-table tbody tr:last-child>*{border-bottom:0}
.strike-table tbody tr:hover{background:rgb(var(--hi) / .02)}
.strike-table td:first-child{font-family:var(--mono);font-size:12px;color:var(--muted);white-space:nowrap}
.strike-table .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}
.strike-table tbody td.num:nth-child(4){color:var(--rose);font-weight:500}
.strike-table tbody th{font-weight:600}
.strike-table em{font-style:normal;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);border:1px dashed var(--border-strong);border-radius:6px;padding:2px 4px;margin-left:8px}
.strike-table tr.claim{color:var(--muted)}
.strike-table .src-chips{margin:0}
.row-link{text-align:left;text-decoration:underline;text-decoration-color:rgb(var(--hi) / .188);text-underline-offset:4px}
.row-link:hover{text-decoration-color:var(--brass)}
.table-note{font-size:12px;color:var(--faint);margin:12px 0 0;max-width:820px}

/* Roadmap + footer */
.roadmap{padding:64px 0 48px;display:grid;grid-template-columns:minmax(260px,.8fr) 2fr;gap:40px;align-items:start}
.roadmap-head{display:flex;gap:16px}
.little-star{width:34px;height:34px;fill:none;stroke:var(--crimson);stroke-width:1.6;flex-shrink:0;margin-top:4px}
.roadmap h2{font-family:var(--serif);font-weight:600;font-size:30px;line-height:1.15;margin:0}
.roadmap-head p{font-size:14px;color:var(--muted);margin:12px 0 0}
.roadmap-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.roadmap-list li{position:relative;border:1px solid var(--border);border-radius:16px;padding:16px 16px 16px;background:rgb(var(--hi) / .012);display:flex;flex-direction:column;min-height:170px;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.roadmap-list li:hover{border-color:var(--border-strong);transform:translateY(-3px)}
.roadmap-list li>span{font-family:var(--mono);font-size:12px;color:var(--faint)}
.roadmap-list strong{font-size:16px;font-weight:700;line-height:1.3;margin-top:16px}
.roadmap-list small{font-size:12px;color:var(--muted);margin-top:8px}
.roadmap-list em{margin-top:auto;padding-top:16px;font-style:normal;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);display:flex;align-items:center;gap:8px}
.roadmap-list em:before{content:'';width:6px;height:6px;border-radius:50%;border:1px solid currentColor}
.roadmap-list li.done{border-color:var(--brass-line);background:transparent}
.roadmap-list li.done>span,.roadmap-list li.done em{color:var(--brass)}
.roadmap-list li.done em:before{background:currentColor}
footer{max-width:1600px;margin:auto;padding:24px var(--gutter) 32px;display:flex;justify-content:space-between;align-items:center;gap:24px;font-size:12px;color:var(--faint)}
.foot-brand{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.foot-by{color:var(--faint);font-weight:500;white-space:nowrap}
.foot-by:hover{color:var(--brass)}
.foot-brand svg{width:16px;height:16px;fill:none;stroke:var(--brass);stroke-width:2}
footer p{letter-spacing:.2em;margin:0;text-transform:uppercase;font-size:12px;font-weight:700}
footer button{font-size:12px;font-weight:600;color:var(--ink-2)}

/* Dialog + toast */
dialog{background:var(--panel);color:var(--ink);border:1px solid var(--border-strong);border-radius:24px;max-width:640px;width:calc(100% - 32px);padding:0 32px 32px;max-height:85dvh;box-shadow:0 40px 100px -30px rgb(0 0 0 / var(--shade))}
dialog[open]{animation:pop .3s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}}
dialog::backdrop{background:#000000c4;backdrop-filter:blur(8px)}
.dialog-head{display:flex;align-items:center;justify-content:space-between;margin:0 -32px 8px;padding:24px 32px 0;position:sticky;top:0;background:var(--panel);z-index:1}
.dialog-head:before{content:'';position:absolute;left:0;right:0;top:0;height:16px;opacity:.55}
.dialog-head .eyebrow{font-size:12px}
.dialog-head button{font-size:24px;line-height:1;color:var(--muted);width:40px;height:40px;border-radius:50%;border:1px solid var(--border)}
.dialog-head button:hover:not(:disabled){background:rgb(var(--hi) / .051)}
dialog h2{font-family:var(--serif);font-size:30px;font-weight:600;line-height:1.15;margin:4px 0 16px}
dialog h3{font-size:14px;margin:24px 0 8px;color:var(--brass-2)}
dialog p,dialog li{font-size:14px;line-height:1.75;color:var(--ink-2)}
dialog a{color:var(--brass);text-decoration:underline;text-underline-offset:4px}
.source-entry{border-top:1px solid var(--border);padding:16px 0}
.source-entry>span{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--faint);text-transform:uppercase}
.source-entry a{display:block;margin:8px 0;font-size:16px;line-height:1.5}
.source-entry p{font-size:14px;margin:0}
.share-input{width:100%;background:var(--bg);border:1px solid var(--border-strong);border-radius:12px;color:var(--ink);font:inherit;padding:12px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);padding:12px 24px 12px 48px;border-radius:12px;border:1px solid var(--brass-line);background:var(--raised);color:var(--ink);font-size:14px;z-index:30;box-shadow:0 12px 40px -12px rgb(0 0 0 / var(--shade));max-width:calc(100% - 32px);animation:pop .3s var(--ease)}
.toast:before{content:'✦';position:absolute;left:18px;color:var(--brass)}
.noscript{padding:24px;text-align:center}
@media(min-width:1450px){
  .atlas-shell{grid-template-columns:minmax(0,1fr) 460px}
  .story{padding:32px 32px 24px}
  .photo img{height:200px}.photo:after{height:200px}
}
@media(max-width:1180px){
  .atlas-shell{grid-template-columns:minmax(0,1fr) 360px}
  .story{padding:24px}
  .timeline-hint{display:none}
  .text-button{margin-left:auto}
  
  .roadmap{grid-template-columns:minmax(0,1fr)}
  .loss-cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
  .atlas-shell{display:flex;flex-direction:column}
  .story{border-left:0;border-top:1px solid var(--border)}
  .map-frame{min-height:440px}
  
  
  .roadmap-list{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .header{height:64px;gap:12px}
  .brand-text{font-size:16px}
  .brand small{font-size:12px;letter-spacing:.16em}
  .brand-seal{width:36px;height:36px}
  .header nav{margin-left:auto;margin-right:0;gap:0;padding:4px;border:0;background:none}
  .nav-item{font-size:12px;padding:8px 12px}
  .header .site-nav{display:none}
  .header-right{display:flex;margin-left:auto}
  
  h1{font-size:36px}
  
  .hero-actions>*{flex:1;justify-content:center}
  .hero-actions .ghost-button{display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.25}
  .intro-play{flex-wrap:wrap;row-gap:2px}
  .intro-play small{flex-basis:100%}
  
  .map-toolbar{height:56px;padding:0 12px}
  .map-status{white-space:normal;text-align:center;justify-content:center;font-size:12px;line-height:1.35;border-radius:16px}
  .map-frame{min-height:420px}
  .map-heading{left:16px;top:16px}
  .map-heading>strong{font-size:30px}
  .map-heading>small{font-size:12px}
  .map-coordinates{left:16px;bottom:58px;font-size:12px}
  .map-controls{right:12px}
  .map-compass{right:14px;top:16px}
  .map-compass svg{width:32px;height:32px}
  .legend{font-size:12px;gap:12px;padding:8px 12px}
  .timeline{padding:16px 16px 16px}
  .day-ruler{column-gap:2px}
  .ruler-month{font-size:12px;padding-left:4px}
  .moment{min-width:92px;padding:8px 12px}
  .story{padding:24px 16px}
  .story h2{font-size:30px}
  .roadmap{padding:40px 0 32px;gap:24px}
  .loss-cards{grid-template-columns:1fr 1fr;gap:8px}
  .loss-card{padding:16px 16px 16px}
  .loss-card.major,.loss-card.wide,.loss-card.full{grid-column:span 2}
  .legend{gap:0}
  .legend-toggle{padding:4px 8px;font-size:12px}
  .legend-toggle small{display:none}
  .day-stats b{font-size:24px}
  .tick.hit:before{width:4px;height:4px;margin-left:-2px}
  .roadmap-list{grid-template-columns:minmax(0,1fr)}
  .roadmap-list li{min-height:0}
  footer{flex-wrap:wrap;padding:24px var(--gutter)}
  footer p{display:none}
  dialog{padding:0 24px 24px}
  .dialog-head{margin:0 -24px 8px;padding:24px 24px 0}
  dialog h2{font-size:24px}
}
@media(max-width:420px){
  .loss-cards{grid-template-columns:minmax(0,1fr)}
  .loss-card.major,.loss-card.wide,.loss-card.full{grid-column:auto}
}
/* ===== Multi-page: shared ===== */
@view-transition{navigation:auto}
.flag-line{view-transition-name:flag-line}
.header{view-transition-name:site-header}
.tabbar{view-transition-name:tabbar}
::view-transition-old(root){animation:.3s var(--ease) both vt-out}
::view-transition-new(root){animation:.4s var(--ease) both vt-in}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(14px)}}
a.start-button,a.ghost-button{display:inline-flex;align-items:center;justify-content:center}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.section-head{max-width:780px;margin-bottom:24px}
.section-head h2,.page-head h1{font-family:var(--serif);font-weight:600;font-size:clamp(30px,4vw,48px);line-height:1.05;letter-spacing:-.02em;margin:12px 0 0}
.page-head h1{font-size:clamp(36px,5.2vw,72px)}
.section-head h2 em,.page-head h1 em{font-style:normal;color:var(--brass)}
.section-head p,.page-head p{color:var(--muted);font-size:16px;margin:16px 0 0;max-width:640px}
.page-head p b{color:var(--ink);font-weight:700}
.page-head{padding:48px 0 32px;position:relative}
.page-head:before{content:'';position:absolute;inset:0;background:var(--stars);mask-image:radial-gradient(60% 100% at 85% 40%,#000,transparent);-webkit-mask-image:radial-gradient(60% 100% at 85% 40%,#000,transparent);pointer-events:none;z-index:-1}
.page-head .eyebrow{display:flex;align-items:center;gap:12px}
.page-head-loss h1 em{color:var(--rose)}
.page-toc{display:flex;gap:8px;margin-top:24px;flex-wrap:wrap}
.page-toc a{font-size:12px;font-weight:600;padding:8px 16px;border:1px solid var(--border-strong);border-radius:999px;color:var(--ink-2);transition:border-color .3s var(--ease),color .3s var(--ease)}
.page-toc a:hover{border-color:var(--brass-line);color:var(--brass-2)}
@media(scripting:enabled){
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
  .reveal.in{opacity:1;transform:none}
}
.tabbar{display:none}

/* ===== Home ===== */
.curve-section{padding:64px 0 24px}
.curve-wrap{position:relative;margin:0;border:1px solid var(--border);border-radius:var(--radius);background:transparent;padding:16px 16px 16px}
.curve-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:rgb(var(--hi) / .133) transparent}
.curve-inner{position:relative}
.curve{width:100%;height:auto;display:block;cursor:crosshair;overflow:visible}
.curve:focus-visible{outline:2px solid var(--brass);outline-offset:6px;border-radius:8px}
.c-after{fill:rgb(var(--teal-rgb) / .051)}
.c-zone{fill:var(--teal);font:700 10px var(--font);letter-spacing:.16em;opacity:.75}
.c-grid{stroke:rgb(var(--hi) / .071);stroke-dasharray:2 5}
.c-axis{fill:var(--faint);font:500 10px var(--mono)}
.c-bar{fill:rgb(var(--brass-rgb) / .227);transform-box:fill-box;transform-origin:bottom;transition:fill .3s var(--ease),filter .3s var(--ease)}
.c-bar.on{fill:var(--brass-2);filter:drop-shadow(0 0 8px rgb(var(--brass-rgb) / .565))}
.c-area{fill:url(#curve-fill)}
#curve-fill stop{stop-color:var(--brass)}
.c-line{fill:none;stroke:var(--brass-2);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;filter:drop-shadow(0 0 7px rgb(var(--brass-rgb) / .4))}
.in .c-line{animation:draw 2.1s var(--ease) both}
.in .c-area{animation:fade 1.2s .45s var(--ease) both}
.in .c-bar{animation:barGrow .65s var(--d,.3s) var(--ease) both}
.in .c-mark,.in .c-strike,.in .c-hand{animation:markPop .5s var(--d,.5s) var(--ease) both;transform-box:fill-box;transform-origin:center}
@keyframes draw{from{stroke-dashoffset:1}}
@keyframes fade{from{opacity:0}}
@keyframes barGrow{from{opacity:0;transform:scaleY(0)}}
@keyframes markPop{from{opacity:0;transform:scale(.4) translateY(5px)}}
.c-strike{fill:var(--crimson)}
.c-hand{fill:var(--teal)}
.c-mark circle{fill:var(--bg);stroke:var(--brass-2);stroke-width:2}
.c-mark line{stroke:rgb(var(--brass-2-rgb) / .439)}
.c-mark text{fill:var(--ink);font:600 12px var(--font)}
.c-mark text:not([text-anchor]){text-anchor:middle}
.c-month{fill:var(--faint);font:500 10px var(--mono);letter-spacing:.08em}
.c-cursor{stroke:rgb(var(--hi) / .376);stroke-dasharray:3 3;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.c-dot-ring{fill:rgb(var(--brass-rgb) / .149);stroke:var(--brass-2);stroke-width:1.2;opacity:0;pointer-events:none;transform-box:fill-box;transform-origin:center}
.c-dot{fill:var(--brass-2);stroke:var(--bg);stroke-width:3;opacity:0;pointer-events:none;transition:opacity .3s var(--ease)}
.hovering .c-cursor,.hovering .c-dot{opacity:1}
.hovering .c-dot-ring{opacity:.85;animation:dotPulse 1.6s ease-in-out infinite}
@keyframes dotPulse{50%{transform:scale(1.38);opacity:.32}}
.curve-tip{position:absolute;top:0;transform:translateX(-50%);pointer-events:none;background:rgb(var(--surface-rgb) / .961);border:1px solid var(--border-strong);border-radius:12px;padding:8px 12px;display:flex;flex-direction:column;gap:2px;min-width:150px;box-shadow:0 12px 30px -10px rgb(0 0 0 / var(--shade));z-index:2;transition:left .3s var(--ease)}
.curve-tip b{font-size:14px}
.curve-tip span{font-size:12px;color:var(--ink-2)}
.curve-tip em{font-style:normal;color:var(--brass-2);font-weight:700}
.curve-tip i{font-family:var(--serif);font-weight:600;font-size:12px;color:var(--brass);margin-top:4px}
.curve-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:12px;padding:0 4px}
.curve-legend span{display:flex;align-items:center;gap:8px}
.curve-legend i{display:block}
.cl-line{width:16px;height:2px;background:var(--brass-2)}
.cl-bar{width:6px;height:10px;background:rgb(var(--brass-rgb) / .376);border-radius:2px}
.cl-strike{width:8px;height:8px;border-radius:50%;background:var(--crimson)}
.cl-hand{width:7px;height:7px;background:var(--teal);transform:rotate(45deg)}
.chapters-section{padding:48px 0 16px}
.chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.chapters.reveal{opacity:1;transform:none}
.chapter{position:relative;display:flex;flex-direction:column;padding:24px 24px 16px;border:1px solid var(--border-strong);border-radius:var(--radius);background:var(--surface);min-height:330px;overflow:hidden;transition:opacity .7s var(--ease),transform .7s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
@media(scripting:enabled){.chapters.reveal:not(.in) .chapter{opacity:0;transform:translateY(24px)}}
.chapters.in .chapter{transition-delay:calc(var(--i)*90ms)}
.chapters.in .chapter:hover{transition-delay:0s;border-color:var(--brass);transform:translateY(-4px);box-shadow:0 30px 60px -30px rgb(0 0 0 / var(--shade))}
.ch-kicker{font-family:var(--mono);font-size:12px;color:var(--brass);letter-spacing:.04em}
.chapter strong{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.1;margin-top:16px}
.chapter p{font-size:14px;color:var(--muted);margin:12px 0 24px;line-height:1.6}
.ch-meter{height:4px;border-radius:4px;background:rgb(var(--hi) / .063);overflow:hidden;margin-top:auto}
.ch-meter i{display:block;height:100%;background:var(--brass);border-radius:inherit;transform-origin:left;transition:transform 1.1s var(--ease) calc(var(--i,0)*90ms + .2s)}
@media(scripting:enabled){.chapters.reveal:not(.in) .ch-meter i{transform:scaleX(0)}}
.ch-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:16px 0 0}
.ch-stats div{display:flex;flex-direction:column-reverse}
.ch-stats dt{font-size:12px;color:var(--faint)}
.ch-stats dd{margin:0;font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.1;color:var(--ink)}
.ch-go{margin-top:16px;align-self:flex-start;font-size:12px;font-weight:700;color:var(--brass-2);display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border-strong);border-radius:10px;background:rgb(var(--hi) / .02)}
.chapter:hover .ch-go{border-color:var(--brass-line);background:rgb(var(--hi) / .04)}
.ch-go span,.path-go span,.dc-atlas span,.story-more span{transition:transform .3s var(--ease)}
.chapter:hover .ch-go span,.path:hover .path-go span,.dc-atlas:hover span,.story-more:hover span{transform:translateX(4px)}
.paths{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:40px 0 8px}
.path{position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 18px 14px;border-radius:var(--radius);border:1px solid var(--border-strong);background:var(--surface);overflow:hidden;min-height:0;transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)}
.path:before{content:'';position:absolute;right:-70px;bottom:-90px;width:200px;height:200px;border-radius:50%;background:var(--glow);opacity:.45;transition:opacity .4s var(--ease),transform .6s var(--ease);pointer-events:none}
.path:hover{transform:translateY(-3px);border-color:var(--accent-line);box-shadow:0 24px 48px -28px rgb(0 0 0 / var(--shade))}
.path:hover:before{opacity:1;transform:scale(1.2)}
.path-atlas{--glow:rgb(var(--brass-rgb) / .22);--accent:var(--brass-2);--accent-line:var(--brass-line)}
.path-chron{--glow:rgb(var(--teal-rgb) / .204);--accent:var(--teal);--accent-line:rgb(var(--teal-rgb) / .314)}
.path-loss{--glow:rgb(var(--crimson-rgb) / .22);--accent:var(--rose);--accent-line:rgb(var(--crimson-rgb) / .333)}
.path-top{display:flex;align-items:center;gap:10px}
.path-icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--border-strong);background:var(--panel);flex:none}
.path-icon svg{width:17px;height:17px;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.path-kicker{font-family:var(--mono);font-size:11px;color:var(--faint);letter-spacing:.08em}
.path strong{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.15;margin:2px 0 0;position:relative}
.path p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.45;position:relative}
.path-go{margin-top:10px;font-size:12px;font-weight:700;color:var(--accent);display:flex;gap:8px;position:relative}

/* ===== Atlas page ===== */
.map-toolbar .play-button{margin-left:4px}
.map-toolbar .text-button{margin-left:auto}
.story-more{display:inline-flex;gap:8px;margin-top:16px;font-size:12px;font-weight:700;color:var(--teal)}
@media(min-width:961px){
  .page-atlas{--story-w:clamp(350px,27vw,416px);--timeline-h:166px}
  .page-atlas .header{max-width:none}
  .page-atlas main{max-width:none;padding:0 clamp(12px,1.2vw,24px) 12px}
  .page-atlas .atlas-shell{position:relative;display:block;margin-top:2px;height:calc(100dvh - 79px - 12px);min-height:620px;background:#000000}
  .page-atlas .map-column{position:absolute;inset:0;display:block}
  .page-atlas .map-frame{position:absolute;inset:0;min-height:0}
  .page-atlas .map-vignette{background:#000000b8}
  .page-atlas .map-toolbar{position:absolute;top:14px;left:14px;z-index:5;height:46px;padding:0 8px 0 8px;gap:12px;border:1px solid var(--border-strong);border-radius:12px;background:rgb(var(--surface-rgb) / .749);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 16px 36px -14px rgb(0 0 0 / calc(.8 * var(--shade)))}
  .page-atlas .map-toolbar .text-button{margin-left:2px;padding:8px 12px;font-size:12px}
  .page-atlas .map-heading{top:70px;left:18px;z-index:3;text-shadow:0 2px 18px rgb(0 0 0 / calc(.902 * var(--shade))),0 1px 3px rgb(0 0 0 / var(--shade))}
  .page-atlas .map-heading>strong{font-size:clamp(30px,2.8vw,36px)}
  .page-atlas .map-coordinates{top:166px;bottom:auto;left:20px;z-index:3;text-shadow:0 1px 6px rgb(0 0 0 / var(--shade))}
  .page-atlas .map-compass{top:16px;right:calc(var(--story-w) + 28px);z-index:3}
  .page-atlas .map-controls{right:calc(var(--story-w) + 26px);bottom:calc(var(--timeline-h) + 24px);z-index:4;background:rgb(var(--surface-rgb) / .749);backdrop-filter:blur(12px)}
  .page-atlas .map-bottom{left:14px;right:calc(var(--story-w) + 80px);bottom:calc(var(--timeline-h) + 22px);z-index:4;flex-direction:row;align-items:center;flex-wrap:wrap;gap:8px;pointer-events:none}
  .page-atlas .map-bottom>*{pointer-events:auto}
  .page-atlas .area-meter{width:auto;min-width:280px;max-width:420px;background:rgb(var(--surface-rgb) / .749);backdrop-filter:blur(12px) saturate(1.25);padding:8px 12px 8px}
  .page-atlas .legend{background:rgb(var(--surface-rgb) / .749);backdrop-filter:blur(12px) saturate(1.25)}
  .page-atlas .scene-card{top:14px;right:calc(var(--story-w) + 78px);width:min(350px,calc(100% - var(--story-w) - 110px));background:rgb(var(--surface-rgb) / .851);backdrop-filter:blur(14px)}
  .page-atlas .scene-card.compact{top:14px;right:calc(var(--story-w) + 78px);width:min(290px,calc(100% - var(--story-w) - 110px))}
  .page-atlas .timeline{position:absolute;left:14px;right:calc(var(--story-w) + 26px);bottom:14px;z-index:5;padding:12px 16px 12px;border:1px solid var(--border-strong);border-radius:16px;background:rgb(var(--surface-rgb) / .749);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 24px 50px -20px rgb(0 0 0 / calc(.867 * var(--shade)))}
  .page-atlas .era-tab{padding:4px 12px 4px;background:rgb(var(--hi) / .024)}
  .page-atlas .era-tab strong{font-size:12px}
  .page-atlas .era-tab small{font-size:12px}
  .page-atlas .ruler-hint{font-size:12px;margin:4px 0 0;opacity:.8}
  .page-atlas .day-ruler{margin-top:8px;grid-template-rows:14px 28px 6px!important}
  .page-atlas .tick.current{height:28px}
  .page-atlas .tick.pre-tick{height:28px}
  .page-atlas .moments{margin-top:8px;padding-bottom:2px;gap:8px}
  .page-atlas .moment{min-width:96px;padding:8px 12px;border-radius:8px;background:rgb(var(--hi) / .024)}
  .page-atlas .moment strong{font-size:12px}
  .page-atlas .moment small{font-size:12px}
  .page-atlas .story{position:absolute;top:14px;right:14px;bottom:14px;width:var(--story-w);z-index:6;border:1px solid var(--border-strong);border-radius:16px;background:transparent;backdrop-filter:blur(18px) saturate(1.35);-webkit-backdrop-filter:blur(18px) saturate(1.35);box-shadow:0 24px 60px -20px rgb(0 0 0 / calc(.933 * var(--shade)));overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:rgb(var(--hi) / .133) transparent;padding:24px 24px 0}
  .page-atlas .story-actions{position:sticky;bottom:0;z-index:2;padding:16px 0 16px;margin-top:auto;background:transparent}
  .page-atlas .maplibregl-ctrl-bottom-right{right:calc(var(--story-w) + 22px);bottom:2px}
  .page-atlas footer{max-width:none}
}
@media(min-width:1450px){
  .page-atlas{--story-w:436px}
}

/* ===== Chronicle page ===== */
.chron-tools{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:12px 0;margin-bottom:8px;background:var(--bg)}
.search{position:relative;flex:1 1 300px;max-width:440px}
.search>svg{position:absolute;left:14px;top:50%;width:18px;height:18px;margin-top:-8px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;pointer-events:none}
.search input{width:100%;height:46px;border-radius:12px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);font:inherit;font-size:14px;padding:0 16px 0 40px;outline:none;transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.search input::placeholder{color:var(--faint)}
.search input:focus{border-color:var(--brass);box-shadow:0 0 0 4px var(--brass-glow)}
.search-results{position:absolute;left:0;right:0;top:calc(100% + 6px);list-style:none;margin:0;padding:8px;background:var(--panel);border:1px solid var(--border-strong);border-radius:16px;box-shadow:0 24px 50px -20px rgb(0 0 0 / var(--shade));z-index:5;max-height:min(380px,60vh);overflow:auto;animation:pop .3s var(--ease)}
.sr-item{width:100%;display:grid;grid-template-columns:1fr auto;column-gap:12px;text-align:left;padding:8px 12px;border-radius:8px}
.sr-item strong{font-size:14px;grid-column:1}
.sr-item span{grid-column:1;font-size:12px;color:var(--faint)}
.sr-item time{grid-column:2;grid-row:1/3;align-self:center;font-family:var(--mono);font-size:12px;color:var(--brass)}
.sr-item:hover,.sr-item:focus-visible{background:rgb(var(--hi) / .039)}
.sr-empty{padding:12px 12px;font-size:12px;color:var(--muted)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filter{font-size:12px;font-weight:600;padding:8px 12px;border-radius:999px;border:1px solid var(--border);color:var(--muted);display:flex;align-items:center;gap:8px}
.filter:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--c)}
.filter[data-filter="all"]:before{display:none}
.f-lib{--c:var(--brass)}.f-strike{--c:var(--crimson)}.f-truce{--c:var(--teal)}.f-mile{--c:var(--green)}.f-loss{--c:var(--plum-2)}
.filter[aria-pressed="true"]{background:var(--raised);color:var(--ink);border-color:var(--border-strong)}
.shown{margin-left:auto;font-size:12px;color:var(--faint)}
.shown b{font-family:var(--mono);font-weight:500;color:var(--ink-2)}
.chron-layout{display:grid;grid-template-columns:190px minmax(0,1fr);gap:48px;align-items:start;padding-bottom:40px}
.rail{position:sticky;top:84px;display:flex;flex-direction:column;gap:16px}
.rail-now{border:1px solid var(--border);border-radius:16px;padding:16px;background:var(--surface);display:flex;flex-direction:column}
.rail-now>span{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.1}
.rail-now>small{font-size:12px;color:var(--faint)}
.rail-now b{font-family:var(--serif);font-weight:600;font-size:30px;color:var(--brass-2);margin-top:12px;line-height:1}
.rail-now b small{font-family:var(--font);font-size:12px;color:var(--faint)}
.rail-ticks{display:flex;flex-direction:column;gap:2px}
.rail-tick{height:5px;width:var(--w);border-radius:2px;background:rgb(var(--hi) / .11);transition:background-color .3s var(--ease),width .3s var(--ease)}
.rail-tick:disabled{opacity:.35}
.rail-tick.past{background:rgb(var(--brass-rgb) / .541)}
.rail-tick.hit{box-shadow:inset -3px 0 0 var(--crimson)}
.rail-tick.after{background:rgb(var(--teal-rgb) / .271)}
.rail-tick.after.past{background:rgb(var(--teal-rgb) / .565)}
.rail-tick.current{background:var(--ink);width:100%!important}
.rail-tick:hover:not(:disabled){background:var(--brass-2)}
.rail-months{display:flex;gap:8px;font-family:var(--mono);font-size:12px}
.rail-months a{color:var(--faint);padding:4px 8px;border:1px solid var(--border);border-radius:6px}
.rail-months a:hover{color:var(--ink);border-color:var(--border-strong)}
.month{scroll-margin-top:80px}
.month-head{font-family:var(--serif);font-weight:600;font-size:36px;line-height:1;margin:32px 0 16px;display:flex;align-items:baseline;gap:12px}
.month:first-child .month-head{margin-top:8px}
.month-head small{font-family:var(--mono);font-size:12px;color:var(--faint)}
.month-head:after{content:'';flex:1;height:1px;background:var(--border);align-self:center}
.month-days{display:flex;flex-direction:column;gap:12px;position:relative}
.month-days:before{content:'';position:absolute;left:39px;top:6px;bottom:6px;width:1px;background:var(--brass-line)}
.day-card{display:grid;grid-template-columns:80px minmax(0,1fr);gap:16px;scroll-margin-top:90px}
.dc-date{display:flex;flex-direction:column;align-items:center;padding-top:16px;position:relative;z-index:1;text-align:center}
.dc-date b{font-family:var(--serif);font-weight:600;font-size:36px;line-height:1;color:var(--brass-2);background:var(--bg);padding:2px 4px}
.dc-date span{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--muted);background:var(--bg)}
.dc-date small{font-size:12px;color:var(--faint);margin-top:2px;background:var(--bg)}
.dc-body{border:1px solid var(--border);border-radius:16px;padding:16px 24px 16px;background:transparent;transition:border-color .3s var(--ease);min-width:0}
.day-card:hover .dc-body{border-color:var(--border-strong)}
.day-card.compact .dc-body{padding:16px 16px 12px}
.day-card.compact .dc-date b{font-size:30px}
.day-card.compact h3{font-size:20px}
.dc-tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.tag{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border-radius:999px;border:1px solid currentColor}
.tag-lib{color:var(--brass)}.tag-strike{color:var(--rose)}.tag-truce{color:var(--teal)}.tag-mile{color:var(--green)}.tag-loss{color:var(--plum)}
.dc-count{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--brass-2)}
.dc-count small{color:var(--faint);font-size:12px}
.dc-body h3{font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.15;margin:4px 0 8px}
.dc-body h3 em{color:var(--brass);font-style:normal}
.dc-summary{font-size:14px;color:var(--ink-2);margin:0 0 16px;max-width:780px}
.ev.dim{opacity:.32}
.dc-places{margin-top:12px;border-top:1px solid var(--border);padding-top:12px}
.dc-places summary{cursor:pointer;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);list-style:none;display:flex;align-items:center;gap:8px}
.dc-places summary::-webkit-details-marker{display:none}
.dc-places summary:before{content:'+';font-family:var(--mono);width:18px;height:18px;border:1px solid var(--border-strong);border-radius:6px;display:grid;place-items:center;font-size:12px;letter-spacing:0}
.dc-places[open] summary:before{content:'−'}
.dc-places summary:hover{color:var(--brass-2)}
.dc-places .place-group{margin:12px 0 0}
.place-group>strong small{font-family:var(--mono);color:var(--faint);font-weight:500}
.chip.found{background:var(--brass);color:#1a1408;border-color:var(--brass);font-weight:700;animation:pop .4s var(--ease)}
.dc-atlas{display:inline-flex;gap:8px;margin-top:16px;font-size:12px;font-weight:700;color:var(--brass-2)}
.day-card.flash .dc-body{animation:flash 1.8s var(--ease)}
@keyframes flash{0%,35%{border-color:var(--brass);box-shadow:0 0 0 4px var(--brass-glow)}}
.loading{color:var(--muted);display:flex;gap:12px;align-items:center}

/* ===== Losses page ===== */
.sort{font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;display:inline-flex;gap:8px;align-items:center}
.sort:after{content:'↕';opacity:.45;font-size:12px;letter-spacing:0}
th[aria-sort="ascending"] .sort:after{content:'↑';opacity:1;color:var(--brass)}
th[aria-sort="descending"] .sort:after{content:'↓';opacity:1;color:var(--brass)}
.strike-table .num .kbar{display:inline-block;vertical-align:middle;height:6px;width:calc(var(--k) * 64px);border-radius:4px;background:rgb(var(--crimson-rgb) / .251);margin-right:12px;transform-origin:right;animation:kbarGrow .85s var(--ease) both}
@keyframes kbarGrow{from{transform:scaleX(0);opacity:.2}}
.strike-table a.row-link{color:var(--ink)}
.sources-section{padding:80px 0 40px;scroll-margin-top:16px}
.sources-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:start}
.method{position:sticky;top:24px;border-left:2px solid var(--brass-line);padding-left:24px}
.method p{font-size:14px;color:var(--ink-2);line-height:1.75;margin:0 0 16px}
.source-list .source-entry:first-child{border-top:0;padding-top:0}
.source-list .source-entry a{color:var(--brass-2);text-decoration:underline;text-decoration-color:rgb(var(--brass-rgb) / .314);text-underline-offset:4px}
.source-list .source-entry p{color:var(--muted)}

@media(max-width:1180px){
  .chapters{grid-template-columns:repeat(2,1fr)}
  .chapter{min-height:280px}
}
@media(max-width:960px){
  .paths{grid-template-columns:minmax(0,1fr)}
  .path{min-height:0}
  .chron-layout{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .sources-grid{grid-template-columns:minmax(0,1fr);gap:24px}
  .method{position:static}
}
@media(max-width:760px){
  .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:35;background:rgb(var(--surface-rgb) / .922);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);border:1px solid var(--border-strong);border-radius:16px;padding:8px;box-shadow:0 20px 40px -12px rgb(0 0 0 / var(--shade))}
  .tabbar a{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 2px 8px;border-radius:12px;font-size:12px;font-weight:600;color:var(--muted)}
  .tabbar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
  .tabbar svg[viewBox="0 0 40 40"]{stroke-width:3}
  .tabbar a[aria-current="page"]{color:var(--brass-2);background:rgb(var(--brass-rgb) / .11)}
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .toast{bottom:100px}
  .page-head{padding:32px 0 24px}
  .curve-section{padding:40px 0 12px}
  .curve-wrap{padding:16px 0 12px}
  .curve-scroll{padding:0 16px}
  .curve-inner{min-width:700px}
  .curve-legend{padding:0 16px;gap:12px}
  .chapters{grid-template-columns:minmax(0,1fr)}
  .chapter{min-height:0}
  .chron-tools{gap:12px;padding:12px 0}
  .search{flex-basis:100%;max-width:none}
  .filters{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
  .filter{flex-shrink:0}
  .shown{display:none}
  .month-head{font-size:30px}
  .day-card{grid-template-columns:54px minmax(0,1fr);gap:12px}
  .month-days:before{left:26px}
  .dc-date b{font-size:30px}
  .day-card.compact .dc-date b{font-size:24px}
  .dc-body{padding:16px 16px 12px}
  .dc-body h3{font-size:20px}
  .dc-count{margin-left:0;width:100%}
  .map-toolbar{gap:8px}
  .map-toolbar .play-button{padding:4px;margin-left:0}
  #play-label,.tb-label{display:none}
}
.tb-label{font-weight:inherit}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
[hidden]{display:none!important}

/* Chapters, zones and area meter (atlas) */
body{--era:var(--brass)}
body[data-era="pre"]{--era:var(--rose-3)}
body[data-era="handover"]{--era:var(--teal)}
body[data-era="peace"]{--era:var(--sky-2)}
body[data-era="final"]{--era:var(--green)}
.chapter-badge{color:var(--era);transition:color .4s var(--ease)}
.ring-fg{stroke:var(--era);transition:stroke-dasharray .8s var(--ease),stroke .4s var(--ease)}
.era-tabs{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;flex:1;min-width:0}
.era-tabs::-webkit-scrollbar{display:none}
.era-tab{flex:0 0 auto;text-align:left;padding:8px 12px 4px;border:1px solid var(--border);border-radius:12px;background:rgb(var(--hi) / .016);color:var(--muted);position:relative;transition:border-color .3s var(--ease),background-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.et-head{display:flex;align-items:center;gap:8px}
.et-head .i{width:13.5px;height:13.5px;color:var(--faint);transition:color .3s var(--ease),transform .3s var(--ease)}
.era-tab strong{display:block;font-size:12px;font-weight:700;line-height:1.25;white-space:nowrap}
.era-tab small{display:block;font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.04em;margin-top:2px}
.era-tab:hover:not(:disabled){border-color:var(--border-strong);color:var(--ink-2);transform:translateY(-1px)}
.era-tab:hover:not(:disabled) .et-head .i{color:var(--brass-2)}
.era-tab.selected{color:var(--ink);border-color:color-mix(in srgb,var(--era) 55%,transparent);background:color-mix(in srgb,var(--era) 14%,transparent)}
.era-tab.selected .et-head .i,.era-tab.selected small{color:var(--era)}
.era-tab.selected:after{content:'';position:absolute;left:10px;right:10px;bottom:-1px;height:2px;border-radius:2px;background:var(--era)}
.ruler-hint{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;font-size:12px;margin:8px 0 0;color:var(--muted)}
.rh-item{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.rh-bar{display:inline-block;width:4px;height:10px;border-radius:2px}
.rh-lib{background:var(--brass-2)}
.rh-truce{background:var(--teal)}
.rh-post{background:var(--green)}
.rh-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--crimson);box-shadow:0 0 5px var(--crimson)}
.rh-step{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--brass-2);letter-spacing:.03em}
.tick.pre-tick{height:var(--h,28px);background:repeating-linear-gradient(135deg,#d0415f 0 4px,#8e2a5c 4px 8px);opacity:.78;border-radius:4px}
.tick.post-tick{height:var(--h);background:rgb(var(--blue-rgb) / .282)}
.tick.post-tick.era-return{background:rgb(var(--green-rgb) / .376)}
.tick.post-tick.era-final{background:rgb(var(--teal-rgb) / .376)}
.tick.post-tick.era-accord{background:rgb(var(--lilac-rgb) / .376)}
.tick.post-tick.lib{background:rgb(var(--green-rgb) / .533)}
.tick.post-tick.past{background:rgb(var(--sky-2-rgb) / .4)}
.tick.post-tick.era-return.past,.tick.post-tick.lib.past{background:var(--green)}
.tick.post-tick.era-final.past{background:var(--teal)}
.tick.post-tick.era-accord.past{background:var(--lilac)}
.tick.post-tick.in-era:not(.current){box-shadow:inset 0 2px 0 var(--era),0 0 8px color-mix(in srgb,var(--era) 32%,transparent)}
.tick.pre-tick.past{opacity:.45}
.moment.m-pre .stop-day,.moment.m-pre .stop-day .i{color:var(--rose)}
.moment.m-handover .stop-day,.moment.m-handover .stop-day .i{color:var(--teal)}
.moment.m-peace .stop-day,.moment.m-peace .stop-day .i{color:var(--sky-2)}
.moment.m-final .stop-day,.moment.m-final .stop-day .i{color:var(--green)}
.moment.m-return .stop-day,.moment.m-return .stop-day .i{color:var(--mint)}
.moment.m-accord .stop-day,.moment.m-accord .stop-day .i{color:var(--lilac)}
.moment.m-final strong{color:var(--ink)}
.map-bottom{flex-direction:column;align-items:flex-start;gap:8px;right:72px}
.area-meter{width:min(380px,100%);background:rgb(var(--surface-rgb) / .902);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:12px;padding:8px 12px 8px;transition:opacity .3s var(--ease)}
.area-meter.off{opacity:.35}
.meter-bar{display:flex;height:7px;border-radius:999px;overflow:hidden;background:rgb(var(--hi) / .063)}
.meter-bar i{display:block;height:100%;width:0;transition:width .9s var(--ease)}
.seg-liberated{background:linear-gradient(90deg,var(--brass-deep),var(--brass))}
.seg-peace{background:#6f86ff}
.seg-transition{background:#a7a3b8}
.seg-occupied{background:linear-gradient(90deg,#d0415f,#8e2a5c)}
.meter-rows{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px;font-size:12px;color:var(--ink-2)}
.mr{display:flex;align-items:center;gap:8px;white-space:nowrap;animation:rise .4s var(--ease) both}
.mr i{width:9px;height:9px;border-radius:2px;display:block}
.mr b{font-family:var(--mono);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.mr-occupied i{background:#d0415f}.mr-occupied b{color:var(--rose)}
.mr-peace i{background:#6f86ff}.mr-peace b{color:var(--sky)}
.mr-transition i{background:#a7a3b8}
.mr-liberated i{background:var(--brass)}.mr-liberated b{color:var(--brass-2)}
.lg-area{background:linear-gradient(90deg,rgb(var(--brass-rgb) / .333) 50%,rgb(var(--crimson-rgb) / .4) 50%)!important}
.day-stats.four{grid-template-columns:1fr 1fr}
.day-stats.four div{border-left:0!important;border-top:1px solid var(--border)}
.day-stats.four div:nth-child(-n+2){border-top:0}
.day-stats.four div:nth-child(even){border-left:1px solid var(--border)!important}
.day-stats .peace b{color:var(--sky)}
.day-stats b span{font:inherit}
.map-heading>strong.swap{animation:titleSwap .55s var(--ease)}
@keyframes titleSwap{from{opacity:0;transform:translateY(8px);filter:blur(6px)}}
body[data-era="pre"] .map-heading>span,body[data-era="final"] .map-heading>span{color:var(--era)}
@media(max-width:760px){
  .map-bottom{right:60px;left:10px;bottom:10px}
  .area-meter{padding:8px 8px}
  .meter-rows{font-size:12px;gap:2px 12px}
  .era-tab{padding:8px 12px 4px}
  .era-tab small{display:none}
  .ruler-hint{display:none}
}
.timeline-top>.era-tabs{flex-wrap:nowrap;gap:8px}
.mr em{font-style:normal}
@media(max-width:760px){
  .mr em{display:none}
  .meter-rows{flex-wrap:nowrap;gap:12px}
  .area-meter{width:auto;max-width:100%}
}
.chapter-pre .ch-kicker{color:var(--rose)}
.chapter-pre .ch-meter i{background:#d0415f}
.chapter-final .ch-kicker{color:var(--green)}
.chapter-final .ch-meter i{background:var(--brass-deep)}

/* Play modes and scene card (detailed playback) */
.play-mode{display:flex;padding:4px;border:1px solid var(--border);border-radius:12px;background:var(--bg);margin-left:-8px}
.play-mode button{font-size:12px;font-weight:700;padding:4px 12px;border-radius:8px;color:var(--muted)}
.play-mode button.selected{background:var(--raised);color:var(--brass-2);box-shadow:inset 0 0 0 1px var(--border-strong)}
.scene-card{position:absolute;z-index:4;top:22px;right:78px;width:min(360px,calc(100% - 120px));background:rgb(var(--surface-rgb) / .949);backdrop-filter:blur(10px);border:1px solid var(--border-strong);border-left:3px solid var(--brass);border-radius:16px;padding:12px 16px 12px;box-shadow:0 20px 50px -20px rgb(0 0 0 / var(--shade));--tagc:var(--brass)}
.scene-card[data-tag="strike"],.scene-card[data-tag="loss"]{border-left-color:var(--crimson);--tagc:var(--rose)}
.scene-card[data-tag="truce"]{border-left-color:var(--teal);--tagc:var(--teal)}
.scene-card[data-tag="mile"]{border-left-color:var(--green);--tagc:var(--green)}
.scene-card.in{animation:scin .45s var(--ease)}
@keyframes scin{from{opacity:0;transform:translateY(-8px) scale(.98)}}
.sc-head{display:flex;align-items:center;gap:12px}
.sc-tag{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tagc)}
.sc-tag .i{width:13px;height:13px}
.sc-count{font-family:var(--mono);font-size:12px;color:var(--faint);margin-left:auto}
.sc-close{width:24px;height:24px;border-radius:50%;font-size:16px;line-height:1;color:var(--muted);display:grid;place-items:center}
.sc-close:hover:not(:disabled){background:rgb(var(--hi) / .063)}
#sc-title{display:block;font-family:var(--serif);font-weight:600;font-size:24px;line-height:1.15;margin-top:4px;color:var(--ink)}
.sc-sub{display:block;font-family:var(--mono);font-size:12px;color:var(--tagc);margin-top:2px}
#sc-text{font-size:12px;line-height:1.55;color:var(--ink-2);margin:8px 0 8px;max-height:7.8em;overflow:auto}
.sc-foot{display:flex;align-items:center;gap:8px}
.sc-foot button{width:26px;height:26px;border-radius:50%;border:1px solid var(--border-strong);font-size:16px;line-height:1;display:grid;place-items:center}
.sc-bar{flex:1;height:3px;border-radius:4px;background:rgb(var(--hi) / .078);overflow:hidden}
.sc-bar i{display:block;height:100%;width:0;background:var(--tagc)}
@keyframes scbar{to{width:100%}}
.ev.active,.place-group.active{border-color:var(--border-strong);box-shadow:0 0 0 1px var(--brass-line),0 10px 30px -18px rgb(var(--brass-rgb) / .502);background:rgb(var(--brass-rgb) / .051)}
.ev-strike.active{box-shadow:0 0 0 1px rgb(var(--crimson-rgb) / .4),0 10px 30px -18px rgb(var(--crimson-rgb) / .565)}
.place-group{border-radius:12px;padding:8px 8px;margin-left:-8px;margin-right:-8px;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
body.touring .map-coordinates{opacity:0}
@media(max-width:760px){
  .play-mode{margin-left:0}
  .play-mode button{padding:4px 8px;font-size:12px}
  .scene-card{top:auto;bottom:96px;left:10px;right:10px;width:auto}
  #sc-title{font-size:20px}
  #sc-text{max-height:5em}
}
@media(max-width:760px){
  #play-label{display:none}
  .play-button{padding:4px}
}
/* Strike scenes: the strikes-fx card carries the details, the scene card shrinks to its header and controls */
.scene-card.compact #sc-title,.scene-card.compact .sc-sub,.scene-card.compact #sc-text{display:none}
.scene-card.compact{padding-bottom:8px}
.scene-card.compact .sc-foot{margin-top:8px}
@media(max-width:760px){
  .scene-card.compact{top:12px;bottom:auto}
}
/* During a tour the slim scene card holds the top-right corner; the strike card (strikes-fx.css) sits below it */
.scene-card.compact{top:12px;right:70px;width:min(300px,calc(100% - 90px))}
body.touring .fx-card{top:70px;max-height:calc(100% - 82px)}
@media(max-width:760px){
  .scene-card.compact{right:10px;left:10px;width:auto}
  body.touring .fx-card{top:auto}
}

/* Photos, district facts, links (atlas story panel) */
.gallery{margin:0 0 16px}
.gal-main{margin:0;border-radius:16px;overflow:hidden;border:1px solid var(--border-strong);background:var(--raised)}
.gal-open{display:block;width:100%;position:relative;padding:0;cursor:zoom-in}
.gal-open img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;transition:transform 1s var(--ease)}
.gal-open:hover img{transform:scale(1.03)}
.gal-zoom{position:absolute;right:10px;top:10px;width:30px;height:30px;border-radius:50%;background:#000000b0;color:var(--ink);display:grid;place-items:center;font-size:14px;opacity:0;transition:opacity .3s var(--ease)}
.gal-open:hover .gal-zoom,.gal-open:focus-visible .gal-zoom{opacity:1}
.gal-count{position:absolute;left:10px;bottom:10px;font-family:var(--mono);font-size:12px;background:#000000c0;color:var(--ink);padding:2px 8px;border-radius:999px}
.gal-main figcaption{padding:12px 12px 12px;display:flex;flex-direction:column;gap:4px;background:var(--bg)}
.gal-main figcaption span{font-size:12px;line-height:1.5;color:var(--ink-2)}
.gal-main figcaption small{font-size:12px;color:var(--faint);line-height:1.4}
.gal-main figcaption a{color:var(--brass);text-decoration:underline;text-underline-offset:3px}
.gal-thumbs{display:flex;gap:8px;margin-top:8px;overflow-x:auto;scrollbar-width:none}
.gal-thumb{flex:0 0 auto;width:64px;height:46px;border-radius:8px;overflow:hidden;border:1px solid var(--border);opacity:.6;padding:0;transition:opacity .3s var(--ease),border-color .3s var(--ease)}
.gal-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.gal-thumb.on,.gal-thumb:hover{opacity:1;border-color:var(--brass)}
.dcard{margin:16px 0 8px;border:1px solid var(--border);border-radius:16px;padding:16px 16px 12px;background:transparent}
.dc-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.dc-kicker{font-size:12px;font-weight:700;letter-spacing:.16em;color:var(--faint)}
.dc-head strong{font-family:var(--serif);font-weight:600;font-size:20px;color:var(--ink)}
.dc-span{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;margin:12px 0 12px;padding:12px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.dc-span>div{display:flex;flex-direction:column;gap:2px;min-width:0}
.dc-span>div:last-child{text-align:right}
.dc-span small{font-size:12px;color:var(--faint);letter-spacing:.06em;text-transform:uppercase}
.dc-span b{font-size:12px;font-weight:700;color:var(--ink-2);line-height:1.3}
.dc-years{align-items:center;text-align:center;padding:0 8px}
.dc-years b{font-family:var(--serif);font-weight:600;font-size:36px;line-height:1;color:var(--rose)}
.dc-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 8px}
.dc-facts div{display:flex;flex-direction:column-reverse;gap:2px}
.dc-facts dt{font-size:12px;color:var(--faint)}
.dc-facts dd{margin:0;font-family:var(--mono);font-size:12px;color:var(--ink)}
.dc-note{font-size:12px;line-height:1.55;color:var(--muted);margin:4px 0 8px}
.dcard .src-chips{margin:0}
.dc-foot{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px}
.dc-all{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--brass-2)}
.dc-all .i{width:14px;height:14px;transition:transform .3s var(--ease)}
.dc-all:hover .i{transform:translateX(3px)}
.occ-list{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:8px}
.occ-list li{display:grid;grid-template-columns:118px 76px 1fr 38px;align-items:center;gap:8px;font-size:12px}
.occ-date{font-family:var(--mono);font-size:12px;color:var(--faint)}
.occ-list strong{font-weight:700;color:var(--ink-2)}
.occ-bar{height:6px;border-radius:6px;background:rgb(var(--hi) / .051);overflow:hidden}
.occ-bar i{display:block;height:100%;width:var(--w);background:#8e2a5c;border-radius:6px;animation:occgrow 1s var(--ease) both}
@keyframes occgrow{from{width:0}}
.occ-years{font-family:var(--mono);font-size:12px;color:var(--rose);text-align:right}
.occ-src{font-size:12px;color:var(--faint);display:flex;align-items:center;gap:8px;margin:4px 0 0}
.occ-src .src-chips{margin:0}
.media-links{display:flex;flex-direction:column;gap:8px}
.mlink{display:flex;align-items:center;gap:12px;padding:12px 12px;border:1px solid var(--border);border-radius:12px;background:rgb(var(--hi) / .016);text-decoration:none;transition:border-color .3s var(--ease),background .3s var(--ease)}
.mlink:hover{border-color:var(--brass-line);background:rgb(var(--brass-rgb) / .047)}
.ml-ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;background:var(--brass-glow);color:var(--brass-2);font-size:12px}
.mlink-video .ml-ic{background:rgb(var(--crimson-rgb) / .149);color:var(--rose)}
.ml-txt{display:flex;flex-direction:column;min-width:0}
.ml-txt strong{font-size:12px;line-height:1.35;color:var(--ink)}
.ml-txt small{font-size:12px;color:var(--faint)}
.ml-go{margin-left:auto;color:var(--faint)}
.chip.extra{display:none}
.chips.open .chip.extra{display:inline-flex}
.chip-more{border-style:dashed;color:var(--brass-2)}
.lightbox{max-width:min(1200px,96vw);width:auto;padding:0;background:#000000f5;border:1px solid var(--border-strong);border-radius:16px;overflow:hidden}
.lightbox::backdrop{background:#000000e6;backdrop-filter:blur(6px)}
.lightbox[open]{animation:pop .3s var(--ease)}
.lb-frame{position:relative;background:#000;display:grid;place-items:center}
.lb-frame img{display:block;max-width:min(1200px,96vw);max-height:76vh;width:auto;height:auto;object-fit:contain}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:#000000c0;color:var(--ink);font-size:24px;line-height:1;display:grid;place-items:center}
.lb-prev{left:12px}.lb-next{right:12px}
.lb-meta{display:grid;grid-template-columns:1fr auto auto;gap:4px 16px;align-items:start;padding:12px 16px 16px}
.lb-meta p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2);grid-column:1}
.lb-meta small{grid-column:1;font-size:12px;color:var(--faint)}
.lb-meta small a{color:var(--brass)}
#lb-count{grid-column:2;grid-row:1;font-family:var(--mono);font-size:12px;color:var(--faint)}
#lb-close{grid-column:3;grid-row:1;width:34px;height:34px;border-radius:50%;border:1px solid var(--border-strong);font-size:20px;line-height:1}
@media(max-width:760px){
  .occ-list li{grid-template-columns:96px 70px 1fr 34px;font-size:12px}
  .dc-facts{grid-template-columns:1fr 1fr}
  .dc-years b{font-size:30px}
  .lb-meta{grid-template-columns:1fr auto}
  #lb-count{display:none}
  #lb-close{grid-column:2}
}
.occ-list li{grid-template-columns:118px 76px 1fr 44px}
.occ-years{white-space:nowrap}
@media(max-width:760px){.occ-list li{grid-template-columns:92px 68px 1fr 42px}}
body[data-era="return"]{--era:var(--mint)}
body[data-era="accord"]{--era:var(--lilac)}
.moment.m-accord .stop-day{color:var(--lilac)}
.moment.m-return .stop-day{color:var(--mint)}
/* Lucide sprite icons (assets/icons.svg) in the atlas controls */
.map-controls .i{width:18px;height:18px}
#play-icon .i{width:13px;height:13px}
.text-button .i,.source-button .i{width:15px;height:15px}
.share-button .i{width:18px;height:18px}

/* Sprite icons replacing text glyphs */
.ring-star{width:20px;height:20px;fill:currentColor;display:block}
#ring-num .i{width:18px;height:18px;color:var(--era,var(--brass-2))}
.ml-ic .i{width:16px;height:16px}
.ml-go .i{width:15px;height:15px}
.lb-nav .i{width:22px;height:22px}
.story-arrows .i{width:17px;height:17px}
.gal-zoom .i{width:15px;height:15px}

/* Zəfər icons in event tags, figure cards and tables */
.ev-tag{display:inline-flex;align-items:center;gap:4px}
.ev-tag .i{width:13px;height:13px}
.wpn{white-space:nowrap}
.wpn .i{width:15px;height:15px;margin-right:8px;color:var(--brass);vertical-align:-.2em}

/* Atlas map, refined: the zones' hatches appear in the meter and legend swatches too; the faint grid overlay is gone */
.map-grid{display:none}
.seg-occupied,.mr-occupied i{background:repeating-linear-gradient(135deg,var(--rose-hatch) 0 1.5px,#8e2a5c 1.5px 5px)}
.seg-peace,.mr-peace i{background:repeating-linear-gradient(45deg,var(--peri) 0 1px,transparent 1px 4px),repeating-linear-gradient(135deg,var(--peri) 0 1px,var(--peace-deep) 1px 4px)}
.seg-transition,.mr-transition i{background:radial-gradient(circle,var(--trans-hatch) 0 1px,var(--trans-deep) 1.3px) 0 0/4px 4px}
.lg-area{background:linear-gradient(90deg,rgb(var(--brass-rgb) / .2) 50%,transparent 50%),repeating-linear-gradient(135deg,var(--rose-hatch) 0 1px,#8e2a5c 1px 4px)!important}