:root{
    --bg:#F7F1E4;
    --bg-2:#E9DBC2;
    --ink:#3B2A1E;
    --ink-dim:#6E5A44;
    --line:#DCCBA8;
    --gold:#8B5A2B;
    --sand:#3B2A1E;
    --orb-1:#E3CFA1;
    --orb-2:#C9AE85;
    --orb-3:#8B5E3C;
    --sky-1:#EFE1C4;
    --sky-2:#F7F1E4;
    --mtn-1:#C9AE85;
    --mtn-2:#8B6B47;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  :root[data-theme="dark"]{
    --bg:#241A11; --bg-2:#2F2216; --ink:#F3EAD9; --ink-dim:#C7B49B;
    --line:#4A3722; --gold:#D9A15C; --sand:#F3EAD9;
    --orb-1:#3A2B1A; --orb-2:#4A3722; --orb-3:#5C4025;
    --sky-1:#2A1F14; --sky-2:#241A11; --mtn-1:#4A3722; --mtn-2:#3A2B1A;
  }
  html{scroll-padding-top:env(safe-area-inset-top,0px); scroll-behavior:smooth; background:var(--bg);}
  *{box-sizing:border-box;}
  body{
    margin:0; background:transparent; color:var(--ink);
    font-family:'Lora',serif; font-weight:400;
    -webkit-font-smoothing:antialiased; overflow-x:hidden; position:relative;
  }
  h1,h2,h3{font-family:'Fraunces',serif; margin:0; font-weight:500; letter-spacing:-0.01em;}
  a{color:inherit;}
  .wrap{max-width:1000px; margin:0 auto; padding:0 24px;}
  @media(min-width:700px){.wrap{padding:0 48px;}}
  @media(min-width:1200px){.wrap{max-width:1160px; padding:0 56px;}}
  @media(min-width:1600px){.wrap{max-width:1320px;}}

  /* full-site rotating background photos */
  .bg-photos{position:fixed; inset:0; z-index:-1; overflow:hidden; background:var(--ink);}
  .bg-photos img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    opacity:0; animation-duration:20s; animation-timing-function:linear; animation-iteration-count:infinite;
    transform:scale(1.06);
  }
  .bg-photos img.p1{animation-name:bgPhoto1;}
  .bg-photos img.p2{animation-name:bgPhoto2;}
  .bg-photos img.p3{animation-name:bgPhoto3;}
  .bg-photos img.p4{animation-name:bgPhoto4;}
  @keyframes bgPhoto1{
    0%{opacity:1; transform:scale(1);} 20%{opacity:1; transform:scale(1.05);}
    25%{opacity:0;} 95%{opacity:0;} 100%{opacity:1; transform:scale(1);}
  }
  @keyframes bgPhoto2{
    0%{opacity:0;} 20%{opacity:0;} 25%{opacity:1; transform:scale(1);}
    45%{opacity:1; transform:scale(1.05);} 50%{opacity:0;} 100%{opacity:0;}
  }
  @keyframes bgPhoto3{
    0%{opacity:0;} 45%{opacity:0;} 50%{opacity:1; transform:scale(1);}
    70%{opacity:1; transform:scale(1.05);} 75%{opacity:0;} 100%{opacity:0;}
  }
  @keyframes bgPhoto4{
    0%{opacity:0;} 70%{opacity:0;} 75%{opacity:1; transform:scale(1);}
    95%{opacity:1; transform:scale(1.05);} 100%{opacity:0;}
  }
  .bg-wash{position:fixed; inset:0; z-index:0; background:var(--bg); opacity:0.6; pointer-events:none;}
  @media (prefers-reduced-motion: reduce){
    .bg-photos img{animation:none; opacity:0;}
    .bg-photos img.p1{opacity:1;}
  }

  /* ambient background orbs */
  .bg-orbs{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none;}
  .orb{position:absolute; border-radius:50%; filter:blur(60px); opacity:0.5; will-change:transform;}
  .orb-a{width:46vw; height:46vw; top:-14vw; left:-10vw; background:radial-gradient(circle at 30% 30%, var(--orb-1), transparent 70%); animation:driftA 34s ease-in-out infinite alternate;}
  .orb-b{width:38vw; height:38vw; top:40vh; right:-14vw; background:radial-gradient(circle at 60% 40%, var(--orb-2), transparent 70%); animation:driftB 40s ease-in-out infinite alternate;}
  .orb-c{width:32vw; height:32vw; bottom:-12vw; left:20vw; background:radial-gradient(circle at 50% 50%, var(--orb-3), transparent 70%); opacity:0.35; animation:driftC 46s ease-in-out infinite alternate;}
  @keyframes driftA{0%{transform:translate(0,0) scale(1);}100%{transform:translate(6vw,8vh) scale(1.15);}}
  @keyframes driftB{0%{transform:translate(0,0) scale(1);}100%{transform:translate(-7vw,-6vh) scale(1.1);}}
  @keyframes driftC{0%{transform:translate(0,0) scale(1);}100%{transform:translate(5vw,-7vh) scale(0.9);}}

  header, section{position:relative; z-index:1;}

  header{position:fixed; top:0; left:0; right:0; z-index:50; display:flex; justify-content:center; padding-top:calc(14px + env(safe-area-inset-top,0px));}
  .navpill{
    display:flex; justify-content:space-between; align-items:center; gap:28px;
    padding:10px 20px; border-radius:999px;
    background:rgba(255,255,255,0.001);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border:1px solid var(--line);
    box-shadow:0 8px 24px -14px rgba(0,0,0,0.25);
    transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
  }
  header.scrolled .navpill{
    box-shadow:0 12px 30px -12px rgba(0,0,0,0.3);
    padding:8px 18px;
  }
  .navpill{background-color:color-mix(in srgb, var(--bg) 78%, transparent);}
  .brand{font-family:'Fraunces',serif; font-size:0.98rem; font-weight:500; white-space:nowrap;}
  .menu-btn{
    width:32px; height:32px; display:flex; flex-direction:column; justify-content:center;
    align-items:center; gap:6px; background:none; border:none; cursor:pointer; padding:0;
  }
  .menu-btn span{
    display:block; width:22px; height:2px; background:var(--ink); border-radius:2px;
    transition:transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
  }
  .menu-btn.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .menu-btn.open span:nth-child(2){opacity:0;}
  .menu-btn.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

  .nav-drawer{
    position:fixed; inset:0; z-index:40;
    background:color-mix(in srgb, var(--bg) 94%, transparent);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden; transition:opacity .4s ease, visibility 0s linear .4s;
  }
  .nav-drawer.open{opacity:1; visibility:visible; transition:opacity .4s ease, visibility 0s linear 0s;}
  .drawer-links{display:flex; flex-direction:column; gap:26px; text-align:center;}
  .drawer-links a{
    font-family:'Fraunces',serif; font-size:2.1rem; text-decoration:none; color:var(--ink);
    opacity:0; transform:translateY(16px);
    transition:opacity .5s ease, transform .5s ease, color .3s ease;
  }
  .nav-drawer.open .drawer-links a{opacity:1; transform:translateY(0);}
  .drawer-links a:nth-child(1){transition-delay:.05s;}
  .drawer-links a:nth-child(2){transition-delay:.11s;}
  .drawer-links a:nth-child(3){transition-delay:.17s;}
  .drawer-links a:nth-child(4){transition-delay:.23s;}
  .drawer-links a:nth-child(5){transition-delay:.29s;}
  .drawer-links a:nth-child(6){transition-delay:.35s;}
  .drawer-links a:hover{color:var(--gold);}
  @media (prefers-reduced-motion: reduce){
    .nav-drawer, .drawer-links a, .menu-btn span{transition:none;}
  }

  /* HERO */
  .hero{
    height:100vh; height:100svh;
    display:flex; align-items:center; overflow:hidden;
    border-bottom:1px solid var(--line);
  }
  .hero-content{position:relative; z-index:2; padding-top:calc(70px + env(safe-area-inset-top,0px)); padding-bottom:40px; width:100%;}
  @media (max-width:480px){
    .hero h1{max-width:19ch; margin-top:10px;}
    .hero .sub{font-size:0.92rem; margin-top:14px;}
    .hero-btns{gap:12px; margin-top:24px;}
    .btn{padding:13px 20px; font-size:0.85rem;}
  }
  .hero-scene{position:absolute; inset:0; z-index:0;}
  .hero-scene svg{width:100%; height:100%; display:block;}
  .hero-photo{width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02);}
  .hero-scrim{
    position:absolute; inset:0; z-index:1;
    background:
      linear-gradient(100deg, color-mix(in srgb, var(--bg) 62%, transparent) 0%, color-mix(in srgb, var(--bg) 38%, transparent) 38%, transparent 62%),
      linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.1) 55%, var(--bg) 96%);
  }
  .kicker{font-size:0.8rem; letter-spacing:0.08em; color:var(--gold); text-transform:uppercase; opacity:0; animation:riseIn .8s ease-out .2s forwards;}
  .hero h1{font-size:clamp(2.4rem, 7.5vw, 4.2rem); line-height:1.04; margin-top:14px; max-width:14ch; opacity:0; animation:riseIn .9s ease-out .35s forwards;}
  @media(min-width:1200px){.hero h1{font-size:clamp(4.2rem, 5.5vw, 5.4rem); max-width:16ch;}}
  .hero .sub{margin-top:18px; max-width:44ch; color:var(--ink-dim); font-size:1.05rem; line-height:1.6; opacity:0; animation:riseIn .9s ease-out .5s forwards;}
  @keyframes riseIn{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }

  .hero-btns{display:flex; flex-wrap:wrap; gap:16px; margin-top:34px; opacity:0; animation:riseIn .9s ease-out .65s forwards;}
  .btn{
    font-family:'Lora',serif; font-size:0.9rem; font-weight:500; text-decoration:none;
    padding:14px 26px; border-radius:999px; display:inline-flex; align-items:center; gap:8px;
    transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, background .35s ease, color .35s ease;
  }
  .btn-primary{background:var(--ink); color:var(--bg);}
  .btn-primary:hover{transform:translateY(-3px); box-shadow:0 14px 28px -12px rgba(0,0,0,0.35);}
  .btn-ghost{border:1px solid var(--line); color:var(--ink); background:transparent;}
  .btn-ghost:hover{transform:translateY(-3px); border-color:var(--gold); color:var(--gold);}
  .btn .arrow{transition:transform .35s ease;}
  .btn:hover .arrow{transform:translateX(4px);}

  /* cloud + plane drift inside hero svg */
  .cloud{animation:cloudDrift linear infinite;}
  .cloud.c1{animation-duration:52s;}
  .cloud.c2{animation-duration:70s; animation-delay:-20s;}
  .cloud.c3{animation-duration:60s; animation-delay:-8s;}
  @keyframes cloudDrift{ from{transform:translateX(-10%);} to{transform:translateX(110%);} }
  .plane{animation:planeFly 26s linear infinite;}
  @keyframes planeFly{ 0%{transform:translate(-8%,60%) rotate(-6deg);} 100%{transform:translate(110%,10%) rotate(-6deg);} }
  .sun{animation:sunPulse 6s ease-in-out infinite;}
  @keyframes sunPulse{ 0%,100%{opacity:0.9;} 50%{opacity:1;} }

  @media (prefers-reduced-motion: reduce){
    .orb, .cloud, .plane, .sun{animation:none;}
    .kicker, .hero h1, .hero .sub, .hero-btns{opacity:1; animation:none; transform:none;}
  }

  /* reveal utility */
  .reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1);}
  .reveal.in{opacity:1; transform:translateY(0);}
  .stagger > *{opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease;}
  .stagger.in > *{opacity:1; transform:translateY(0);}
  .stagger.in > *:nth-child(1){transition-delay:.05s;}
  .stagger.in > *:nth-child(2){transition-delay:.15s;}
  .stagger.in > *:nth-child(3){transition-delay:.25s;}
  .stagger.in > *:nth-child(4){transition-delay:.35s;}
  @media (prefers-reduced-motion: reduce){
    .reveal, .stagger > *{opacity:1 !important; transform:none !important; transition:none !important;}
  }

  /* ABOUT */
  .about-wrap{padding-top:56px; padding-bottom:64px; display:grid; grid-template-columns:1fr; gap:32px;}
  @media(min-width:760px){.about-wrap{grid-template-columns:0.85fr 1.15fr; gap:64px; align-items:start; padding-top:80px; padding-bottom:96px;}}
  @media(max-width:480px){.portrait{aspect-ratio:16/10;}}

  .portrait{aspect-ratio:4/5; border-radius:18px; overflow:hidden; position:relative; background:var(--bg-2); max-width:460px;}
  .portrait svg{width:100%; height:100%; display:block;}
  .portrait-img{width:100%; height:100%; object-fit:cover; display:block;}

  .about-label{font-size:0.8rem; color:var(--gold); letter-spacing:0.04em; text-transform:uppercase;}
  .about-wrap h2{font-size:clamp(1.8rem,4vw,2.4rem); margin-top:10px;}
  .about-wrap > div:last-child p{color:var(--ink-dim); line-height:1.75; font-size:1rem; max-width:56ch; margin:18px 0 0;}

  .about-block{margin-top:34px;}
  .about-block h3{font-size:0.95rem; margin-bottom:10px;}
  .chips{display:flex; flex-wrap:wrap; gap:10px;}
  .chip{
    font-size:0.85rem; padding:8px 16px; border-radius:999px; border:1px solid var(--line);
    color:var(--ink); background:var(--bg-2); transition:transform .3s ease, border-color .3s ease;
  }
  .chip:hover{transform:translateY(-2px); border-color:var(--gold);}

  .facts{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:22px 24px;}
  .fact{border-top:1px solid var(--line); padding-top:14px;}
  .fact .num{font-family:'Fraunces',serif; font-size:1.7rem; color:var(--gold);}
  .fact .lbl{font-size:0.82rem; color:var(--ink-dim); margin-top:4px;}

  /* TRAVEL MAP */
  .map-section{padding-top:64px; padding-bottom:80px; border-top:1px solid var(--line);}
  .map-intro{color:var(--ink-dim); line-height:1.7; font-size:1rem; max-width:56ch; margin-top:12px;}
  .map-stats{list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px 20px;}
  @media(max-width:480px){.map-stats{grid-template-columns:1fr 1fr;}}

  .map-visual{
    margin-top:40px; border-radius:18px; overflow:hidden; background:var(--bg-2);
    border:1px solid var(--line);
  }
  .map-visual svg{width:100%; height:auto; display:block;}
  .geo-dot{fill:var(--line);}
  .landmass{fill:var(--mtn-1); opacity:0.55;}
  .route-line{
    fill:none; stroke:var(--gold); stroke-width:1.4; stroke-dasharray:6 7; opacity:0.7;
    stroke-dashoffset:0; animation:routeFlow 3.5s linear infinite;
  }
  @keyframes routeFlow{ to{ stroke-dashoffset:-52; } }
  .pin{cursor:pointer;}
  .pin-pulse{
    fill:var(--gold); opacity:0.35; transform-origin:center;
    animation:pinPulse 2.6s ease-out infinite;
  }
  .pin-dot{fill:var(--gold); transition:transform .3s ease;}
  .pin-label{
    font-family:'Lora',serif; font-size:24px; fill:var(--ink); font-weight:500;
    opacity:0; transform:translateY(4px); transition:opacity .3s ease, transform .3s ease;
  }
  .pin:hover .pin-dot, .pin:focus .pin-dot, .pin:active .pin-dot{transform:scale(1.6);}
  .pin:hover .pin-label, .pin:focus .pin-label, .pin:active .pin-label{opacity:1; transform:translateY(0);}
  @keyframes pinPulse{
    0%{ transform:scale(0.9); opacity:0.5; }
    70%{ transform:scale(2.6); opacity:0; }
    100%{ transform:scale(2.6); opacity:0; }
  }

  .dest-list{
    list-style:none; margin:16px 0 0; padding:0;
    display:grid; grid-template-columns:1fr 1fr; gap:12px 20px;
  }
  @media(min-width:600px){.dest-list{grid-template-columns:1fr 1fr 1fr;}}
  @media(min-width:1100px){.dest-list{grid-template-columns:repeat(4,1fr);}}
  .dest-list li{
    font-size:0.92rem; color:var(--ink); display:flex; align-items:center; gap:9px;
    padding:10px 0; border-top:1px solid var(--line);
  }
  .dest-list .flag{font-size:1.05rem;}

  @media (prefers-reduced-motion: reduce){
    .route-line, .pin-pulse{animation:none;}
  }

  /* JOURNAL */
  .journal-section{padding-top:64px; padding-bottom:88px; border-top:1px solid var(--line);}
  .journal-intro{color:var(--ink-dim); line-height:1.7; font-size:1rem; max-width:56ch; margin-top:12px;}
  .story-grid{
    list-style:none; margin:40px 0 0; padding:0;
    display:grid; grid-template-columns:1fr; gap:28px;
  }
  @media(min-width:700px){.story-grid{grid-template-columns:1fr 1fr; gap:32px 28px;}}
  @media(min-width:1100px){.story-grid{grid-template-columns:repeat(3,1fr);}}
  .story-card{
    border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--bg-2);
    transition:transform .4s cubic-bezier(.2,.6,.2,1), box-shadow .4s ease;
  }
  .story-card:hover{transform:translateY(-4px); box-shadow:0 18px 34px -20px rgba(0,0,0,0.35);}
  .story-thumb{aspect-ratio:16/9; display:block;}
  .story-thumb svg{width:100%; height:100%; display:block;}
  .story-body{padding:20px 22px 24px;}
  .story-meta{
    font-size:0.75rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--gold);
    display:flex; flex-wrap:wrap; gap:6px 10px;
  }
  .story-card h3{font-size:1.2rem; margin-top:10px;}
  .story-card p{color:var(--ink-dim); font-size:0.92rem; line-height:1.65; margin:10px 0 0; max-width:52ch;}

  /* MILESTONES */
  .milestones-section{padding-top:64px; padding-bottom:88px; border-top:1px solid var(--line);}
  .milestones-intro{color:var(--ink-dim); line-height:1.7; font-size:1rem; max-width:56ch; margin-top:12px;}
  .milestones-grid{
    list-style:none; margin:36px 0 0; padding:0;
    display:grid; grid-template-columns:1fr 1fr; gap:18px;
  }
  @media(min-width:700px){.milestones-grid{grid-template-columns:repeat(3,1fr);}}
  @media(min-width:1000px){.milestones-grid{grid-template-columns:repeat(5,1fr);}}
  .milestone-card{
    border:1px solid var(--line); border-radius:16px; padding:22px 18px; background:var(--bg-2);
    transition:transform .4s cubic-bezier(.2,.6,.2,1), box-shadow .4s ease, border-color .4s ease;
  }
  .milestone-card:hover{transform:translateY(-4px); box-shadow:0 18px 34px -20px rgba(0,0,0,0.35); border-color:var(--gold);}
  .milestone-icon{font-size:1.5rem; display:block;}
  .milestone-value{font-family:'Fraunces',serif; font-size:1.5rem; color:var(--gold); margin-top:12px; line-height:1.15;}
  .milestone-label{font-size:0.82rem; color:var(--ink-dim); margin-top:6px;}
  .milestone-sub{font-size:0.76rem; color:var(--ink-dim); opacity:0.75; margin-top:3px;}

  /* CONTACT */
  .contact-section{padding-top:64px; padding-bottom:calc(72px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--line);}
  .contact-wrap{display:grid; grid-template-columns:1fr; gap:36px; margin-top:32px;}
  @media(min-width:760px){.contact-wrap{grid-template-columns:0.9fr 1.1fr; gap:56px;}}
  .contact-intro{color:var(--ink-dim); line-height:1.75; font-size:1rem; max-width:52ch; margin-top:12px;}
  .contact-links{list-style:none; margin:28px 0 0; padding:0; display:flex; flex-direction:column; gap:14px;}
  .contact-links li{border-top:1px solid var(--line); padding-top:14px; font-size:0.95rem;}
  .contact-links a{text-decoration:none; color:var(--ink); display:flex; align-items:center; justify-content:space-between; transition:color .3s ease;}
  .contact-links a:hover{color:var(--gold);}
  .contact-links .arrow{transition:transform .3s ease;}
  .contact-links a:hover .arrow{transform:translateX(4px);}

  .contact-form{
    border:1px solid var(--line); border-radius:18px; padding:26px; background:var(--bg-2);
    display:flex; flex-direction:column; gap:16px; max-width:520px;
  }
  .field{display:flex; flex-direction:column; gap:6px;}
  .field label{font-size:0.78rem; color:var(--ink-dim); letter-spacing:0.02em;}
  .field input, .field textarea{
    font-family:'Lora',serif; font-size:0.95rem; color:var(--ink);
    background:var(--bg); border:1px solid var(--line); border-radius:10px;
    padding:12px 14px; outline:none; transition:border-color .3s ease, box-shadow .3s ease;
  }
  .field input:focus, .field textarea:focus{border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 18%, transparent);}
  .field textarea{resize:vertical; min-height:110px; font-family:inherit;}
  .contact-form .btn{align-self:flex-start; border:none; cursor:pointer;}