/* Star Travel header override */

.site-header .desktop-nav{
  font-size:19px !important;
}

.site-header .brand-mark span{
  font-size:27px !important;
}

.star-travel-manifesto{
  position:relative !important;
  display:block !important;
  width:330px !important;
  min-width:330px !important;
  height:26px !important;
  padding-left:22px !important;
  overflow:visible !important;
  white-space:nowrap !important;
  font-family:"Cormorant Garamond", Georgia, serif !important;
  font-size:17px !important;
  font-weight:500 !important;
  color:#111 !important;
  animation:none !important;
}

.manifesto-words{
  height:26px;
  display:grid;
  grid-template-columns:82px 95px 58px;
  column-gap:22px;
  align-items:center;
}

.travel-word{
  display:block;
  line-height:1;
  opacity:.48;
}

.travel-word-1{ animation:travelWord1 6s ease-in-out infinite; }
.travel-word-2{ animation:travelWord2 6s ease-in-out infinite; }
.travel-word-3{ animation:travelWord3 6s ease-in-out infinite; }

.travel-star{
  position:absolute;
  left:0;
  top:50%;
  z-index:2;
  display:block;
  font-size:12px;
  line-height:1;
  transform:translate(0,-50%);
  transform-origin:center;
  animation:starTravelDesktop 6s cubic-bezier(.45,0,.2,1) infinite;
  will-change:transform;
}

@keyframes starTravelDesktop{
  0%,15%{ transform:translate(0,-50%) rotate(0deg) scale(1); }
  25%,40%{ transform:translate(104px,-50%) rotate(45deg) scale(1.08); }
  50%,65%{ transform:translate(221px,-50%) rotate(90deg) scale(1.06); }
  75%,87%{ transform:translate(104px,-50%) rotate(135deg) scale(1.08); }
  100%{ transform:translate(0,-50%) rotate(180deg) scale(1); }
}

@keyframes travelWord1{
  0%,18%,95%,100%{opacity:1}
  28%,85%{opacity:.48}
}

@keyframes travelWord2{
  0%,17%,45%,70%,100%{opacity:.48}
  25%,40%,75%,88%{opacity:1}
}

@keyframes travelWord3{
  0%,45%,70%,100%{opacity:.48}
  50%,65%{opacity:1}
}

/* Tablet: keep it visible, but tighter */
@media(max-width:1100px){
  .site-header{
    width:min(calc(100% - 54px),var(--max)) !important;
  }

  .header-left{
    gap:30px !important;
  }

  .site-header .desktop-nav{
    gap:26px !important;
    font-size:17px !important;
  }

  .star-travel-manifesto{
    display:block !important;
    width:260px !important;
    min-width:260px !important;
    padding-left:18px !important;
    font-size:14px !important;
  }

  .manifesto-words{
    grid-template-columns:67px 78px 48px;
    column-gap:16px;
  }

  .travel-star{
    font-size:10px;
    animation-name:starTravelTablet;
  }

  @keyframes starTravelTablet{
    0%,15%{ transform:translate(0,-50%) rotate(0deg) scale(1); }
    25%,40%{ transform:translate(83px,-50%) rotate(45deg) scale(1.08); }
    50%,65%{ transform:translate(177px,-50%) rotate(90deg) scale(1.06); }
    75%,87%{ transform:translate(83px,-50%) rotate(135deg) scale(1.08); }
    100%{ transform:translate(0,-50%) rotate(180deg) scale(1); }
  }
}

/* Mobile: centered manifesto, clickable menu, left-aligned hero intro */
@media(max-width:760px){
  .site-header{
    width:calc(100% - 28px) !important;
    height:60px !important;
    display:grid !important;
    grid-template-columns:auto minmax(0,1fr) auto !important;
    grid-template-rows:60px !important;
    align-items:center !important;
    gap:8px !important;
    position:relative !important;
    overflow:visible !important;
  }

  .header-left{
    grid-column:1 !important;
    grid-row:1 !important;
    display:flex !important;
    align-items:center !important;
    gap:0 !important;
    position:static !important;
    z-index:90 !important;
  }

  .site-header .brand-mark{
    width:22px !important;
    height:22px !important;
    position:relative !important;
    z-index:95 !important;
  }

  .site-header .brand-mark span{
    font-size:25px !important;
  }

  /* Hidden by default; .open below explicitly wins with !important */
  .site-header .desktop-nav{
    display:none !important;
  }

  /* Precisely centered in the whole mobile header, independent of star/burger widths */
  .star-travel-manifesto{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    transform:translate(-50%,-50%) !important;
    display:block !important;
    width:min(230px, calc(100vw - 110px)) !important;
    min-width:0 !important;
    height:24px !important;
    margin:0 !important;
    padding-left:14px !important;
    overflow:hidden !important;
    font-size:12.5px !important;
    z-index:70 !important;
    pointer-events:none !important;
  }

  .manifesto-words{
    width:100%;
    height:24px;
    grid-template-columns:58px 66px 42px;
    column-gap:10px;
  }

  .travel-star{
    font-size:9px !important;
    animation-name:starTravelMobile;
  }

  @keyframes starTravelMobile{
    0%,15%{ transform:translate(0,-50%) rotate(0deg) scale(1); }
    25%,40%{ transform:translate(68px,-50%) rotate(45deg) scale(1.08); }
    50%,65%{ transform:translate(144px,-50%) rotate(90deg) scale(1.06); }
    75%,87%{ transform:translate(68px,-50%) rotate(135deg) scale(1.08); }
    100%{ transform:translate(0,-50%) rotate(180deg) scale(1); }
  }

  .menu-toggle{
    grid-column:3 !important;
    grid-row:1 !important;
    justify-self:end !important;
    align-self:center !important;
    display:block !important;
    position:relative !important;
    z-index:100 !important;
    cursor:pointer !important;
    pointer-events:auto !important;
  }

  /* Functional dropdown: overrides the mobile display:none rule */
  .site-header .desktop-nav.open{
    display:flex !important;
    position:absolute !important;
    top:60px !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    padding:24px 22px 28px !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:20px !important;
    background:var(--bg) !important;
    border-top:1px solid var(--line) !important;
    border-bottom:1px solid var(--line) !important;
    z-index:85 !important;
    box-shadow:0 16px 28px rgba(17,17,17,.06) !important;
  }

  .site-header .desktop-nav.open a{
    display:block !important;
    width:100% !important;
    padding:5px 0 !important;
    font-size:24px !important;
    line-height:1.15 !important;
  }

  /* Reorder hero without duplicating HTML */
  .hero{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
    align-items:stretch !important;
  }

  .hero-copy{
    display:contents !important;
  }

  /* Everything in the intro starts from the exact same left edge */
  .hero .eyebrow{
    order:1;
    align-self:flex-start !important;
    justify-content:flex-start !important;
    width:max-content !important;
    margin:0 0 22px 0 !important;
    text-align:left !important;
  }

  .hero h1{
    order:2;
    align-self:flex-start !important;
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    text-align:left !important;
  }

  .hero h2{
    order:3;
    align-self:flex-start !important;
    width:100% !important;
    margin:18px 0 14px !important;
    text-align:left !important;
  }

  .hero-art{
    order:4;
    width:100% !important;
    min-height:430px !important;
    margin:0 0 24px !important;
  }

  .hero-art .portrait-shell{
    inset:0 26px 0 0 !important;
  }

  .hero-intro{
    order:5;
    width:100% !important;
    margin:0 0 28px !important;
    text-align:left !important;
  }

  .hero-actions{
    order:6;
  }

  .hero-tags{
    order:7;
    margin-top:34px !important;
  }
}

@media(max-width:380px){
  .star-travel-manifesto{
    font-size:11.5px !important;
    width:min(210px, calc(100vw - 104px)) !important;
    padding-left:12px !important;
  }

  .manifesto-words{
    grid-template-columns:54px 61px 39px;
    column-gap:8px;
  }

  .travel-star{
    font-size:8px !important;
    animation-name:starTravelSmall;
  }

  @keyframes starTravelSmall{
    0%,15%{ transform:translate(0,-50%) rotate(0deg); }
    25%,40%{ transform:translate(62px,-50%) rotate(45deg); }
    50%,65%{ transform:translate(131px,-50%) rotate(90deg); }
    75%,87%{ transform:translate(62px,-50%) rotate(135deg); }
    100%{ transform:translate(0,-50%) rotate(180deg); }
  }

  .hero-art{
    min-height:385px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .travel-star,
  .travel-word{
    animation:none !important;
  }

  .travel-word{
    opacity:1 !important;
  }
}