/* ===== THE CHOSEN LAND — page + map + modal styles ===== */
:root{ --page:#d7d3ca; --pageInk:#33302a; }
*{ box-sizing:border-box; }
html,body{ margin:0; }
body{
  background:#d7d3ca;
  background-image:radial-gradient(circle at 30% 0%, #e0dcd2, #cfcabf 70%);
  color:var(--pageInk);
  font-family:'Archivo',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  padding:34px 30px 80px;
}
.cl-head{ max-width:1180px; margin:0 auto 26px; }
.cl-kicker{ font-size:12px; letter-spacing:.32em; text-transform:uppercase; opacity:.55; margin:0 0 8px; }
.cl-head h1{ font-family:'Spectral',serif; font-weight:700; font-size:44px; margin:0 0 10px; letter-spacing:-.01em; }
.cl-head p{ margin:0; font-size:15px; max-width:760px; line-height:1.6; opacity:.78; }
.cl-legend-hint{ display:flex; flex-wrap:wrap; gap:18px; margin-top:16px; font-size:13px; opacity:.7; }
.cl-legend-hint span{ display:flex; align-items:center; gap:7px; }
.cl-legend-hint b{ font-weight:700; }

.cl-board{ display:flex; gap:30px; align-items:flex-start; overflow-x:auto; padding:6px 4px 26px; scroll-snap-type:x proximity; }
.cl-direction{ flex:0 0 auto; width:560px; scroll-snap-align:start; }
.cl-dir-head{ margin:0 4px 12px; }
.cl-dir-head .n{ display:flex; align-items:baseline; gap:12px; }
.cl-dir-head h2{ font-family:'Spectral',serif; font-size:23px; margin:0; font-weight:600; }
.cl-dir-head .tag{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; opacity:.45; }
.cl-dir-head p{ margin:5px 0 0; font-size:13px; line-height:1.5; opacity:.68; max-width:520px; }
.cl-card{ background:#fff; border-radius:14px; padding:12px; box-shadow:0 18px 44px -22px rgba(40,30,15,.55), 0 2px 6px rgba(40,30,15,.08); }

/* ---- map ---- */
.cl-map{ position:relative; width:100%; border-radius:8px; overflow:hidden; background:var(--sea); }
.cl-svg{ display:block; width:100%; height:auto; }
.cl-sea{ fill:var(--sea); }
.cl-emp{
  stroke:var(--border); stroke-width:var(--borderW); stroke-linejoin:round;
  cursor:pointer; transition:filter .15s, stroke-width .12s, opacity .18s;
}
.cl-emp.hl{ filter:brightness(1.08) saturate(1.08); stroke:var(--hover); stroke-width:calc(var(--borderW)*2.3); }
.cl-emp.sel{ stroke:var(--select); stroke-width:calc(var(--borderW)*2.8); filter:brightness(1.05); }
.cl-emp.dim{ opacity:.28; filter:saturate(.5); }

.cl-labels .cl-label{
  font-family:'Archivo', system-ui, sans-serif; font-size:calc(28px * var(--labelScale, 1));
  text-anchor:middle; pointer-events:none; stroke-linejoin:round;
  stroke-width:3px;
}
.cl-map.labels-on .cl-label{ opacity:1; }

.cl-tip{
  position:absolute; pointer-events:none; padding:3px 10px; border-radius:5px;
  font-family:var(--font); font-size:13px; font-weight:600; white-space:nowrap;
  background:var(--ink); color:var(--panel); opacity:0; transform:translate(-50%,-155%);
  transition:opacity .12s; box-shadow:0 5px 16px rgba(0,0,0,.3); z-index:5;
}
.cl-tip.show{ opacity:1; }

/* texture treatments */
.cl-map[data-texture="paper"]::after{
  content:""; position:absolute; inset:0; pointer-events:none; mix-blend-mode:multiply;
  background:radial-gradient(ellipse at 50% 42%, transparent 56%, rgba(92,68,32,.16));
}
.cl-map[data-texture="engrave"]{ box-shadow:inset 0 0 0 3px var(--seaEdge), inset 0 0 0 4.5px var(--border); }
.cl-map[data-texture="engrave"]::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%, transparent 48%, rgba(0,0,0,.42));
}

/* chrome */
.cl-chrome{ position:absolute; inset:0; pointer-events:none; }
.cl-toggle{
  position:absolute; top:12px; right:12px; pointer-events:auto; cursor:pointer;
  font-family:var(--font); font-size:12px; font-weight:600; letter-spacing:.02em;
  padding:6px 12px; border-radius:20px; border:1px solid color-mix(in srgb, var(--border) 45%, transparent);
  background:var(--panel); color:var(--panelInk); box-shadow:0 3px 10px rgba(0,0,0,.18);
}
.cl-toggle[aria-pressed="true"]{ background:var(--ink); color:var(--panel); }
.cl-legend{
  position:absolute; left:14px; bottom:14px; pointer-events:auto;
  display:flex; flex-direction:column; gap:1px; padding:8px 10px;
  background:var(--panel); border-radius:9px; border:1px solid color-mix(in srgb, var(--border) 30%, transparent);
  box-shadow:0 6px 18px rgba(0,0,0,.2); font-family:var(--font);
}
.cl-leg-item{
  display:flex; align-items:center; gap:8px; background:none; border:0; cursor:pointer;
  padding:3px 4px; border-radius:5px; color:var(--panelInk); font:inherit; font-size:12px;
}
.cl-leg-item:hover{ background:rgba(0,0,0,.07); }
.cl-sw{ width:13px; height:13px; border-radius:3px; flex:none; border:1px solid rgba(0,0,0,.28); }

/* loading */
.cl-loading{ display:flex; align-items:center; justify-content:center; height:430px; color:#7a7468; font-size:14px; }

/* ---- modal ---- */
.cl-modal-overlay{
  position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center;
  padding:24px; background:rgba(24,18,10,.52); backdrop-filter:blur(2px);
  opacity:0; pointer-events:none;
}
.cl-modal-overlay.open{ opacity:1; pointer-events:auto; }
.cl-modal{
  width:min(580px,95vw); max-height:88vh; overflow:auto; position:relative;
  background:var(--panel); color:var(--panelInk); border-radius:12px;
  box-shadow:0 36px 90px rgba(0,0,0,.5);
}
.cl-modal-overlay.open .cl-modal{ transform:none; }
.cl-modal[data-texture="engrave"]{ box-shadow:0 36px 90px rgba(0,0,0,.5), inset 0 0 0 1px var(--accent), inset 0 0 0 6px var(--panel), inset 0 0 0 7px color-mix(in srgb, var(--border) 60%, transparent); }
.cl-modal-band{ height:9px; width:100%; }
.cl-modal-body{ padding:28px 32px 32px; }
.cl-x{ position:absolute; top:8px; right:14px; background:none; border:0; font-size:28px; line-height:1; cursor:pointer; color:var(--panelInk); opacity:.5; }
.cl-x:hover{ opacity:.9; }
.cl-faction{ display:flex; align-items:center; gap:9px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; opacity:.82; }
.cl-dot{ width:10px; height:10px; border-radius:50%; }
.cl-emp{ /* note: also class on svg paths; modal heading uses h2.cl-emp */ }
h2.cl-emp{ font-family:var(--font); font-size:36px; margin:8px 0 3px; font-weight:700; letter-spacing:-.01em; stroke:none; }
.cl-cap{ font-size:14px; opacity:.72; margin-bottom:16px; }
.cl-blurb{ font-size:16px; line-height:1.62; margin:0; }
.cl-modal[data-texture="engrave"] .cl-blurb::first-letter{ font-size:2.9em; line-height:.8; float:left; padding:4px 8px 0 0; font-family:'Spectral',serif; color:var(--accent); }
.cl-cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:22px; }
.cl-col h3{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; opacity:.6; margin:0 0 9px; font-weight:700; }
.cl-cities{ list-style:none; margin:0; padding:0; }
.cl-cities li{ padding:5px 0; border-bottom:1px solid color-mix(in srgb, var(--panelInk) 14%, transparent); font-size:15px; }
.cl-cities li.cap{ font-weight:700; }
.cl-cities li em{ opacity:.5; font-style:normal; font-size:12px; letter-spacing:.04em; }
.cl-bloc-card{ padding:13px 15px; border-radius:9px; background:color-mix(in srgb, var(--accent) 16%, var(--panel)); border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.cl-bloc-name{ font-weight:700; font-size:15px; margin-bottom:4px; }
.cl-bloc-note{ font-size:13px; opacity:.78; line-height:1.45; }

/* =====================================================================
   SINGLE-VIEW (focused "Old Atlas" deliverable)
   ===================================================================== */
body.cl-single{
  background:#26211b;
  background-image:radial-gradient(ellipse at 50% 30%, #36302770, transparent 70%), radial-gradient(ellipse at 50% 120%, #1c1813, #26211b 60%);
  color:#e9dfca; padding:0; min-height:100vh;
}
.cl-stage{ min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:26px 24px 22px; gap:14px; }
.cl-atlas-head{ text-align:center; }
.cl-atlas-head .cl-kicker{ opacity:.6; color:#cdbf9e; margin:0 0 6px; }
.cl-atlas-head h1{
  font-family:'Spectral',serif; font-weight:700; font-size:clamp(30px,4.4vw,52px); margin:0;
  letter-spacing:.01em; color:#f1e7cf; text-shadow:0 2px 18px rgba(0,0,0,.4);
}
.cl-atlas-head .rule{ display:flex; align-items:center; justify-content:center; gap:12px; margin-top:10px; opacity:.5; }
.cl-atlas-head .rule::before, .cl-atlas-head .rule::after{ content:""; width:60px; height:1px; background:#cdbf9e; }
.cl-atlas-head .rule span{ font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:#cdbf9e; }

.cl-card-lg{
  background:linear-gradient(150deg, #f0e8d3, #e6dabc);
  padding:14px; border-radius:7px;
  border:1px solid #b7a67c;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.18) inset, 0 2px 0 rgba(0,0,0,.25);
}
.cl-single .cl-map{ width:auto; border-radius:4px; }
.cl-single .cl-svg{ display:block; height:min(66vh, 86vw); width:auto; max-width:84vw; }
.cl-foot{ margin:0; font-size:12.5px; letter-spacing:.02em; color:#bdb091; opacity:.85; text-align:center; }
.cl-foot b{ color:#e9dfca; font-weight:600; }

/* legend/toggle read better on the dark plate */
.cl-single .cl-legend{ background:#f3ecd9; }
.cl-single .cl-toggle{ background:#f3ecd9; }