/* ==============================
   2106 FSC site styles (full)
   ============================== */
:root{
  --bg: #000;
  --fg: #e9e9ef;
  --muted: #b8b8c7;
  --card: #0a0a0a;
  --alt: #111;
  --line: #2a2a32;
  --accent: #9AE6FF;
  --radius: 16px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --bg-image:none;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0;
  font-family: "Zen Kaku Gothic New", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  color: var(--fg);
  background: radial-gradient(1000px 600px at 10% -10%, #111424 0%, transparent 60%),
              radial-gradient(800px 500px at 90% -20%, #0f1931 0%, transparent 60%),
              var(--bg);
  line-height: 1.75;
}
/* Background image layer */
body::before{
  content: "";
  position: fixed;
  inset: 0;
  background: var(--bg);
  
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: .22;
  z-index: -2;
}

img{ max-width: 100%; height: auto; display: block; border-radius: 12px; }
a{ color: inherit; text-decoration: none; }
.container{ width: min(1120px, 92vw); margin: 0 auto; }

/* Skip */
.skip-link{ position: absolute; left: -999px; top: -999px; }
.skip-link:focus{ left: 16px; top: 16px; background: var(--fg); color: #000; padding: .5rem .75rem; border-radius: 8px; }

/* Header */
.site-header{
  position: fixed;
  /*
  top: 0; z-index: 50;
  backdrop-filter: saturate(120%) blur(10px);
  background: rgba(10,10,15,.55);
  border-bottom: 1px solid rgba(255,255,255,.06);
  */
}
.nav-inner{ 
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  height: 80px; 
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: "Shippori Mincho", serif;
  font-weight: 700; letter-spacing: .06em;
  font-size: clamp(18px, 2vw, 22px);
  transition: transform .2s ease;
}
.brand:hover{ transform: translateY(-1px); }
.brand img{height:80px;width:auto;display:block;border-radius:0;max-height:80px}

.desktop-nav{ display: none; }
.desktop-nav ul{ display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.nav-link{
  position: relative; padding: 6px 2px;
  transition: transform .2s ease;
}
.nav-link::after{
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: scaleX(0); transform-origin: center; transition: transform .3s ease;
}
.nav-link:hover{ transform: translateY(-1px); }
.nav-link:hover::after{ transform: scaleX(1); }

/* Hamburger */
.hamburger{
  --size: 24px;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--line);
  border-radius: 10px; cursor: pointer; transition: background .2s ease;
}
.hamburger:hover{ background: rgba(255,255,255,.04); }
.hamburger span{
  display: block; width: var(--size); height: 2px; background: var(--fg);
  position: relative; transition: transform .3s ease, opacity .3s ease;
}
.hamburger span + span{ margin-top: 6px; }
.hamburger[aria-expanded="true"] span:nth-child(1){ transform: translateY(8px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-8px) rotate(-45deg); }

/* Mobile nav */
.mobile-nav{
  display: none;
  background: rgba(10,10,15,.85);
  border-bottom: 1px solid rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}
.mobile-nav.open{ display: block; }
.mobile-nav ul{ list-style: none; margin: 0; padding: 12px 20px; }
.mobile-nav li + li{ border-top: 1px solid var(--line); }
.mobile-nav a{ display: block; padding: 14px 4px; }

/* Desktop breakpoint */
@media (min-width: 960px){
  .desktop-nav{ display: block; }
  .hamburger{ display: none; }
  .mobile-nav{ display: none !important; }
}

/* Sections */
.section{ padding: clamp(56px, 8vw, 100px) 0; }
.section.alt{ background: linear-gradient(180deg, var(--alt), rgba(15,15,19,0) 70%); }
.section-header h2{
  font-family: "Shippori Mincho", serif;
  font-size: clamp(28px, 4vw, 40px);
  letter-spacing: .04em;
  margin: 0 0 14px;
}
.section-header p{ margin: 0; color: var(--muted); }

/* Hero */



.hero-title span{
  background: linear-gradient(90deg, #ffffff, var(--accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-sub{ color: var(--muted); margin-bottom: 22px; }


.hero-bg{
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(180px 120px at 15% 15%, rgba(154,230,255,.25), transparent),
    radial-gradient(220px 140px at 85% 20%, rgba(120,160,255,.18), transparent);
  filter: blur(10px);
}

/* Buttons */
.btn{
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 18px; border-radius: 999px;
  background: linear-gradient(180deg, #fefefe, #cfd4ff);
  color: #0a0a0f; font-weight: 700; letter-spacing: .02em;
  border: 1px solid rgba(255,255,255,.25); box-shadow: var(--shadow);
  transition: transform .15s ease, box-shadow .2s ease;
}
.btn:hover{ transform: translateY(-2px); box-shadow: 0 14px 30px rgba(0,0,0,.45); }
.btn:active{ transform: translateY(0); }
.btn-outline{
  background: transparent; color: var(--fg);
  border: 1px solid var(--line); box-shadow: none;
}
.btn-sm{ padding: 8px 12px; font-size: 14px; }

/* News */
.news-list{ list-style: none; margin: 0; padding: 0; }
.news-item{
  display: grid; grid-template-columns: 110px 1fr; align-items: center;
  gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--line);
}
.news-item a{ transition: color .2s ease; }
.news-item a:hover{ color: var(--accent); }

/* Cards */
.cards{ display: grid; gap: 18px; }
.cards.three{ grid-template-columns: 1fr; }
@media (min-width: 720px){ .cards.three{ grid-template-columns: repeat(3, 1fr); } }
.card{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 18px;
  display: grid; gap: 10px;
  transform: translateY(6px); opacity: .98;
  transition: transform .2s ease, border-color .2s ease;
}
.card:hover{ transform: translateY(0); border-color: rgba(255,255,255,.22); }

.card-head h3{ margin: 0 0 6px; font-size: 18px; letter-spacing: .05em; }
.card-head p{ margin: 0; color: var(--muted); }
.card-body p{ margin: 0 0 8px; color: var(--fg); }

/* Discography */
.grid{ display: grid; gap: 22px; grid-template-columns: 1fr; }
@media (min-width: 880px){ .grid{ grid-template-columns: repeat(3, 1fr); } }
.release{
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow);
}
.release-meta{ padding: 14px 14px 18px; }
.release-meta h3{ margin: 0 0 6px; font-size: 18px; }
.release-meta p{ margin: 0 0 12px; color: var(--muted); }
.release-actions{ display: flex; gap: 10px; }

/* Video */
.video-wrap{
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.video-frame, video{ width: 100%; height: 100%; display: block; }

/* Contact */
.contact-form{
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow);
  max-width: 760px;
}
.form-row{ display: grid; gap: 8px; margin-bottom: 14px; }
label{ font-size: 14px; color: var(--muted); }
input, textarea{
  width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line);
  background: #0e0e14; color: var(--fg);
}
input:focus, textarea:focus{ outline: none; border-color: rgba(255,255,255,.22); box-shadow: 0 0 0 4px rgba(154,230,255,.1); }
.form-actions{ display: flex; justify-content: flex-end; }

/* Footer */
.site-footer{ border-top: 1px solid var(--line); padding: 28px 0 60px; margin-top: 40px; }
.footer-inner{ display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-brand{ font-size: 18px; }
.copy{ color: var(--muted); margin: 0; }
.sns{ display: flex; gap: 14px; }
.sns a{ display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 10px; }
.sns a:hover{ border-color: rgba(255,255,255,.25); }

/* Scroll reveal animation */
.observe{ opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.observe.in-view{ opacity: 1; transform: translateY(0); }

/* Gallery helpers */
.ggrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.g img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border:1px solid var(--line);border-radius:12px}

.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:-2; filter:brightness(0.45) contrast(1.1);
}

.site-bg-video{
  position:fixed; inset:0; width:100%; height:100%; object-fit:cover;
  z-index:-5; filter:brightness(0.45) contrast(1.1);
}
body{background:transparent !important;}

@media (max-width: 600px){
  .brand img{height:80px;width:auto;display:block;border-radius:0;max-height:80px}
  .hero-title img{height:140px !important}
}



















.hero-inner{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:0 !important;margin-top:0 !important}
.hero-title{margin:0 !important}
.hero{padding-top:0 !important;padding-bottom:4px !important;margin-top:0 !important}






/* Spacing: make gap from CTA to NEWS slightly wider */
.hero-cta{margin-bottom:12px !important}
#news.section{padding-top:36px !important}

/* Avoid sticky header overlap when jumping to anchors */
#news, #contact, #video, #discography{scroll-margin-top: 100px}


/* cleared center-out block */
header .nav, .site-header .nav, nav.nav{
  display:flex !important;
  align-items:center;
  gap:32px !important;           /* wider spacing so items don't stick */
  flex-wrap:wrap;
}
header .nav a, .site-header .nav a, nav.nav a{
  position:relative;
  display:inline-block;
  padding:6px 6px;
  text-decoration:none;
  line-height:1.2;
  transition:color .3s ease;
}
header .nav a:hover, .site-header .nav a:hover, nav.nav a:hover{
  color:var(--accent, #9AE6FF);
}
header .nav a::after, .site-header .nav a::after, nav.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:2px;
  background:var(--accent, #9AE6FF);
  transform:scaleX(0);
  transform-origin:center;
  transition:transform .3s ease;
}
header .nav a:hover::after, .site-header .nav a:hover::after, nav.nav a:hover::after{
  transform:scaleX(1);
  transform-origin:center;
}



/* === Responsive hamburger === */
.nav-toggle{
  display:none;
  position:relative;
  z-index:1100;
  font:inherit;
  line-height:1;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.35);
  border-radius:6px;
  color:#fff;
  cursor:pointer;
}

/* @media (max-width: 860px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  header .nav, .site-header .nav, nav.nav{
    position:fixed;
    top:var(--header-height, 60px);
    right:12px; left:12px;
    display:none;
    flex-direction:column;
    gap:14px !important;
    padding:16px;
    background:rgba(0,0,0,.86);
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    z-index:1000;
    backdrop-filter:saturate(120%) blur(8px);
  }
  body.nav-open header .nav,
  body.nav-open .site-header .nav,
  body.nav-open nav.nav{ display:flex; }
  header, .site-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
} */

/* Ensure nav above background video */
header, .site-header{ position:relative; z-index:1001; }



/* === nav spacing & hover (RTL slide, robust) === */
header .nav, .site-header .nav, nav.nav{
  display:flex !important;
  align-items:center;
  gap:28px !important; /* ensure spacing so items don't stick */
  flex-wrap:wrap;
}
header .nav a, .site-header .nav a, nav.nav a{
  position:relative;
  display:inline-block;
  padding:6px 6px;
  text-decoration:none;
  line-height:1.2;
  transition:color .28s ease;
}
header .nav a:hover, .site-header .nav a:hover, nav.nav a:hover{
  color:var(--accent, #9AE6FF);
}
/* Right-to-left underline animation */
header .nav a::after, .site-header .nav a::after, nav.nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:100%;
  height:2px;
  background:var(--accent, #9AE6FF);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .28s ease;
}
header .nav a:hover::after, .site-header .nav a:hover::after, nav.nav a:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}

/* Hamburger button: remove border/background */
.nav-toggle{
  display:none;
  position:relative;
  z-index:1100;
  padding:10px 12px;
  border:none;
  background:transparent;
  color:#fff;
  cursor:pointer;
}

/* Mobile drawer behaviour */

/* @media (max-width: 860px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  header, .site-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  header .nav, .site-header .nav, nav.nav{
    position:fixed;
    top:var(--header-height, 60px);
    right:12px; left:12px;
    display:none;
    flex-direction:column;
    gap:14px !important;
    padding:16px;
    background:rgba(0,0,0,.88);
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    z-index:1000;
    backdrop-filter:saturate(120%) blur(8px);
  }
  header.nav-open .nav,
  .site-header.nav-open .nav,
  body.nav-open header .nav,
  body.nav-open .site-header .nav{ display:flex; }
} */


/* Ensure header above background video */
header, .site-header{ position:relative; z-index:1001; }



/* === HARD FIX: nav spacing + hover + hamburger === */
header .nav, .site-header .nav, nav.nav{
  display:flex !important;
  align-items:center;
  gap: 30px !important;      /* spacing so items don't touch */
  flex-wrap:wrap;
}
header .nav a, .site-header .nav a, nav.nav a{
  position:relative;
  display:inline-block;
  padding:8px 6px;
  text-decoration:none;
  line-height:1.2;
  transition: color .28s ease;
}
header .nav a:hover, .site-header .nav a:hover, nav.nav a:hover{
  color: var(--accent, #9AE6FF) !important;
}
/* Hover underline: RIGHT -> LEFT slide */
header .nav a::after, .site-header .nav a::after, nav.nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:100%; height:2px;
  background: var(--accent, #9AE6FF);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .28s ease;
}
header .nav a:hover::after, .site-header .nav a:hover::after, nav.nav a:hover::after{
  transform: scaleX(1);
  transform-origin: left;
}

/* Hamburger button (no border/background) */
.nav-toggle{
  display:none;
  border:none;
  background:transparent;
  color:#fff;
  font-size:24px;
  line-height:1;
  padding:8px 10px;
  cursor:pointer;
}

/* Mobile layout: drawer menu */

/* @media (max-width: 860px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  header, .site-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  header .nav, .site-header .nav, nav.nav{
    position:fixed;
    top:var(--header-height, 60px);
    left:12px; right:12px;
    display:none;
    flex-direction:column;
    gap:16px !important;
    padding:16px;
    background: rgba(0,0,0,.9);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    z-index: 1000;
    backdrop-filter: saturate(120%) blur(8px);
  }
  body.nav-open header .nav,
  body.nav-open .site-header .nav,
  body.nav-open nav.nav{ display:flex; }
} */

/* Ensure header above background video */
header, .site-header{ position:relative; z-index:1001; }



/* === round5: nav spacing (1ch) & center-glow hover & mobile drawer === */
:root{ --accent:#7DD3FC; } /* 光っている青 */
header .nav, .site-header .nav, nav.nav{
  display:flex !important;
  align-items:center;
  gap: 1ch !important;     /* 1文字分くらいの間隔 */
  flex-wrap:wrap;
}
header .nav a, .site-header .nav a, nav.nav a{
  position:relative;
  display:inline-block;
  padding: 6px 4px;
  text-decoration:none;
  line-height:1.2;
  transition: color .25s ease;
}
header .nav a:hover, .site-header .nav a:hover, nav.nav a:hover{
  color: var(--accent);
  text-shadow: 0 0 6px rgba(125,211,252,.8);
}
/* 中央から伸びる下線 + 発光 */
header .nav a::after, .site-header .nav a::after, nav.nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:100%; height:2px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(125,211,252,.7);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
header .nav a:hover::after, .site-header .nav a:hover::after, nav.nav a:hover::after{
  transform: scaleX(1);
  transform-origin: center;
}

/* ハンバーガー（枠なし） */
.nav-toggle{
  display:none;
  border:none;
  background:transparent;
  color:#fff;
  font-size:24px;
  line-height:1;
  padding:8px 10px;
  cursor:pointer;
}

/* モバイル：開いたら縦並びドロワー */

/* @media (max-width: 860px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  header, .site-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  header .nav, .site-header .nav, nav.nav{
    position:fixed;
    top:var(--header-height, 60px);
    left:12px; right:12px;
    display:none;
    flex-direction:column;
    gap: 12px !important;
    padding:16px;
    background: rgba(0,0,0,.9);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    z-index: 1000;
    backdrop-filter: saturate(120%) blur(8px);
  }
  body.nav-open header .nav,
  body.nav-open .site-header .nav,
  body.nav-open nav.nav{ display:flex; }
}
header, .site-header{ position:relative; z-index:1001; } */


/* === round6: strong nav spacing, hover glow, and hamburger drawer === */
:root{ --accent:#7DD3FC; } /* 光る青 */

header nav, .site-header nav, nav.nav{
  display:flex !important;
  align-items:center;
  gap: 1ch !important;      /* 1文字分の間隔 */
  flex-wrap:wrap;
}
header nav a, .site-header nav a, nav.nav a{
  position:relative;
  display:inline-block;
  padding:6px 4px;
  text-decoration:none;
  line-height:1.2;
  transition: color .22s ease;
}
/* Hover: 中央から伸びる + 発光 */
header nav a:hover, .site-header nav a:hover, nav.nav a:hover{
  color: var(--accent) !important;
  text-shadow: 0 0 8px rgba(125,211,252,.85), 0 0 14px rgba(125,211,252,.35);
}
header nav a::after, .site-header nav a::after, nav.nav a::after{
  content:"";
  position:absolute;
  left:0; bottom:-6px;
  width:100%; height:2px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(125,211,252,.6);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .22s ease;
}
header nav a:hover::after, .site-header nav a:hover::after, nav.nav a:hover::after{
  transform: scaleX(1);
  transform-origin: center;
}

/* Hamburger (no border) */
.nav-toggle{
  display:none;
  border:none;
  background:transparent;
  color:#fff;
  font-size:26px;
  line-height:1;
  padding:8px 10px;
  cursor:pointer;
}

/* Mobile drawer: 縦並び */

@media (max-width: 959px){
  .kesuzo { display: none; }
  /* .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  header, .site-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  header nav, .site-header nav, nav.nav{
    position:fixed;
    top:var(--header-height, 60px);
    left:12px; right:12px;
    display:none;
    flex-direction:column;
    gap: 12px !important;
    padding:16px;
    background: rgba(0,0,0,.9);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    z-index: 1000;
    backdrop-filter: saturate(120%) blur(8px);
  }
  body.nav-open header nav,
  body.nav-open .site-header nav,
  body.nav-open nav.nav{ display:flex; } */

}

header, .site-header{ position:relative; z-index:1001; }



/* === round7: mobile drawer animation & right-aligned panel === */
/* 
@media (max-width: 860px){
  header, .site-header{ display:flex; align-items:center; justify-content:space-between; }
  header nav, .site-header nav, nav.nav{
    position:fixed;
    top:var(--header-height, 60px);
    right:12px;          
    left:auto;            
    width:min(280px, 90vw);
    display:none;
    flex-direction:column;
    gap:12px !important;
    padding:16px;
    background:rgba(0,0,0,.9);
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    z-index:1000;
    backdrop-filter:saturate(120%) blur(8px);
    opacity:0;
    transform: translateX(12px);
    pointer-events:none;
    transition: opacity .25s ease, transform .25s ease;
  }
  body.nav-open header nav,
  body.nav-open .site-header nav,
  body.nav-open nav.nav{
    display:flex;
    opacity:1;
    transform: translateX(0);
    pointer-events:auto;
  }
} */


/* ensure logo aligns right side if needed */
.site-header{ gap:12px; }
.site-header .site-logo img{ height:36px; width:auto; vertical-align:middle; }



/* round8 force: ensure right-anchored mobile drawer + animation + spacing + hover */

/* :root{ --accent:#7DD3FC; }
header, .site-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; position:relative; z-index:1001; }
.site-header .site-logo img{ height:36px; width:auto; vertical-align:middle; }

header nav, .site-header nav, nav.nav{
  display:flex !important;
  align-items:center;
  gap:1ch !important;
  flex-wrap:wrap;
}
header nav a, .site-header nav a, nav.nav a{
  position:relative; display:inline-block; padding:6px 4px; text-decoration:none; line-height:1.2; transition:color .22s ease;
}
header nav a:hover, .site-header nav a:hover, nav.nav a:hover{
  color:var(--accent) !important; text-shadow:0 0 8px rgba(125,211,252,.85),0 0 14px rgba(125,211,252,.35);
}
header nav a::after, .site-header nav a::after, nav.nav a::after{
  content:""; position:absolute; left:0; bottom:-6px; width:100%; height:2px; background:var(--accent);
  box-shadow:0 0 10px rgba(125,211,252,.6); transform:scaleX(0); transform-origin:center; transition:transform .22s ease;
}
header nav a:hover::after, .site-header nav a:hover::after, nav.nav a:hover::after{ transform:scaleX(1); transform-origin:center; }

.nav-toggle{ border:none; background:transparent; color:#fff; font-size:26px; line-height:1; padding:8px 10px; cursor:pointer; display:none; }

@media (max-width: 860px){
  .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
  header nav, .site-header nav, nav.nav{
    position:fixed; top:var(--header-height,60px); right:12px; left:auto;
    width:min(280px,90vw); display:none; flex-direction:column; gap:12px !important; padding:16px;
    background:rgba(0,0,0,.9); border:1px solid rgba(255,255,255,.12); border-radius:12px; z-index:1000;
    backdrop-filter:saturate(120%) blur(8px);
    opacity:0; transform:translateX(12px); pointer-events:none; transition:opacity .25s ease, transform .25s ease;
  }
  body.nav-open header nav, body.nav-open .site-header nav, body.nav-open nav.nav{ display:flex; opacity:1; transform:translateX(0); pointer-events:auto; }
}
 */



/* round9: drawer covers hamburger area too */

/* @media (max-width: 860px){
  header nav, .site-header nav, nav.nav{
    top:0; 
    padding-top:60px; 
  }
} */


/* round10: hamburger hides when drawer open (animated) */
.nav-toggle{
  transition: opacity .22s ease, transform .22s ease;
}
/* nav-open keeps hamburger visible */

/* keep drawer right-anchored and covering from top */


/* @media (max-width: 860px){
  header nav, .site-header nav, nav.nav{
    top:0;
    right:12px;
    left:auto;
    width:min(280px,90vw);
    padding-top:60px; 
    display:none;
    flex-direction:column;
    gap:12px !important;
    background:rgba(0,0,0,.9);
    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;
    z-index:1000;
    backdrop-filter:saturate(120%) blur(8px);
    opacity:0;
    transform: translateX(12px);
    pointer-events:none;
    transition: opacity .25s ease, transform .25s ease;
  }
  body.nav-open header nav,
  body.nav-open .site-header nav,
  body.nav-open nav.nav{
    display:flex;
    opacity:1;
    transform: translateX(0);
    pointer-events:auto;
  }
} */


/* loader (fallback to match others) */
#loading-overlay{
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  background:#000; color:#fff; z-index:9999;
  flex-direction:column;
}
#loading-overlay .loader{
  width:40px; height:40px; border-radius:50%;
  border:4px solid rgba(255,255,255,.3); border-top-color:#fff;
  animation: spin 1s linear infinite; margin-bottom:10px;
}
@keyframes spin{ to{ transform:rotate(360deg);} }

/* loader logo */
#loading-overlay .loader-logo{
  width:120px;
  height:auto;
  margin-bottom:15px;
  display:block;
}

/* ===== Fullscreen Hamburger Menu (from new base) ===== */
#menuToggle{
  position: fixed; top: 16px; right: 16px;
  z-index: 11001;
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; cursor: pointer;
}
#menuToggle span{
  position: absolute; display: block; width: 24px; height: 2px;
  background: #fff; transition: transform .28s ease, opacity .28s ease, top .28s ease;
}
#menuToggle span:nth-child(1){ top: 13px; }
#menuToggle span:nth-child(2){ top: 19px; }
#menuToggle span:nth-child(3){ top: 25px; }

/* morph into X when open */
body.nav-open #menuToggle span:nth-child(1){ transform: rotate(45deg); top: 19px; }
body.nav-open #menuToggle span:nth-child(2){ opacity: 0; }
body.nav-open #menuToggle span:nth-child(3){ transform: rotate(-45deg); top: 19px; }

#navOverlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.96);
  display: flex; align-items: center; justify-content: center;
  z-index: 11000;
  opacity: 0; visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
#navOverlay ul{
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 18px;
  transform: translateY(12px); opacity: 0;
  transition: transform .32s ease, opacity .32s ease;
  text-align: center;
}
#navOverlay a{
  color: #fff; text-decoration: none; font-size: clamp(20px, 3.6vw, 34px);
  letter-spacing: .08em;
}

body.nav-open #navOverlay{ opacity: 1; visibility: visible; }
body.nav-open #navOverlay ul{ transform: translateY(0); opacity: 1; }
body.nav-open{ overflow: hidden; }

/* Ensure header stays above content when needed */
.site-header{ position: relative; z-index: 100; }

/* Existing hover effect (center-out glowing blue) applied to overlay links as well */
#navOverlay a{ position: relative; }
#navOverlay a::after{
  content: "";
  position: absolute;
  left: 50%; bottom: -6px;
  width: 100%; height: 2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  background: linear-gradient(90deg, rgba(0,0,0,0), #9AE6FF, rgba(0,0,0,0));
  box-shadow: 0 0 12px rgba(154,230,255,.9);
  transition: transform .25s ease;
}
#navOverlay a:hover::after, #navOverlay a:focus-visible::after{
  transform: translateX(-50%) scaleX(1);
}

@media (max-width: 768px){
  #menuToggle{ width: 44px; height: 44px; top: 12px; right: 12px; }
}


/* === Header menu restore: spacing & hover, and hamburger positioning === */
.site-header{ position: relative; }
#menuToggle{
  position: absolute;  /* take out of flow so it won't shrink the header menu */
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}


/* .site-header .nav{
  display: flex;
  gap: clamp(8px, 1.8vw, 16px);
}
.site-header .nav a{
  position: relative;
  padding: 0 2px;
  text-decoration: none;
}
.site-header .nav a::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 100%;
  height: 2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  background: linear-gradient(90deg, rgba(0,0,0,0), #9AE6FF, rgba(0,0,0,0));
  box-shadow: 0 0 12px rgba(154,230,255,.9);
  transition: transform .25s ease;
}
.site-header .nav a:hover::after,
.site-header .nav a:focus-visible::after{
  transform: translateX(-50%) scaleX(1);
} */



/* === Mobile hamburger only & restore header menu spacing/hover === */
/* Revert hamburger to be in normal header flow and show only on small screens */
#menuToggle{
  display: none;
  position: static !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  margin-left: auto; /* push to right when header is flex */
}
@media (max-width: 768px){
  #menuToggle{
    display: inline-flex;
  }
}


/* .site-header .nav{
  display: flex;
  gap: clamp(10px, 2vw, 20px);
}
.site-header .nav a{
  position: relative;
  padding: 0 2px;
  text-decoration: none;
}
.site-header .nav a::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 100%;
  height: 2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  background: linear-gradient(90deg, rgba(0,0,0,0), #9AE6FF, rgba(0,0,0,0));
  box-shadow: 0 0 12px rgba(154,230,255,.9);
  transition: transform .25s ease;
}
.site-header .nav a:hover::after,
.site-header .nav a:focus-visible::after{
  transform: translateX(-50%) scaleX(1);
} */



/* === Mobile hamburger: top-right fixed & high-visibility "X" === */
@media (max-width: 959px){
  #menuToggle{
    display: inline-flex !important;
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    z-index: 11001 !important;
    width: 44px; height: 44px;
  }
  #menuToggle span{
    width: 26px;
    height: 3px; /* thicker for visibility */
    background: #FFFFFF;
    box-shadow: 0 0 8px rgba(154,230,255,.85); /* glow for better contrast */
  }
  body.nav-open #menuToggle span{
    background: #9AE6FF; /* brighter when X */
    box-shadow: 0 0 12px rgba(154,230,255,1);
  }
}

/* === Header menu spacing & hover (definitive restore) === */

/* .site-header .nav{
  display: flex;
  gap: clamp(10px, 2vw, 22px); 
}
.site-header .nav a{
  position: relative;
  padding: 0 3px;
  text-decoration: none;
}
.site-header .nav a::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 100%;
  height: 2px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  background: linear-gradient(90deg, rgba(0,0,0,0), #9AE6FF, rgba(0,0,0,0));
  box-shadow: 0 0 12px rgba(154,230,255,.9);
  transition: transform .25s ease;
}
.site-header .nav a:hover::after,
.site-header .nav a:focus-visible::after{
  transform: translateX(-50%) scaleX(1);
} */



/* === Desktop header nav anchors: spacing & hover fix (matches existing style) === */

@media (min-width: 960px){
  .desktop-nav{
    display: flex;               
    align-items: center;
    gap: 24px;                   
  }
  .desktop-nav > a{
    position: relative;
    padding: 6px 2px;
    text-decoration: none;
  }
  .desktop-nav > a::after{
    content: "";
    position: absolute;
    left: 0; bottom: -2px; height: 2px; width: 100%;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    transform: scaleX(0); transform-origin: center;
    transition: transform .3s ease;
  }
  .desktop-nav > a:hover::after,
  .desktop-nav > a:focus-visible::after{
    transform: scaleX(1);
  }
}



/* === Restore header background, hover text color, and plain white hamburger === */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0,0,0,.65);     /* restore translucent dark header */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

/* Desktop header link hover: also change text color (pre-hamburger behavior) */
@media (min-width: 960px){
  .desktop-nav > a{
    color: #ffffff;
    transition: color .2s ease;
  }
  .desktop-nav > a:hover,
  .desktop-nav > a:focus-visible{
    color: var(--accent, #9AE6FF); /* same accent as underline */
  }
}

/* Remove glow from hamburger/X and keep plain white */
#menuToggle span{
  box-shadow: none !important;
  background: #fff !important;
  height: 2px !important;
}
body.nav-open #menuToggle span{
  background: #fff !important;   /* X also white */
  box-shadow: none !important;
}



/* Header background (restored) */
.site-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(0,0,0,.65);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}



/* Overlay menu: change text color on hover as well */
#navOverlay a{
  color: #fff;
  transition: color .2s ease;
}
#navOverlay a:hover,
#navOverlay a:focus-visible{
  color: var(--accent, #9AE6FF);
}



/* === Fixed full-width header background bar === */
#fixedHeaderBg{
  position: fixed;
  left: 0; right: 0; top: 0;
  height: var(--hb-h, 64px);
  background: linear-gradient(to bottom, rgba(0,0,0,.82), rgba(0,0,0,.62));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 90; /* below header content (which is 100 in previous rules) */
  pointer-events: none;
}

/* Make sure header content sits above the bar */
.nav-inner, .desktop-nav, .brand{ position: relative; z-index: 101; }

/* Overlay menu hover text color (re-assert) */
#navOverlay a{ color:#fff; transition: color .2s ease; }
#navOverlay a:hover, #navOverlay a:focus-visible{ color: var(--accent, #9AE6FF); }