/* WECAMP v9 — brighter travel-oriented art direction + four independent carousels.
   Loaded after original styles: v8 features, book archive and split handle are retained. */
:root {
  --forest: #A61028;
  --deep: #202020;
  --pine: #A61028;
  --gold: #A61028;
  --gold-light: #F5F0EA;
  --cream: #F5F0EA;
  --paper: #F5F0EA;
  --ink: #202020;
  --secondary: #202020;
  --line: #F5F0EA;
}
body { background: var(--cream); }
.hero-guest { background:#A61028; }
.hero-host { background:#A61028; }
.hero-stage { background:#A61028; }
.hero-carousel { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.slide-carousel { position:relative; isolation:isolate; }
.hero-carousel.slide-carousel { position:absolute; }
.carousel-slide {
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .85s ease, visibility 0s linear .85s;
  pointer-events:none;
}
.carousel-slide.is-active { opacity:1; visibility:visible; transition:opacity .85s ease; }
.hero-carousel .hero-photo { width:100%; height:100%; filter:brightness(1.22) saturate(1.08); }
.hero-slide-image { display:block; width:100%; height:100%; object-fit:cover; }
.hero-carousel .guest-compare-image { object-position:47% center; filter: brightness(.79) saturate(.88); }
.hero-carousel .host-editorial-image { object-position:center; }
.hero-carousel .host-admin-image { object-position:center; filter:brightness(.81) saturate(.9); }
.hero-host[data-current-slide="1"] .hero-carousel::after {
  content:""; position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,rgba(32,32,32,.84) 1%,rgba(32,32,32,.55) 52%,rgba(32,32,32,.1));
}
.hero-guest[data-current-slide="1"] .hero-shade {
  background:linear-gradient(90deg,rgba(32,32,32,.65),rgba(32,32,32,.10)),linear-gradient(0deg,rgba(32,32,32,.66),transparent 83%);
}
.hero-shade {
  background:linear-gradient(90deg,rgba(32,32,32,.39),rgba(32,32,32,.04) 83%),
  linear-gradient(0deg,rgba(32,32,32,.68) 2%,rgba(32,32,32,.05) 72%,rgba(32,32,32,.10));
}
.hero-host .host-sheen { opacity:.18; }
.hero-pane .hero-content { z-index:3; }
.hero-pane .hero-note,.hero-pane .hero-bottomline {z-index:4;}
/* The round split handle always uses --split from site.js, independently of carousel indexes. */
.connector { z-index:15; }

/* Bars, not arrows — with generous touch targets. */
.carousel-indicators {
  position:absolute;z-index:11;left:50%;bottom:16px;transform:translateX(-50%);
  display:flex;align-items:center;gap:8px;max-width:calc(100% - 18px);
  padding:2px 9px;border-radius:30px;background:rgba(32,32,32,.16);
  backdrop-filter:blur(5px);
}
.carousel-indicator {
  position:relative;display:flex;align-items:center;justify-content:center;
  width:55px;height:29px;padding:0;border:0;background:transparent;cursor:pointer;
  touch-action:manipulation;
}
.carousel-indicator span {display:block;width:100%;height:3px;background:rgba(245,240,234,.45);border-radius:99px;overflow:hidden}
.carousel-indicator span::after {content:"";display:block;width:100%;height:100%;background:#F5F0EA;transform:scaleX(0);transform-origin:left center}
.carousel-indicator.is-active span {background:rgba(245,240,234,.6)}
.carousel-indicator.is-active span::after {animation:carousel-progress var(--carousel-duration,5600ms) linear forwards}
.carousel-indicators.is-paused .carousel-indicator.is-active span::after {animation-play-state:paused}
.carousel-indicator:focus-visible {outline:2px solid #F5F0EA;border-radius:7px;outline-offset:0}
@keyframes carousel-progress {to{transform:scaleX(1)}}
.hero-pane > .carousel-indicators { left:clamp(28px,5.2vw,100px);bottom:141px;transform:none;background:rgba(32,32,32,.28) }
.hero-host > .carousel-indicators {left:clamp(36px,5.6vw,110px)}

/* Preview carousels in the middle section retain the v8 visuals as slide one. */
.experience-section {background:#F5F0EA;}
.experience-carousel {
  position:relative;aspect-ratio:1.55 / 1;overflow:hidden;
  border:1px solid rgba(245,240,234,.78);border-radius:3px;
  box-shadow:0 18px 42px rgba(32,32,32,.085);
  background:#F5F0EA;
}
.experience-carousel .experience-visual {height:100%;width:100%;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none}
.experience-slide-image {display:block;width:100%;height:100%;object-fit:cover}
.carousel-tap-link { position:absolute;inset:0;z-index:3; }
.experience-carousel .carousel-indicators {bottom:13px;z-index:5}
.experience-carousel .carousel-indicator {width:53px;height:29px}
.experience-carousel .carousel-indicators {background:rgba(32,32,32,.38)}
.experience-caption {display:flex;color:inherit;cursor:pointer}
.experience-card:hover .experience-slide-image {transform:scale(1.018);transition:transform .8s ease}
.experience-slide-image {transition:transform .8s ease}
.experience-visual-admin {background:#A61028}

/* Calm, airy daylight between the visual blocks. Keep the archive & footer darker as visual accents. */
.intro-section {background:#F5F0EA}
.intro-top h2 em,.section-heading h2 em,.contact-title h2 em {color:#A61028}
.service-section {background:#F5F0EA}
.contact-section {background:#F5F0EA}
.hero-under {color:#A61028}
.portfolio-section {background:#202020}
.portfolio-sticky {
  background:
    radial-gradient(ellipse 72% 72% at 72% 55%,rgba(166,16,40,.18),transparent 72%),
    linear-gradient(135deg,#202020,#202020 56%,#202020);
}
.portfolio-sticky::after {background:radial-gradient(ellipse at 50% 28%,transparent 55%,rgba(32,32,32,.38) 100%)}
.quick-inquiry {background:#A61028;border-color:#A61028}

/* A secondary, deliberate email channel beside the existing inquiry form. */
.direct-email-block {margin-top:45px;padding-top:26px;border-top:1px solid #F5F0EA;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.direct-email-kicker {font:700 10px/1.4 var(--sans);letter-spacing:.2em;color:#A61028}
.direct-email-link {display:inline-flex;align-items:center;gap:13px;max-width:100%;padding-bottom:7px;border-bottom:1px solid #A61028;color:#A61028;font-size:clamp(17px,1.8vw,28px);font-weight:600;letter-spacing:-.04em;overflow-wrap:anywhere;line-height:1.3}
.direct-email-link span {font-size:22px;font-weight:400}
.direct-email-link:hover {color:#A61028;border-color:#A61028}
.direct-email-description {font-size:11px;color:#A61028}

/* Small screens: both hero sides remain horizontally split; bars fit without collisions. */
@media(max-width:1200px){
  .hero-pane > .carousel-indicators{left:40px;bottom:130px}
  .hero-host > .carousel-indicators{left:48px}
}
@media(max-width:900px){
  .hero-pane > .carousel-indicators{bottom:108px;left:35px}
  .hero-host > .carousel-indicators{left:45px}
  .carousel-indicator{width:42px;height:30px}
  .experience-carousel .carousel-indicator{width:42px}
}
@media(max-width:640px){
  .hero-pane > .carousel-indicators{left:11px;bottom:102px;gap:4px;padding:1px 5px}
  .hero-host > .carousel-indicators{left:12px}
  .hero-pane .carousel-indicator {width:30px;height:27px}
  .hero-pane .carousel-indicator span {height:2.5px}
  .experience-carousel {aspect-ratio:.78 / 1}
  .experience-carousel .carousel-indicators{gap:4px;padding:1px 4px;bottom:8px}
  .experience-carousel .carousel-indicator{width:28px;height:29px}
  .direct-email-block{margin-top:24px;padding-top:24px}
  .direct-email-link{font-size:clamp(17px,4.8vw,23px)}
  .hero-carousel .hero-slide-image{object-position:center}
  .hero-carousel .guest-compare-image{object-position:55% center}
}
@media(max-width:375px){
  .hero-pane > .carousel-indicators{bottom:95px}
  .hero-pane .carousel-indicator{width:26px}
}
@media(prefers-reduced-motion:reduce){
  .carousel-slide{transition:none!important}
  .carousel-indicator.is-active span::after {animation:none;transform:scaleX(1)}
}
