:root{
  --bg:#0D1321; --panel:#151C2C; --panel2:#1B2438; --line:#2A3550;
  /* a dimmer tint of --line, used where a connector means "related, but the
     exact link is not in the data". Replaces border-style:dashed, which a
     browser renders as chunky uneven blocks when a 1px border lands on a
     fractional device pixel at 125% or 150% display scaling. */
  --line-faint:#1D2740;
  --ink:#EAE3D0; --ink-dim:#9AA3B8; --gold:#E4B85C;
  --eu:#6D9BC3; --as:#D0A15A; --af:#C4714E; --am:#7FB08A; --oc:#9B8CC4;

  /* Tell the browser this page is dark.
     A <select> can be styled by CSS, but the list it opens cannot — that
     popup is drawn by the operating system. Without this line the popup
     opened WHITE while its text inherited the near-white --ink from the
     select, so the options were white-on-white: the menu appeared to open
     empty or broken. This is the declaration that makes native UI —
     dropdown lists, scrollbars, focus rings — render dark to match. */
  color-scheme:dark;
}

/* Belt and braces for engines that ignore color-scheme on popups. */
option,optgroup{background-color:var(--panel2);color:var(--ink)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;line-height:1.55}
.wrap{max-width:1280px;margin:0 auto;padding:0 20px}

header{padding:34px 0 10px;border-bottom:1px solid var(--line)}
.eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--gold)}
h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(30px,5vw,52px);line-height:1.05;margin-top:8px}
.sub{color:var(--ink-dim);max-width:780px;margin-top:10px;font-size:14.5px}

.console{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 28px;padding:26px 0 6px}
.year-big{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:clamp(58px,10vw,112px);line-height:.9;color:var(--gold);font-variant-numeric:tabular-nums;min-width:4ch}
.year-meta{padding-bottom:10px}
.era-name{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(18px,3vw,26px)}
.era-sub{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-dim);letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
.controls{margin-left:auto;display:flex;gap:10px;padding-bottom:12px;flex-wrap:wrap;align-items:center}
button.ctl,select.ctl{background:var(--panel2);border:1px solid var(--line);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:12px;padding:9px 14px;border-radius:6px;cursor:pointer;transition:.15s}
button.ctl:hover{border-color:var(--gold);color:var(--gold)}
button.ctl:focus-visible,select.ctl:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
button.ctl.on{background:var(--gold);color:#141414;border-color:var(--gold)}
select.ctl{appearance:none;padding-right:30px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23E4B85C'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}

.slider-zone{padding:8px 0 20px;border-bottom:1px solid var(--line)}
input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:34px;background:transparent;cursor:pointer}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#5a4a2e,#7a5c30 30%,#8a6a34 55%,#b08a3e 80%,var(--gold))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--gold);border:3px solid #0D1321;box-shadow:0 0 0 2px var(--gold);margin-top:-8px}
input[type=range]::-moz-range-track{height:6px;border-radius:3px;background:linear-gradient(90deg,#5a4a2e,#8a6a34 55%,var(--gold))}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--gold);border:3px solid #0D1321;box-shadow:0 0 0 2px var(--gold)}
input[type=range]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.ticks{position:relative;height:20px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-dim)}
.ticks span{position:absolute;transform:translateX(-50%);white-space:nowrap}

/* year feed */
.feed{margin-top:18px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.feed-head{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;user-select:none}
.feed-head h2{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;flex:1}
.feed-count{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-dim);letter-spacing:.1em}
.feed-body{max-height:360px;overflow-y:auto;padding:8px 16px 14px}
.feed.collapsed .feed-body{display:none}
.fe{display:flex;gap:10px;padding:7px 0;border-bottom:1px dashed #232d47;font-size:13px}
.fe:last-child{border-bottom:none}
.fe .fr{flex:0 0 128px;font-family:'IBM Plex Mono',monospace;font-size:10.5px;padding-top:2px}
.fe .ft{flex:1}
.fe .ft .t{font-weight:600}
.fe .ft .d{color:var(--ink-dim);font-size:12.3px;margin-top:1px}
.fe.point .ft .t{color:var(--gold)}
.fe .yr-of{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-dim);margin-left:6px;font-weight:400}

.section-title{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;margin:30px 0 4px}
.section-note{font-size:12.5px;color:var(--ink-dim);margin-bottom:14px}
.gantt-outer{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.gantt{min-width:900px;position:relative}
.g-head{position:sticky;top:0;z-index:5;display:flex;background:var(--panel2);border-bottom:1px solid var(--line)}
.g-label-col{flex:0 0 158px;position:sticky;left:0;z-index:6;background:var(--panel2);border-right:1px solid var(--line);padding:8px 10px;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-dim)}
.g-scale{flex:1;position:relative;height:34px}
.g-scale span{position:absolute;top:9px;transform:translateX(-50%);font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-dim)}
.g-body{position:relative}
.continent-row{display:flex;background:var(--panel2);cursor:pointer;user-select:none}
.continent-row .g-label-col{color:var(--ink);font-weight:500;cursor:pointer}
.continent-row .c-fill{flex:1;border-bottom:1px solid var(--line);display:flex;align-items:center;padding-left:10px;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-dim);letter-spacing:.1em}
.continent-row.focused .g-label-col,.continent-row.focused .c-fill{background:#25334f}
.continent-row.focused .c-fill{color:var(--gold)}
.g-row{display:flex;height:34px;border-bottom:1px solid #1e2740}
.g-row.hidden,.continent-row.hidden{display:none}
.g-row .g-label-col{display:flex;align-items:center;font-family:'IBM Plex Sans',sans-serif;font-size:12.5px;color:var(--ink);text-transform:none;letter-spacing:0;background:var(--panel)}
.g-lane{flex:1;position:relative}
.bar{position:absolute;top:6px;height:22px;border-radius:4px;opacity:.82;cursor:pointer;overflow:hidden;transition:opacity .15s, box-shadow .15s;border:none;padding:0 6px;text-align:left}
.bar:hover,.bar:focus-visible{opacity:1;box-shadow:0 0 0 1.5px var(--gold);z-index:3;outline:none}
.bar.active{opacity:1;box-shadow:0 0 0 1.5px var(--gold)}
.bar span{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:#10131c;white-space:nowrap;line-height:22px;font-weight:500}
.playhead{position:absolute;top:0;bottom:0;width:0;border-left:1.5px solid var(--gold);z-index:4;pointer-events:none;box-shadow:0 0 10px rgba(228,184,92,.5)}
.playhead::after{content:"";position:absolute;top:0;left:-5px;border:5px solid transparent;border-top-color:var(--gold)}

.world{padding:8px 0 60px}
.cont-block{margin-top:26px}
.cont-block.hidden{display:none}
.cont-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;cursor:pointer;user-select:none}
.cont-dot{width:10px;height:10px;border-radius:50%}
.cont-name{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600}
.cont-count{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-dim);letter-spacing:.1em}
.caret{font-size:12px;color:var(--gold);transition:transform .2s}
.cont-block.collapsed .caret{transform:rotate(-90deg)}
.cont-block.collapsed .cards{display:none}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:14px 16px;border-top:3px solid var(--line);transition:border-color .2s}
.card.hl{border-color:var(--gold)}
.card h3{font-size:14px;font-weight:600;letter-spacing:.02em}
.card .period{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:17px;color:var(--gold);margin-top:2px}
.card .dates{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-dim);margin-top:1px}
.card .fld{margin-top:9px;font-size:12.8px}
.card .fld b{display:block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-dim);font-weight:500;margin-bottom:2px}
.card .none{color:var(--ink-dim);font-style:italic;font-size:12.5px;margin-top:8px}
/* Was a dashed rule. Dashed borders render badly at fractional device pixel
   ratios (125%/150% Windows scaling), which is why every other dashed line
   in this file was replaced with a solid one in --line-faint; this one was
   missed. */
.ms{margin-top:10px;border-top:1px solid var(--line-faint);padding-top:8px}
.ms b{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:4px}
.ms-row{display:flex;gap:8px;font-size:12.3px;padding:3px 0;color:var(--ink-dim)}
.ms-row .my{font-family:'IBM Plex Mono',monospace;font-size:10.5px;flex:0 0 74px;text-align:right;color:var(--ink-dim)}
.ms-row .mt .desc{display:block;font-size:11.6px;color:var(--ink-dim);opacity:.8;margin-top:1px}
.ms-row.near{color:var(--ink)}
.ms-row.near .my{color:var(--gold);font-weight:500}
.ms-row.near .mt .desc{color:var(--ink-dim)}


/* two-column layout: regions main, feed sidebar */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start;padding-top:6px}
.main-col{min-width:0}
.side-col{position:sticky;top:12px}
.side-col .feed{margin-top:24px}
.side-col .feed-body{max-height:calc(100vh - 170px)}
/* NOT scoped to .fe.

   These three rules used to start with ".fe .links", so they only applied
   inside the feature-essay container. But five places emit a .links row —
   the polity panel, the empire panel, the ruler detail and two others — and
   in all of them the parent is something else, so the links fell back to
   browser defaults: underlined blue, and butted together with no gap,
   rendering as "Read more ↗Pictures ↗" in one blue run.

   Unscoping fixes every one of them at once. */
.links{margin-top:4px;display:flex;gap:14px;flex-wrap:wrap}
.links a{color:var(--gold);font-size:10.5px;text-decoration:none;font-family:'IBM Plex Mono',monospace;letter-spacing:.04em}
.links a:hover{text-decoration:underline}
.fe .ctx{font-size:10.5px;color:#7e8aa3;font-family:'IBM Plex Mono',monospace;margin-top:3px}
.ms-row .mt a.wl{color:var(--gold);text-decoration:none;font-size:10px;font-family:'IBM Plex Mono',monospace;margin-left:6px;white-space:nowrap}
.ms-row .mt a.wl:hover{text-decoration:underline}
.speed-hint{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--ink-dim);letter-spacing:.06em}
@media (max-width:1020px){
  .layout{grid-template-columns:1fr}
  .side-col{position:static}
  .side-col .feed-body{max-height:420px}
}
/* tabs */
.tabbar{display:flex;gap:8px;margin-top:16px}
.tab{background:var(--panel2);border:1px solid var(--line);color:var(--ink-dim);font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:.08em;padding:10px 18px;border-radius:8px 8px 0 0;cursor:pointer;border-bottom:none}
.tab.on{background:var(--panel);color:var(--gold);border-color:var(--gold)}
.tab:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* map view */
.map-wrap{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start;padding-top:14px}
.map-shell{background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
#worldMap{display:block;width:100%;height:auto;background:#0A0F1B}
.land{fill:#232E47;stroke:#31405f;stroke-width:1}
.sea-label{fill:#31405f;font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.2em}
.pin{cursor:pointer}
.pin circle.dot{fill:var(--gold);stroke:#0A0F1B;stroke-width:1.5;transition:r .15s}
.pin.dim circle.dot{fill:#5d6a85}
.pin text{fill:var(--ink);font-family:'IBM Plex Sans',sans-serif;font-size:9px;paint-order:stroke;stroke:#0A0F1B;stroke-width:2.5px;stroke-linejoin:round}
.pin .badge{fill:#0A0F1B;font-family:'IBM Plex Mono',monospace;font-size:7.5px;font-weight:700}
.pin.sel circle.halo{stroke:var(--gold);stroke-width:1.5;fill:none;opacity:.9}
.pin circle.halo{stroke:none;fill:none}
.pin.hot circle.halo{stroke:var(--gold);stroke-width:1;fill:none;animation:pinpulse 1.6s ease-out infinite}
@keyframes pinpulse{0%{opacity:.85;transform:scale(.6)}70%{opacity:0;transform:scale(1.5)}100%{opacity:0}}
.pin circle.halo{transform-box:fill-box;transform-origin:center}
.pin:hover circle.dot{stroke:var(--gold)}
.map-side{position:sticky;top:12px}
.map-detail{background:var(--panel);border:1px solid var(--line);border-radius:10px;margin-top:0}
.md-head{padding:12px 16px;border-bottom:1px solid var(--line)}
.md-head h2{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:600}
.md-head .md-sub{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-dim);letter-spacing:.1em;margin-top:2px}
.md-body{max-height:calc(100vh - 210px);overflow-y:auto;padding:8px 16px 14px}
.md-era{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--gold);font-size:16px;margin:6px 0 2px}
.md-note{font-size:12.3px;color:var(--ink-dim);margin-bottom:6px}
.map-hint{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--ink-dim);letter-spacing:.06em;margin-top:8px}
.zoombar{display:flex;gap:6px;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--line);background:var(--panel2)}
.zbtn{background:transparent;border:1px solid var(--line);color:var(--ink-dim);font-family:'IBM Plex Mono',monospace;font-size:10px;padding:5px 10px;border-radius:5px;cursor:pointer}
.zbtn.on,.zbtn:hover{color:var(--gold);border-color:var(--gold)}
@media (max-width:1020px){
  .map-wrap{grid-template-columns:1fr}
  .map-side{position:static}
  .md-body{max-height:420px}
}
#worldMap{cursor:crosshair}
#worldMap .land{fill:#1E2740;stroke:#33415f;stroke-width:.6}
.tanchor{fill:#5a6a8c;opacity:.8;pointer-events:none}
.emp{fill-opacity:.4;stroke-width:1.1;stroke-opacity:.95;cursor:pointer;transition:fill-opacity .15s}
.emp:hover{fill-opacity:.55}
.emp.sel{fill-opacity:.6;stroke-width:2}
.emp.dimmed{fill-opacity:.10;stroke-opacity:.25}
.emplbl{fill:#EAE3D0;font-family:'IBM Plex Sans',sans-serif;font-size:10px;font-weight:600;text-anchor:middle;paint-order:stroke;stroke:#0A0F1B;stroke-width:2.6px;stroke-linejoin:round;pointer-events:none}
.emplbl.sm{font-size:7px;stroke-width:2px}
.legend{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-top:1px solid var(--line);background:var(--panel2)}
.chip{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--line);color:var(--ink);font-family:'IBM Plex Sans',sans-serif;font-size:11.5px;padding:4px 9px;border-radius:20px;cursor:pointer}
.chip:hover,.chip.on{border-color:var(--gold);color:var(--gold)}
.chip .sw{width:10px;height:10px;border-radius:2px;display:inline-block}
.chip .tr{font-size:10px;color:var(--ink-dim)}
.lg-note{font-size:11.5px;color:var(--ink-dim);font-family:'IBM Plex Mono',monospace}
.zsel{margin-left:auto;background:var(--panel);border:1px solid var(--line);color:var(--ink);font-family:'IBM Plex Mono',monospace;font-size:10.5px;padding:5px 8px;border-radius:5px;cursor:pointer;max-width:260px}
.zsel:hover{border-color:var(--gold)}
.snapbar{display:flex;align-items:center;gap:8px;width:100%;background:transparent;border:none;cursor:pointer;padding:3px 0}
.snapbar .sy{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-dim);flex:0 0 78px;text-align:right}
.snapbar .sb{height:10px;border-radius:2px;opacity:.55;transition:opacity .15s}
.snapbar:hover .sb,.snapbar.cur .sb{opacity:1}
.snapbar.cur .sy{color:var(--gold)}
footer{border-top:1px solid var(--line);padding:22px 0 40px;color:var(--ink-dim);font-size:12px}
footer b{color:var(--ink)}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
@media (max-width:640px){
  .g-label-col{flex:0 0 108px;font-size:9px}
  .g-row .g-label-col{font-size:11px}
  .controls{margin-left:0}
  .fe .fr{flex:0 0 92px}
}

/* ================= MOBILE OPTIMIZATION ================= */
.mini-year{display:none}
.swipe-hint{display:none}
button.ctl,select.ctl{min-height:40px}
@media (hover:none) and (pointer:coarse){
  .bar{min-height:22px}
  .chip{min-height:36px}
}
@media (max-width:760px){
  .wrap{padding:0 12px}
  header{padding:18px 0 6px}
  h1{font-size:28px}
  .sub{font-size:12.8px;line-height:1.5}
  .eyebrow{font-size:9.5px;letter-spacing:.2em}

  .console{padding:14px 0 4px;gap:6px 16px}
  .year-big{font-size:44px;min-width:3ch}
  .era-name{font-size:16px}
  .era-sub{font-size:9px}
  .controls{margin-left:0;width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;padding-bottom:6px}
  .controls select.ctl{grid-column:1/-1}
  button.ctl{padding:10px 4px;font-size:11.5px;min-height:44px}
  #playBtn{background:var(--gold);color:#141414;border-color:var(--gold);font-weight:600}
  #playBtn.on{background:var(--panel2);color:var(--gold)}

  .slider-zone{position:sticky;top:0;z-index:60;background:var(--bg);padding:6px 0 4px;border-bottom:1px solid var(--line);box-shadow:0 6px 12px rgba(10,15,27,.55)}
  .mini-year{display:flex;justify-content:space-between;align-items:baseline;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--gold);padding:2px 2px 0}
  .mini-era{color:var(--ink-dim);font-size:10px;font-style:italic;font-family:'Cormorant Garamond',serif;font-size:13px}
  input[type=range]{height:40px}
  input[type=range]::-webkit-slider-runnable-track{height:8px}
  input[type=range]::-webkit-slider-thumb{width:28px;height:28px;margin-top:-10px}
  .ticks{height:16px;font-size:8.5px}

  .tabbar{gap:6px;margin-top:10px}
  .tab{flex:1;text-align:center;padding:12px 4px;font-size:11.5px;border-radius:8px}

  .layout,.map-wrap{grid-template-columns:1fr;gap:14px;padding-top:8px}
  .section-title{font-size:21px;margin:18px 0 3px}
  .section-note{font-size:11.5px;margin-bottom:10px}
  .swipe-hint{display:inline;color:var(--gold);font-family:'IBM Plex Mono',monospace;font-size:10px}

  .gantt-outer{-webkit-overflow-scrolling:touch}
  .gantt{min-width:720px}
  .g-label-col{flex:0 0 96px;padding:6px 8px;font-size:8.5px}
  .g-row{height:30px}
  .g-row .g-label-col{font-size:10.5px}
  .bar{top:5px;height:20px}
  .bar span{font-size:8.5px;line-height:20px}

  .cards{grid-template-columns:1fr;gap:10px}
  .card{padding:12px 13px}
  .cont-name{font-size:19px}

  .feed-head h2{font-size:17px}
  .feed-body{max-height:340px;padding:6px 12px 10px}
  .fe{padding:8px 0}
  .fe .fr{flex:0 0 84px;font-size:9.5px}
  .links a{padding:4px 0;display:inline-block}

  .map-shell{border-radius:8px}
  .zoombar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;gap:6px;padding:8px 10px}
  .zbtn{flex:0 0 auto;padding:9px 13px;font-size:10.5px;min-height:38px}
  .zsel{flex:0 0 auto;margin-left:6px;max-width:190px;min-height:38px}
  .legend{max-height:130px;overflow-y:auto;padding:8px 10px}
  .chip{padding:8px 12px;font-size:12px}
  .md-head{padding:10px 12px}
  .md-head h2{font-size:18px}
  .md-body{max-height:380px;padding:6px 12px 12px}
  .snapbar{padding:6px 0}
  .snapbar .sy{flex:0 0 70px;font-size:9.5px}
  .snapbar .sb{height:12px}
  .map-hint{font-size:9px}
  footer{font-size:11px;padding:16px 0 32px}
}

/* ================= v9 additions ================= */
/* search */
.search-wrap{position:relative}
#searchBox{min-width:210px}
.search-res{position:absolute;top:calc(100% + 4px);left:0;z-index:60;min-width:300px;max-width:380px;max-height:340px;overflow:auto;background:var(--panel2);border:1px solid var(--line);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.5);display:none}
.search-res.open{display:block}
.sr-item{display:flex;gap:10px;align-items:baseline;width:100%;text-align:left;background:none;border:none;border-bottom:1px solid var(--line);color:var(--ink);padding:9px 12px;cursor:pointer;font-size:13px}
.sr-item:hover,.sr-item.sel{background:var(--panel)}
.sr-item .sy{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--gold);white-space:nowrap}
.sr-item .ss{color:var(--ink-dim);font-size:11px;margin-left:auto;white-space:nowrap}
/* heat strip */
.heat{height:7px;border-radius:4px;margin:2px 2px 0;background:var(--panel2);overflow:hidden;display:flex}
.heat span{flex:1 1 auto;height:100%}
/* meanwhile strip */
.mw-zone{padding-top:10px}
.mw{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;border-top:1px dashed var(--line);margin-top:6px}
.mw-card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:10px;margin:14px 6px 4px;padding:10px 12px;text-align:left;color:var(--ink);cursor:pointer;transition:border-color .15s}
.mw-card:hover{border-color:var(--gold)}
.mw-card::before{content:"";position:absolute;top:-15px;left:50%;width:1px;height:14px;background:var(--line)}
.mw-cont{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.mw-t{font-size:12.5px;font-weight:600;margin-top:3px;line-height:1.3}
.mw-r{color:var(--ink-dim);font-size:11px;margin-top:3px}
.mw-y{color:var(--gold);font-family:'IBM Plex Mono',monospace;font-size:10.5px}
@media(max-width:900px){.mw{grid-template-columns:repeat(2,1fr)}}
/* feed extras */
.fe{cursor:pointer}
.fe:hover{background:rgba(228,184,92,.05)}
.podl{color:#7FB08A !important}
/* story modal */
.story-ov{position:fixed;inset:0;background:rgba(6,9,18,.78);z-index:100;display:none;align-items:center;justify-content:center;padding:18px}
.story-ov.open{display:flex}
.story{background:var(--panel);border:1px solid var(--line);border-radius:14px;max-width:640px;width:100%;max-height:86vh;overflow:auto;padding:26px 28px;position:relative}
.story h3{font-family:'Cormorant Garamond',serif;font-size:28px;line-height:1.1;padding-right:30px}
.story .sm{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--gold);letter-spacing:.12em;text-transform:uppercase;margin:6px 0 12px}
.story p{font-size:14px;color:var(--ink);margin:8px 0}
.story .ctxp{color:var(--ink-dim);font-size:13px}
.story .pod{border:1px solid var(--line);border-left:3px solid #7FB08A;border-radius:8px;padding:10px 12px;margin:12px 0;font-size:13px}
.story .close{position:absolute;top:12px;right:14px;background:none;border:1px solid var(--line);border-radius:8px;color:var(--ink-dim);font-size:15px;padding:3px 10px;cursor:pointer}
.story .close:hover{color:var(--ink);border-color:var(--gold)}
.story .mwlist button{display:block;width:100%;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:7px 10px;margin:5px 0;cursor:pointer;font-size:12.5px}
.story .mwlist button:hover{border-color:var(--gold)}
/* tour bar */
.tourbar{position:fixed;left:50%;transform:translateX(-50%);bottom:14px;z-index:90;background:var(--panel2);border:1px solid var(--gold);border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.55);max-width:680px;width:calc(100% - 28px);padding:14px 16px;display:none}
.tourbar.open{display:block}
.tourbar .tt{font-family:'Cormorant Garamond',serif;font-size:20px;color:var(--gold)}
.tourbar .tstep{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--ink-dim);letter-spacing:.1em;text-transform:uppercase}
.tourbar .tx{font-size:13px;margin-top:6px}
.tourbar .tnav{display:flex;gap:8px;margin-top:10px;align-items:center}
.tourbar .tnav .spacer{margin-left:auto}
/* dynasties */
.dyn-head{padding:14px 0 8px;max-width:760px}
#dynSel{margin-top:10px;min-width:280px}
#dynTree{padding:10px 0 40px}
.house{margin:22px 0 6px;padding-left:2px}
.house-name{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:21px;color:var(--gold)}
.house-note{color:var(--ink-dim);font-size:12.5px;margin-top:2px;max-width:700px}
/* The flat .ruler / .branch / .rcard list was replaced by the branching
   succession tree (.dtree) in layout3.css, which builds its own nodes and
   connectors. Those rules matched nothing after the change and were removed;
   .reign and .rnote survive there as standalone rules for the detail panel. */
/* .dyn-empty removed with the "Pick an empire…" placeholder it styled — the
   picker's own first option already carries that instruction. */

/* ================= v10: hero chart + region spotlight ================= */
.section-title.xl{font-size:30px}
.gantt-hero{border-width:2px;border-color:#33405f;border-radius:14px;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.gantt-hero .gantt{min-width:1000px}
.gantt-hero .g-scale{height:40px}
.gantt-hero .g-scale span{font-size:11px;top:12px}
.gantt-hero .g-row{height:44px}
.gantt-hero .g-row .g-label-col{font-size:13.5px;font-weight:500}
.gantt-hero .g-label-col{flex:0 0 172px}
.gantt-hero .bar{top:7px;height:30px;border-radius:6px}
.gantt-hero .bar span{font-size:11px;line-height:30px}
.gantt-hero .continent-row .g-label-col{font-size:11px}
@media(max-width:760px){
  .gantt-hero .g-row{height:36px}
  .gantt-hero .bar{top:5px;height:26px}
  .gantt-hero .bar span{font-size:9.5px;line-height:26px}
  .gantt-hero .g-label-col{flex:0 0 108px}
  .section-title.xl{font-size:23px}
}
/* spotlight */
.spot{border:1px solid var(--gold);border-radius:14px;background:linear-gradient(180deg,rgba(228,184,92,.07),transparent 60%),var(--panel);padding:16px 18px;margin:4px 0 18px;position:relative}
.spot .sp-close{position:absolute;top:10px;right:12px;background:none;border:1px solid var(--line);border-radius:8px;color:var(--ink-dim);padding:2px 9px;cursor:pointer;font-size:13px}
.spot .sp-close:hover{color:var(--ink);border-color:var(--gold)}
.spot h3{font-family:'Cormorant Garamond',serif;font-size:26px;line-height:1.1;padding-right:34px}
.spot .sp-era{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--gold);letter-spacing:.14em;text-transform:uppercase;margin:4px 0 10px}
.spot .snaps{display:flex;gap:6px;overflow-x:auto;padding:4px 0 10px;scrollbar-width:thin}
.spot .snapchip{flex:0 0 auto;background:var(--panel2);border:1px solid var(--line);border-radius:20px;color:var(--ink-dim);padding:5px 12px;cursor:pointer;font-size:11.5px;font-family:'IBM Plex Mono',monospace;white-space:nowrap;transition:border-color .15s}
.spot .snapchip:hover{border-color:var(--gold);color:var(--ink)}
.spot .snapchip.on{background:var(--gold);color:#10131c;border-color:var(--gold);font-weight:600}
.spot .snapchip .sc-y{display:block;font-size:9px;opacity:.75}
.spot .fld{margin:7px 0;font-size:13px}
.spot .fld b{display:block;font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:2px}
.spot .ms{margin-top:8px}

/* ================= v11: region-first, big map, family tree, search polish ================= */
.linklike{background:none;border:none;color:var(--gold);cursor:pointer;font-size:inherit;font-family:inherit;text-decoration:underline dotted;padding:0}
#worldCards.hidden{display:none}
/* chart selection */
.g-region{cursor:pointer;transition:color .15s}
.g-region:hover{color:var(--gold)}
.g-row.selrow{background:rgba(228,184,92,.08)}
.g-row.selrow .g-label-col{color:var(--gold);font-weight:600}
.g-row:hover{background:rgba(255,255,255,.025)}
/* spotlight empty state */
.spot.empty{text-align:center;border-style:dashed;border-color:var(--line);background:var(--panel)}
.spot.empty .spot-arrow{color:var(--gold);font-size:20px;animation:bob 1.6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.spot.empty h3{padding:0}
.spot.empty .ctxp{max-width:520px;margin:6px auto 2px}
/* ---- MAP overhaul ---- */
.map-wrap{display:block}
.map-wrap .main-col{max-width:none}
.map-shell{border:2px solid #33405f;border-radius:16px;overflow:hidden;background:#0A0F1C;box-shadow:0 18px 50px rgba(0,0,0,.45)}
#worldMap{display:block;width:100%;height:min(76vh,780px);background:#0A0F1C}
#worldMap .sea{fill:#0A101E}
#worldMap .grat line{stroke:#1A2338;stroke-width:.6}
#worldMap .land{fill:#243044;stroke:#4A5B7D;stroke-width:.8}
#worldMap .emp{stroke-width:1.1;fill-opacity:.42;transition:fill-opacity .15s}
#worldMap .emp:hover{fill-opacity:.6}
#worldMap .emplbl{paint-order:stroke;stroke:#0A0F1C;stroke-width:3px;font-weight:600}
#worldMap .rmark circle:first-child{fill:none;stroke:var(--gold);stroke-width:1.6;animation:pulse 1.8s ease-out infinite}
#worldMap .rmark circle:last-of-type{fill:var(--gold)}
#worldMap .rmark text{fill:var(--gold);font-size:11px;text-anchor:middle;font-family:'IBM Plex Mono',monospace;paint-order:stroke;stroke:#0A0F1C;stroke-width:3px}
@keyframes pulse{0%{r:4;opacity:1}100%{r:14;opacity:0}}
.map-side{margin-top:14px}
.map-side .map-detail{display:block}
.map-hint{margin-top:10px}
@media(min-width:1050px){
  .map-side{position:relative}
}
/* ---- family tree ---- */
#dynTree{max-width:820px}
.house{display:flex;gap:12px;align-items:flex-start;margin:26px 0 0;padding:12px 16px;background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:12px}
.house-crest{font-size:22px;color:var(--gold);line-height:1.2}
.dyn-head .section-note{max-width:720px}
/* ---- search polish ---- */
#searchBox{min-width:250px;border-radius:20px;padding-left:14px;transition:box-shadow .2s,border-color .2s}
#searchBox:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(228,184,92,.18)}
.search-res{min-width:340px;max-width:440px;border-radius:12px}
.sr-item{padding:10px 12px;gap:8px}
.sr-item .si{flex:0 0 auto}
.sr-item .sl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sr-item mark{background:rgba(228,184,92,.35);color:var(--ink);border-radius:2px;padding:0 1px}
.sr-hint{font-family:'IBM Plex Mono',monospace;font-size:9.5px;color:var(--ink-dim);padding:7px 12px;border-top:1px solid var(--line);letter-spacing:.06em}
.sr-none{padding:14px;color:var(--ink-dim);font-size:12.5px}
.sp-actions{display:flex;gap:8px;flex-wrap:wrap;margin:2px 0 10px}
.spot .snaps{scrollbar-color:var(--line) transparent;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}

/* ================= v12: wide layout, welcome, giant window, centered tree ================= */
.wrap{max-width:1760px;width:min(97vw,1760px)}
/* welcome */
.howto{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:16px 0 6px}
.how{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font-size:13.5px;color:var(--ink-dim);line-height:1.5}
.how b{display:block;color:var(--ink);font-size:15px;margin:6px 0 3px}
.how .hn{display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--gold);color:#10131c;font-weight:700;align-items:center;justify-content:center;font-family:'IBM Plex Mono',monospace}
@media(max-width:820px){.howto{grid-template-columns:1fr}}
/* robust chart */
.gantt-hero .gantt{min-width:1100px}
.gantt-hero .g-row{height:56px}
.gantt-hero .g-row .g-label-col{font-size:15px}
.gantt-hero .g-label-col{flex:0 0 230px}
.gantt-hero .bar{top:9px;height:38px;border-radius:7px}
.gantt-hero .bar span{font-size:12.5px;line-height:38px;font-weight:600}
.gantt-hero .continent-row{background:#1E2A44;border-top:2px solid var(--line)}
.gantt-hero .continent-row .g-label-col{font-size:13px;padding:14px 10px;letter-spacing:.2em}
.gantt-hero .continent-row .c-fill{font-size:11px;padding:14px 0 14px 12px}
.gantt-hero .g-scale{height:46px}
.gantt-hero .g-scale span{font-size:12px;top:15px}
/* layout: big window + feed on the right */
.layout{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:26px;align-items:start}
.side-col{position:sticky;top:10px}
@media(max-width:1100px){.layout{grid-template-columns:1fr}.side-col{position:static}}
/* giant spotlight */
.spot.big{padding:26px 34px;font-size:15px}
.spot.big h3{font-size:38px}
.spot.big .sp-yr{color:var(--gold)}
.spot.big .sp-era{font-size:12.5px}
.spot.big .fld{font-size:15px;margin:12px 0}
/* One label style for every section in this card.

   There used to be three: .fld b at 11px grey, .angle b at 10px gold and
   .ms b at 9.5px grey — three sizes and two colours for what is visually
   the same thing, a small caps heading over a block of prose. They now all
   match .angle b, which was the one that looked deliberate. */
.spot.big .fld b{font-size:10px;letter-spacing:.16em;color:var(--gold)}
/* One column, full width.

   This was column-count:2. Newspaper columns suit short blocks, but they
   force the reader to the bottom of the page and back up for every paragraph,
   and the narrative is now the longest thing on the card — so it runs
   straight across instead. */
.spot.big .happen .cols{column-count:1;line-height:1.7;font-size:15px}
.spot.big .happen .cols p{margin:0 0 .85em}
.spot.big .happen .cols p:last-child{margin-bottom:0}
/* With the boxes gone the columns need real gutters, or the two halves run
   together. The hairline above separates this group from the narrative. */
.sp-angles{display:grid;grid-template-columns:1fr 1fr;gap:20px 34px;margin:16px 0 6px;border-top:1px solid var(--line-faint);padding-top:15px}
@media(max-width:900px){.sp-angles{grid-template-columns:1fr}}
/* No box. The four angles used to be shaded, bordered cards sitting under a
   narrative block that had no background at all — two different treatments
   for two runs of the same kind of prose, which is what made the card look
   like a jumble. They are now separated by their gold label and a single
   hairline above the group, nothing else. Fewer edges, and the eye reads it
   as one page rather than five competing tiles. */
.angle{background:none;border:none;border-radius:0;padding:0;font-size:14.5px;line-height:1.65;color:var(--ink)}
.angle b{display:block;font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.angle .pending{color:var(--ink-dim);font-style:italic}
.angle .wl{color:var(--gold)}
/* picture strip */
.sp-imgs{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 12px}
.sp-imgs:empty{display:none}
.spimg{display:block;width:170px;text-decoration:none;color:var(--ink-dim);font-size:11px;line-height:1.35}
.spimg img{width:170px;height:112px;object-fit:cover;border-radius:10px;border:1px solid var(--line);display:block;margin-bottom:4px;background:var(--panel2)}
.spimg:hover img{border-color:var(--gold)}
.spimg span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* spotlight snapshot chips slightly larger */
.spot.big .snapchip{font-size:12.5px;padding:7px 14px}
/* centered family tree */
#tab-dyn{text-align:center}
.dyn-head{margin:0 auto;max-width:820px}
.dyn-head .section-note{margin-left:auto;margin-right:auto}
#dynTree{max-width:720px;margin:0 auto;text-align:left}
.house{justify-content:center;text-align:center;flex-direction:column;align-items:center;border-left:1px solid var(--line);border-top:4px solid var(--gold)}
/* map event markers */
#worldMap .evmark{cursor:pointer}
#worldMap .evmark circle{fill:var(--gold);stroke:#0A0F1C;stroke-width:1.4}
#worldMap .evmark text{fill:var(--ink);font-size:9.5px;text-anchor:middle;font-family:'IBM Plex Sans',sans-serif;paint-order:stroke;stroke:#0A0F1C;stroke-width:2.6px}
#worldMap .evmark:hover circle{r:6}

/* ===== v10: real surveyed borders layer ===== */
.bpoly{fill-opacity:.45;stroke-width:.5;stroke-opacity:.7;cursor:pointer;transition:fill-opacity .12s}
.bpoly:hover{fill-opacity:.75;stroke-width:1.1}
.bpoly.sel{fill-opacity:.85;stroke:#fff;stroke-width:1.3}
.bpoly.cult{fill-opacity:.16;stroke-opacity:.3}
.bpoly.cult:hover{fill-opacity:.4}
.blbl{fill:#F3ECD8;font-family:'IBM Plex Sans',sans-serif;font-size:6.4px;font-weight:600;text-anchor:middle;
      paint-order:stroke;stroke:#0A0F1B;stroke-width:1.9px;stroke-linejoin:round;pointer-events:none;opacity:.92}
.bord-ctl{display:inline-flex;gap:6px;margin-left:8px;padding-left:8px;border-left:1px solid var(--line)}
.bord-status{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:7px 12px;border-top:1px solid var(--line);
             background:var(--panel2);font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink-dim);letter-spacing:.04em}
.bord-status b{color:var(--ink);font-weight:500}
.bord-status .src{opacity:.7}
.bord-note{color:var(--gold)}
/* who grew and who shrank since the previous survey */
.bord-trends{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center}
.bord-trends .tr-up,.bord-trends .tr-dn{display:inline-flex;flex-wrap:wrap;gap:4px;align-items:baseline}
.bord-trends .tr-up{color:#7FB08A}
.bord-trends .tr-dn{color:#C4714E}
.bord-trends .tr-k{cursor:help}
/* each name is a button: selects the polity and flies the map to it */
.bord-trends .tr-go{
  background:none;border:0;padding:0;cursor:pointer;color:inherit;
  font:inherit;text-decoration:underline dotted;text-underline-offset:2px;
}
.bord-trends .tr-go:hover{color:var(--gold)}
.bord-trends .tr-go:focus-visible{outline:1px solid var(--gold);outline-offset:2px}
.bord-trends .tr-sep{opacity:.5}
.snapbar .tr{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--ink-dim);margin-left:4px}
@media (max-width:760px){
  .blbl{font-size:5.4px;stroke-width:1.6px}
  .bord-ctl{margin-left:6px;padding-left:6px}
  .bord-status{font-size:9px;padding:6px 10px}
}



/* ============ economy & resources six-question block (econ.js) ============ */
.eco{margin-top:2px}
/* The date range above a block of prose — "1485 – 1529". One rule for both
   places it appears, because they mean the same thing: the window this text
   describes. They were drifting apart (one letter-spaced, one not). */
.eco-span,.narr-span{font-size:10.5px;color:var(--gold);opacity:.8;font-family:'IBM Plex Mono',monospace;letter-spacing:.1em;margin-bottom:5px}

/* Date range above "What was happening" (narr.js).

   This tells the visitor how wide the window they are reading is —
   which matters, because the windows are deliberately uneven. A
   slice covering 1,000 years of the Bronze Age and one covering the
   four years of the First World War look identical on the page
   unless the span is stated. Sits outside .cols on purpose; see the
   note in narrSlice(). */
/* .narr-span shares the rule above with .eco-span; it only needs to sit
   outside the two-column block. See the note in narrSlice(). */
.narr-span{margin-top:2px}
/* the economy panel's labelled table was replaced by flowing prose to
   match society, power and science — those rules went with it */

/* ============ society & culture essays (soc.js) ============ */
/* Inherit size and leading from whatever panel this sits in, so the essay
   text matches the panel around it instead of setting a third size.

   Justification is gone deliberately. These essays sit in columns roughly
   40 characters wide, and justified text that narrow opens rivers of white
   space down the middle and forces ugly hyphen breaks. Ragged right is
   correct at this measure, and it also matches the two-column narrative
   above, which was never justified. */
.soc-essay{font-size:inherit;line-height:inherit}
/* These essays are now two paragraphs rather than one block. The browser's
   default 1em margin is too loose inside a panel this size. */
.soc-essay p{margin:0 0 .7em}
.soc-essay p:last-child{margin-bottom:0}

/* ============ the picture strip + listening column ============
   Two columns: pictures on the left, the shows that cover this region and
   year on the right.

   The old version of this column was a bordered, tinted box with a bold
   serif show name — a panel sitting on top of a card that no longer has any
   panels. It is rebuilt here to the card's flat rules: no border, no fill,
   one hairline to mark the edge, and the heading in the same 10px gold mono
   caps every other label on the card uses. */
.sp-media{display:flex;gap:14px;align-items:flex-start;margin:6px 0 12px}
.sp-media .sp-imgs{flex:1;margin:0}

.sp-pods{
  flex:0 0 240px;
  border-left:1px solid var(--line-faint);
  padding-left:16px;
}
/* A region with no shows for this year emits nothing at all — without this
   the empty aside would still hold its 240px and its rule line open. */
.sp-pods:empty{display:none}

.pods-head{
  font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  margin:0 0 10px;
}

/* Each entry is a link, but it is laid out as a block of three stacked
   lines rather than an inline run of text. */
.pod-rec{
  display:block;text-decoration:none;color:inherit;
  padding:9px 0;border-top:1px solid var(--line-faint);
}
.pod-rec:first-of-type{border-top:none;padding-top:0}
.pr-show{display:block;font-size:13.5px;line-height:1.35;color:var(--ink)}
.pr-what{display:block;font-size:12.5px;line-height:1.45;color:var(--ink-dim);margin-top:2px}
.pr-span{
  display:block;margin-top:4px;
  font-family:'IBM Plex Mono',monospace;font-size:10.5px;
  letter-spacing:.04em;color:var(--ink-dim);opacity:.75;
}
.pod-rec:hover .pr-show{color:var(--gold)}

/* Below 760px the two columns stack, so the left rule becomes a top rule
   and the fixed width is dropped. */
@media(max-width:760px){
  .sp-media{flex-direction:column}
  .sp-pods{
    flex:1 1 auto;width:100%;
    border-left:none;padding-left:0;
    border-top:1px solid var(--line-faint);padding-top:14px;
  }
}

/* ================= v13: one product, two production layouts =================
   Desktop (901px+): comparison workspace.
   Mobile (900px and below): story-first reading flow. */
.mobile-chart-help{display:none}
#tab-atlas{display:flex;flex-direction:column}
.atlas-chart{order:1}
.atlas-detail{order:2}
.atlas-meanwhile{order:3}

/* The control shell is the shared state surface in both layouts. */
.control-shell{
  position:sticky;top:0;z-index:70;
  background:rgba(13,19,33,.96);
  border-bottom:1px solid var(--line);
  box-shadow:0 8px 24px rgba(5,8,15,.28);
  backdrop-filter:blur(12px);
}
.control-shell .mini-year{display:flex;justify-content:space-between;align-items:baseline;
  font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--gold);padding:0 2px 3px}
.control-shell .mini-era{color:var(--ink-dim);font-family:'Cormorant Garamond',serif;font-size:14px;font-style:italic}

/* Desktop workspace: year/search and the timeline control share one compact row. */
@media(min-width:901px){
  .site-hero{padding:22px 0 12px}
  .site-hero h1{font-size:clamp(34px,4vw,46px);margin-top:5px}
  .site-hero .sub{margin-top:6px}
  .site-hero .howto{gap:10px;margin:11px 0 2px}
  .site-hero .how{padding:10px 13px;font-size:12.5px}
  .site-hero .how b{display:inline;margin:0 6px;font-size:13.5px}
  .site-hero .how .hn{width:22px;height:22px;font-size:11px}

  .control-shell{display:grid;grid-template-columns:minmax(520px,.95fr) minmax(300px,1.05fr);
    grid-template-areas:"console slider" "tabs tabs";gap:0 26px;padding-top:5px}
  .control-shell .console{grid-area:console;flex-wrap:nowrap;align-items:center;gap:14px;padding:6px 0}
  .control-shell .year-big{flex:0 0 145px;font-size:56px;line-height:.9;min-width:145px}
  .control-shell .year-meta{flex:0 1 135px;padding:0;min-width:120px}
  .control-shell .era-name{font-size:19px}
  .control-shell .era-sub{font-size:9px}
  .control-shell .controls{margin-left:auto;padding:0;flex-wrap:nowrap;gap:8px}
  .control-shell #searchBox{min-width:150px;width:clamp(150px,17vw,250px)}
  .control-shell .slider-zone{grid-area:slider;align-self:center;padding:7px 0 2px;border:0}
  .control-shell input[type=range]{height:28px}
  .control-shell .ticks{height:14px;font-size:8.5px}
  .control-shell .tabbar{grid-area:tabs;margin:0;justify-content:center;border-top:1px solid rgba(42,53,80,.65)}
  .control-shell .tab{border-radius:0;padding:8px 22px;background:transparent;border-top:0}
  .control-shell .tab.on{background:var(--panel);border-color:var(--gold)}

  .atlas-chart{padding-top:14px}
  .atlas-chart .section-title{margin-top:4px!important}
  .atlas-detail{padding-top:16px}
  .atlas-detail .world{padding-top:0}
  .atlas-detail .world>.section-title{margin-top:6px}
  .atlas-meanwhile{padding-bottom:34px}
  .atlas-meanwhile .mw-zone{border-top:1px solid var(--line);padding-top:18px}
}

@media(min-width:901px) and (max-width:1150px){
  .control-shell .ticks span:nth-child(even){display:none}
  .control-shell .era-name{font-size:17px}
}

/* Story layout: a compact command dock, touch-first chart and linear reading order. */
@media(max-width:900px){
  .wrap{width:100%;padding-left:14px;padding-right:14px}
  .site-hero{padding:15px 0 8px}
  .site-hero .eyebrow{font-size:9px}
  .site-hero h1{font-size:31px;margin-top:4px}
  .site-hero .sub{font-size:12px;margin-top:5px}
  .site-hero .howto{display:none}

  .control-shell{width:100%;padding:0 12px}
  .control-shell .console{padding:7px 0 3px;gap:8px}
  .control-shell .year-big,.control-shell .year-meta{display:none}
  .control-shell .controls{display:grid;grid-template-columns:minmax(0,1fr) auto;width:100%;margin:0;padding:0;gap:8px}
  .control-shell .search-wrap{min-width:0}
  .control-shell #searchBox{width:100%;min-width:0}
  .control-shell #playBtn{min-width:86px;padding-left:10px;padding-right:10px}
  .control-shell .search-res{left:0;right:0;width:100%;min-width:0;max-width:none}
  .control-shell .slider-zone{position:static;padding:4px 0 1px;border:0;box-shadow:none;background:transparent}
  .control-shell .mini-year{padding-bottom:0}
  .control-shell input[type=range]{height:30px}
  .control-shell .ticks{height:13px;font-size:8px}
  .control-shell .tabbar{margin:0 -12px;gap:0;border-top:1px solid var(--line)}
  .control-shell .tab{border:0;border-right:1px solid var(--line);border-radius:0;padding:9px 3px;min-height:39px}
  .control-shell .tab:last-child{border-right:0}
  .control-shell .tab.on{background:var(--panel);box-shadow:inset 0 -2px var(--gold)}

  .desktop-chart-help{display:none}
  .mobile-chart-help{display:inline}
  .swipe-hint{display:inline}
  .atlas-chart{padding-top:10px}
  .atlas-chart .section-title{font-size:25px;margin:0 0 2px!important}
  .atlas-chart .section-note{font-size:11px;line-height:1.45;margin-bottom:8px}
  .gantt-outer{border-radius:10px}
  .gantt-hero{box-shadow:0 10px 28px rgba(0,0,0,.28)}
  .gantt-hero .gantt{min-width:760px}
  .gantt-hero .g-scale{height:34px}
  .gantt-hero .g-scale span{font-size:9px;top:10px}
  .gantt-hero .g-label-col{flex:0 0 116px}
  .gantt-hero .continent-row .g-label-col{font-size:10px;padding:10px 8px}
  .gantt-hero .continent-row .c-fill{font-size:9px;padding:10px 0 10px 8px}
  .gantt-hero .g-row{height:39px}
  .gantt-hero .g-row .g-label-col{font-size:11.5px}
  .gantt-hero .bar{top:6px;height:27px;padding:0 5px}
  .gantt-hero .bar span{font-size:9.5px;line-height:27px}

  .atlas-detail{display:block;padding-top:12px}
  .atlas-detail .world{padding:0 0 12px}
  .atlas-detail .world>.section-title{font-size:24px;margin:4px 0 2px}
  .atlas-detail .world>.section-note{font-size:11px;margin-bottom:8px}
  .spot.big{padding:17px 15px;margin-bottom:12px}
  .spot.big h3{font-size:29px}
  .spot.big .sp-era{font-size:10px;letter-spacing:.1em}
  .spot.big .snapchip{font-size:10.5px;padding:6px 11px}
  .spot.big .happen .cols{font-size:14px;line-height:1.65;column-count:1}
  .spot.big .fld{font-size:14px;margin:10px 0}
  .sp-angles{grid-template-columns:1fr;gap:18px;margin-top:12px;padding-top:13px}
  .angle{padding:0;font-size:14px;line-height:1.6}
  .sp-media{flex-direction:column}
  .sp-media .sp-imgs{width:100%}
  .sp-pods{flex:1 1 auto;width:100%;border-left:none;padding-left:0;
           border-top:1px solid var(--line-faint);padding-top:14px}
  .spimg{width:145px}
  .spimg img{width:145px;height:96px}

  .atlas-detail .side-col{position:static}
  .atlas-detail .feed{margin:0 0 8px}
  .atlas-detail .feed-body{max-height:none}
  .atlas-detail .feed-head{padding:11px 12px}
  .atlas-detail .speed-hint{margin:0 2px 14px!important}
  .atlas-meanwhile{padding-top:3px;padding-bottom:22px}
  .atlas-meanwhile .section-title{font-size:23px;margin:8px 0 2px!important}
  .atlas-meanwhile .mw{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .atlas-meanwhile .mw-card{flex:0 0 min(82%,310px);scroll-snap-align:start;margin:12px 7px 4px 0}

  .map-wrap{padding-top:10px}
  #worldMap{height:56vh;min-height:340px;max-height:520px}
  .map-side{position:static;margin-top:10px}
  .md-body{max-height:none}
  #tab-dyn{padding-top:8px}
  #dynSel{width:100%;min-width:0}
  footer{padding-bottom:24px}
}

@media(max-width:480px){
  .wrap{padding-left:10px;padding-right:10px}
  .site-hero h1{font-size:28px}
  .control-shell{padding:0 9px}
  .control-shell .tabbar{margin-left:-9px;margin-right:-9px}
  .control-shell #playBtn{min-width:78px;font-size:10.5px}
  .control-shell .tab{font-size:10px;letter-spacing:.02em}
  .control-shell .ticks span:nth-child(even){display:none}
  .gantt-hero .gantt{min-width:700px}
  .gantt-hero .g-label-col{flex-basis:108px}
  .spot.big{padding:15px 12px}
  .spot.big h3{font-size:26px}
  .spot .sp-close{top:8px;right:8px}
  .sp-actions .chip{width:100%;justify-content:center}
  .spimg{width:calc(50% - 6px)}
  .spimg img{width:100%;height:100px}
  .atlas-meanwhile .mw-card{flex-basis:88%}
  #worldMap{min-height:300px;height:52vh}
}