#video-host {
  position: fixed;
  inset: 0;
  z-index: 0;
}

/* Optional boxed mode: add class="boxed" to #video-host to scale responsively in flow */
#video-host.boxed {
  position: relative;
  inset: auto;
  width: min(1200px, 100%);
  margin: 0 auto;
  aspect-ratio: 16 / 9;
}

#video-host.boxed #bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* Base reset and typography */
* { box-sizing: border-box; }
html, body {
  height: 100%;
  height: 100vh; /* fallback */
  height: 100dvh; /* dynamic viewport height - excludes browser UI */
}
body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #f3f4f6;
  background: #000;
}

/* Ensure button content is centered */
button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;
  height: 30px;
}

/* Topbar menu links (inherit global button invert states) */
.menu-btn-link {
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 0;
  box-sizing: border-box;
  height: 30px;
  padding: 10px 10px;
}

/* Force icon buttons to be 30x30 squares */
.menu-btn,
.portfolio-close,
.gallery .nav,
#mute-toggle {
  width: 30px;
  height: 30px;
  padding: 0;
}

/* Normalize SVG icon size inside square buttons */
.menu-btn svg,
.portfolio-close svg,
.gallery .nav svg,
#mute-toggle svg {
  width: 18px;
  height: 18px;
}

/* Fullscreen background video */
#bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(0.9) contrast(1.05) brightness(0.9);
}

/* Overlay: 80% black + dotted pattern */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.6); /* increased from 0.5 to 0.6 */
}

/* Dots: 1px grey #888 every 3px. We use two gradients offset for crispness */
.overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(#888 1px, transparent 1px);
  background-size: 6px 6px; /* increased spacing by 100% */
  background-position: 0 0;
  opacity: 1; /* full intensity of dots; base layer handles 80% black */
  pointer-events: none;
}

/* On mobile, halve the spacing */
@media (max-width: 640px) {
  .overlay::before {
    background-size: 3px 3px;
  }
}

/* Center content */
.content {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 2;
}

.hero {
  text-align: center;
  max-width: 800px;
  margin: 0 auto;
}

.logo {
  display: inline-block;
  width: clamp(160px, 60vw, 560px);
  max-width: 100%;
  height: auto;
}

/* Mobile: make PNG logo 25% bigger (60vw -> 75vw) */
@media (max-width: 640px) {
  .logo {
    width: clamp(160px, 75vw, 560px);
  }
}

.hero h1 {
  font-size: clamp(32px, 6vw, 72px);
  line-height: 1.05;
  margin: 0 0 12px 0;
  letter-spacing: -0.02em;
}

.hero p {
  font-size: clamp(16px, 2.2vw, 22px);
  color: #d1d5db;
  margin: 0 0 28px 0;
}

.cta {
  display: inline-block;
  background: transparent;
  color: #ffffff;
  padding: 12px 18px;
  border-radius: 0;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid #ffffff;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.cta:hover { transform: translateY(-1px); }
.cta:hover, .cta:active { background: #ffffff; color: rgba(0, 0, 0, 0.8); }
.cta:active { transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  #bg-video { animation: none; }
}

/* Mute toggle button: centered horizontally, 20px from bottom */
#mute-toggle {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 10;
  background: transparent;
  color: #ffffff;
  border: 1px solid #ffffff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 0;
  padding: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
#mute-toggle svg { width: 24px; height: 24px; }

#mute-toggle:hover { background: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 0.8); }

/* Unified hover/active behavior for all buttons */
button:hover,
button:active { background: #ffffff; color: rgba(0, 0, 0, 0.9); border-color: #ffffff; } /* increased from 0.8 to 0.9 */

#mute-toggle:active { background: rgba(255, 255, 255, 1); color: rgba(0, 0, 0, 0.9); } /* increased from 0.8 to 0.9 */


/* --- Portfolio page --- */
.portfolio {
  --galleryTop: 12px;
  min-height: 100dvh;
  background: #000;
  overflow: hidden;
  position: relative;
}

.portfolio-bars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  height: 100dvh;
}

.portfolio .bar {
  position: relative;
  cursor: pointer;
  overflow: hidden;
  transition: transform 400ms ease, width 400ms ease, flex-basis 400ms ease;
}

.portfolio .bar-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.05);
  transition: transform 400ms ease;
  pointer-events: none; /* ensure clicks reach the bar */
}

.portfolio .bar-mask {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4); /* increased from 0.3 to 0.4 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 200ms ease;
  pointer-events: none; /* ensure clicks reach the bar */
}

.portfolio .bar:hover .bar-mask { opacity: 0; }
.portfolio .bar:hover .bar-bg { transform: scale(1.08); }

/* Expanded state: occupying full viewport */
.portfolio.expanded .portfolio-bars {
  display: flex;
}

.portfolio.expanded .bar {
  flex: 0 0 0%;
  width: 0;
}

.portfolio.expanded .bar.active {
  flex: 1 1 100%;
  width: 100%;
}

.portfolio-close {
  position: fixed;
  top: var(--galleryTop);
  right: 12px;
  z-index: 20;
  background: rgba(0,0,0,0.6); /* increased from 0.5 to 0.6 */
  color: #fff;
  border: 1px solid #fff;
  border-radius: 0;
  padding: 8px;
  cursor: pointer;
}
/* When portfolio runs embedded under a top bar, adjust shared top offset */
.portfolio.embedded { --galleryTop: 64px; }
@media (max-width: 640px) { .portfolio.embedded { --galleryTop: 56px; } }

.portfolio-menu {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 20;
  background: rgba(0,0,0,0.6); /* increased from 0.5 to 0.6 */
  color: #fff;
  border: 1px solid #fff;
  border-radius: 0;
  padding: 8px;
  cursor: pointer;
}

.portfolio-logo {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 20;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 8px;
}

/* Section label on bars */
.portfolio .bar::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,0.45); /* increased from 0.35 to 0.45 */
  background: rgba(0,0,0,0.4); /* increased from 0.3 to 0.4 */
  padding: 6px 10px;
}

/* Gallery overlay */
.gallery {
  position: fixed;
  inset: 0;
  z-index: 15;
  display: grid;
  place-items: center;
  background: rgba(0,0,0,0.95); /* increased from 0.85 to 0.95 */
}

/* Ensure gallery is fully hidden when [hidden] is present */
.gallery[hidden] {
  display: none !important;
  pointer-events: none;
}

.gallery .gallery-image {
  width: 100vw;
  height: 100vh; /* fallback */
  height: 100dvh; /* dynamic viewport height */
  object-fit: contain;
  object-position: center;
  border: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  will-change: transform;
  transition: transform 60ms linear;
  touch-action: none; /* allow custom touch gestures */
  user-select: none;
  -webkit-user-select: none;
}

/* On mobile: fill screen with no black gaps */
@media (max-width: 600px) {
  .gallery .gallery-image {
    object-fit: cover; /* fill screen, may crop edges */
  }
}

.gallery .gallery-video {
  width: 100vw;
  height: 100vh; /* fallback */
  height: 100dvh; /* dynamic viewport height */
  border: none;
  /* Force video to fill entire container */
  position: absolute;
  top: 0;
  left: 0;
  object-fit: cover;
  z-index: 10;
}

/* Force Safari to use full viewport height in landscape */
@supports (-webkit-touch-callout: none) {
  .gallery .gallery-image {
    height: 100vh;
    height: 100dvh;
    height: -webkit-fill-available;
  }
  
  .gallery .gallery-video {
    height: 100vh;
    height: 100dvh;
    height: -webkit-fill-available;
  }
}

/* Hide menu and logo when gallery is open */
.portfolio.expanded .portfolio-menu,
.portfolio.expanded .portfolio-logo {
  display: none;
}

/* Phone landscape mode - ensure full coverage without distortion */
@media (max-height: 500px) and (orientation: landscape) {
  .gallery .gallery-image {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    object-fit: contain;
    object-position: center;
  }
  
  .gallery .gallery-video {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
  }
  
  /* Make all fonts and icons 25% smaller in landscape */
  * {
    font-size: 0.75em !important;
  }
  
  /* Specific icon scaling */
  svg {
    transform: scale(0.75) !important;
  }
  
  /* Button scaling */
  button {
    transform: scale(0.75) !important;
  }
  
  /* Caption text scaling */
  .gallery .caption {
    font-size: 0.75em !important;
    padding: 6px 8px !important;
  }
}

.gallery .nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.4);
  color: #fff;
  border: 1px solid #fff;
  padding: 8px;
  cursor: pointer;
  z-index: 40;
}

.gallery .nav.prev { left: 12px; }
.gallery .nav.next { right: 12px; }

.gallery .caption {
  position: fixed;
  left: 12px;
  width: min(70ch, 85vw);
  color: #fff;
  border: 1px solid #fff;
  background: rgba(0,0,0,0.5);
  padding: 8px 10px;
  z-index: 35;
}

.gallery .caption.headline { top: var(--galleryTop); max-width: min(70ch, 85vw); }
.gallery .caption.description { bottom: 12px; max-width: min(70ch, 85vw); }

/* Preserve line breaks in descriptions */
.gallery .caption.description {
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 900px) {
  .portfolio-bars { height: auto; min-height: 100dvh; }
  .portfolio .bar { min-height: 25vh; }
}

@media (max-width: 600px) {
  /* Stack bars vertically; split viewport height evenly across N sections */
  .portfolio-bars { display: flex; flex-direction: column; height: 100dvh; }
  .portfolio .bar { height: calc(100dvh / var(--sections-count, 8)); min-height: 0; width: 100%; }
  
  /* Center button content on small screens */
  .portfolio button,
  .gallery .nav,
  .portfolio-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  /* On phones, place bar labels at bottom-left with same offsets as topbar menu button */
  .portfolio .bar::after {
    left: 12px;
    bottom: 10px;
    top: auto;
    transform: none;
  }

  /* Increase bottom padding for description caption */
  .gallery .caption.description { padding: 8px 10px 40px 10px; }
}