/* ========== THEME ========= */
@import url('https://fonts.googleapis.com/css2?family=Kumar+One+Outline&display=swap');
:root {
  --page: #0e1a2a;
  --page-2: #0b1523;
  --sky: #b9d1ff;
  --gold: #f6b24b;
  --gold-2: #e29a2a;
  --teal: #59c7c9;
  --line: rgba(255,255,255,.09);
  --white: #ffffff;
  --muted: #a9b2c3;
  --header-h: 64px;
  --radius: 14px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --banner-h: clamp(1.0in, 16vh, 1.3in); /* slim band */
}

/* ======== RESETS ======== */
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
body.no-scroll{overflow:hidden;}
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ======== TYPOGRAPHY + BACKGROUND ======== */
body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:16px; line-height:1.6; color:#ecf1ff;

  background: linear-gradient(180deg,
    var(--sky) 0%,
    #476ca8 8%,
    #223b65 12%,
    var(--page) 24%,
    #0a1321 70%,
    #000 100%);
  background-attachment: scroll;
}
h1,h2,h3{font-family:"Playfair Display",Georgia,serif;margin:0 0 .75rem;line-height:1.2;}
h1{font-size:clamp(1.8rem,1rem+3vw,3rem);}
h2{font-size:clamp(1.4rem,1rem+1.5vw,2rem);}
.lead{color:var(--muted);margin-top:.25rem;}

/* ======== HEADER ======== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  display: grid;
  place-items: center;
  z-index: 30;
  transform: translateY(-12px);
  opacity: 0;
  transition:
    transform .35s ease,
    opacity .35s ease,
    background-color .35s ease,
    backdrop-filter .35s ease;
  background: rgba(7,15,28,0);
  backdrop-filter: none;
}

/* visible state – with fade to transparent at the bottom */
.header.is-visible {
  opacity: 1;
  transform: translateY(0);
  background: linear-gradient(
    to bottom,
    rgba(7,15,28,0.85) 0%,   /* solid at top */
    rgba(7,15,28,0.70) 60%,  /* begin fading */
    rgba(7,15,28,0.0) 100%   /* fully transparent by bottom */
  );
  backdrop-filter: blur(6px);
}

/* solid header state (e.g. after scroll) */
.header.is-solid {
  background: #0a1526;
  backdrop-filter: none;
}

/* main nav bar layout */
.nav {
  width: min(1100px, 92%);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* brand text “Kaipo Mo’e” */
.nav .brand {
  font-weight: 700;
  letter-spacing: .02em;
  font-size: 1.35rem;  /* slightly larger brand text */
}

/* desktop links (Home, Music, Art, Contact) */
.links a {
  margin-left: 1.25rem;
  font-weight: 600;
  position: relative;
}

.links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background: var(--gold);
  transition: width .25s ease;
}

.links a:hover::after {
  width: 100%;
}

/* mobile nav toggle (“sandwich” button) */
.nav-toggle {
  display: none;
  width: 42px;
  height: 34px;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: #fff;
  margin: 7px 0;
  width: 100%;
}

/* mobile dropdown menu */
.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(7,15,28,.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  padding: .5rem 4%;
  z-index: 29;
}

.mobile-menu a {
  display: block;
  padding: .9rem 0;
  font-weight: 600;
  border-top: 1px solid rgba(255,255,255,.05);
}

.mobile-menu.open {
  display: block;
}

/* Match header + nav + mobile menu with Playfair Display */
.nav .brand,
.links a,
.mobile-menu a {
  font-family: "Playfair Display", Georgia, serif;
  font-weight: 700;     /* strong, like your hero title */
  letter-spacing: .02em;
}

/* hamburger only on small screens */
@media (max-width: 820px){
  .links { display: none; }
  .nav-toggle { display: block; }
}
/* ======== MASTHEAD ======== */
.masthead{
  position: relative;
  padding-top: calc(var(--header-h) + 24px); /* desktop spacing above logo */
  padding-bottom: 0;
  display: grid;
  place-items: center;
  height: 185px;            /* desktop height */
  margin-bottom: -22px;     /* overlap nicely into hero */
  z-index: 1;
}

/* Top logo: centered, overlapping hero */
.masthead .wordmark {
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--logo-overlap, 20px));
  transform: translateX(-50%);
  width: clamp(200px, 24vw, 440px);
  height: auto;
  filter: drop-shadow(0 3px 18px rgba(0,0,0,.4));
  pointer-events: none;
}

/* === Mobile: reduce space above logo === */
@media (max-width: 820px){
  .masthead{
    padding-top: calc(var(--header-h) * 0.5);  /* less empty space above logo */
    height: 110px;                             /* shorter masthead on mobile */
    margin-bottom: -10px;                      /* keep the overlap but softer */
  }
}
}
/* ======== LAYOUT ======== */
.container{width:min(1100px,92%);margin:0 auto;}
.section{position:relative;padding:4rem 0;}
.section-line{width:min(1100px,92%);margin:0 auto;border-top:1px solid var(--line);}

/* ======== HERO ======== */
.hero{position:relative;padding:0 0 2rem;}
.hero .container{width:100%;max-width:none;padding:0;margin:0;}
.hero-media{position:relative;overflow:hidden;}
.hero-video{
  display:block;width:100%;
  height:86vh;max-height:960px;
  object-fit:contain;object-position:center;background:transparent;
}
@media(max-width:820px){
  .hero-video{
    height:80vh;
    object-fit:cover;
    transform: scale(0.93);
    transform-origin: center;
  }
}
.hero-cta{
  position:absolute;left:50%;bottom:min(4vh,32px);transform:translateX(-50%);
  text-align:center;padding:.25rem .5rem;
}
.hero-cta h1{margin:0 0 .6rem;text-shadow:0 6px 24px rgba(0,0,0,.55);}

/* ======== MARQUEE (Kumar One Outline, navy fill + light outline) ======== */
/* Load the font once at the top of your CSS:
@import url('https://fonts.googleapis.com/css2?family=Kumar+One+Outline&display=swap');
*/

.marquee{
  position: relative;
  padding: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Gradient banner layer */
.marquee-banner{
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(900px 600px at 50% -40%, #172b4d 0%, #0f1c33 55%, #0b1523 100%);
}

/* Viewport for the scrolling text */
.marquee-viewport{
  position: relative;
  z-index: 1;
  height: calc(var(--banner-h) + 14px);  /* extra headroom so outlines aren’t clipped */
  overflow: hidden;
  display: flex;
  align-items: center;                    /* keep text vertically centered */
  padding-block: .10em;                   /* tiny cushion for tall caps */
}

/* soft edge fades so letters don’t hard-cut at sides */
.marquee-viewport::before,
.marquee-viewport::after{
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 1.25%;
  z-index: 2;
  pointer-events: none;
}
.marquee-viewport::before{
  left: 0;
  background: linear-gradient(to right, rgba(11,21,35,1) 0%, rgba(11,21,35,0) 100%);
}
.marquee-viewport::after{
  right: 0;
  background: linear-gradient(to left,  rgba(11,21,35,1) 0%, rgba(11,21,35,0) 100%);
}

/* GPU-smooth marquee animation */
.marquee-track{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate3d(0, -50%, 0);
  white-space: nowrap;
  animation: marqueeX 120s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
  contain: paint;
}

@keyframes marqueeX{
  from { transform: translate3d(0, -50%, 0); }
  to   { transform: translate3d(-50%, -50%, 0); }
}

@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}

/* Running text (two copies placed inside .marquee-track) */
.marquee-copy{
  display: inline-block;
  min-width: 100%;
  margin: 0;
  padding: 0;

  font-family: "Kumar One Outline", cursive;  /* new font */
  font-weight: 400;
  font-size: calc(var(--banner-h) * 0.84);
  line-height: 1.05;                          /* a touch more breathing room */
  transform: translateY(9px);                 /* visual centering for tall glyphs */

  color: #0b1523;                             /* deep navy fill */
  -webkit-text-stroke: 0.6px #eaf0ff;         /* light outline that matches theme */
          text-stroke: 0.6px #eaf0ff;

  letter-spacing: 0;
  word-spacing: 0;
  text-shadow: none;
  filter: none;
  mix-blend-mode: normal;
}

/* mobile micro-tune so it stays centered */
@media (max-width: 820px){
  .marquee-copy{ transform: translateY(3px); }
}
/* ======== MUSIC ======== */
.card{background:rgba(17,28,48,.6);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.25rem;}
#music .card{max-width:560px;margin:0 auto;}
.music-embed{width:100%;}
.btn{
  display:inline-block;padding:.7rem 1.1rem;border-radius:12px;
  background:linear-gradient(180deg,var(--gold),var(--gold-2));
  color:#1d1204;font-weight:700;box-shadow:0 8px 18px rgba(246,178,75,.25);
  transition:transform .12s ease,box-shadow .2s ease,background .25s ease;
  min-width:170px;text-align:center;
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(246,178,75,.35);
  background:linear-gradient(180deg,var(--teal),#44aeb0);
  color:#071015;
}
.btn-row{margin-top:1rem;display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;}
.btn-row-compact .btn{min-width:160px;}
@media(max-width:700px){
  .btn-row{flex-direction:column;align-items:center;}
  .btn-row .btn{width:100%;max-width:320px;}
}

/* ======== GALLERY ======== */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.gallery figure{margin:0;overflow:hidden;border-radius:12px;border:1px solid var(--line);background:#0f1b2d;}
.gallery img{width:100%;height:auto;transition:transform .5s ease;}
.gallery figure:hover img{transform:scale(1.03);}

/* ======== CONTACT ======== */
.center{text-align:center;}
.soft{color:var(--muted);}
.social a{
  display:inline-grid;place-items:center;width:42px;height:42px;
  border-radius:10px;margin:0 .25rem;background:rgba(255,255,255,.06);
  border:1px solid var(--line);color:#e8efff;
  transition:transform .15s ease,background .2s ease,border-color .2s ease,color .2s ease;
}
.social a:hover{
  transform:translateY(-1px);
  background:rgba(89,199,201,.22);
  border-color:rgba(89,199,201,.35);
  color:#bdecee;
}
.logo-bottom{margin-top:1.25rem;display:grid;place-items:center;}
.logo-bottom img{width:clamp(180px,26vw,520px);filter:drop-shadow(0 4px 24px rgba(0,0,0,.35));}

/* ======== FOOTER ======== */
.footer{
  padding:2.5rem 1rem 3.5rem;text-align:center;color:#cfd8ea;
  background:linear-gradient(180deg,rgba(0,0,0,0)0%,#000 60%);
  border-top:1px solid var(--line);
}

/* ======== RESPONSIVE ======== */
@media(max-width:820px){
  .links{display:none;}
  .nav-toggle{display:block;}
}
/* === Masthead spacing adjustment (desktop + mobile) === */
.masthead {
 .masthead {
  padding-top: calc(var(--header-h) + 24px); /* a bit more top breathing room */
  height: 185px;                              /* taller so the logo isn’t cramped */
  margin-bottom: -22px;                       /* keeps the same nice overlap vibe */
}

@media (max-width: 820px) {
  .masthead {
    padding-top: calc(var(--header-h) * 0.5);
    height: 100px; /* about half the previous height */
    margin-bottom: -10px;
  }
}
/* === Double top logo size (responsive-safe) === */
.masthead .wordmark {
  width: clamp(200px, 24vw, 440px); /* doubled from previous clamp(100px,12vw,220px) */
  filter: drop-shadow(0 3px 18px rgba(0, 0, 0, 0.4));
}
//* === Mobile hero video: full width + less zoom === */
@media (max-width: 768px) {
  .hero {
    height: 100dvh;            /* fill the viewport height */
    background: #000;          /* hide any letterbox edges */
    overflow: hidden;
  }

  .hero video {
    position: static !important; /* undo absolute/center tricks on mobile */
    display: block;
    width: 100vw;                 /* fill screen horizontally */
    height: 100dvh;               /* scale to viewport height */
    object-fit: contain;          /* show more of the frame (less zoom) */
    transform: none !important;   /* cancel any scale/translate */
  }

  /* If you have an overlay, keep it transparent on mobile */
  .hero .video-overlay { background: transparent !important; }
}