/* ════════════════════════════════════════
   COUNTRY MENU — the header's gold "Explore" button and its megamenu of
   every history site by continent (includes/partials/country-menu.php,
   js/header.js). Classes are xm-* (cm-* belongs to the map page).
════════════════════════════════════════ */
.country-menu { position:relative; display:flex; align-items:center; }
@media (min-width:761px) {
  .country-menu { padding-left:26px; }
  .country-menu::before {
    content:''; position:absolute; left:0; top:50%; height:30px; margin-top:-15px;
    border-left:1px solid rgba(255,255,255,0.18);
  }
}
/* Solid gold pill, dark text; header.js drops the label at nav-fit-4. */
.xm-btn {
  display:flex; align-items:center; gap:10px;
  height:42px; padding:0 20px 0 18px;
  background:var(--gold); border:none; border-radius:8px;
  font-family:var(--f-body); font-size:13px; font-weight:600;
  letter-spacing:2.5px; text-transform:uppercase; line-height:1;
  color:#0a0912; white-space:nowrap;
  transition:background 0.2s, color 0.2s;
}
.xm-btn:hover, .xm-btn.is-open { background:var(--gold-dim); }
.xm-btn:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }
.xm-globe { flex-shrink:0; }
.xm-chevron { flex-shrink:0; margin-top:1px; transition:transform 0.2s; }
.xm-btn.is-open .xm-chevron { transform:rotate(180deg); }
.nav-fit-4 .xm-btn { width:42px; padding:0; gap:0; justify-content:center; }
.nav-fit-4 .xm-btn-label, .nav-fit-4 .xm-chevron { display:none; }

.xm-panel {
  position:fixed;
  top:var(--xm-top, calc(var(--nav-h) - 6px));
  right:var(--xm-right, 16px);
  width:min(1440px, calc(100vw - 32px));
  background:rgba(12,11,16,0.98);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:8px;
  box-shadow:0 24px 64px rgba(0,0,0,0.7), 0 2px 10px rgba(0,0,0,0.5);
  z-index:5;
  text-align:left;
}
.xm-panel[hidden] { display:none; }
/* Caret pointing up at the button (header.js sets --xm-caret). */
.xm-panel::before {
  content:''; position:absolute; top:-8px; right:var(--xm-caret, 40px);
  width:14px; height:14px;
  background:rgb(12,11,16);
  border-top:1px solid rgba(255,255,255,0.12);
  border-left:1px solid rgba(255,255,255,0.12);
  transform:rotate(45deg);
}
.xm-body {
  position:relative;
  max-height:calc(100vh - var(--xm-top, var(--nav-h)) - 24px);
  overflow-y:auto; overscroll-behavior:contain;
  padding:28px 32px 26px;
  scrollbar-width:thin; scrollbar-color:rgba(201,168,68,0.35) transparent;
}
.xm-title {
  margin-bottom:22px;
  font-family:var(--f-heading); font-size:28px; font-weight:400; line-height:1.25;
  color:#fff;
}
/* Head row: the search field (about half the panel) and the feature items. */
.xm-head { display:flex; align-items:stretch; gap:0 28px; margin-bottom:30px; }
.xm-search { position:relative; flex:0 0 50%; min-width:0; align-self:center; }
.xm-search svg {
  position:absolute; left:20px; top:50%; margin-top:-11px; z-index:2;
  color:var(--white-dim); pointer-events:none;
}
/* 1.5px gradient border, gold on the left running to white on the right,
   drawn by .xm-search::before: a gradient layer masked down to a 1.5px
   ring (a real `border` would be snapped to whole device pixels — thinner
   than 1px on some screens). The gradient is three times the field's
   width and sweeps in from the right as the menu opens (xm-border-in),
   settling on its gold→white stretch. */
.xm-search::before {
  content:''; position:absolute; inset:0; z-index:1;
  border-radius:8px; padding:1.5px;
  background:linear-gradient(90deg, var(--gold) 0%, #fff 33.3%, var(--gold) 66.6%, #fff 100%);
  background-size:300% 100%; background-position:100% 0;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}
.xm-panel:not([hidden]) .xm-search::before { animation:xm-border-in 1.3s cubic-bezier(0.22,1,0.36,1) both; }
@keyframes xm-border-in {
  from { background-position:0 0; opacity:0.35; }
  to   { background-position:100% 0; opacity:1; }
}
@media (prefers-reduced-motion:reduce) { .xm-panel:not([hidden]) .xm-search::before { animation:none; } }
.xm-search-input {
  display:block;
  width:100%; height:59px; padding:0 20px 0 58px;
  border:0; border-radius:8px;
  background:#0a0912;
  box-shadow:0 0 22px var(--gold-glow);
  color:var(--white); font-family:var(--f-ui); font-size:18px;
  outline:none; transition:box-shadow 0.2s;
  -webkit-appearance:none; appearance:none;
}
.xm-search-input::placeholder { color:var(--white-dim); }
.xm-search-input:focus { box-shadow:0 0 30px var(--gold-glow), 0 0 0 1px rgba(255,255,255,0.35); }
.xm-search-input::-webkit-search-cancel-button { filter:invert(0.7); cursor:pointer; }
.xm-features { display:flex; flex:1 1 auto; min-width:0; }
.xm-feature {
  flex:1 1 0; min-width:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  padding:0 6px;
  border-left:1px solid rgba(255,255,255,0.15);
  text-align:center; font-family:var(--f-ui); line-height:1.25;
}
.xm-feature-icon { display:block; color:var(--gold); margin-bottom:5px; }
.xm-feature-icon svg { display:block; }
.xm-feature-1 { font-size:15px; color:#fff; white-space:nowrap; }
.xm-feature-2 { font-size:13px; color:var(--white-dim); white-space:nowrap; }

.xm-cols { display:grid; grid-template-columns:repeat(var(--xm-n, 5), minmax(0, 1fr)); }
.xm-col { min-width:0; padding:0 22px; }
.xm-col:first-child { padding-left:4px; }
.xm-col:last-child { padding-right:4px; }
.xm-col + .xm-col { border-left:1px solid rgba(255,255,255,0.12); }
.xm-col[hidden] { display:none; }
.xm-col-title {
  margin-bottom:14px; padding-left:12px;
  font-family:var(--f-heading); font-size:16px; font-weight:600;
  letter-spacing:2.5px; text-transform:uppercase; line-height:1.3;
  color:var(--gold);
}
.xm-list { display:flex; flex-direction:column; gap:2px; }
.xm-item[hidden] { display:none; }
.xm-col:not(.is-expanded) .xm-extra { display:none; }
.xm-panel.is-searching .xm-extra:not([hidden]) { display:block; }
.xm-site {
  display:flex; align-items:center; gap:12px;
  height:38px; padding:0 12px;
  border-radius:8px;
  font-family:var(--f-body); font-size:16px; line-height:1.3;
  color:#fff;
  transition:background 0.15s, color 0.15s;
}
.xm-site:hover, .xm-site:focus-visible { background:rgba(255,255,255,0.07); outline:none; }
/* The current site: a solid gold pill, dark text, chevron at the right edge. */
.xm-site.is-current, .xm-site.is-current:hover, .xm-site.is-current:focus-visible { background:var(--gold); color:#0a0912; }
.xm-site-chevron { flex-shrink:0; margin-left:auto; }
.xm-site.is-best { box-shadow:inset 0 0 0 1px var(--gold-dim); }
.xm-site.is-current.is-best { box-shadow:inset 0 0 0 1px #fff; }
.xm-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Topic match: "· 14 events" after the name (header.js) */
.xm-topic { flex-shrink:0; font-family:var(--f-ui); font-size:12.5px; white-space:nowrap; color:var(--white-dim); }
.xm-topic::before { content:'·'; margin-right:6px; }
.xm-topic[hidden] { display:none; }
.xm-site.is-current .xm-topic { color:rgba(10,9,18,0.7); }
.xm-flag {
  flex-shrink:0; width:30px; height:20px;
  object-fit:cover; border-radius:3px;
  box-shadow:0 0 0 1px rgba(255,255,255,0.14);
}
.xm-flag.xm-icon { object-fit:contain; box-shadow:none; }
.xm-flag-blank { display:block; background:rgba(255,255,255,0.08); }
.xm-more {
  display:block;
  margin-top:14px; padding:4px 12px;
  font-family:var(--f-ui); font-size:15px; line-height:1.35; text-align:left;
  color:var(--gold); transition:color 0.2s;
}
.xm-more span { margin-left:5px; }
.xm-more:hover, .xm-more:focus-visible { color:#fff; }
.xm-panel.is-searching .xm-more { display:none; }
.xm-empty { padding:6px 4px 4px; color:var(--white-dim); font-family:var(--f-ui); font-size:15px; }
.xm-empty[hidden] { display:none; }

/* Tablets: the features drop under a full-width search field; 3 then 2 columns. */
@media (max-width:1100px) {
  .xm-body { padding:24px 24px 22px; }
  .xm-title { font-size:22px; margin-bottom:18px; }
  .xm-head { flex-wrap:wrap; gap:18px 0; margin-bottom:26px; }
  .xm-search { flex:1 1 100%; }
  .xm-search-input { height:56px; font-size:18px; }
  .xm-features { flex:1 1 100%; }
  .xm-feature:first-child { border-left:none; }
  .xm-cols { grid-template-columns:repeat(3, minmax(0, 1fr)); row-gap:26px; }
  .xm-col, .xm-col:first-child, .xm-col:last-child { padding:0 18px; }
  .xm-col + .xm-col { border-left:none; }
}
@media (max-width:900px) {
  .xm-cols { grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
/* Phones: globe-only button; the menu is a full-width sheet under the nav,
   one column, no feature row. */
@media (max-width:760px) {
  .country-menu { margin-left:6px; }
  .xm-btn { width:44px; height:44px; padding:0; justify-content:center; gap:0; }
  .xm-btn-label, .xm-chevron { display:none; }
  .xm-panel {
    top:var(--nav-h); left:0; right:0; width:auto;
    border-radius:0 0 8px 8px; border-left:none; border-right:none;
  }
  .xm-panel::before { display:none; }
  .xm-body { max-height:calc(100vh - var(--nav-h) - 2px); max-height:calc(100dvh - var(--nav-h) - 2px); padding:16px 16px 20px; }
  .xm-title { font-size:18px; margin-bottom:14px; }
  .xm-head { margin-bottom:20px; }
  .xm-search-input { height:50px; font-size:16px; padding-left:50px; }
  .xm-search svg { left:16px; width:20px; height:20px; margin-top:-10px; }
  .xm-features { display:none; }
  .xm-cols { grid-template-columns:1fr; row-gap:22px; }
  .xm-col, .xm-col:first-child, .xm-col:last-child { padding:0; }
  .xm-site { height:42px; }
}

.country-menu{--gold:#e7bd63;--gold-dim:#f3d38c;--white:#fff;--white-mid:rgba(255,255,255,.75);--white-dim:rgba(255,255,255,.5);--f-display:Georgia,serif;--nav-h:64px;padding-left:0;margin-left:auto;flex-shrink:0}
.country-menu::before{display:none}
.country-menu button{cursor:pointer}
.country-menu .xm-panel{color:#fff;font-family:var(--f-mono);line-height:1.5}
.site-header .wrap{max-width:1540px;gap:12px}
.site-header .nav a{padding-inline:7px;font-size:.75rem}
@media(max-width:1350px){
  .site-header .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;background:var(--paper);border-bottom:1px solid var(--line);padding:8px var(--gutter) 16px;box-shadow:var(--shadow)}
  .site-header .nav.open{display:flex}
  .site-header .nav a{padding:12px 6px;font-size:.9rem}
  .site-header .menu-btn{display:inline-flex;margin-left:auto}
  .site-header .country-menu{margin-left:0}
}
@media(max-width:560px){.site-header .wrap{flex-wrap:wrap;padding-block:10px;gap:8px}.site-header .brand{flex:1 1 calc(100% - 125px)}.site-header .country-menu{position:absolute;right:var(--gutter);top:10px}.site-header .menu-btn{margin-left:0}.site-header .xm-btn{width:auto;padding:0 12px;gap:7px}.site-header .xm-btn-label{display:inline}.site-header .xm-chevron{display:none}}
.country-menu{--gold-glow:rgba(231,189,99,.18);--f-heading:Georgia,serif;--f-ui:system-ui,sans-serif} .country-menu a{text-decoration:none} .country-menu input{font:inherit} .country-menu svg{flex-shrink:0}

/* Shared return-to-index mark for all AllHistories microsites. */
.education-back{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;margin-left:8px;padding:6px 10px;border-radius:5px;background:#172535;text-decoration:none;color:#fff}
.education-back .nav-back-arrow{flex-shrink:0;color:#c9a844;transition:transform .2s}
.education-back .nav-back-logo{display:block;width:120px;max-height:30px;object-fit:contain;filter:grayscale(1);opacity:.78;transition:filter .2s,opacity .2s}
.education-back:hover .nav-back-logo,.education-back:focus-visible .nav-back-logo{filter:grayscale(0);opacity:1}
.education-back:hover .nav-back-arrow{transform:translateX(-3px)}
.education-back:focus-visible{outline:2px solid #c9a844;outline-offset:4px}
@media(max-width:560px){.education-back{margin-left:0;padding:6px}.education-back .nav-back-logo{width:96px;max-height:25px}}

:root{--f-body:'Inter',system-ui,sans-serif;--f-heading:'Cormorant Garamond',Georgia,serif;--f-ui:var(--f-body);--nav-h:72px}
.ow-header{display:flex;align-items:center;gap:14px;width:100%;min-width:0}
#nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;padding:12px 20px;background:rgba(11,10,16,.96)}
#nav .brand{white-space:nowrap;font-family:var(--f-heading);font-size:20px;color:#ece6d8;text-decoration:none}
#nav .chapters{gap:12px}
#nav .chapters>li>a{font-size:12px}
#nav .cta{display:none}
#nav .country-menu{margin-left:auto}
#nav .xm-panel{z-index:100}
#nav .xm-panel a{letter-spacing:normal}
#nav .xm-panel h3{line-height:1.3}
#nav .burger{flex-shrink:0;cursor:pointer}
.constantinople-map #app{height:calc(100vh - 72px);height:calc(100dvh - 72px);margin-top:72px}
.constantinople-map .ah-footer{display:none}
@media(max-width:1800px){
  #nav .chapters{display:none}
  #nav.open .chapters{display:flex;flex-direction:column;position:absolute;top:100%;left:0;right:0;background:#0b0a10;padding:14px 24px;max-height:calc(100dvh - 72px);overflow:auto;border-bottom:1px solid #2a2636}
  #nav .burger{display:block;margin-left:auto}
  #nav .country-menu{margin-left:0}
}
@media(max-width:600px){
  #nav{padding:10px 12px}
  .ow-header{gap:8px}
  #nav .brand{font-size:16px;white-space:normal}
  #nav .education-back{margin-left:0;padding:5px}
  #nav .education-back .nav-back-logo{width:72px}
  #nav .xm-btn{width:38px;height:38px}
  #nav .burger{padding:5px 8px}
}
/* Allow statistics to wrap on narrow phones. */
@media(max-width:860px){.numgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.num{min-width:0;padding-inline:8px}.num b{white-space:normal;overflow-wrap:anywhere}.num span{font-size:10px;letter-spacing:.12em}}
.country-menu ul{list-style:none;margin:0;padding:0}
.country-menu .xm-more{border:0;background:transparent;cursor:pointer}
.country-menu{--gold-glow:rgba(231,189,99,.18)}
body{overflow-x:clip}
/* Supplied illustrated seven-chapter panorama. */
#eras-nav{padding:0;background:#050d16;scroll-margin-top:76px}
.chapters-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.chapters-scroll{overflow-x:auto;overscroll-behavior-x:contain;scrollbar-color:#b98b41 #09121b;scrollbar-width:thin}
.chapters-scroll:focus-visible{outline:2px solid #f0b35c;outline-offset:-3px}
.chapters-panorama{position:relative;width:100%;min-width:1000px}
.chapters-panorama>img{display:block;width:100%;height:auto}
.chapters-hotspots{position:absolute;inset:43% 0 20%;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding:0 1.5%;gap:0;background:none;z-index:1}
.chapters-hotspots a{display:block;min-width:0;border-radius:12px;transition:background .2s,box-shadow .2s}
.chapters-hotspots a:hover{background:rgba(255,183,68,.07);box-shadow:inset 0 -2px #e5ac55}
.chapters-hotspots a:focus-visible{outline:2px solid #ffc466;outline-offset:-4px;background:rgba(255,183,68,.1)}
.chapters-hint{display:none}
@media(max-width:1000px){.chapters-hint{display:block;margin:0;padding:14px 20px;color:#e9ba70;font-size:12px;letter-spacing:.03em}.chapters-hint span{color:#b1a998}}
@media(prefers-reduced-motion:reduce){.chapters-hotspots a{transition:none}}