:root{
      --px: 50px;
      --sprite: 10px;
      --bg-sky:#a8dbff;
      --bg-ocean-light:#41c0ff;
      --bg-ocean:#0f7ae6;
      --bg-ocean-dark:#06338f;
      --bg-sand1:#f2d9a0;
      --bg-sand2:#d8b173;
      --bg-sand3:#b07a45;
      --bg-sand4:#7c4d2b;
      --card:#5fa9c6;
      --card-dark:#3b6f85;
      --ink:#0e1a22;
      --ink-soft:#1f3a49;
      --white:#ffffff;
      --rail:75px;
      --rig-height: 240px;
      --waterline-offset: 42px;
      --sky-height: 30vh;
      --ocean-height: 26vh;
      --page-padding-top: 24px;
      --formation-top: calc(var(--sky-height) + var(--ocean-height));
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: "Courier New", ui-monospace, Menlo, Consolas, monospace;
      color:var(--ink);
      background: var(--bg-sky);
      image-rendering: pixelated;
    }

    .sky,
    .ocean,
    .formation{
      position:fixed;
      left:0;
      right:0;
      pointer-events:none;
    }

    .sky{
      top:0;
      height:var(--sky-height);
      z-index:-4;
      background:
        linear-gradient(180deg, #fdfcff 0%, var(--bg-sky) 65%, #86cfff 100%);
    }

    .sky::before,
    .sky::after{
      content:"";
      position:absolute;
      display:block;
      image-rendering: pixelated;
    }

    .sky::before{
      top:calc(var(--sprite) * 2);
      left:calc(var(--sprite) * 2);
      width:var(--sprite);
      height:var(--sprite);
      background:rgba(255,255,255,0.95);
      box-shadow:
        calc(var(--sprite) * 1) 0 rgba(255,255,255,0.95),
        calc(var(--sprite) * -1) calc(var(--sprite) * 1) rgba(255,255,255,0.95),
        calc(var(--sprite) * 0) calc(var(--sprite) * 1) rgba(255,255,255,0.95),
        calc(var(--sprite) * 1) calc(var(--sprite) * 1) rgba(255,255,255,0.95),
        calc(var(--sprite) * 2) calc(var(--sprite) * 1) rgba(255,255,255,0.95),
        calc(var(--sprite) * 0) calc(var(--sprite) * 2) rgba(214,240,255,0.9),
        calc(var(--sprite) * 1) calc(var(--sprite) * 2) rgba(214,240,255,0.9),
        calc(var(--sprite) * 2) calc(var(--sprite) * 2) rgba(214,240,255,0.9),
        calc(var(--sprite) * 6) calc(var(--sprite) * -1) rgba(255,255,255,0.95),
        calc(var(--sprite) * 7) calc(var(--sprite) * -1) rgba(255,255,255,0.95),
        calc(var(--sprite) * 5) calc(var(--sprite) * 0) rgba(255,255,255,0.95),
        calc(var(--sprite) * 6) calc(var(--sprite) * 0) rgba(255,255,255,0.95),
        calc(var(--sprite) * 7) calc(var(--sprite) * 0) rgba(255,255,255,0.95),
        calc(var(--sprite) * 8) calc(var(--sprite) * 0) rgba(255,255,255,0.95),
        calc(var(--sprite) * 5) calc(var(--sprite) * 1) rgba(214,240,255,0.9),
        calc(var(--sprite) * 6) calc(var(--sprite) * 1) rgba(255,255,255,0.95),
        calc(var(--sprite) * 7) calc(var(--sprite) * 1) rgba(214,240,255,0.9),
        calc(var(--sprite) * 6) calc(var(--sprite) * 2) rgba(214,240,255,0.9);
    }

    .sky::after{
      top:calc(var(--sprite) * 1.5);
      right:calc(var(--sprite) * 3);
      width:var(--sprite);
      height:var(--sprite);
      background:#ffe066;
      box-shadow:
        calc(var(--sprite) * 1) 0 #ffe066,
        calc(var(--sprite) * -1) calc(var(--sprite) * 1) #ffe066,
        calc(var(--sprite) * 0) calc(var(--sprite) * 1) #ffd24a,
        calc(var(--sprite) * 1) calc(var(--sprite) * 1) #ffe066,
        calc(var(--sprite) * 2) calc(var(--sprite) * 1) #ffd24a,
        calc(var(--sprite) * -1) calc(var(--sprite) * 2) #ffd24a,
        calc(var(--sprite) * 0) calc(var(--sprite) * 2) #ffe066,
        calc(var(--sprite) * 1) calc(var(--sprite) * 2) #ffd24a,
        calc(var(--sprite) * 2) calc(var(--sprite) * 2) #ffe066,
        calc(var(--sprite) * 0) calc(var(--sprite) * 3) #ffd24a,
        calc(var(--sprite) * 1) calc(var(--sprite) * 3) #ffe066;
      filter: drop-shadow(0 calc(var(--sprite) * 0.2) 0 rgba(255,193,37,0.5));
    }

    .ocean{
      top:var(--sky-height);
      height:var(--ocean-height);
      z-index:-3;
      overflow:hidden;
      background:
        linear-gradient(
          to bottom,
          #41c0ff 0%,
          #2497f0 35%,
          #1175e6 68%,
          #0a4fb9 85%,
          #06338f 100%
        );
    }

    .ocean::before,
    .ocean::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
    }

    .ocean::before{
      top:0;
      bottom:auto;
      height:calc(var(--sprite) * 00.5);
      background:
        repeating-linear-gradient(
          to right,
          rgba(255,255,255,0.85) 0 calc(var(--sprite) * 0.3),
          transparent calc(var(--sprite) * 0.3) calc(var(--sprite) * 0.6)
        ),
        repeating-linear-gradient(
          to bottom,
          rgba(255,255,255,0.55) 0 calc(var(--sprite) * 0.45),
          transparent calc(var(--sprite) * 0.45) calc(var(--sprite) * 0.9)
        );
      opacity:0.5;
      mix-blend-mode: screen;
    }

    .ocean::after{
      background-image:
        repeating-linear-gradient(
          to bottom,
          rgba(255,255,255,0.12) 0 calc(var(--sprite) * 0.35),
          transparent calc(var(--sprite) * 0.35) calc(var(--sprite) * 0.7)
        ),
        repeating-conic-gradient(
          from 45deg,
          rgba(255,255,255,0.1) 0% 25%,
          transparent 25% 50%
        );
      background-size:
        100% 100%,
        calc(var(--sprite) * 0.8) calc(var(--sprite) * 0.8);
      opacity:0.25;
      mix-blend-mode: screen;
    }

    .formation{
      top:var(--formation-top);
      bottom:0;
      z-index:-2;
      background:
        linear-gradient(
          to bottom,
          var(--bg-sand1) 0%,
          var(--bg-sand1) 18%,
          #dfc282 18%,
          #dfc282 34%,
          var(--bg-sand2) 34%,
          var(--bg-sand2) 52%,
          var(--bg-sand3) 52%,
          var(--bg-sand3) 72%,
          var(--bg-sand4) 72%,
          var(--bg-sand4) 100%
        );
      overflow:hidden;
    }

    .formation::before,
    .formation::after{
      content:"";
      position:absolute;
      inset:0;
      pointer-events:none;
    }

    .formation::before{
      background-image: repeating-linear-gradient(
        to bottom,
        rgba(0,0,0,0.1) 0 calc(var(--sprite) * 0.5),
        transparent calc(var(--sprite) * 0.5) calc(var(--sprite) * 1)
      );
      opacity:0.2;
      mix-blend-mode: plus-darker;
    }

    .formation::after{
      background-image: repeating-conic-gradient(
        rgba(56,31,14,0.18) 0% 25%,
        transparent 25% 50%
      );
      background-size: calc(var(--sprite) * 1) calc(var(--sprite) * 1);
      opacity:0.2;
      mix-blend-mode:plus-darker;
    }


    .page{
      max-width:1500px;
      margin:0px 100px 64px ;  /* small custom left margin */
      padding:var(--page-padding-top) 16px 64px;
      display:grid;
      grid-template-columns: var(--rail) 1fr;
      gap:100px;
    }

    .drill-rail{
      position:relative;
      min-height:80vh;
      padding-top:max(0px, calc(var(--sky-height) - var(--rig-height) + var(--waterline-offset)));
    }
    .rig-placeholder{
      position:sticky;
      top:max(0px, calc(var(--page-padding-top) + var(--sky-height) - var(--rig-height) + var(--waterline-offset)));
      width:100%;
      height:var(--rig-height);
      display:flex;
      align-items:flex-end;
      justify-content:center;
      margin-bottom:16px;
      background:none;
      border:none;
      box-shadow:none;
      padding:0;
      image-rendering:pixelated;
    }
    .rig-placeholder img{
      height:100%;
      width:auto;
      display:block;
      image-rendering:pixelated;
      filter: drop-shadow(3px calc(var(--sprite) * 0.2) 0 rgba(0,0,0,0.35));
    }

    main{display:block}

   /* Layout */
.hero{
  display:grid;
  grid-template-columns: 128px 1fr;
  gap:12px;
  align-items:center;
}

/* Avatar */
.avatar{
  width:128px; height:128px; border-radius:50%;
  border:6px solid var(--ink-soft);
  box-shadow: 0 5px 0 var(--ink-soft);
  background: radial-gradient(circle at 35% 35%, #0b3a4d 0 40%, #102a36 41% 100%);
  overflow:hidden;
  display:flex;
}
.avatar img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
}

/* Card */
.namecard{
  background: var(--card); color:var(--white);
  padding:14px 16px;
  border:6px solid var(--ink-soft);
  box-shadow: 0 8px 0 var(--ink-soft);
  border-radius:18px;

  display:grid;
  row-gap:6px;
  max-width: 820px;   /* prevents super long lines */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* Type */
body h1, h2, h3 {
  font-family: 'Press Start 2P', sans-serif;
  letter-spacing:1px;
  line-height: 1.5; 
}

.namecard h1{
  margin:0;
  font-size:26px; line-height:1.15; 
}
.namecard h2{
  margin:0;
  font-size:14px; line-height:1.2; opacity:.95; font-weight:700;
}
.namecard p{
  margin:2px 0 0 0;
  font-size:14px; line-height:1.35; opacity:.95;
}

/* Social icons row */
.hero .social-links{
  display:flex; gap:14px; align-items:center; margin-top:6px;
}
.hero .social-links a{
  background:none; display:inline-flex; color:#fff; text-decoration:none;
}
.hero .social-links svg{
  width:28px; height:28px; fill:currentColor;
  opacity:.9; transition: transform .2s ease, filter .2s ease, opacity .2s ease;
}
.hero .social-links svg:hover{
  transform: scale(1.08);
  opacity:1;
  filter: drop-shadow(0 0 6px #073d53);
}

/* Kill the old link pill style inside the card */
.namecard a{ all: unset; }
.namecard a{ color:#fff; cursor:pointer; }

.about{
  margin-top:24px;
  background: rgba(255,255,255,.2);
  backdrop-filter: blur(2px);
  padding:18px 20px; border:6px solid var(--ink-soft);
  box-shadow: 0 10px 0 var(--ink-soft);
  border-radius:20px;
}
.about h2{margin:0 0 10px; font-size:22px}
.about p{margin:0}


/* Map CSS Styling */ 

.about-map {
  max-width: 980px;
  margin: 0;
}

.map-frame {
  background: var(--card);
  border: 6px solid var(--ink-soft);
  border-radius: 16px;
  box-shadow: 0 10px 0 var(--ink-soft);
  padding: 10px;
  position: relative;
  overflow: hidden;
}

/* Subtle pixel grid overlay */
.map-frame::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 10px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 1px, transparent 1px 10px);
  mix-blend-mode: multiply;
  opacity: .6;
}

/* Tooltip container */


.svgMap-tooltip {
  z-index: 9999 !important;
  background: #111 !important;
  color: #fff !important;
  border: 4px solid #333 !important;
  border-radius: 10px !important;
  box-shadow: 0 6px 0 #0008 !important;
  font-family: "Press Start 2P", monospace !important;
  font-size: 9px !important;            /* smaller text */
  line-height: 1.2 !important;
  white-space: normal !important;
  word-break: break-all;
  max-width: min(720px, 90vw) !important;          /* wider tooltip */
  padding: 5px 5px !important;        /* tighter padding */
}

/* Title */
.svgMap-tooltip .svgMap-tooltip-title {
  color: #fff !important;
  font-size: 11px !important;           /* slightly smaller */
  margin-bottom: 6px !important;
  text-align: center;
}

/* Table layout and spacing */
.svgMap-tooltip .svgMap-tooltip-content table {
  table-layout: auto;
  border-collapse: separate;
  border-spacing: 0 3px;
  font-size: 9px !important;            /* match tooltip text size */
}

/* Label column */
.svgMap-tooltip .svgMap-tooltip-content th,
.svgMap-tooltip .svgMap-tooltip-content td.svgMap-tooltip-data-key {
  color: #BFD8FF !important;
  font-weight: 400;
  padding-right: 8px;
  vertical-align: top;
  white-space: nowrap;
  word-break: break-all;
}

/* Value column */
.svgMap-tooltip .svgMap-tooltip-content td,
.svgMap-tooltip .svgMap-tooltip-content td * {
  color: #fff !important;
  vertical-align: top;
}

/* Hide empty rows */
.svgMap-tooltip .svgMap-tooltip-content tr:has(td:empty) {
  display: none !important;
}




/* Scope to just the world map area */
#worldMap .svgMap-map-wrapper {
  background: linear-gradient(180deg, var(--bg-ocean-light) 0%, var(--bg-ocean) 60%, var(--bg-ocean-dark) 100%);
  image-rendering: pixelated;
}

#worldMap .svgMap-country:hover { filter: drop-shadow(5px 5px 0 rgba(0,0,0,.35)); }

/* Blocky land with crisp edges */
#worldMap .svgMap-country {
  /* fill: var(--bg-sand2) !important;         /* base land */
  stroke: var(--bg-sand3) !important;       /* 8-bit outline */
  stroke-width: 1.5 !important;
  vector-effect: non-scaling-stroke;
  shape-rendering: crispEdges;
  transition: none !important;               /* snappy retro */
}

/* Hover/focus pop */
#worldMap .svgMap-country:hover,
#worldMap .svgMap-country:focus {
  fill: var(--land-hover, #ffe08a) !important;
  stroke: var(--accent-deep, #b0851d) !important;
  outline: none;
}

.projects{margin-top:24px}
.projects h2{font-size:22px; margin:0 0 12px}
.grid{
  display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:18px;
}
.card{
  background: var(--card); color:var(--white);
  border:6px solid var(--ink-soft); border-radius:18px;
  box-shadow: 0 10px 0 var(--ink-soft);
  padding:14px; text-decoration:none; display:block;
  transition: transform .05s ease-in-out;
}
.card:hover{ transform: translateY(-3px)}
.card h3{margin:0 0 6px; font-size:14px}
.card p{margin:0; font-size:12px; opacity:.95}

footer{margin-top:36px; font-size:12px; opacity:.8}

@media (max-width: 820px){
  .page{grid-template-columns: 1fr}
  .drill-rail{display:none}
  .hero{grid-template-columns: 100px 1fr}
  .avatar{width:100px; height:100px}
}