body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;
  padding-top: 70px;
  margin:0;
  background:#fafafa;
  color:#111;
}

    .card{
  max-width:700px;
  margin:120px auto 60px;
  padding:32px;
  background: rgba(255,255,255,0.92);
  border-radius:14px;
  box-shadow:0 8px 32px rgba(0,0,0,0.06);
  text-align: center;
}

  /* ===== UNIFORM HOME BOX STYLES (match contact.html) ===== */

/* Home CONTACT box should look exactly like contact.html */
#home-contact .card{
  max-width: 800px;
  margin: 6rem auto;
  padding: 48px;
  border-radius: 24px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 6px 30px rgba(10, 10, 20, 0.06);
  text-align: left; /* keep */
}

/* Home ARTIST box (cloned from artist.html) should match contact.html box style */
#home-artist .wrap{
  max-width: 800px;
  margin: 6rem auto;
  padding: 48px;
  border-radius: 24px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 6px 30px rgba(10, 10, 20, 0.06);
}

/* HOME: Make Artist text color match contact.html */
#home-artist p { color: #111; }
#home-artist a { color: #0077cc; text-decoration: none; }

/* Uniform typography inside those two boxes (title + text sizes follow the template) */
#home-contact h1,
#home-artist h1{
  font-size: 36px;
  margin: 0 0 1rem;
}

#home-contact p { color: #111; }
#home-contact a { color: #0077cc; text-decoration: none; }

#home-contact p,
#home-artist p{
  font-size: 20px;
  line-height: 1.6;
  margin: 0 0 1rem;
  text-align: left;
}

/* Keep portrait centered in Artist (same behavior as now) */
#home-artist .portrait{ text-align: center; }

/* Mobile: match contact.html spacing */
@media (max-width: 720px){
  #home-contact .card,
  #home-artist .wrap{
    margin: 4rem 1.2rem;
    padding: 32px;
  }

  #home-contact h1,
  #home-artist h1{
    font-size: 32px;
  }
}  

    h1{margin:0 0 .4rem;font-size:28px}
    p{
  color:#444;
  line-height:1.7;
  font-size:1.1rem;
  margin:0.6rem 0;
}

/* Hide page only while restoring scroll (prevents 1-frame flash at top) */
html.is-restoring-home body { visibility: hidden; }

    
    /* Make Art Gallery text behave like in art.html */
#home-art {
  text-align: center;
}

    a{color:#0b7; text-decoration:none}

        /* Gallery grid (same structure as art.html) */
    .gallery {
      max-width: 1100px;
      margin: 40px auto 80px;
      padding: 0 20px;

      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 24px;
    }

    .gallery-item {
      display: block;              /* whole  is clickable */
      text-decoration: none;
      color: #111;

      background: rgba(255,255,255,0.9);
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0px 6px 20px rgba(0,0,0,0.18);
      transition: transform 0.15s ease, box-shadow 0.15s ease;
    }

    .gallery-item:hover,
    .gallery-item:focus-visible {
      transform: translateY(-3px);
      box-shadow: 0px 10px 28px rgba(0,0,0,0.28);
    }

    .gallery-cover {
      aspect-ratio: 4 / 5;               /* Instagram-like portrait */
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
    }

   /* Title area with centered title + dot on the right */
.gallery-title {
  padding: 10px 12px 12px;
  font-weight: 600;
  font-size: 0.95rem;

  display: flex;
  align-items: flex-end;
}

/* The title text itself – stays centered */
.title-text {
  flex: 1;
  text-align: center;
}

/* Status dot (same look as art.html) */
.status-dot {
  width: 10px;   /* change this value to resize the dot */
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* Green = available */
.status-dot.available {
  background: #18b46b;
}

/* Red = not available */
.status-dot.unavailable {
  background: #d64545;
}

/* ===== HERO CAROUSEL (swipeable intro) ===== */
.hero-carousel{
  position: relative;
  height: clamp(420px, 72vh, 720px);
  width: 100%;
  overflow: hidden;
  z-index: 0;
  background: transparent; /* show moving bg-video behind */
  margin-bottom: 100px;
}
    
.hero-track{
  height: 100%;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.hero-track::-webkit-scrollbar{ display:none; }
.hero-track{ scrollbar-width: none; }

.hero-slide{
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  position: relative;
}

.hero-card-wrap{
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.hero-slide--intro .card{
  margin: 0;
}

/* Each slide is a link (optional) */
.hero-link{
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  text-decoration: none;
}

/* Video or image fills the slide */
.hero-media{
  position: relative;
  z-index: 1;
  pointer-events: none;
  width: 100%;
  height: 100%;
 object-fit: contain;
  object-position: center;
  display: block;
  background: transparent;   /* show moving bg-video behind */
}

/* Overlay layer */
.hero-overlay{
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
  to bottom,
  rgba(0,0,0,0.12),
  rgba(0,0,0,0.00) 45%,
  rgba(0,0,0,0.12)
);
  pointer-events: none; /* so link works */
}

/* Dots */
.hero-dots{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 5;
}

.hero-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.25);
  cursor: pointer;
}

.hero-dot.is-active{
  background: rgba(255,255,255,0.95);
}

/* Sound button (only controls active video slide) */
.hero-sound{
  position: absolute;
  right: 18px;
  bottom: 18px;
  z-index: 6;

  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.35);
  color: rgba(255,255,255,0.92);
  padding: 10px 14px;
  border-radius: 999px;
  font-size: 14px;
  cursor: pointer;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-sound:hover{ background: rgba(0,0,0,0.5); }
.hero-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 7;

  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.55);
  background: rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.92);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.hero-arrow:hover{ background: rgba(0,0,0,0.4); }

.hero-arrow--left{ left: 14px; }
.hero-arrow--right{ right: 14px; }

.hero-pastlives-copy{
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  color: rgba(255,255,255,0.95);
  display: flex;
  flex-direction: column;
  justify-content: center;
gap: 14px;
  align-items: center;
  text-align: center;
  padding: clamp(42px, 8vh, 74px) clamp(18px, 3.5vw, 36px) clamp(76px, 14vh, 128px);
  text-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

.hero-pastlives-title{
  margin: 0;
  font-size: clamp(38px, 6.5vw, 96px);
  letter-spacing: 0.12em;
  font-weight: 300;
  line-height: 0.95;
color: #111;
text-shadow: 0 2px 10px rgba(255,255,255,0.22);
    transform: translateY(-40px);
}

.hero-pastlives-subtitle{
  margin: 0 0 10px;
  max-width: min(92vw, 980px);
  font-size: clamp(14px, 2.4vw, 22px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.08;
    color: #fff;
white-space: nowrap;
    transform: translateY(40px);
}

.hero-pastlives-meta,
.hero-pastlives-cta{
  margin: 0;
  font-size: clamp(12px, 1.4vw, 18px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.98;
    color: #fff;
    transform: translateY(48px);
}

.hero-pastlives-cta{
  margin-top: 8px;
  font-size: clamp(12px, 1.6vw, 20px);
  opacity: 0.98;
}

html.home-portal-transition {
  opacity: 1;
  transition: opacity 220ms ease;
}

html.home-portal-transition.is-navigating {
  opacity: 0;
}
    
    /* Background video - full screen, behind content */
    #bg-video{
      position:fixed;
      right:0;
      bottom:0;
      min-width:100%;
      min-height:100%;
      width:auto;
      height:auto;
      z-index:-2;
      object-fit:cover;
      filter:brightness(0.65) saturate(.95);
    }

    /* Frosted / translucent nav (global) */
.top-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200;
}

/* Full-width bar with blurred background */
/* Full-width bar with blurred background */
.top-nav .nav-inner {
  display: flex;
  align-items: center;

  width: 100%;
  padding: 14px 44px;  /* side padding added */
  box-sizing: border-box;

  border-radius: 0;
  background: rgba(255,255,255,0.32);
  border-bottom: 1.5px solid rgba(255,255,255,0.45);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

    /* Main navigation (center group) */
.nav-main {
  flex: 1;
  display: flex;
  justify-content: center;
  gap: 32px;
}

/* Language navigation (right side) */
.nav-lang {
  display: flex;
  gap: 12px;
}
    
.nav-item {
  font-weight: 600;
  font-size: 1rem;
  color: #000;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 6px;
}

.nav-item:hover {
  background: rgba(255,255,255,0.4);
}

/* Make nav fit nicely on small screens */
@media (max-width: 600px) {
  .top-nav .nav-inner {
    gap: 12px;          /* less space between items */
    padding: 10px 4px;  /* narrower padding left/right */
  }

  .nav-item {
    font-size: 0.9rem;  /* slightly smaller text */
    padding: 6px 6px;   /* narrower buttons */
  }
}

/* ===== FUTURE NAV DROPDOWN (currently unused) =====
.dropdown { position: relative; }
.dropdown > .nav-item { cursor: pointer; display: inline-block; }
.dropdown-menu {
  display: none;
  position: absolute;
  top: 38px;
  left: 0;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(8px);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
  padding: 10px 0;
  min-width: 120px;
  z-index: 200;
}
.dropdown:hover .dropdown-menu { display: block; }
.dropdown-link {
  padding: 8px 14px;
  display: block;
  white-space: nowrap;
  color: #000;
  text-decoration: none;
  font-weight: 500;
}
.dropdown-link:hover { background: rgba(0,0,0,0.08); }
*/
    
/* HOME: Other Projects titles centered (override the Art flex title style) */
#home-projects .gallery-title {
  display: block;      /* kills the flex layout from Art */
  text-align: center;  /* centers text on desktop + mobile */
  padding: 10px 12px 12px;
}

/* If you have any leftover dot/span in otherprojects cards, hide it safely */
#home-projects .status-dot {
  display: none;
}    


/* Artist section (same look as artist.html) */
#home-artist {
  /* no special layout, card will center itself with .wrap */
}


/* Portrait image inside the card */
.portrait {
  text-align: center;
  margin-bottom: 20px;
}

.portrait img {
  width: 340px;
  max-width: 65%;
  height: auto;
  border-radius: 12px;
  display: inline-block;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  object-fit: cover;
}

@media (max-width: 600px) {
  .portrait img {
    width: 220px;
    max-width: 80%;
  }
}

/* Contact form styles (used in Home contact section) */
.contact-form {
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-group {
  text-align: left;
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: #333;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid  #ddd;
  font-size: 0.95rem;
  font-family: inherit;
  box-sizing: border-box;
}

.form-group textarea {
  min-height: 120px;
  resize: vertical;
}

/* Submit button */
.contact-form button {
  align-self: flex-start;
  margin-top: 4px;
  padding: 10px 24px;
  border-radius: 999px;
  border: none;
  background: #111;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.contact-form button:hover {
  background: #333;
}

/* Status / thank-you text */
.form-status {
  margin-top: 10px;
  font-size: 0.95rem;
  color: #1b7a2f;      /* green success text */
}

.form-status.error {
  color: #b00020;      /* red for error */
}

    
    /* FOOTER: fixed at bottom, left aligned, larger text */
   /* Footer copyright (matches artist page) */
.footer {
  text-align: center;
  padding: 18px 0;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.9);
  position: fixed;
  bottom: 0;
  width: 100%;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(0,0,0,0.38);
  box-sizing: border-box;
}

/* Tag style */
.footer .tag {
  font-weight: 600;
  margin-left: 6px;
}


    /* make footer slightly smaller on small screens */
    @media (max-width:520px){
      .site-footer { font-size: 15px; padding:10px 16px; }
      .card { margin: 0 16px; }
    }

    /* Increase spacing under the welcome card on mobile */
@media (max-width: 600px) {
  .card {
    margin: 120px auto 120px; /* increase bottom spacing */
  }
}