@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Literata:opsz,wght@7..72,500;7..72,700&display=swap");

:root{
  --bg:#fffdf8;
  --bg-soft:#fff6e8;
  --bg-elev:#ffffff;
  --text:#1f2430;
  --muted:#5f6473;
  --border:#f0d9b5;
  --link:#0a74da;
  --accent:#ef476f;
  --accent-2:#ff9f1c;
  --accent-3:#2ec4b6;
  --shadow:0 14px 36px rgba(41,38,70,.12);
  --radius:18px;
  --content:1040px;
  --font:"Space Grotesk", "Avenir Next", Avenir, "Segoe UI", sans-serif;
  --font-head:"Literata", "Iowan Old Style", "Palatino Linotype", serif;
  --mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --surface-grad:linear-gradient(160deg, color-mix(in srgb, var(--accent) 7%, transparent), color-mix(in srgb, var(--accent-2) 6%, transparent) 40%, color-mix(in srgb, var(--accent-3) 7%, transparent));
  --map-height:205px;
}

html[data-theme="dark"]{
  --bg:#101218;
  --bg-soft:#171b24;
  --bg-elev:#1b2230;
  --text:#edf2f7;
  --muted:#b9c4d3;
  --border:#2d3648;
  --link:#8cc8ff;
  --accent:#ff6f91;
  --accent-2:#ffbf69;
  --accent-3:#54d8cb;
  --shadow:0 18px 40px rgba(0,0,0,.45);
  --surface-grad:linear-gradient(160deg, color-mix(in srgb, var(--accent) 11%, transparent), color-mix(in srgb, var(--accent-2) 9%, transparent) 35%, color-mix(in srgb, var(--accent-3) 10%, transparent));
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--font);
  background:
    radial-gradient(70rem 28rem at 5% -15%, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 65%),
    radial-gradient(42rem 22rem at 98% 0%, color-mix(in srgb, var(--accent-3) 15%, transparent), transparent 72%),
    var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

.container{
  width:min(var(--content), calc(100% - 40px));
  margin-inline:auto;
}

.stack-xl{display:grid;gap:34px}

.site-header{
  position:sticky;
  top:0;
  z-index:20;
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:16px;
  padding:14px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  color:inherit;
}
.brand:hover{text-decoration:none}
.brand-name{
  font-size:1rem;
  font-weight:700;
  letter-spacing:.03em;
}

.nav{
  display:flex;
  align-items:center;
  gap:8px;
  margin-left:auto;
}
.nav a{
  color:inherit;
  font-weight:600;
  font-size:.9rem;
  opacity:.92;
  padding:.5rem .82rem;
  border-radius:999px;
  transition:background .22s ease, color .22s ease, opacity .22s ease;
}
.nav a:hover{
  opacity:1;
  text-decoration:none;
  background:color-mix(in srgb, var(--accent-3) 16%, transparent);
}

.header-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.nav-toggle{
  display:none;
  border:1px solid var(--border);
  background:var(--bg-elev);
  border-radius:12px;
  padding:10px;
  box-shadow:var(--shadow);
}
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:var(--text);
  margin:4px 0;
  border-radius:2px;
  opacity:.85;
}

main{padding:34px 0 56px}

.hero{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:26px;
  align-items:start;
}

.profile-card,
.card,
.table,
.map-section,
.pdf-frame{
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
  background:var(--surface-grad), var(--bg-elev);
}

.profile-card{overflow:hidden}

.profile-photo{
  width:100%;
  height:340px;
  object-fit:cover;
  display:block;
  background:#ddd;
}

.profile-body{padding:18px}

.profile-tagline{
  margin:6px 0 0;
  color:var(--muted);
  font-size:.92rem;
}

.icon-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

.icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:14px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--bg) 90%, var(--accent) 10%);
  box-shadow:0 8px 18px rgba(0,0,0,.08);
  transition:transform .2s ease, box-shadow .2s ease;
}

.icon-btn svg{
  width:18px;
  height:18px;
  fill:currentColor;
  opacity:.92;
}

.icon-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 22px rgba(0,0,0,.16);
  text-decoration:none;
}

.content{padding-top:4px}

h1,
h2,
h3,
.page-title{
  font-family:var(--font-head);
  letter-spacing:-.01em;
  margin:0;
}

h1{
  font-size:clamp(2rem, 4.5vw, 2.65rem);
  line-height:1.2;
  margin-bottom:12px;
}

h3{font-size:1.12rem}

.prose{max-width:76ch}
.prose p,
.prose li{color:var(--text)}
.prose p{margin:10px 0}
.prose ul,
.prose ol{padding-left:18px}
.prose code{
  font-family:var(--mono);
  font-size:.95em;
  padding:.15em .35em;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg-soft);
}

hr.sep{
  border:none;
  border-top:1px solid var(--border);
  margin:22px 0;
}

.btn-row{
  margin-top:1.2rem;
  display:flex;
  gap:1.4rem;
  flex-wrap:wrap;
}

.btn{
  font-size:.95rem;
  font-weight:600;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:999px;
  padding:.45rem .8rem;
  color:var(--text);
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}

.btn:hover{
  border-color:var(--border);
  background:color-mix(in srgb, var(--accent-2) 14%, transparent);
  text-decoration:none;
  transform:translateY(-1px);
}

.page-title{
  margin:0 0 8px;
  font-size:clamp(1.55rem, 3.2vw, 2rem);
}

.page-subtitle{
  margin:0 0 18px;
  color:var(--muted);
  max-width:78ch;
}

.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
}

.table th,
.table td{
  padding:12px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:top;
}

.table th{
  font-size:.8rem;
  color:var(--muted);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
}

.table tr:last-child td{border-bottom:none}

.map-section{
  padding:14px;
  max-width:min(74%, 840px);
  margin-inline:auto;
}

.map-head{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.map-stats{
  border:1px solid var(--border);
  border-radius:14px;
  padding:.5rem .7rem;
  background:color-mix(in srgb, var(--bg) 75%, var(--accent-3) 25%);
  min-width:165px;
}

.map-stats p{margin:0}

#visitorCount{
  font-size:1.2rem;
  font-family:var(--font-head);
}

.world-map{
  margin:14px auto 0;
  width:100%;
  height:var(--map-height);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:color-mix(in srgb, var(--bg) 82%, var(--accent-3) 18%);
}

.leaflet-container{
  font-family:var(--font);
}

.custom-marker{
  width:11px;
  height:11px;
  border-radius:999px;
  background:radial-gradient(circle at 30% 30%, #fff4ed 0 26%, var(--accent) 27% 100%);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent), 0 0 0 9px color-mix(in srgb, var(--accent) 14%, transparent);
}

.site-footer{
  border-top:1px solid var(--border);
  padding:20px 0;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.muted{
  color:var(--muted);
  font-size:.84rem;
}

.footer-links a{
  color:var(--muted);
  margin-left:12px;
  font-weight:600;
  font-size:.84rem;
}

.footer-links a:hover{
  color:var(--text);
  text-decoration:none;
}

.theme-toggle{
  position:static;
  width:38px;
  height:38px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--bg-elev);
  box-shadow:var(--shadow);
  display:grid;
  place-items:center;
  cursor:pointer;
  color:var(--text);
  transition:transform .2s ease;
}

.theme-toggle:hover{transform:translateY(-1px)}

.theme-icon{
  width:20px;
  height:20px;
  display:block;
  background:currentColor;
  mask:var(--theme-mask) center / contain no-repeat;
  -webkit-mask:var(--theme-mask) center / contain no-repeat;
  opacity:.9;
}

:root{
  --mask-sun:radial-gradient(circle at 50% 50%, #000 0 38%, transparent 40%),
             conic-gradient(from 0deg, #000 0 10deg, transparent 10deg 20deg, #000 20deg 30deg, transparent 30deg 40deg, #000 40deg 50deg, transparent 50deg 60deg, #000 60deg 70deg, transparent 70deg 80deg, #000 80deg 90deg, transparent 90deg 100deg, #000 100deg 110deg, transparent 110deg 120deg, #000 120deg 130deg, transparent 130deg 140deg, #000 140deg 150deg, transparent 150deg 160deg, #000 160deg 170deg, transparent 170deg 180deg, #000 180deg 190deg, transparent 190deg 200deg, #000 200deg 210deg, transparent 210deg 220deg, #000 220deg 230deg, transparent 230deg 240deg, #000 240deg 250deg, transparent 250deg 260deg, #000 260deg 270deg, transparent 270deg 280deg, #000 280deg 290deg, transparent 290deg 300deg, #000 300deg 310deg, transparent 310deg 320deg, #000 320deg 330deg, transparent 330deg 340deg, #000 340deg 350deg, transparent 350deg 360deg);
  --mask-moon:radial-gradient(circle at 40% 45%, #000 0 52%, transparent 54%),
              radial-gradient(circle at 62% 45%, transparent 0 50%, #000 52% 100%);
  --theme-mask:var(--mask-moon);
}

html[data-theme="dark"]{--theme-mask:var(--mask-sun)}

.pdf-frame{
  width:100%;
  height:78vh;
}

.reveal{animation:fade-up .7s ease both}

@keyframes fade-up{
  from{opacity:0;transform:translateY(16px)}
  to{opacity:1;transform:translateY(0)}
}

@media (max-width:900px){
  .nav{display:none}

  .nav-toggle{display:block}

  .nav.open{
    display:flex;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    background:var(--bg-elev);
    border:1px solid var(--border);
    border-radius:0 0 16px 16px;
    border-top:none;
    padding:12px;
    box-shadow:var(--shadow);
  }

  .nav.open a{
    width:100%;
    border-radius:10px;
  }

  .header-inner{position:relative}

  .hero{grid-template-columns:1fr}

  .content{padding-top:0}

  :root{--map-height:200px}

  .map-section{
    max-width:min(86%, 760px);
  }
}

@media (max-width:700px){
  .container{width:min(var(--content), calc(100% - 26px))}

  .profile-photo{height:300px}

  .map-section{padding:14px}

  .world-map{width:100%}

  .map-section{
    max-width:100%;
  }
}