:root { --dark: #242423; }

html { box-sizing: border-box; }
*, *::before, *::after { box-sizing: inherit; }

html, body { min-height: 100vh; }

body {
  background-color: #fff;
  font-family: 'Noto Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 14px;
  color: #1F2E3C;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.logo, h1, h2 { margin: 0; line-height: 1; font-family: 'Cinzel', serif; font-weight: 400; color: #1F2E3C; }
.logo { text-decoration: none; transition: color 0.3s ease; cursor: pointer; }
.logo:hover { color: #3A6EA5; }
p { margin: 0; color: #1F2E3C; }

.stage { position: relative; background: #fff; visibility: hidden; }

/* Header */
.header { position: fixed; left: 40px; top: 24px; z-index: 100; display: flex; gap: 24px; }
@media (max-width: 768px) { .header { display: block; left: 24px; } }

.logo { font-size: 27px; letter-spacing: -1px; }
.nav-btn, .nav-btn__svg { width: 56px; height: 30px; }
.nav-btn { display: block; margin: -2px 0 0 8px; }
@media (max-width: 768px) { .nav-btn { margin: 18px 0 0 -6px; } }
.nav-btn__svg { pointer-events: none; }

/* Intro */
.intro, .footer { height: 100vh; }
.intro { position: relative; padding: 5vw; background: #E0F4F5; overflow: hidden; }

.intro__content { position: absolute; right: 8%; bottom: 15%; z-index: 3; }
@media (max-width: 768px) { .intro__content { right: auto; left: 5vw; bottom: 10vh; } }

.intro__title { font-size: 25vw; overflow: hidden; letter-spacing: -2.3vw; padding-right: 2.3vw; }
@media (max-width: 768px) { .intro__title { margin-bottom: 5vh; } }

.intro__img { position: absolute; width: 35%; max-width: 390px; height: auto; }
@media (max-width: 768px) { .intro__img { width: 75vw; } }

.intro__img--1 { z-index: 2; left: 10%; bottom: 35%; }
@media (max-width: 768px) { .intro__img--1 { left: 50%; bottom: 50vh; transform: translateX(-50%); } }

.intro__img--2 { z-index: 1; left: 25%; bottom: 40%; }
@media (max-width: 768px) { .intro__img--2 { left: 70%; bottom: 60vh; transform: translateX(-50%); } }

.intro__txt { max-width: 35vw; margin-left: 25vw; }
@media (max-width: 768px) { .intro__txt { max-width: 80vw; margin-left: 0; } }

/* Slides */
.slide { display: flex; align-items: stretch; height: 100vh; overflow: hidden; }
.slide:nth-of-type(even) { background: #C4CDC4; }
@media (max-width: 768px) { .slide { display: block; position: relative; } }

/* Columns */
.col { flex-basis: 50%; }
@media (max-width: 768px) { .col { display: block; width: 100%; height: 100vh; } }

.col--1 { position: relative; z-index: 1; }
.col--2 { position: relative; overflow: hidden; }
@media (max-width: 768px) { .col--2 { position: absolute; z-index: 0; left: 0; top: 0; } }

/* Column Content */
.col__content { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; height: 100%; padding: 6vw 6vw 10vw; }
@media (max-width: 768px) { .col__content { width: 80%; } }

.col__content--1 { background: #C98B6D; }
@media (max-width: 768px) { .col__content--1 { background: rgba(216, 192, 192, 0.9); } }

.col__content--2 { background: #EAD7A4; }
@media (max-width: 768px) { .col__content--2 { background: rgba(205, 213, 224, 0.9); } }

.col__content--3 { background: #6D8B74; }
@media (max-width: 768px) { .col__content--3 { background: rgba(243, 211, 176, 0.9); } }

.col__content--4 { background: #E0F4F5; }
@media (max-width: 768px) { .col__content--4 { background: rgba(248, 233, 230, 0.9); } }

.col__content--5 { background: #88C9BF; }
@media (max-width: 768px) { .col__content--5 { background: rgba(209, 226, 236, 0.9); } }

.col__content--6 { background: #3A6EA5; }
@media (max-width: 768px) { .col__content--6 { background: rgba(215, 206, 197, 0.9); } }

.col__content-title { margin: 0 0 2vw; font-size: 11vw; letter-spacing: -0.8vw; }
@media (max-width: 768px) { .col__content-title { margin: 0 0 6vw; font-size: 18vw; } }

.col__content-wrap { display: flex; justify-content: flex-end; gap: 32px; }
@media (max-width: 768px) { .col__content-wrap { flex-direction: column; } }

.col__content-txt { max-width: 22vw; order: 2; }
@media (max-width: 768px) { .col__content-txt { order: 1; max-width: 80vw; margin: 0 0 10vw 10vw; } }

.slide-link { position: relative; order: 1; display: flex; justify-content: flex-end; width: 75px; height: 53px; }
.slide-link > * { pointer-events: none; }
@media (max-width: 768px) { .slide-link { order: 2; align-self: flex-end; } }

.slide-link__circ { width: 53px; height: 53px; border-radius: 50%; border: 1px solid var(--dark); }
.slide-link__line { position: absolute; top: 25px; left: 0; width: 64px; height: 3px; background: var(--dark); }

.line { overflow: hidden; }
.line:nth-of-type(even) { margin-top: -1vw; }
.line__inner { display: block; }

.slide__scroll-link { position: absolute; right: -113px; bottom: 3.5vw; display: block; width: 140px; height: 140px; background: #1F2E3C; overflow: hidden; }
@media (max-width: 768px) { .slide__scroll-link { display: none; } }

.slide__scroll-line { position: absolute; left: 26px; bottom: 0; width: 3px; height: 100%; box-shadow: 0 0 4px rgba(0,0,0,0.3); }

.slide--0 .slide__scroll-line { background: #C0D7D8; }
.slide--1 .slide__scroll-line { background: #D8C0C0; }
.slide--2 .slide__scroll-line { background: #CDD5E0; }
.slide--3 .slide__scroll-line { background: #F3D3B0; }
.slide--4 .slide__scroll-line { background: #F8E9E6; }
.slide--5 .slide__scroll-line { background: #D1E2EC; }
.slide--6 .slide__scroll-line { background: #D7CEC5; }

/* Column Image */
.col__image-wrap { position: absolute; left: 0; width: 100%; height: 160vh; }
.img { object-fit: cover; width: 100%; height: 100%; }

/* Footer */
.footer { display: flex; align-items: center; justify-content: center; flex-direction: column; background: #cecece; position: relative; }
.footer__link { font-size: 5vw; color: var(--dark); text-decoration: none; font-family: 'Cinzel', serif; }

.footer__link-top { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; width: 100px; height: 100px; background: #1F2E3C; font-size: 18px; color: #fff; text-decoration: none; font-family: 'Cinzel', serif; }
.footer__link-top-line { position: absolute; top: -50px; left: 50%; width: 1px; height: 50px; background: #1F2E3C; }
.footer__copyright { position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); font-size: 12px; }

/* Small helpers */
.btn-text { font-weight: 700; letter-spacing: .03em; }

/* Full Screen Menu */
.menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #E0F4F5;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.menu-container {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 6vw;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 4vw;
}

.menu-logo {
  font-size: 27px;
  letter-spacing: -1px;
  font-family: 'Cinzel', serif;
  color: #1F2E3C;
}

.menu-close {
  width: 56px;
  height: 30px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-close__svg {
  width: 24px;
  height: 24px;
  pointer-events: none;
}

.menu-close-line {
  transition: stroke 0.4s ease;
}

.menu-close:hover .menu-close-line {
  stroke: #3A6EA5;
}

.menu-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2vw;
}

.menu-item {
  overflow: hidden;
}

.menu-link {
  display: flex;
  align-items: center;
  gap: 2vw;
  text-decoration: none;
  color: #1F2E3C;
  font-family: 'Cinzel', serif;
  font-size: 3vw; /* Reduced from 4vw */
  letter-spacing: -0.5vw;
  line-height: 1;
  transition: color 0.4s ease;
  position: relative;
}

.menu-link:hover {
  color: #3A6EA5;
}

.menu-link-text {
  display: block;
  transform: translateY(100%);
  transition: transform 0.6s ease;
  font-size: 4vw; /* Reduced from 5vw */
}

.menu-overlay.active .menu-link-text {
  transform: translateY(0);
}

.menu-link-line {
  width: 0;
  height: 3px;
  background: var(--dark);
  transition: width 0.6s ease 0.2s;
  transform: translateX(-20px);
}

.menu-overlay.active .menu-link-line {
  width: 4vw;
  transform: translateX(0);
}

.menu-footer {
  padding-top: 4vw;
  text-align: center;
}

.menu-footer-text {
  font-size: 0.8vw;
  color: #1F2E3C;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease 0.4s, transform 0.6s ease 0.4s;
}

.menu-overlay.active .menu-footer-text {
  opacity: 1;
  transform: translateY(0);
}

/* Menu item stagger animation */
.menu-item:nth-child(1) .menu-link-text { transition-delay: 0.1s; }
.menu-item:nth-child(2) .menu-link-text { transition-delay: 0.2s; }
.menu-item:nth-child(3) .menu-link-text { transition-delay: 0.3s; }
.menu-item:nth-child(4) .menu-link-text { transition-delay: 0.4s; }
.menu-item:nth-child(5) .menu-link-text { transition-delay: 0.5s; }
.menu-item:nth-child(6) .menu-link-text { transition-delay: 0.6s; }

.menu-item:nth-child(1) .menu-link-line { transition-delay: 0.3s; }
.menu-item:nth-child(2) .menu-link-line { transition-delay: 0.4s; }
.menu-item:nth-child(3) .menu-link-line { transition-delay: 0.5s; }
.menu-item:nth-child(4) .menu-link-line { transition-delay: 0.6s; }
.menu-item:nth-child(5) .menu-link-line { transition-delay: 0.7s; }
.menu-item:nth-child(6) .menu-link-line { transition-delay: 0.8s; }

/* Mobile responsive menu */
@media (max-width: 768px) {
  .menu-container {
    padding: 8vw 6vw;
  }
  
  .menu-logo {
    font-size: 18px; /* Further reduced from 20px */
  }
  
  .menu-link {
    font-size: 6vw; /* Further reduced from 8vw */
    gap: 3vw;
  }
  
  .menu-link-text {
    font-size: 8vw; /* Further reduced from 10vw */
  }
  
  .menu-link-line {
    width: 0;
    height: 2px;
  }
  
  .menu-overlay.active .menu-link-line {
    width: 8vw;
  }
  
  .menu-footer-text {
    font-size: 3.5vw;
  }
  
  .menu-list {
    gap: 4vw;
  }
}

/* Prevent body scroll when menu is open */
body.menu-open {
  overflow: hidden;
}

/* Tablet logo size adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  .logo {
    font-size: 40px; /* Increased from original 27px */
  }
}

/* Mobile font size adjustments for h elements */
@media (max-width: 768px) {
  /* Increase logo size for mobile */
  .logo {
    font-size: 32px; /* Increased from original 27px */
  }
  
  /* Reduce h1, h2 font sizes */
  h1, h2 {
    font-size: 0.7em; /* Further reduced from 0.9em */
  }
  
  /* Reduce intro title font size */
  .intro__title {
    font-size: 14vw; /* Further reduced from 16vw */
  }
  
  /* Reduce column content title font size */
  .col__content-title {
    font-size: 12vw; /* Further reduced from 15vw */
  }
  
  /* Reduce footer link font size */
  .footer__link {
    font-size: 3vw; /* Further reduced from 4vw */
  }
  
  /* Reduce footer link top font size */
  .footer__link-top {
    font-size: 14px; /* Further reduced from 16px */
  }
}

/* Audio enable hint */
.audio-hint{
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 2000;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 11px;
  letter-spacing: .03em;
  color: #1F2E3C;
  background: rgba(255,255,255,.78);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,.06);
  user-select: none;
  pointer-events: none; /* don't block the click */
  transition: opacity .6s ease;
}