/* Fonts: Cinzel, Cormorant SC, Cormorant Garamond italic via Google Fonts (see map.html). */

:root {
  --bg: #090806;
  --land: #1b1812;
  --coast: #c39a4e;
  --border: #8a6a32;
  --grid: #3a2e1a;
  --gold: #d6a85c;
  --gold-lt: #f0cd8c;
  --gold-dim: #a07d46;
  --sc: "Cormorant SC", "Cormorant Garamond", Palatino, serif;
  --it: "Cormorant Garamond", Palatino, serif;
  --display: "Cinzel", "Cormorant SC", serif;
  --inset: clamp(8px, 1.4vw, 14px);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--gold); overflow: hidden; }
body { font-family: var(--sc); -webkit-font-smoothing: antialiased; }

.stage { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
canvas.globe { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#map:active { cursor: grabbing; }

/* map layers (geography is drawn on canvas.globe; these remain for reference) */
.graticule { fill: none; stroke: var(--grid); stroke-width: .6; opacity: .55; vector-effect: non-scaling-stroke; }
.land { fill: var(--land); stroke: var(--coast); stroke-width: .7; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lakes { fill: var(--bg); stroke: var(--coast); stroke-width: .4; opacity: .9; vector-effect: non-scaling-stroke; }
.admin1 { fill: none; stroke: var(--border); stroke-width: .35; opacity: .5; vector-effect: non-scaling-stroke; }
.borders { fill: none; stroke: var(--border); stroke-width: .7; opacity: .9; vector-effect: non-scaling-stroke; }
.route { fill: none; stroke: #a8823f; stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; opacity: .5; vector-effect: non-scaling-stroke; }

/* dots (screen-space layer) */
.dot { cursor: pointer; }
.dot .halo { mix-blend-mode: screen; }
.dot .core { fill: #fff4d6; }
.dot .ring { fill: none; stroke: var(--gold-lt); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; animation: pulse 4.8s ease-out infinite; }
.dot .halo { transform-box: fill-box; transform-origin: center; animation: breathe 4.8s ease-in-out infinite; }
.dot:hover .core, .dot.is-active .core { fill: #fff; }
@keyframes pulse { 0% { transform: scale(.4); opacity: .75; } 70% { opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes breathe { 0%, 100% { opacity: .82; transform: scale(1); } 50% { opacity: 1; transform: scale(1.12); } }

.callout line, .callout polyline { fill: none; stroke: var(--gold-dim); stroke-width: 1; }
.callout .t { font-family: var(--sc); font-weight: 600; fill: var(--gold-lt); font-size: 21px; letter-spacing: .04em; paint-order: stroke; stroke: var(--bg); stroke-width: 4px; }
.callout .s { font-family: var(--it); font-style: italic; fill: var(--gold-dim); font-size: 15px; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.callout.home .t { fill: var(--gold); font-size: 17px; }

/* texture + vignette, like the printed reports */
.veil { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 62% 30% at 50% 0%, rgba(8,7,5,.94), rgba(8,7,5,.6) 55%, transparent 100%),
    radial-gradient(ellipse 62% 30% at 50% 100%, rgba(8,7,5,.94), rgba(8,7,5,.6) 55%, transparent 100%),
    radial-gradient(ellipse 120% 110% at 50% 50%, transparent 55%, rgba(0,0,0,.62) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .8 0 0 0 0 .65 0 0 0 0 .4 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.frame { position: absolute; inset: var(--inset); border: 2px solid var(--gold-dim); pointer-events: none; opacity: .85; }
.frame::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--gold-dim); opacity: .7; }

/* masthead */
.masthead, .report { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; }
.masthead { top: calc(var(--inset) + clamp(14px, 2.6vh, 26px)); }
.logo-row, .society, .kicker { display: flex; align-items: center; justify-content: center; gap: clamp(10px, 1.4vw, 18px); margin: 0; }
.logo { width: clamp(44px, 6.2vh, 64px); height: auto; filter: drop-shadow(0 0 14px rgba(214,168,92,.25)); }
.rule { display: block; height: 1px; width: clamp(40px, 12vw, 190px); background: linear-gradient(90deg, transparent, var(--gold-dim) 30%, var(--gold-dim) 70%, transparent); }
.logo-row .rule { width: clamp(50px, 16vw, 240px); }
.society { margin-top: clamp(10px, 1.8vh, 18px); font-weight: 500; font-size: clamp(17px, 2.3vw, 30px); letter-spacing: .24em; color: var(--gold); text-transform: uppercase; line-height: 1; }
.society .name { padding-left: .24em; white-space: nowrap; }

.report { bottom: calc(var(--inset) + clamp(18px, 3.4vh, 34px)); }
.kicker { font-weight: 600; font-size: clamp(15px, 1.7vw, 22px); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.kicker .rule { width: clamp(36px, 8vw, 120px); }
.headline { margin: clamp(6px, 1vh, 10px) 0 0; font-family: var(--display); font-weight: 600; font-size: clamp(25px, 4.6vw, 64px); letter-spacing: .07em; line-height: 1.05; color: var(--gold); text-transform: uppercase;
  background: linear-gradient(180deg, #f0cd8c 0%, #d6a85c 45%, #a07d46 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; filter: drop-shadow(0 2px 12px rgba(0,0,0,.6)); }
.count { margin: clamp(8px, 1.2vh, 12px) 0 0; font-family: var(--it); font-style: italic; font-size: clamp(14px, 1.3vw, 17px); color: var(--gold-dim); letter-spacing: .03em; }
.count b { font-family: var(--sc); font-style: normal; font-weight: 600; color: var(--gold); letter-spacing: .12em; }

/* compass */
.compass { position: absolute; width: clamp(64px, 8vw, 104px); left: calc(var(--inset) + clamp(18px, 3vw, 46px)); bottom: calc(var(--inset) + clamp(18px, 3.4vh, 40px)); pointer-events: none; overflow: visible; }
.compass text { font-family: var(--sc); font-size: 13px; fill: var(--gold-dim); text-anchor: middle; dominant-baseline: central; }

/* controls */
.controls { position: absolute; right: calc(var(--inset) + clamp(14px, 2.4vw, 38px)); bottom: calc(var(--inset) + clamp(18px, 3.4vh, 40px)); display: flex; flex-direction: column; gap: 6px; }
.controls button { width: 34px; height: 34px; border: 1px solid rgba(160,125,70,.7); background: rgba(9,8,6,.72); color: var(--gold); font: 500 20px/1 var(--sc); cursor: pointer; display: grid; place-items: center; padding: 0; transition: background .2s, color .2s, border-color .2s; }
.controls button:hover, .controls button:focus-visible { background: rgba(214,168,92,.12); color: var(--gold-lt); border-color: var(--gold); outline: none; }

/* tooltip */
.tip { position: absolute; left: 0; top: 0; pointer-events: none; padding: 7px 12px 8px; background: rgba(9,8,6,.92); border: 1px solid var(--gold-dim); color: var(--gold-lt); font-family: var(--sc); font-weight: 600; font-size: 16px; letter-spacing: .08em; white-space: nowrap; opacity: 0; transform: translate(-50%, calc(-100% - 16px)); transition: opacity .18s; }
.tip small { display: block; font-family: var(--it); font-style: italic; font-weight: 400; font-size: 14px; letter-spacing: .02em; color: var(--gold-dim); }
.tip.on { opacity: 1; }


.headline span { white-space: nowrap; }

/* home link on the seal; CTA + fine print under the report */
.logo-link { pointer-events: auto; display: inline-block; line-height: 0; border-radius: 50%; }
.logo-link:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; }
.join-cta { pointer-events: auto; display: inline-block; margin-top: clamp(10px, 1.6vh, 16px); padding: 9px 20px 10px; border: 1px solid var(--gold-dim); background: rgba(9,8,6,.72);
  font-family: var(--it); font-style: italic; font-weight: 500; font-size: clamp(16px, 1.4vw, 19px); letter-spacing: .02em; color: var(--gold-lt); text-decoration: none; transition: background .2s, border-color .2s, color .2s; }
.join-cta:hover, .join-cta:focus-visible { background: rgba(214,168,92,.12); border-color: var(--gold); color: #fff4d6; outline: none; }
.fine { margin: clamp(8px, 1.2vh, 12px) 0 0; font-family: var(--it); font-style: italic; font-size: 13px; color: rgba(160,125,70,.8); letter-spacing: .02em; }
@media (max-width: 720px) {
    .headline { font-size: clamp(26px, 8.4vw, 40px); letter-spacing: .06em; line-height: 1.08; }
  .headline span { display: block; }
  .report { bottom: calc(var(--inset) + 18px); padding: 0 calc(var(--inset) + 12px); }
  .join-cta { font-size: 16px; padding: 8px 16px 9px; }
  .fine { font-size: 12px; }
  .compass { width: 58px; bottom: auto; top: calc(var(--inset) + 150px); left: calc(var(--inset) + 16px); }
  .controls { bottom: calc(var(--inset) + 280px); right: calc(var(--inset) + 12px); }
  .callout .t { font-size: 15px; stroke-width: 3px; }
  .callout .s { font-size: 12px; }
  .callout.home .t { font-size: 13px; }
  .controls button { width: 32px; height: 32px; }
  .society { letter-spacing: .18em; }
}
@media (max-width: 380px) { .society { font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .dot .ring { animation: none; } .dot .halo { animation: none; } }