/* === Full Map Page Container === */
.writer-full-map{
  width:100%;
  height:90vh;
  margin:0 auto;
  padding:0;
  cursor:default;
  background: var(--page-gradient); /* was linear-gradient(to bottom,#f8f8f8,#eaeaea) */
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:0;
  box-shadow:none;
  opacity:1;
  transform:none;
}

/* === SVG === */
.svg-container{ position:relative; }
.svg-container svg{
  width:100%;
  height:auto;
  display:block;
  transform:scale(1);
  transform-origin:center;
  position:relative;
  z-index:1;
}
.svg-container path{
  stroke: var(--ink-2);   /* was #2f3b59 */
  stroke-width:.3;
  fill: var(--ink);       /* was #192231 */
  fill-opacity:0;
}
.svg-container path.animated-fill{
  animation:drawLine .16s ease-out forwards, fadeFill .08s ease-in forwards;
  animation-delay:0s,.16s;
}
@keyframes drawLine{ to{ stroke-dashoffset:0; } }
@keyframes fadeFill{ to{ fill-opacity:1; } }

/* === Overlay + Popover === */
.full-map-overlay{ position:absolute; inset:0; z-index:2; pointer-events:none; }

.full-map-popover{
  position:absolute; transform:translate(-50%,-120%);
  min-width:180px; max-width:240px;
  background: color-mix(in srgb, var(--ink) 92%, transparent); /* was rgba(25,34,49,.92) */
  color: var(--panel-0);                                       /* was #fff */
  padding:.55rem .7rem;
  font-size:.9rem; line-height:1.25;
  border-radius:10px;
  box-shadow: var(--shadow-l);                                  /* was 0 8px 24px rgba(0,0,0,.18) */
  pointer-events:none; z-index:4;
}
.full-map-popover .title{ font-weight:600; margin-bottom:.15rem; }
.full-map-popover .subtitle{ opacity:.8; font-size:.85rem; }

/* === Explainer (top-left) === */
.writer-explainer{
  position:absolute; top:72px; left:24px;
  background: color-mix(in srgb, var(--panel-0) 70%, transparent); /* was rgba(255,255,255,.7) */
  backdrop-filter:blur(6px);
  padding:.5rem .8rem; border-radius:10px;
  font-size:.95rem; color: var(--ink-2);                           /* was #2f3b59 */
  box-shadow: var(--shadow-m);                                      /* was 0 8px 20px rgba(0,0,0,.06) */
}

/* === Writer strip (bottom) === */
.writer-strip{
  position:fixed; left:0; right:0; bottom:0;
  padding:.6rem .9rem;
  display:flex; gap:.9rem; overflow-x:auto; overscroll-behavior:contain;
  background:
    linear-gradient(
      to top,
      var(--bg-0),
      color-mix(in srgb, var(--bg-0) 60%, transparent),
      transparent
    );
  backdrop-filter:saturate(120%) blur(4px);
  border-top:1px solid var(--hairline); /* was rgba(47,59,89,.08) */
  scrollbar-width:none;
  opacity:0; transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease;
  z-index: 3;
}
.writer-strip::-webkit-scrollbar{ display:none; }
.writer-strip.visible{ opacity:1; transform:translateY(0); }

/* Cards inside strip */
.writer-card{
  appearance:none; border:0; background:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:.4rem;
  min-width:88px; outline:none; touch-action:manipulation;
  opacity:0; transform:translateY(6px);
  transition:opacity .28s ease, transform .28s ease;
  flex:0 0 auto;
}
.writer-card.revealed{ opacity:1; transform:translateY(0); }

/* Filter/idle states */
.writer-card.dimmed-filter{ opacity:.25 !important; pointer-events:none; }
.writer-card.dimmed-idle:not(.dimmed-filter){ opacity:.35; transition:opacity .35s ease; }
.writer-card.active:not(.dimmed-filter){ opacity:1; }
.writer-card.dimmed{ opacity:.25; pointer-events:none; }

.writer-card img{
  width:66px; height:66px; border-radius:50%;
  object-fit:cover; box-shadow: var(--shadow-m); /* was 0 6px 16px rgba(0,0,0,.12) */
  transition:transform .2s ease, box-shadow .2s ease;
}
.writer-card:hover img{ transform:scale(1.04); box-shadow: var(--shadow-l); /* was 0 8px 20px */ }

.writer-name{
  font-size:.82rem; color: var(--ink-2); /* was #2f3b59 */ white-space:nowrap;
  background: color-mix(in srgb, var(--panel-0) 70%, transparent); /* was rgba(255,255,255,.7) */
  padding:.2rem .5rem; border-radius:999px;
  box-shadow: var(--shadow-s);
}

/* Modal layout */
.modal .modal-body{ display:flex; gap:1rem; align-items:flex-start; }

/* Author modal */
.modal-content.author{
  max-width:760px; border-radius:22px; padding:24px 26px 28px;
  background: var(--panel-gradient);                 /* was radial white/grey */
  box-shadow: 0 20px 60px rgba(0,0,0,.18);           /* keep distinctive depth */
  text-align:left; line-height:1.45;
}
.modal-content.author .close{
  position:absolute; top:14px; right:16px;
  background:transparent; border:0; font-size:24px; cursor:pointer; color: var(--ink-2); /* was #6a7285 */
}

.wm-header{
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:18px; margin-bottom:10px;
}
#wmPhoto{
  flex:0 0 auto;
  width:120px; height:120px; object-fit:cover; border-radius:14px;
  box-shadow: var(--shadow-m);                            /* was 0 6px 14px */
}
.wm-head-copy{ flex:1 1 340px; min-width:220px; }
.wm-title{ margin:0 0 6px; font-size:28px; line-height:1.1; color: var(--ink); }
.wm-dates{ color: var(--ink-2); font-size:14px; letter-spacing:.2px; margin:0 0 8px; }
.wm-bio{ margin:0; color: var(--ink-2); font-size:16px; line-height:1.55; }

.wm-sep{
  border:none; height:1px; margin:16px 0;
  background: linear-gradient(to right, transparent, var(--hairline) 35%, transparent);
}
.wm-section{ margin-top:16px; }
.wm-subhead{ margin:0 0 10px; font-size:17px; letter-spacing:.3px; color: var(--ink); }

.wm-works{ list-style:none; margin:0; padding:0; text-align:left; }
.wm-works li{
  display:flex; align-items:baseline; gap:10px;
  margin:8px 0; padding:0; color: var(--ink-2); font-size:16px;
}
.wm-works li::before{
  content:""; flex:0 0 6px; width:6px; height:6px; border-radius:50%;
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--ghost-ink); /* was rgba(25,34,49,.08) */
  transform:translateY(.15em);
}

.wm-links{ margin-top:6px; }
.wm-links a{
  display:inline-block; margin:4px 12px 0 0;
  color: var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1.5px;
  transition:opacity .15s ease;
}
.wm-links a:hover{ opacity:.85; }
.wm-links a::after{ content:none !important; }

.wm-refs{ margin:.6rem 0 .4rem; font-size:.9rem; }
.wm-related{ display:flex; gap:.4rem; flex-wrap:wrap; }
.wm-related .chip{ font-size:.78rem; padding:.2rem .5rem; }

/* === Info button === */
.map-info-btn{
  position:absolute; top:180px; left:16px; z-index:5;
  width:38px; height:38px; border-radius:10px;
  border:1px solid var(--hairline);                               /* was rgba(47,59,89,.15) */
  background: color-mix(in srgb, var(--panel-0) 80%, transparent);/* was rgba(255,255,255,.8) */
  backdrop-filter:blur(6px);
  display:grid; place-items:center; cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, opacity .25s ease;
  opacity:0; transform:translateY(-8px);
  box-sizing:border-box;
  box-shadow: var(--shadow-m);                                     /* was 0 8px 18px rgba(0,0,0,.12) */
}
.map-info-btn:hover{ transform:translateY(-8px) scale(1.04); box-shadow: var(--shadow-l); }
.map-info-btn.visible{ opacity:1; transform:translateY(0); }
.map-info-btn i{
  display:block; line-height:1; width:1em; height:1em; font-size:18px; color: var(--ink-2);
}

/* === Info panel === */
.map-info-panel{
  position:absolute; top:200px; left:20px; z-index:5;
  width:min(360px,90vw);
  background: color-mix(in srgb, var(--ink) 96%, transparent); /* was rgba(25,34,49,.96) */
  color: var(--panel-0);
  padding:.9rem 1rem; border-radius:12px;
  box-shadow: var(--shadow-l);
  opacity:0; transform:translateY(-6px);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:auto;
}
.map-info-panel.visible{ opacity:1; transform:translateY(0); }
.map-info-header{
  display:flex; justify-content:space-between; align-items:center;
  font-weight:600; margin-bottom:.35rem;
}
.map-info-close{
  appearance:none; border:0; background:transparent; color: var(--panel-0); opacity:.8;
  font-size:20px; cursor:pointer;
}
.map-info-close:hover{ opacity:1; }

.map-info-panel, .map-info-panel *{ color: var(--panel-0) !important; }

/* Highlights */
.country-highlight{
  fill-opacity:.25 !important;
  stroke: #4a5d8c !important;  /* was #cc1e1e */
  stroke-width:1 !important;
}
.country-highlight.dimmed-stroke{ stroke: var(--text-3) !important; } /* was #999 */

/* === Filters (top-right) === */
.writer-filters{
  position:absolute; top:180px; right:20px; z-index:5;
  display:grid; gap:.5rem; grid-template-columns:1fr;
  background: color-mix(in srgb, var(--panel-0) 75%, transparent); /* was rgba(255,255,255,.75) */
  backdrop-filter:blur(6px);
  padding:.6rem .7rem; border-radius:12px;
  box-shadow: var(--shadow-m);
  opacity:0; transform:translateX(-14px);
  pointer-events:none;
  transition:opacity .35s ease, transform .35s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.writer-filters.visible{ opacity:1; transform:translateX(0); pointer-events:auto; }
.writer-filters .chip-group{ display:flex; gap:.4rem; flex-wrap:wrap; }

/* Chips */
.chip{
  border:1px solid var(--hairline);
  background: var(--panel-0);
  border-radius:999px;
  padding:.25rem .6rem;
  font-size:.8rem;
  cursor:pointer;
  color: var(--ink-2);
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.chip.active{ background: var(--ink); color: var(--panel-0); }
.chip:link, .chip:visited, .chip:active, .chip:focus{
  color:inherit; text-decoration:none;
}

/* === Range slider === */
input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; background:transparent;
  --fill: var(--ink);       /* was #192231 */
  --bg:   var(--muted-3);   /* was #e5e9f2 (closest token) */
  --pct:0%;
  background:
    linear-gradient(var(--fill),var(--fill)) 0 50% / var(--pct) 4px no-repeat,
    var(--bg);
  height:4px; border-radius:999px;
  -webkit-tap-highlight-color:transparent;
}
input[type="range"]::-webkit-slider-runnable-track{
  height:4px; background:transparent; border-radius:999px;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px; height:22px; border-radius:50%;
  background: var(--panel-0); border:1px solid var(--border);
  box-shadow: var(--shadow-s);
  margin-top:-9px;
}
input[type="range"]::-moz-range-track{ height:4px; background:var(--bg); border-radius:999px; }
input[type="range"]::-moz-range-progress{ height:4px; background:var(--fill); border-radius:999px; }
input[type="range"]::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background: var(--panel-0); border:1px solid var(--border);
  box-shadow: var(--shadow-s);
}

/* === Timeline bits near slider === */
.timeline{ display:flex; align-items:center; gap:.6rem; margin-top:.2rem; }
.timeline label{ font-size:.8rem; color: var(--ink-2); }

/* ============ Responsive ============ */
@media (max-width:768px){
  .full-map-popover{
    min-width:120px; max-width:160px;
    padding:.35rem .45rem; font-size:.7rem; line-height:1.1; border-radius:7px;
  }
  .full-map-popover .title{ font-size:.75rem; }
  .full-map-popover .subtitle{ font-size:.65rem; }

  .writer-explainer{
    top:50px; left:12px; padding:.25rem .45rem; font-size:.72rem; border-radius:8px;
  }

  .writer-strip{ padding:.3rem .5rem; gap:.5rem; }
  .writer-name{ font-size:.62rem; padding:.12rem .35rem; }
}

@media (max-width:900px){
  .writer-filters{
    padding:.45rem .55rem; gap:.4rem; border-radius:10px;
  }
  .writer-filters .chip-group{ gap:.35rem; }
  .chip{ padding:.22rem .5rem; font-size:.76rem; white-space:nowrap; }
  .timeline{ gap:.5rem; }
  .timeline label{ font-size:.75rem; }
  #birthSlider{ width:160px; }
}
@media (max-width:600px){
  .map-info-panel{
    top:200px; width:min(260px,85vw);
    font-size:.8rem; padding:.6rem .7rem; border-radius:10px;
  }
  .map-info-panel .map-info-header{ font-size:.85rem; }
  .map-info-panel p,
  .map-info-panel li,
  .map-info-panel span{ font-size:.8rem; line-height:1.3; }

  .writer-filters{
    padding:.4rem .5rem; gap:.35rem;
    background: color-mix(in srgb, var(--panel-0) 80%, transparent); /* was rgba(255,255,255,.8) */
    box-shadow: var(--shadow-m);                                      /* was 0 6px 16px */
  }
  .chip{ padding:.18rem .45rem; font-size:.7rem; }
  .timeline label{ font-size:.7rem; }
  #birthSlider{ width:135px; }

  .writer-full-map{ padding-bottom:calc(88px + env(safe-area-inset-bottom)); }
  .svg-container svg{ transform:translateY(-8px) scale(1.06); transform-origin:center; }
}
@media (max-width:420px){
  .writer-filters{ padding:.36rem .45rem; border-radius:9px; }
  .chip{ padding:.16rem .4rem; font-size:.68rem; }
  #birthSlider{ width:120px; }
}
@media (max-width:380px){
  .svg-container svg{ transform:translateY(-6px) scale(1.05); }
}

/* === Mobile strip sizing (avoid squish) === */
@media (max-width:600px){
  :root{
    --cards-per-screen:4;
    --strip-pad-x:14px;
    --gap-x:10px;
  }
  .writer-strip{
    padding:.4rem var(--strip-pad-x);
    gap:var(--gap-x);
    scroll-snap-type:x proximity;
  }
  .writer-card{
    width:calc((100vw - (var(--strip-pad-x)*2) - (var(--gap-x)*(var(--cards-per-screen) - 1))) / var(--cards-per-screen));
    min-width:68px;
    gap:.3rem;
    scroll-snap-align:center;
  }
  .writer-card img{ width:40px; height:40px; }
  .writer-name{
    font-size:.68rem; padding:.14rem .38rem; max-width:90%;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
}
@media (max-width:380px){
  :root{ --cards-per-screen:3; }
  .writer-card img{ width:40px; height:40px; }
  .writer-name{ font-size:.62rem; }
}