/* =========================================================
   宇宙旅行社 — Cosmos Travel Agency Co., Ltd.
   Design tokens
========================================================= */
:root{
  --ink:        #3B2A1B;
  --ink-soft:   #826547;
  --paper:      #F3F1EA;
  --paper-soft: #E6E2D6;
  --ember:      #4F80C2;
  --ember-dark: #396599;
  --moss:       #826547;
  --sand:       #C9C0AE;
  --gold:       #B28A58;
  --tan:        #D6B173;
  --tan-dark:   #C29A5C;
  --cream:      #FCFBF7;

  --font-display: 'Fraunces', 'Noto Serif TC', serif;
  --font-body:    'Manrope', 'Noto Sans TC', sans-serif;
  --font-mono:    'IBM Plex Mono', 'Noto Sans TC', monospace;

  --container: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --radius: 14px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:88px; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:var(--font-display); font-weight:600; margin:0; letter-spacing:-0.01em; }
p{ margin:0; }
ul{ list-style:none; margin:0; padding:0; }
button{ font-family:inherit; cursor:pointer; }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:var(--cream);
  padding:10px 16px; z-index:200; border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:2px solid var(--ember); outline-offset:3px; }

.anchor-offset{ display:block; height:0; }

/* =========================================================
   Eyebrow / labels — the "boarding-pass" utility type
========================================================= */
.eyebrow{
  display:inline-flex; align-items:flex-start; gap:8px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ember);
  margin:0 0 14px;
}
.eyebrow--light{ color:var(--gold); }
.eyebrow--center{ justify-content:center; margin:0; }
.eyebrow-icon{ width:12px; height:12px; margin-top:3px; fill:currentColor; flex:none; }

.section-head{ max-width:640px; margin:0 0 48px; }
.section-head h2{ font-size:clamp(28px,4vw,40px); margin-bottom:10px; }
.section-sub{ color:var(--ink-soft); font-size:17px; }
.section-head--row{
  max-width:none; display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; flex-wrap:wrap;
}
.section-head--center{ max-width:none; text-align:center; margin:0 auto 56px; }

/* =========================================================
   Buttons
========================================================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:999px;
  font-family:var(--font-body); font-weight:600; font-size:15px;
  border:1.5px solid transparent;
  transition:transform .25s ease, background-color .25s ease, color .25s ease, border-color .25s ease;
  white-space:nowrap;
}
.btn--primary{ background:var(--ember); color:var(--cream); }
.btn--primary:hover{ background:var(--ember-dark); transform:translateY(-2px); }
.btn--tan{ background:var(--tan); color:var(--ink); }
.btn--tan:hover{ background:var(--tan-dark); transform:translateY(-2px); }
.btn--ghost{ border-color:currentColor; color:inherit; }
.btn--ghost:hover{ background:rgba(255,255,255,.12); transform:translateY(-2px); }
.btn--lg{ padding:16px 34px; font-size:16px; }

/* =========================================================
   Passport-stamp badges — signature motif
========================================================= */
.stamp{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#fff;
  background:rgba(16,27,46,.4);
  border:1.5px dashed rgba(255,255,255,.75);
  border-radius:4px;
  padding:5px 10px;
  transform:rotate(-4deg);
  backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
}
.stamp--card{ position:absolute; top:14px; left:14px; z-index:2; }

/* =========================================================
   Header
========================================================= */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:14px var(--gutter);
  transition:background-color .35s ease, box-shadow .35s ease, padding .35s ease;
}
.site-header.is-scrolled{
  background:rgba(252,251,247,.94);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(59,42,27,.1);
  padding:10px var(--gutter);
}
.header-inner{
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}

.brand{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.brand-icon-wrap{ position:relative; display:block; width:clamp(110px,13vw,150px); transition:width .3s ease; }
.brand-icon-wrap::before{ content:''; display:block; padding-top:27.3%; }
.brand-icon{
  position:absolute; inset:0; width:100%; height:100%;
  transition:opacity .3s ease;
}
.brand-icon--dark{ opacity:0; }
.site-header.is-scrolled .brand-icon-wrap{ width:clamp(90px,10vw,120px); }
.site-header.is-scrolled .brand-icon--light{ opacity:0; }
.site-header.is-scrolled .brand-icon--dark{ opacity:1; }

.brand-icon-static{ width:clamp(130px,16vw,170px); height:auto; display:block; margin:0 auto; }

.brand-text{ display:flex; flex-direction:column; align-items:center; line-height:1.3; text-align:center; }
.brand-name{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--cream); white-space:nowrap; transition:color .3s ease, font-size .3s ease; }
.brand-en{ font-family:var(--font-mono); font-size:8.5px; letter-spacing:.12em; color:var(--cream); text-transform:uppercase; opacity:.9; white-space:nowrap; transition:color .3s ease; }
.site-header.is-scrolled .brand-name,
.site-header.is-scrolled .brand-en{ color:var(--ink); }

.site-nav{ display:flex; align-items:center; gap:32px; }
.site-nav a{
  font-size:15px; font-weight:500; color:var(--cream);
  position:relative; padding:4px 0;
}
.site-header.is-scrolled .site-nav a{ color:var(--ink); }
.site-nav a::after{
  content:''; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--tan); transition:right .25s ease;
}
.site-nav a:hover::after{ right:0; }

.nav-toggle{ display:none; }
.nav-burger{ display:none; flex-direction:column; gap:5px; width:26px; cursor:pointer; z-index:110; }
.nav-burger span{
  height:2px; background:var(--cream); border-radius:2px; transition:transform .3s ease, opacity .3s ease, background-color .3s ease;
}
.site-header.is-scrolled .nav-burger span{ background:var(--ink); }

/* =========================================================
   Divider — perforated "ticket tear" rule
========================================================= */
.divider{
  max-width:var(--container); margin:0 auto; padding:0 var(--gutter);
  display:flex; align-items:center; gap:10px;
  color:var(--sand);
}
.divider::before,.divider::after{
  content:''; flex:1; height:0; border-top:2px dashed var(--sand);
}
.divider span{ width:5px; height:5px; border-radius:50%; background:var(--sand); flex:none; }

/* =========================================================
   Hero
========================================================= */
.hero{
  position:relative; min-height:100svh; display:flex; align-items:flex-end;
  overflow:hidden; color:var(--cream);
}
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-slide{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:60% 30%;
  opacity:0; transition:opacity 1.4s ease;
  animation:heroZoom 9s ease-in-out infinite alternate;
}
.hero-slide.is-active{ opacity:1; z-index:1; }
@keyframes heroZoom{ from{ transform:scale(1);} to{ transform:scale(1.07);} }
.hero-scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(10,18,31,.55) 0%, rgba(10,18,31,.25) 32%, rgba(10,18,31,.55) 78%, rgba(10,18,31,.92) 100%);
}
.hero-content{
  position:relative; z-index:2;
  max-width:var(--container); width:100%; margin:0 auto;
  padding:190px var(--gutter) 80px;
}
.hero-title{
  font-size:clamp(36px, 6vw, 68px); line-height:1.12; margin-bottom:22px;
  max-width:16ch;
  text-wrap:balance;
  transition:opacity .25s ease;
}
.hero-lead{ max-width:52ch; font-size:18px; color:rgba(252,251,247,.88); margin-bottom:32px; transition:opacity .25s ease; }
.hero-fade{ opacity:0; }

.hero-arrow{
  position:absolute; top:50%; z-index:3; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%; border:none;
  background:rgba(10,14,20,.38); color:#fff;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  transition:background-color .25s ease, transform .25s ease;
}
.hero-arrow:hover{ background:rgba(10,14,20,.6); }
.hero-arrow svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.hero-arrow--prev{ left:var(--gutter); }
.hero-arrow--next{ right:var(--gutter); }

.hero-dots{
  position:absolute; left:50%; bottom:28px; z-index:3; transform:translateX(-50%);
  display:flex; align-items:center; gap:9px;
}
.hero-dot{
  width:8px; height:8px; border-radius:50%; border:none; padding:0;
  background:rgba(252,251,247,.45);
  transition:background-color .25s ease, transform .25s ease, width .25s ease;
}
.hero-dot:hover{ background:rgba(252,251,247,.75); }
.hero-dot.is-active{ background:var(--tan); width:22px; border-radius:5px; }

/* =========================================================
   Journeys by Mood
========================================================= */
.moods, .philosophy, .tours{
  max-width:var(--container); margin:0 auto; padding:100px var(--gutter);
}
.mood-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
}
.mood-card{
  position:relative; border-radius:var(--radius); overflow:hidden;
  aspect-ratio:3/4.1; isolation:isolate;
  box-shadow:0 1px 2px rgba(16,27,46,.06);
  transition:transform .4s ease, box-shadow .4s ease;
}
.mood-card:hover{ transform:translateY(-6px); box-shadow:0 18px 34px -18px rgba(16,27,46,.45); }
.mood-card img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:transform .6s ease;
}
.mood-card:hover img{ transform:scale(1.07); }
.mood-card::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,18,31,0) 40%, rgba(10,18,31,.86) 100%);
}
.mood-copy{
  position:relative; z-index:2; color:var(--cream);
  margin-top:auto; padding:20px; display:flex; flex-direction:column; gap:4px;
  align-self:flex-end; width:100%;
}
.mood-card{ display:flex; }
.mood-en{ font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); }
.mood-zh{ font-family:var(--font-display); font-size:22px; font-weight:600; }
.mood-copy p{ font-size:13.5px; color:rgba(251,249,243,.85); margin-top:4px; }

/* =========================================================
   Philosophy
========================================================= */
.belief-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.belief{
  background:var(--cream); border:1px solid var(--paper-soft); border-radius:var(--radius);
  padding:32px 28px; position:relative;
}
.belief-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; margin-bottom:18px;
  background:var(--tan); color:var(--ink);
  font-family:var(--font-display); font-size:19px; font-weight:600;
}
.belief h3{ font-size:20px; margin-bottom:10px; }
.belief p{ color:var(--ink-soft); font-size:15px; }

/* =========================================================
   Must-Do Tours — single-slide carousel
========================================================= */
.tours-heading{
  font-family:var(--font-display); font-size:clamp(34px,5vw,54px); color:var(--ink);
  margin-bottom:8px;
}

.tour-slider{ position:relative; }
.tour-slides{ position:relative; }
.tour-slide{
  display:none;
  grid-template-columns:1fr 1fr; align-items:center; gap:56px;
}
.tour-slide.is-active{ display:grid; }
.tour-slide-media{ position:relative; }
.tour-slide-media img{
  width:100%; aspect-ratio:16/11; object-fit:cover; border-radius:6px;
}
.tour-slide-media::after{
  content:''; position:absolute; top:50%; right:-56px; width:56px; height:1px;
  background:var(--ink-soft); opacity:.5;
}
.tour-slide-copy{ max-width:44ch; }
.tour-tag{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; color:var(--gold); text-transform:uppercase; margin-bottom:14px; }
.tour-slide-copy h3{ font-size:clamp(24px,2.6vw,32px); line-height:1.35; margin-bottom:18px; color:var(--ink); }
.tour-slide-copy p{ font-size:15.5px; color:var(--ink-soft); margin-bottom:26px; line-height:1.8; }
.tour-link{
  font-weight:600; font-size:14.5px; color:var(--ink); display:inline-flex; gap:6px;
  padding-bottom:3px; border-bottom:1.5px solid var(--ink);
}
.tour-link span{ transition:transform .25s ease; }
.tour-link:hover span{ transform:translateX(4px); }

.tour-dots{
  display:flex; align-items:center; justify-content:center; gap:9px;
  margin-top:44px;
}
.tour-dot{
  width:8px; height:8px; border-radius:50%; border:none; padding:0;
  background:var(--sand);
  transition:background-color .25s ease, width .25s ease;
}
.tour-dot:hover{ background:var(--gold); }
.tour-dot.is-active{ background:var(--tan); width:26px; border-radius:5px; }

/* =========================================================
   Story / pull-quote
========================================================= */
.story{ position:relative; min-height:70vh; display:flex; align-items:center; overflow:hidden; color:var(--cream); }
.story-media{ position:absolute; inset:0; }
.story-media img{ width:100%; height:100%; object-fit:cover; object-position:center 35%; }
.story-scrim{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(10,18,31,.82) 0%, rgba(10,18,31,.45) 55%, rgba(10,18,31,.2) 100%); }
.story-content{ position:relative; z-index:1; max-width:var(--container); width:100%; margin:0 auto; padding:0 var(--gutter); }
.story blockquote{
  font-family:var(--font-display); font-weight:500; font-style:italic;
  font-size:clamp(26px,3.6vw,40px); line-height:1.35; margin:0 0 20px; max-width:16ch;
}
.story-caption{ color:rgba(251,249,243,.8); font-size:14.5px; max-width:46ch; }

/* =========================================================
   CTA band (merged into footer top)
========================================================= */
.cta-band{ background:var(--cream); padding:56px var(--gutter); }
.cta-band-inner{
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:40px; flex-wrap:wrap;
}
.cta-band-title{ font-size:clamp(26px,3vw,34px); color:var(--ink); flex:1 1 260px; min-width:240px; }
.cta-band-text{ color:var(--ink-soft); font-size:15.5px; max-width:36ch; flex:1 1 320px; }
.br-mobile{ display:none; }

/* =========================================================
   Footer
========================================================= */
.site-footer{ background:var(--ember); color:#fff; padding:44px var(--gutter); }
.footer-inner{
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap;
}
.brand--footer{ flex:0 0 auto; }
.footer-contact{
  font-style:normal; font-size:14px; color:#fff; line-height:1.85; text-align:left;
  flex:1 1 260px;
}
.footer-contact a{ color:#fff; }
.footer-contact a:hover{ opacity:.85; }
.footer-legal{ opacity:.85; font-size:12.5px; }
.footer-tagline{
  font-family:var(--font-display); font-style:italic; color:#fff; font-size:17px;
  flex:0 0 auto; white-space:nowrap;
}

/* =========================================================
   Reveal-on-scroll
========================================================= */
.reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.is-visible{ opacity:1; transform:translateY(0); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .hero-media img{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width:1024px){
  .mood-grid{ grid-template-columns:repeat(2,1fr); }
  .belief-row{ grid-template-columns:1fr; }
  .tour-slide{ gap:32px; }
  .tour-slide-media::after{ display:none; }
}

@media (max-width:860px){
  .site-nav{
    position:fixed; inset:0 0 0 auto; width:min(78vw,340px);
    background:var(--ink); color:var(--cream);
    flex-direction:column; align-items:flex-start; justify-content:flex-start;
    padding:110px 32px 40px; gap:26px;
    transform:translateX(100%); transition:transform .4s ease;
  }
  .nav-toggle:checked ~ .site-nav{ transform:translateX(0); }
  .site-nav a{ color:var(--cream) !important; font-size:18px; }
  .nav-burger{ display:flex; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

  .tour-slide.is-active{ display:flex; flex-direction:column; }
  .tour-slide-copy{ max-width:none; }

  .footer-inner{ flex-direction:column; text-align:center; }
  .footer-contact{ flex:0 0 auto; }
  .footer-contact{ text-align:center; }
}

@media (max-width:640px){
  .mood-grid{ grid-template-columns:1fr 1fr; }
  .mood-card{ aspect-ratio:3/4.6; }
  .hero-content{ padding-top:150px; padding-bottom:64px; }
  .hero-arrow{ width:38px; height:38px; }
  .hero-arrow--prev{ left:12px; }
  .hero-arrow--next{ right:12px; }
  .br-mobile{ display:inline; }
  .moods,.philosophy,.tours{ padding:72px var(--gutter); }
  .cta-band-inner{ flex-direction:column; align-items:flex-start; text-align:left; }
  .cta-band-title,
  .cta-band-text{ flex:0 0 auto; }
  .cta-band-inner .btn{ width:100%; }
}

@media (max-width:420px){
  .mood-grid{ grid-template-columns:1fr; }
  .mood-card{ aspect-ratio:4/3; }
}