:root{
    --cream:#f4ecd8;
    --cream-2:#ebe0c4;
    --ink:#ae4e0e;
    --ink-soft:#3a2f27;
    --terracotta:#4b1204;
    --ochre:#d9883a;
    --moss:#4a5c3a;
    --sand:#d4c19c;
    --line:rgba(26,20,16,.18);
  }

  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    font-family:'Outfit',sans-serif;
    background:var(--cream);
    color:var(--ink);
    line-height:1.6;
    overflow-x:hidden;
  }

  /* paper grain */
  body::before{
    content:"";
    position:fixed;inset:0;
    pointer-events:none;
    background-image:radial-gradient(circle at 20% 30%, rgba(196,71,40,.04) 0%, transparent 50%),
                     radial-gradient(circle at 80% 70%, rgba(74,92,58,.04) 0%, transparent 50%);
    z-index:1;
  }

  .display{font-family:'Fraunces',serif;font-weight:400;letter-spacing:-.02em}
  .italic{font-style:italic}

  /* ---------- NAV ---------- */
  nav{
    position:fixed;top:0;left:0;right:0;z-index:100;
    padding:1.4rem 3rem;
    display:flex;justify-content:space-between;align-items:center;
    background:rgba(244,236,216,.85);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);
  }
  .logo{
    font-family:'Fraunces',serif;
    font-size:1.4rem;font-weight:600;
    letter-spacing:-.02em;
    display:flex;align-items:center;gap:.6rem;
  }
  .logo::before{
    content:"";width:10px;height:10px;
    background:var(--terracotta);
    border-radius:50%;
    display:inline-block;
  }
  nav ul{list-style:none;display:flex;gap:2.5rem}
  nav ul a{
    color:var(--ink);text-decoration:none;
    font-size:.88rem;font-weight:400;
    text-transform:uppercase;letter-spacing:.12em;
    position:relative;transition:color .3s;
  }
  nav ul a::after{
    content:"";position:absolute;bottom:-4px;left:0;
    width:0;height:1px;background:var(--terracotta);
    transition:width .4s ease;
  }
  nav ul a:hover{color:var(--terracotta)}
  nav ul a:hover::after{width:100%}
  .nav-cta{
    padding:.6rem 1.3rem;
    background:var(--ink);color:var(--cream);
    border-radius:100px;font-size:.8rem;
    text-transform:uppercase;letter-spacing:.12em;
    text-decoration:none;transition:all .3s;
  }
  .nav-cta:hover{background:var(--terracotta);transform:translateY(-2px)}

  /* ---------- HERO ---------- */
  header.hero{
    min-height:100vh;
    padding:10rem 3rem 4rem;
    position:relative;
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:4rem;
    align-items:center;
    z-index:2;
  }
  .hero-text{position:relative}
  .eyebrow{
    font-size:.78rem;text-transform:uppercase;
    letter-spacing:.25em;color:var(--terracotta);
    margin-bottom:1.8rem;
    display:flex;align-items:center;gap:1rem;
  }
  .eyebrow::before{
    content:"";width:40px;height:1px;background:var(--terracotta);
  }
  h1.hero-title{
    font-family:'Fraunces',serif;
    font-size:clamp(3rem,7.5vw,7rem);
    line-height:.95;
    font-weight:400;
    letter-spacing:-.03em;
    margin-bottom:2rem;
    color:var(--ink);
  }
  h1.hero-title em{
    font-style:italic;
    color:var(--terracotta);
    font-weight:300;
  }
  .hero-desc{
    font-size:1.1rem;
    max-width:480px;
    color:var(--ink-soft);
    margin-bottom:2.5rem;
  }
  .hero-actions{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap}
  .btn-primary{
    padding:1.1rem 2.2rem;
    background:var(--terracotta);color:var(--cream);
    border-radius:100px;text-decoration:none;
    font-size:.9rem;text-transform:uppercase;
    letter-spacing:.1em;font-weight:500;
    transition:all .4s;
    box-shadow:0 10px 30px -10px rgba(196,71,40,.5);
  }
  .btn-primary:hover{
    background:var(--ink);
    transform:translateY(-3px);
    box-shadow:0 15px 40px -10px rgba(0,0,0,.3);
  }
  .btn-ghost{
    display:flex;align-items:center;gap:.8rem;
    color:var(--ink);text-decoration:none;
    font-size:.9rem;font-weight:500;
  }
  .btn-ghost .arrow{
    width:36px;height:36px;border-radius:50%;
    border:1px solid var(--ink);
    display:flex;align-items:center;justify-content:center;
    transition:all .3s;
  }
  .btn-ghost:hover .arrow{background:var(--ink);color:var(--cream);transform:rotate(-45deg)}

  /* hero visual */
  .hero-visual{
    position:relative;
    height:70vh;
    min-height:500px;
  }
  .postcard{
    position:absolute;
    border-radius:4px;
    overflow:hidden;
    box-shadow:0 30px 60px -20px rgba(26,20,16,.4);
  }
  .postcard img{width:100%;height:100%;object-fit:cover;display:block}
  .postcard-1{
    top:0;right:0;
    width:75%;height:75%;
    transform:rotate(2deg);
    z-index:2;
  }
  .postcard-2{
    bottom:0;left:0;
    width:55%;height:55%;
    transform:rotate(-4deg);
    z-index:3;
    border:8px solid var(--cream);
  }
  .stamp{
    position:absolute;
    top:15%;left:-2%;
    width:110px;height:110px;
    background:var(--cream);
    border:2px dashed var(--terracotta);
    border-radius:50%;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    font-family:'Fraunces',serif;
    text-align:center;
    transform:rotate(-12deg);
    z-index:4;
    padding:10px;
  }
  .stamp span{font-size:.65rem;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-soft)}
  .stamp strong{font-size:1.4rem;color:var(--terracotta);line-height:1;margin:4px 0}

  .scroll-indicator{
    position:absolute;
    bottom:2rem;left:3rem;
    font-size:.75rem;text-transform:uppercase;
    letter-spacing:.25em;color:var(--ink-soft);
    display:flex;align-items:center;gap:.8rem;
  }
  .scroll-indicator::after{
    content:"";width:60px;height:1px;background:var(--ink-soft);
    animation:scroll-pulse 2s ease-in-out infinite;
  }
  @keyframes scroll-pulse{
    0%,100%{transform:scaleX(1);transform-origin:left}
    50%{transform:scaleX(.3);transform-origin:left}
  }

  /* ---------- MARQUEE ---------- */
  .marquee{
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:1.8rem 0;
    overflow:hidden;
    position:relative;z-index:2;
    background:var(--cream-2);
  }
  .marquee-track{
    display:flex;gap:4rem;
    white-space:nowrap;
    animation:marquee 30s linear infinite;
    font-family:'Fraunces',serif;
    font-size:1.6rem;
    font-style:italic;
    color:var(--ink);
  }
  .marquee-track span{display:flex;align-items:center;gap:4rem}
  .marquee-track span::after{
    content:"✦";color:var(--terracotta);
    font-style:normal;font-size:1rem;
  }
  @keyframes marquee{
    to{transform:translateX(-50%)}
  }

  /* ---------- DESTINATIONS ---------- */
  section{padding:8rem 3rem;position:relative;z-index:2}
  .section-head{
    display:flex;justify-content:space-between;align-items:flex-end;
    margin-bottom:5rem;flex-wrap:wrap;gap:2rem;
  }
  .section-head h2{
    font-family:'Fraunces',serif;
    font-size:clamp(2.5rem,5vw,4.5rem);
    font-weight:400;
    line-height:1;
    letter-spacing:-.02em;
    max-width:700px;
  }
  .section-head h2 em{font-style:italic;color:var(--terracotta)}
  .section-head p{
    max-width:320px;
    color:var(--ink-soft);
    font-size:.95rem;
  }
  .section-num{
    font-family:'Fraunces',serif;
    font-size:.85rem;
    color:var(--terracotta);
    margin-bottom:1rem;
    letter-spacing:.15em;
  }

  .destinations{
    display:grid;
    grid-template-columns:repeat(12,1fr);
    gap:2rem;
  }
  .card{
    position:relative;
    overflow:hidden;
    border-radius:6px;
    background:var(--ink);
    cursor:pointer;
  }
  .card img{
    width:100%;height:100%;object-fit:cover;
    transition:transform 1.2s cubic-bezier(.2,.8,.2,1);
    opacity:.9;
  }
  .card:hover img{transform:scale(1.08);opacity:1}
  .card-info{
    position:absolute;
    inset:0;
    padding:2rem;
    display:flex;flex-direction:column;
    justify-content:space-between;
    color:var(--cream);
    background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,rgba(0,0,0,.15) 50%,rgba(0,0,0,.7) 100%);
  }
  .card-top{display:flex;justify-content:space-between;align-items:flex-start}
  .card-tag{
    font-size:.7rem;text-transform:uppercase;
    letter-spacing:.2em;
    padding:.4rem .9rem;
    background:rgba(244,236,216,.15);
    backdrop-filter:blur(6px);
    border:1px solid rgba(244,236,216,.3);
    border-radius:100px;
  }
  .card-num{
    font-family:'Fraunces',serif;
    font-size:.85rem;
    opacity:.7;
  }
  .card h3{
    font-family:'Fraunces',serif;
    font-size:2rem;
    font-weight:400;
    line-height:1;
    margin-bottom:.6rem;
  }
  .card-region{font-size:.8rem;letter-spacing:.15em;text-transform:uppercase;opacity:.7}

  /* bento layout */
  .card-1{grid-column:span 7;height:520px}
  .card-2{grid-column:span 5;height:520px}
  .card-3{grid-column:span 4;height:440px}
  .card-4{grid-column:span 4;height:440px}
  .card-5{grid-column:span 4;height:440px}

  /* ---------- FILOSOFIA ---------- */
  .philosophy{
    background: #e7e7e7;
    color: #521b04;
    padding:10rem 3rem;
    position:relative;
    overflow:hidden;
  }
  .philosophy::before{
    content:"";position:absolute;
    top:-50%;right:-20%;
    width:800px;height:800px;
    background: #d4c19c;
    border-radius:50%;
  }
  .philosophy-grid{
    max-width:1400px;margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:6rem;align-items:center;
    position:relative;z-index:2;
  }
  .philosophy h2{
    font-family:'Fraunces',serif;
    font-size:clamp(2.5rem,4.5vw,4rem);
    font-weight:300;
    line-height:1.05;
    letter-spacing:-.02em;
  }
  .philosophy h2 em{font-style:italic;color:var(--ochre)}
  .philosophy-text p{
    color:rgba(92, 27, 3, 0.75);
    margin-bottom:1.5rem;
    font-size:1rem;
  }
  .stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3rem;
    margin-top:3rem;
    padding-top:3rem;
    border-top:1px solid rgba(244,236,216,.2);
  }
  .stat strong{
    font-family:'Fraunces',serif;
    font-size:3.5rem;
    font-weight:300;
    color: #3a2f27;
    display:block;
    line-height:1;
  }
  .stat span{
    font-size:.8rem;text-transform:uppercase;
    letter-spacing:.15em;
    color:rgba(14, 14, 14, 0.6);
    margin-top:.6rem;display:block;
  }

  /* ---------- CTA ---------- */
  .cta{
    padding:8rem 3rem;
    text-align:center;
    position:relative;z-index:2;
  }
  .cta-inner{
    max-width:900px;margin:0 auto;
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding:5rem 0;
  }
  .cta h2{
    font-family:'Fraunces',serif;
    font-size:clamp(2.5rem,6vw,5rem);
    font-weight:400;
    line-height:1;
    letter-spacing:-.02em;
    margin-bottom:2rem;
  }
  .cta h2 em{font-style:italic;color:var(--terracotta)}
  .cta p{
    color:var(--ink-soft);
    max-width:500px;
    margin:0 auto 2.5rem;
  }

  /* ---------- FOOTER ---------- */
  footer{
    padding:4rem 3rem 2rem;
    border-top:1px solid var(--line);
    position:relative;z-index:2;
  }
  .footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:3rem;
    margin-bottom:3rem;
  }
  .footer-brand .display{font-size:2rem;margin-bottom:1rem}
  .footer-brand p{color:var(--ink-soft);font-size:.9rem;max-width:320px}
  footer h4{
    font-size:.75rem;text-transform:uppercase;
    letter-spacing:.2em;margin-bottom:1.2rem;
    color:var(--terracotta);
  }
  footer ul{list-style:none}
  footer li{margin-bottom:.6rem}
  footer li a{color:var(--ink-soft);text-decoration:none;font-size:.9rem;transition:color .3s}
  footer li a:hover{color:var(--terracotta)}
  .footer-bottom{
    padding-top:2rem;
    border-top:1px solid var(--line);
    display:flex;justify-content:space-between;
    font-size:.8rem;color:var(--ink-soft);
    flex-wrap:wrap;gap:1rem;
  }

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:960px){
    nav{padding:1rem 1.5rem}
    nav ul{display:none}
    header.hero{
      grid-template-columns:1fr;
      padding:8rem 1.5rem 3rem;
      gap:3rem;
    }
    .hero-visual{height:60vh;min-height:400px}
    .scroll-indicator{left:1.5rem}
    section{padding:5rem 1.5rem}
    .philosophy{padding:6rem 1.5rem}
    .philosophy-grid{grid-template-columns:1fr;gap:3rem}
    .destinations{gap:1.2rem}
    .card-1,.card-2,.card-3,.card-4,.card-5{grid-column:span 12;height:380px}
    .footer-grid{grid-template-columns:1fr 1fr;gap:2rem}
    .cta{padding:5rem 1.5rem}
  }

  /* load animations */
  @keyframes riseUp{
    from{opacity:0;transform:translateY(30px)}
    to{opacity:1;transform:translateY(0)}
  }
  .hero-text > *{animation:riseUp .9s cubic-bezier(.2,.8,.2,1) both}
  .hero-text > *:nth-child(1){animation-delay:.1s}
  .hero-text > *:nth-child(2){animation-delay:.25s}
  .hero-text > *:nth-child(3){animation-delay:.4s}
  .hero-text > *:nth-child(4){animation-delay:.55s}
  .postcard-1{animation:riseUp 1.2s .6s cubic-bezier(.2,.8,.2,1) both}
  .postcard-2{animation:riseUp 1.2s .8s cubic-bezier(.2,.8,.2,1) both}
  .stamp{animation:riseUp 1s 1.1s cubic-bezier(.2,.8,.2,1) both}