/* brand logo size */
.logo-img{
  height: 100px;  /* desktop size */
  width: auto;
  border-radius: 6px;
  object-fit: cover;
}

/* optional: shrink on small screens */
@media (max-width: 700px){
  .logo-img{ height: 64px; }
}


/* tighten spacing with the text */
.logo { gap: 8px; }

/* === Email popup (modal) === */
.modal{position:fixed; inset:0; display:none; z-index:9999;}
.modal.open{display:block;}
.modal__overlay{position:absolute; inset:0; background:rgba(0,0,0,.45); backdrop-filter:saturate(1.2) blur(2px);}
.modal__dialog{
  position:relative; margin:6vh auto; max-width:760px; background:#fff; color:#111827;
  border-radius:20px; border:1px solid #e5e7eb; overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  transform:translateY(12px) scale(.98); opacity:0; transition:all .25s ease;
}
.modal.open .modal__dialog{transform:translateY(0) scale(1); opacity:1;}
.modal__grid{display:grid; grid-template-columns:1.1fr .9fr; gap:0;}
.modal__body{padding:28px;}
.modal__title{font-size:32px; line-height:1.1; margin:0 0 12px 0; color:#111;}
.modal__text{color:#4b5563; margin:0 0 18px 0;}
.modal__img{min-height:100%; width:100%; object-fit:cover; display:block;}
.modal__close{
  position:absolute; top:10px; right:10px; border:0; background:#111; color:#fff;
  width:28px; height:28px; border-radius:6px; cursor:pointer; opacity:.9;
}
.modal__form input[type="email"]{
  width:100%; padding:12px 14px; border:1px solid #e5e7eb; border-radius:10px; outline:none;
}
.modal__form button{
  margin-top:10px; width:100%; padding:12px 14px; border-radius:12px; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--brand),var(--brand2)); color:#fff; font-weight:700;
}
.modal__note{font-size:12px; color:#6b7280; margin-top:8px;}
/* hide honeypot from humans */
.modal__hp{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;}
@media (max-width:820px){ .modal__grid{grid-template-columns:1fr;} .modal__img{display:none;} }

/* --- Nav buttons --- */
header nav{ display:flex; gap:12px; }
header nav a{ margin:0; opacity:1; } /* reset old nav a rules */

.nav-btn{
  position:relative;
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  background:#111;
  color:#fff;
  border:1px solid #1f2937;
  text-decoration:none;
  font-weight:600;
  line-height:1;
  overflow:hidden; /* <<< clip the shine inside the button */
  transition:
    background-size .28s ease,
    color .25s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    transform .18s ease;
  will-change:background-size;
}

.nav-btn::after{
  content:"";
  position:absolute;
  top:-50%; bottom:-50%;
  left:-80%;               /* start way off to the left */
  width:70%;               /* big enough to cover the whole button as it passes */
  border-radius:inherit;
  background:linear-gradient(75deg,
    rgba(255,255,255,0) 46%,
    rgba(255,255,255,.65) 50%,
    rgba(255,255,255,0) 54%
  );
  opacity:0;
  transform:translateX(-120%) rotate(10deg); /* initial position */
}

@keyframes sweep{
  to { transform:translateX(220%) rotate(10deg); } /* travel across and off the right edge */
}

/* keep your existing hover triggers */
.nav-btn:hover{
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  color:#111;
  border-color:transparent;
  box-shadow:0 10px 24px rgba(255,106,0,.35);
  transform:translateY(-1px);
}
.nav-btn:hover::after{ opacity:1; animation:sweep .8s ease; }


.nav-btn:focus-visible{
  outline:2px solid rgba(255,179,0,.6);
  outline-offset:2px;
}

/* Active (current section) state for Home / Projects / Contact */
.nav-btn.is-active{
  background: linear-gradient(135deg, #ffb300, #ffd766); /* golden */
  color: #111;                      /* dark text on gold */
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(255,179,0,.35);
}

/* Keep it golden on hover too (avoid switching to orange) */
.nav-btn.is-active:hover{
  background: linear-gradient(135deg, #ffb300, #ffd766);
  color: #111;
  border-color: transparent;
}


.logo-link{
  display:flex;
  gap:10px;
  align-items:center;
  color:inherit;
  text-decoration:none;
}
.logo-link:focus-visible{
  outline:2px solid rgba(255,179,0,.6);
  outline-offset:3px;
  border-radius:8px;
}
.logo-img{ cursor:pointer; }

.brand{ position:relative; display:inline-flex; align-items:center; gap:12px; }
.brand-link{ display:flex; align-items:center; gap:12px; text-decoration:none; color:#111; }
.logo-img{ height:100px; width:auto; border-radius:10px; display:block; }
@media (max-width:700px){ .logo-img{ height:64px; } }
.brand-name{ font-size:clamp(26px,3.4vw,44px); font-weight:900; line-height:1; }

.brand.style-ribbon .brand-link{
  position:relative; padding:10px 16px; border-radius:16px;
  background:rgba(255,255,255,.72); border:1px solid rgba(0,0,0,.06);
  backdrop-filter:blur(6px) saturate(120%);
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .25s ease;
}
.brand.style-ribbon .brand-link:hover{
  transform:translateY(-1px); box-shadow:0 16px 36px rgba(0,0,0,.10);
}
/* angled ribbon */
.brand.style-ribbon::before{
  content:""; position:absolute; inset:-12px -22px; z-index:-1; border-radius:22px;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  transform:rotate(-4deg);
  filter:drop-shadow(0 18px 26px rgba(255,106,0,.25));
}
.brand.style-neon .brand-link{ padding:4px 6px; border-radius:10px; }


.brand.style-neon .brand-name{ position:relative; }

/* === Universal slanted bar behind brand text (works with any style-*) === */
.brand .brand-name{
  position: relative;
  display: inline-block;
  z-index: 0;
  padding: 2px 8px;
}
.brand .brand-name::after{
  --slant: 20px;   /* change angle of the ends */
  --h: 60px;       /* bar height; try 14–18px for a thin underline */
  content:"";
  position:absolute; left:-12px; right:-12px; bottom:-10px;
  height: var(--h); z-index:-1;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  filter: drop-shadow(0 6px 14px rgba(255,106,0,.35));
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease, clip-path .28s ease, filter .28s ease;
}
.brand .brand-link:hover .brand-name::after{ transform: scaleX(1); }




/* --- RIBBON UPGRADE: shiny sweep + stronger glow --- */
.brand.style-ribbon .brand-link{
  overflow: hidden;                   /* lets the shine stay clipped */
}

/* diagonal specular sweep on hover */
.brand.style-ribbon .brand-link::after{
  content:"";
  position:absolute;
  top:-120%; bottom:-120%;
  left:-60%;                          /* start far left so it crosses fully */
  width:60%;
  border-radius:inherit;
  background:linear-gradient(75deg,
    rgba(255,255,255,0) 46%,
    rgba(255,255,255,.75) 50%,
    rgba(255,255,255,0) 54%);
  transform:translateX(-120%) rotate(12deg);
  opacity:0; pointer-events:none;
}
@keyframes ribSweep { to { transform:translateX(240%) rotate(12deg); } }
.brand.style-ribbon .brand-link:hover::after{
  opacity:1; animation:ribSweep .9s cubic-bezier(.25,.8,.25,1);
}

/* subtle top gloss on the white tile */
.brand.style-ribbon .brand-link::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(to bottom, rgba(255,255,255,.18), transparent 45%);
  pointer-events:none;
}

/* warmer “breathing” glow for the orange ribbon behind */
@keyframes ribbonGlow {
  from { filter:drop-shadow(0 16px 22px rgba(255,106,0,.22)); }
  to   { filter:drop-shadow(0 26px 36px rgba(255,106,0,.36)); }
}
.brand.style-ribbon::before{
  animation: ribbonGlow 4.5s ease-in-out infinite alternate;
}

/* small hover pop for text & logo */
.brand.style-ribbon:hover .brand-name{
  text-shadow:0 3px 0 rgba(0,0,0,.04), 0 0 16px rgba(255,140,0,.26);
}
.brand.style-ribbon .logo-img{
  transition: transform .18s ease, filter .25s ease;
}
.brand.style-ribbon:hover .logo-img{
  transform:translateY(-1px);
  filter:drop-shadow(0 12px 26px rgba(255,106,0,.45));
}
/* ===== NEON VARIANT (dark pill + glow) ===== */
.brand.style-neon{ position:relative; }

/* ambient orange haze around the block */
.brand.style-neon::before{
  content:"";
  position:absolute; inset:-14px -18px;
  z-index:-1; border-radius:24px;
  background: radial-gradient(220px 130px at 80px 60%,
              rgba(255,120,0,.45), transparent 70%);
  filter: blur(10px);
}

.brand.style-neon .brand-link{
  padding:10px 16px;        /* keep spacing */
  border-radius:16px;
  background:transparent;   /* no pill — lets the stripe show */
  border:0;
  box-shadow:none;
  color:#fff;
  transition:transform .18s ease, color .2s ease;
  text-decoration:none;
  display:flex; align-items:center; gap:12px;
}


/* logo size & hover pop */
.brand.style-neon .logo-img{
  height:100px; width:auto; border-radius:10px; display:block;
  transition:transform .18s ease, filter .25s ease;
  filter:drop-shadow(0 8px 20px rgba(255,106,0,.35));
}
@media (max-width:700px){
  .brand.style-neon .logo-img{ height:64px; }
}

.brand.style-neon .brand-name{
  position: relative;
  display: inline-block;
  z-index: 0;                 /* create a local stacking context */
  padding: 2px 8px;           /* tiny breathing room inside the bar */
}

/* Slanted bar behind the title that still scales from left → right */
.brand.style-neon .brand-name::after{
  --slant: 20px;           /* ← tweak angle of the ends */
  --h: 60px;               /* ← bar height (set e.g. 12–16px for a thin underline) */

  content:"";
  position:absolute;
  left:-12px; right:-12px; bottom:-10px;
  height: var(--h);
  z-index:-1;

  background: linear-gradient(135deg, var(--brand), var(--brand2));
  filter: drop-shadow(0 6px 14px rgba(255,106,0,.35));

  /* make the bar a parallelogram */
  clip-path: polygon(
    var(--slant) 0,
    100% 0,
    calc(100% - var(--slant)) 100%,
    0 100%
  );

  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease, clip-path .28s ease, filter .28s ease;
}

.brand.style-neon .brand-link:hover .brand-name::after{
  transform: scaleX(1);
}


/* Softer, cleaner outline for the title */
.brand .brand-name{
  color:#fff;
  -webkit-text-stroke: .6px rgba(0,0,0,.55);   /* thinner + semi-transparent */
  letter-spacing:.2px;                         /* avoids outlines touching */
  text-shadow:
    0 1px 0 rgba(0,0,0,.35),                   /* crisp edge */
    0 2px 6px rgba(0,0,0,.22);                 /* soft depth */
  position:relative;
  z-index: 1;                                  /* keep above the chip */
}

/* Firefox fallback (no -webkit-text-stroke) */
@supports not (-webkit-text-stroke: .6px black){
  .brand .brand-name{
    text-shadow:
      0 0 .7px #000, 0 0 .7px #000,            /* faux “stroke” */
      0 1px 0 rgba(0,0,0,.35),
      0 2px 6px rgba(0,0,0,.22);
  }
}


/* hover effects */
.brand.style-neon .brand-link:hover{
  transform:translateY(-1px);
  box-shadow:0 0 18px rgba(255,106,0,.55),
             0 0 36px rgba(255,179,0,.35);
}
.brand.style-neon .brand-link:hover .brand-name{
  text-shadow:0 0 8px rgba(255,120,0,.85),
              0 0 22px rgba(255,180,0,.50);
}
.brand.style-neon .brand-link:hover .brand-name::after{
  transform:scaleX(1);
}
.brand.style-neon .brand-link:hover .logo-img{
  transform:translateY(-1px);
  filter:drop-shadow(0 12px 28px rgba(255,140,0,.55));
}


/* Discord hover variant */
:root{
  --discord: rgb(115,138,219);   /* #738ADB */
  --discord2: #8EA1E1;          /* lighter companion */
}

/* more specific + later in the file so it wins over .nav-btn:hover */
.nav-btn.nav-btn--discord:hover{
  background: linear-gradient(135deg, var(--discord), var(--discord2));
  color: #fff;                           /* better contrast on blue */
  border-color: transparent;
  box-shadow: 0 10px 24px rgba(115,138,219,.35);
}

/* accessible focus ring in discord blue */
.nav-btn.nav-btn--discord:focus-visible{
  outline: 2px solid rgba(115,138,219,.65);
  outline-offset: 2px;
}

/* === Brand title + slanted expanding bar (all plates) === */
.brand .brand-name{
  position: relative;
  display: inline-block;
  z-index: 0;                /* lets the bar sit behind */
  padding: 2px 8px;

  /* Keep your white title + subtle stroke so it reads on dark plates */
  color:#fff;
  -webkit-text-stroke:.6px rgba(0,0,0,.55);
  letter-spacing:.2px;
  text-shadow:
    0 1px 0 rgba(0,0,0,.35),
    0 2px 6px rgba(0,0,0,.22);
}

/* Firefox fallback if text-stroke isn't supported */
@supports not (-webkit-text-stroke: .6px black){
  .brand .brand-name{
    text-shadow:
      0 0 .7px #000, 0 0 .7px #000,  /* faux stroke */
      0 1px 0 rgba(0,0,0,.35),
      0 2px 6px rgba(0,0,0,.22);
  }
}

/* Slanted bar behind the title that scales left → right */
.brand .brand-name::after{
  --slant: 20px;   /* angle of the ends (bigger = more slant) */
  --h: 60px;       /* bar height; try 14–18px for a thin underline */

  content:"";
  position:absolute; left:-12px; right:-12px; bottom:-10px;
  height:var(--h); z-index:-1;

  background:linear-gradient(135deg, var(--brand), var(--brand2));
  filter:drop-shadow(0 6px 14px rgba(255,106,0,.35));

  clip-path:polygon( var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .28s ease, clip-path .28s ease, filter .28s ease;
}

/* reveal the bar on hover for every plate */
.brand .brand-link:hover .brand-name::after{
  transform:scaleX(1);
}

/* === Neon-only extra glow on the text (restores the “neon” look) === */
.brand.style-neon .brand-name{
  color:#fff; /* ensure white on the dark pill */
  text-shadow:
    0 0 8px rgba(255,120,0,.85),
    0 0 22px rgba(255,180,0,.50),
    0 1px 0 rgba(0,0,0,.35),
    0 2px 6px rgba(0,0,0,.22);
}

/* ===== HERO BAR: flush-left visually, but locked to the content ===== */
:root{
  --wrap-max: 1100px;   /* must match your .wrap max-width */
  --wrap-pad: 24px;     /* must match your .wrap left padding */
}
/* ===== HERO BAR behind the title (locked to content, same visuals) ===== */
:root{
  /* must match your .wrap rules */
  --wrap-max: 1100px;   /* .wrap { max-width:1100px } */
  --wrap-pad: 24px;     /* .wrap { padding:24px } */
}

.title-band{
  position: relative;
  z-index: 1;
  padding: 6px 0;
}

.title-band::before{
  content:"";
  position:absolute;
  z-index:-1;

  /* Length of the bar measured from the LEFT edge of .wrap. 
     Tweak this to match where your old 80vw ended. */
  --band-len: 600px;

  /* how much “gutter” is left of the centered .wrap */
  --gutter: calc((100vw - min(100vw, var(--wrap-max))) / 2);

  /* visually flush to page-left, but anchored to the content */
  left: calc(-1 * (var(--gutter) + var(--wrap-pad)));
  width: calc(var(--gutter) + var(--wrap-pad) + var(--band-len));

  /* keep your original vertical placement & size */
  top: -55px;
  height: 190px;

  /* keep your original look */
  background: linear-gradient(180deg, #18191d 0%, #0f1013 70%);
  box-shadow: 0 18px 36px rgba(0,0,0,.35);

  /* same angled right edge + flush left edge */
  clip-path: polygon(
    0 10%,     /* top-left (flush) */
    86% 4%,    /* top slants up   */
    100% 0%,   /* sharp right tip */
    86% 120%,  /* bottom slants up */
    0 90%      /* bottom-left     */
  );
}



/* ===== Kill the old pill/glow so only the hero bar shows ===== */
.brand.style-neon::before{ display:none !important; }
.brand.style-neon .brand-link{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.brand.style-neon .brand-link:hover{
  box-shadow: none !important;    /* stop the hover halo */
}

/* ===== Keep your slanted expanding bar behind the text ===== */
.brand.style-neon .brand-name{
  position: relative;
  display: inline-block;
  z-index: 0;
  padding: 2px 8px;
}

/* (same slanted underline you liked; edit --h for thickness, --slant for angle) */
.brand.style-neon .brand-name::after{
  --slant: 20px;
  --h: 60px;

  content:"";
  position:absolute;
  left:-12px; right:-12px; bottom:-10px;
  height: var(--h);
  z-index:-1;

  background: linear-gradient(135deg, var(--brand), var(--brand2));
  filter: drop-shadow(0 6px 14px rgba(255,106,0,.35));

  clip-path: polygon(
    var(--slant) 0,
    100% 0,
    calc(100% - var(--slant)) 100%,
    0 100%
  );

  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s ease;
}
.brand.style-neon .brand-link:hover .brand-name::after{
  transform: scaleX(1);
}

/* optional: keep the thin black stroke on the text */
.brand .brand-name{
  color:#fff;
  -webkit-text-stroke: .6px rgba(0,0,0,.55);
  text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.22);
}
@supports not (-webkit-text-stroke: .6px black){
  .brand .brand-name{
    text-shadow:
      0 0 .7px #000, 0 0 .7px #000,
      0 1px 0 rgba(0,0,0,.35),
      0 2px 6px rgba(0,0,0,.22);
  }
}
/* === Bottom angled bar (full-bleed, sits behind content) === */
body{ position: relative; }          /* create a stacking context */
.wrap{ position: relative; z-index:1; }  /* keep your content above the bar */

body::after{
  content:"";
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 120px;                               /* ← bar thickness */
  background: linear-gradient(180deg,#18191d 0%, #0f1013 70%);
  clip-path: polygon(0 50%, 100% 0, 100% 100%, 0 100%); /* ← angle */
  box-shadow: 0 -16px 36px rgba(0,0,0,.30);    /* soft lift */
  pointer-events: none;                        /* never block clicks */
  z-index: 0;                                  /* behind everything */
}
/* === MAP CAROUSEL === */
:root{ --peek:240px; --edge-fade:10px; } /* adjust --edge-fade to taste */
              /* how much of next/prev to “peek” */

.map-showcase{ margin:40px 0 24px; text-align:center; }
.map-titlebar{
  margin:0;
  font-size:clamp(28px,4.2vw,54px);
  font-weight:900;
  color:#0f1013;
  display:flex; gap:.4em; justify-content:center; align-items:center;
}
.map-titlebar b{
  background:#1073ff; color:#fff; padding:.12em .45em; border-radius:.5em;
  letter-spacing:.5px;
}
.map-sub{ margin:8px 0 18px; color:#444; }

.map-carousel{ position:relative; margin-top:18px; }
.map-viewport{
  position: relative;
  overflow: hidden;

  /* invisible fade “wall” on left/right edges */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--edge-fade),
    #000 calc(100% - var(--edge-fade)),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--edge-fade),
    #000 calc(100% - var(--edge-fade)),
    transparent 100%
  );
}

.map-carousel{ position:relative; margin-top:18px; opacity: 0; }  /* hidden until centered */
.map-carousel.is-ready{ opacity: 1; transition: opacity .18s ease-in; }  /* fade in */

.map-track{
  --tx: 0px;                   /* JS updates this to center the active card */
  display:flex; gap:1px; list-style:none; padding:0; margin:0;
  transform:translateX(var(--tx));
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
  align-items: center;

}
/* prevent accidental selection/blue highlight inside the carousel */
.map-carousel { -webkit-tap-highlight-color: transparent; }
.map-viewport,
.map-track,
.map-card,
.map-card *:not(input):not(textarea) {
  -webkit-user-select: none;
  user-select: none;
}

/* stop image dragging/selection; meta buttons/inputs still work */
.map-card img {
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none; /* safe since the image itself isn't clickable */
}

/* optional: show arrows disabled during cooldown (from earlier step) */
.map-nav.is-disabled { opacity: .45; pointer-events: none; }

/* JS adds this just for the very first center so there’s no jump */
.map-track.no-anim{ transition: none !important; }

.map-card{
  flex:0 0 calc(100% - var(--peek)*2);
  background:transparent; border:0; border-radius:0;
  overflow:visible;                     /* let shadow breathe */
  transform: scale(.50);               /* sides ≈ 30% smaller */
  opacity: .9;
  transform-origin: 50% 50%;
  box-shadow:none;                      /* shadow on the IMG now */
  transition:
    transform .45s cubic-bezier(.22,.61,.36,1),
    opacity   .45s cubic-bezier(.22,.61,.36,1),
    box-shadow .45s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}

.map-card.is-active{
  transform: scale(.70);                  /* center = full size */
  opacity: 1;
  z-index: 3;
}
.map-card.is-active img{
  box-shadow:0 22px 48px rgba(0,0,0,.35);
}


.map-card img{
  width:100%;
  aspect-ratio: 5 / 4;   /* a bit more square */

  object-fit:cover;
  display:block;
  border-radius:18px;
  box-shadow:0 16px 36px rgba(0,0,0,.22);
  transition:box-shadow .35s ease;
}

.map-meta{
  background:transparent;               /* no dark bar */
  padding:12px 2px 0;                   /* sits BELOW the image */
  text-align:left;
}
.map-name{
  margin:6px 0 8px;
  color:#0f1013;                        /* dark text like the ref */
  font-weight:900;
  font-size:clamp(18px,2.1vw,24px);
  text-shadow:none;                     /* drop heavy glow */
}
.map-code{ display:flex; gap:8px; align-items:center; }
.map-code input{
  width:250px;
  height:48px;                 /* lock box height */
  padding:0 14px;              /* no vertical padding so height stays fixed */
  border-radius:10px;
  background:#191a1f;
  border:1px solid #2a2b33;
  color:#e9e9ea;

  font-size:18px;              /* bigger digits */
  line-height:48px;            /* vertically center the text */
  font-weight:800;
  letter-spacing:.8px;
  text-align:center;
  font-variant-numeric: tabular-nums; /* cleaner uniform digits */
}

.copy-btn{
  padding:20px 24px; border-radius:10px; border:0; cursor:pointer;
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#111; font-weight:800;
}
.copy-btn:active{ transform:translateY(1px); }

/* arrows */
.map-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:12px; border:1px solid #1f2937;
  background:#111; color:#fff; font-size:26px; line-height:1;
  display:grid; place-items:center; cursor:pointer;
  box-shadow:0 10px 22px rgba(0,0,0,.28);
}
.map-nav.prev{ left:-72px; }             /* clearly outside */
.map-nav.next{ right:-72px; }

/* soft halo behind each arrow (blue-ish like your theme) */
.map-nav::before{
  content:"";
  position:absolute; inset:-18px;
  border-radius:50%;
  background:radial-gradient(70px 70px at 50% 50%,
             rgb(255, 94, 0), transparent 30%);
  z-index:-1;
}

.map-nav:hover{
  background:linear-gradient(135deg,var(--brand),var(--brand2));
  color:#111; border-color:transparent;
}
/* nav cooldown (disabled look) */
.map-nav.is-disabled,
.map-nav[aria-disabled="true"]{
  opacity:.45;
  cursor: default;
  pointer-events: none; /* blocks hover/click while animating */
}

/* responsive */
@media (max-width:900px){
  :root{ --peek:36px; }
}
@media (max-width:600px){
  :root{ --peek:18px; }
  .map-nav{ top:38%; width:38px; height:38px; font-size:22px; }
}
/* Featured (center) vs side cards */
.map-card.is-center{
  transform: scale(.85);                 /* center = full size */
  opacity: 1;
  z-index: 3;                          /* sit above neighbors */
}
/* Pull neighbors in slightly (visual overlap); center card stays on top via z-index */
.map-track{ gap:0; }              /* no extra space between items */
.map-card{ margin-inline:-95px; } /* tweak: -36 to -72px as you like */
.map-link{ display:block; color:inherit; text-decoration:none; }
/* Popular Maps — sharp orange glow like the header */
.map-showcase .map-titlebar::before,
.map-showcase .map-titlebar::after { content: none !important; } /* kill prior effects */

.map-showcase .map-titlebar{
  /* keep your current font/size; these are just the glow + tiny stroke */
  color:#00ffff;                               /* keep black text */
  -webkit-text-stroke: .6px rgba(0,0,0,.12);/* crisp edge on light bg */
  text-shadow:
    0 0 2px  #fff,                          /* inner bloom */
    0 0 6px  rgba(0, 0, 0, 0.212),         /* hot core */
    0 0 12px rgba(0, 255, 242, 0.404),
    0 0 22px rgba(0, 255, 242, 0.63),
    0 0 36px rgba(0, 255, 242, 0.979);         /* outer neon */
}

/* tighten the gap above the cards */
.map-showcase .map-sub{ margin-top:.55rem; margin-bottom:.5rem; }
.map-showcase .map-carousel{ margin-top:.25rem; }
/* Thin white outline around "Popular Maps" */
.map-showcase .map-titlebar{
  -webkit-text-stroke: 0.8px #000000;   /* real stroke (Chromium/Safari) */
}

/* Fallback stroke for Firefox */
@supports not (-webkit-text-stroke: 1px #fff) {
  .map-showcase .map-titlebar{
    text-shadow:
      1px 0 0 #fff, -1px 0 0 #fff,
      0 1px 0 #fff,  0 -1px 0 #fff,
      1px 1px 0 #fff, -1px 1px 0 #fff,
      1px -1px 0 #fff, -1px -1px 0 #fff; /* thin 1px outline */
  }
}
.site-footer{
  position: fixed;
  left: calc(12px + env(safe-area-inset-left));  /* bottom-left pin */
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 20;

  color: #ff7300;             /* pick any color you like */
  font-size: 14px;
  letter-spacing: .2px;
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
  /* optional pill for contrast:
  background: rgba(17,17,17,.55);
  backdrop-filter: blur(4px) saturate(1.05);
  -webkit-backdrop-filter: blur(4px) saturate(1.05);
  padding: 6px 10px;
  border-radius: 10px; */
}
/* Push the whole Popular Maps section down */
.map-showcase{
  margin-top: clamp(50px, 16vw, 20px);  /* was 40px */
}
/* ORANGE DIAGONAL BEAM (no HTML needed) */
:root{
  --beam-offset: 0vw;      /* where it emerges along the bottom (from the left) */
  --beam-thick:  150px;      /* beam thickness at the bottom */
  --beam-height: 50vh;      /* how far up it climbs */
  --beam1: #ffb300;         /* gradient colors */
  --beam2: #ff6a00;
}

/* Draw the beam above the footer’s black bar (which is .site-footer::before, z:-1) */
body::before{
  content:"";
  position: fixed;
  left: 0;
  bottom: 60px;                            /* top edge of your black bar (height 120px) */
  width: 100vw;
  height: var(--beam-height);
  background: linear-gradient(180deg, var(--beam1), var(--beam2));
  /* triangle from bottom (two points) to the top-left corner */
  clip-path: polygon(
    var(--beam-offset) 100%,
    calc(var(--beam-offset) + var(--beam-thick)) 100%,
    0 0,
    0 0
  );
  filter: drop-shadow(0 0 24px rgba(255,140,0,.35));
  pointer-events: none;
  z-index: 0;                                /* above the black bar (z:-1), below your content (.wrap z:1) */
}
/* === Top-right orange ray (no HTML/JS needed) === */
:root{
  --ray-start-x: -800vw;   /* X from the left where it starts */
  --ray-start-y: -200vh;   /* Y from the top where it starts */
  --ray-thin: 6px;       /* thickness at the start (thin end) */
  --ray-thick: 80px;     /* thickness at the top-right end (thicker) */
  --ray-c1: #ffb300;     /* gradient colors */
  --ray-c2: #ff6a00;
}

/* draw behind your content (.wrap has z:1), above the page background */
html::before{
  content:"";
  position: fixed;
  inset: 0;                      /* full viewport canvas */
  pointer-events: none;
  z-index: 0;

  /* warm orange gradient along the ray */
  background: linear-gradient(45deg, var(--ray-c1), var(--ray-c2));

  /* tapered quad from (start-x,start-y) to the top-right corner */
  clip-path: polygon(
    calc(var(--ray-start-x) - var(--ray-thin)) var(--ray-start-y),
    calc(var(--ray-start-x) + var(--ray-thin)) var(--ray-start-y),
    100vw 0,
    100vw var(--ray-thick)
  );

  /* soft glow */
  filter: drop-shadow(0 0 22px rgba(255,140,0,.35));
}
/* === Slanted About box under the header (desktop) === */
:root{
  /* quick knobs for positioning/size */
  --about-left: -145px;                         /* distance from the content's left */
  --about-top: clamp(200px, 40vw, 140px);       /* how far below the header it sits */
  --about-maxw: 500px;                        /* max width of the box */
  --about-clear: clamp(200px, 15vw, 320px);   /* space to clear above Popular Maps */
}

.about-slab{
  position: absolute;
  left: var(--about-left);
  top: var(--about-top);
  width: min(var(--about-maxw), calc(100% - 2*var(--about-left)));
  --slant-pad: clamp(48px, 9%, 20px);
  padding: 18px 50px 20px var(--slant-pad);
  color: #fff;

  /* sharper, darker card */
  background: #0f1013;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 0;

  /* strong geometric slant (matches your site’s angles) */
  clip-path: polygon(0% 0, 100% 0, 90% 100%, 0 100%);

  box-shadow: 0 18px 36px rgba(0,0,0,.30);
  z-index: 2;
}

/* thin orange accent riding the slanted edge */
.about-slab::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg, var(--brand), var(--brand2));
  /* narrow strip hugging the left slant */
  clip-path: polygon(0% 0, 5% 0, 2% 100%, 0 100%);
  filter: drop-shadow(0 8px 22px rgba(255,106,0,.35));
  pointer-events:none;
}

/* subtle highlight along the top edge for depth */
.about-slab::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(255,255,255,.08), transparent 20%);
  clip-path: polygon(0% 0, 100% 0, 100% 8%, 8% 8%);
  pointer-events:none;
}

.about-slab h2{
  margin: 0 0 6px;
  font-size: 20px;
  line-height: 1.15;
}
.about-slab p{
  margin: 0 0 12px;
  color: #c9cbd1;
  font-size: 14px;
  line-height: 1.45;
}
.about-slab__cta{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  background:linear-gradient(135deg, var(--brand), var(--brand2));
  color:#111;
  border:0;
  box-shadow:0 10px 24px rgba(255,106,0,.28);
}

/* keep Popular Maps cleared below the slab */
.map-showcase{ margin-top: calc(var(--about-clear) + -120px); }

/* Mobile: simplify the cut so it still reads clean */
@media (max-width:900px){
  .about-slab{
    position: relative;
    left: 0; top: 0;
    margin: 8px var(--wrap-pad, 24px) 0;
    width: auto;
    clip-path: polygon(4% 0, 100% 0, 96% 100%, 0 100%);
  }
  .map-showcase{ margin-top:16px; }
}/* tighten the space between the subtitle and the carousel */
/* Hide the old styled title completely */
.map-showcase .map-titlebar{ display:none !important; }

/* New image “title” */
.map-title-img{
  display:block;
  margin: 0 auto 6px;                     /* centers it and keeps it tight to the subtitle */
  width: clamp(220px, 30vw, 500px);       /* responsive size */
  height: auto;
  filter: drop-shadow(0 4px 14px rgba(0,0,0,.25));
}

/* Tighten gap between image → subtitle → carousel */
.map-showcase .map-sub{
  font-size: 14px;
  line-height: 1.35;
  margin-top: -40px !important;
  margin-bottom: -80px !important;
}
.map-showcase .map-carousel{
  margin-top: 8px !important;
}
/* anchor for the decoration */
/* make ::after position against this section */
.map-showcase{ position: relative; }

/* orange splatter */
.map-showcase::after{
  content:"";
  position:absolute;
  top:-200px;              /* move up/down */
  right:-50%;              /* move left/right */
  width: clamp(180px, 24vw, 420px);
  height: auto;            /* ensure it has height */
  aspect-ratio: 3 / 2;
  background: url("../img/paintsplatter.png") center/contain no-repeat;/* ← path fix */
  opacity:.95;
  pointer-events:none;
  z-index:0;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.18));
  transform: scale(1.8);
  transform-origin: right top;
}