/* ---------- Tokens ---------- */
:root{
  --cream:#F5EFE1;
  --cream-deep:#EAE0C9;
  --ink:#1C1815;
  --ink-soft:#6C6153;
  --accent:#A23B33;      /* postmark red — the one accessory */
  --accent-deep:#7A2C26;
  --line:#DCD0B2;
  --display:'Fraunces', Georgia, serif;
  --body:'Inter', Arial, Helvetica, sans-serif;
  --radius-lg:26px;
  --radius-md:18px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--body);
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit}

/* ---------- Header ---------- */
.site-header{
  position:fixed;z-index:30;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:26px 6vw;
  color:#fff;
  background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);
}
.brand{
  font-family:var(--display);font-style:italic;font-weight:500;
  color:inherit;text-decoration:none;font-size:1.35rem;letter-spacing:.01em;
}
.nav{display:flex;gap:30px}
.nav a{
  color:#fff;text-decoration:none;font-size:.82rem;font-weight:500;
  letter-spacing:.03em;position:relative;padding-bottom:4px;
}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:#fff;transition:right .25s ease;
}
.nav a:hover::after{right:0}
.menu-btn{display:none;background:none;border:0;color:#fff;font-size:1.5rem;cursor:pointer}

/* ---------- Hero ---------- */
.hero{
  height:100svh;min-height:660px;position:relative;
  display:flex;align-items:flex-end;
  background:url('assets/hero.jpeg') center 38%/cover no-repeat;
  color:#fff;
}
.hero-overlay{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(10,8,6,.55) 0%, rgba(10,8,6,.08) 26%, rgba(10,8,6,.12) 55%, rgba(10,8,6,.82) 100%);
}
.hero-content{position:relative;z-index:1;padding:0 7vw 10vh;max-width:1000px}
.eyebrow,.section-kicker{
  font-size:.72rem;letter-spacing:.24em;font-weight:700;
  text-transform:uppercase;color:var(--accent);
}
.hero .eyebrow{color:#F1D9C8;text-shadow:0 1px 12px rgba(0,0,0,.5)}
.hero h1{
  font-family:var(--display);font-weight:500;
  font-size:clamp(3.2rem,7.4vw,6.8rem);line-height:.96;margin:.2em 0;
  text-shadow:0 2px 24px rgba(0,0,0,.35);
}
.hero-copy{
  font-size:1.1rem;max-width:540px;color:#F3EEE3;
  text-shadow:0 1px 10px rgba(0,0,0,.4);
}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:26px;padding:15px 26px;border-radius:999px;
  text-decoration:none;font-weight:600;font-size:.92rem;
  transition:transform .2s ease, box-shadow .2s ease;
}
.btn.primary{background:#fff;color:var(--ink)}
.btn.primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.25)}

/* signature stamp */
.stamp{
  position:absolute;right:6vw;bottom:9vh;z-index:1;
  width:118px;height:118px;color:#fff;
  display:flex;align-items:center;justify-content:center;
  opacity:.9;
}
.stamp-ring{width:100%;height:100%;animation:spin 26s linear infinite}
.stamp-ring text{
  font-family:var(--body);font-size:8.6px;font-weight:600;
  letter-spacing:.12em;fill:#fff;text-transform:uppercase;
}
.stamp-mark{position:absolute;font-size:1.3rem;color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.stamp-ring{animation:none}}

/* ---------- Sections (shared) ---------- */
.section{padding:88px 7vw}
.section-head{display:flex;justify-content:space-between;align-items:end}
.section h2{
  font-family:var(--display);font-weight:500;
  font-size:clamp(2.5rem,5.4vw,4.8rem);line-height:1;margin:.2em 0 .35em;
}
.section h2 em{font-style:italic;font-weight:400;color:var(--accent)}

/* route divider — dotted travel line used above kickers */
.route-divider{
  width:64px;height:2px;margin:0 auto 28px;
  background-image:linear-gradient(90deg,var(--accent) 60%,transparent 0);
  background-size:8px 2px;background-repeat:repeat-x;
}

/* ---------- Intro / Story ---------- */
.intro{text-align:center;max-width:880px;margin:auto;padding-bottom:40px}
.lead{font-size:1.15rem;color:var(--ink-soft);max-width:680px;margin:auto}

/* ---------- Adventures ---------- */
#adventures{padding-top:40px}
.cards{
  display:grid;grid-template-columns:1.15fr 1fr;grid-template-rows:1fr 1fr;
  gap:16px;margin-top:38px;
}
.card{
  min-height:320px;border-radius:var(--radius-lg);overflow:hidden;position:relative;
  background:var(--bg) center/cover no-repeat;
  transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.card.tall{grid-row:1/3;min-height:660px}
.card:hover{transform:scale(1.015)}
.shade{position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.78))}
.card-content{position:absolute;bottom:26px;left:28px;color:#fff}
.card-content span{font-size:.7rem;letter-spacing:.18em;font-weight:700;text-transform:uppercase;color:#F1D9C8}
.card-content h3{font:500 1.9rem/1.1 var(--display);margin:.25em 0 0}

/* ---------- Quote ---------- */
.quote{
  background:var(--ink);color:#fff;text-align:center;
  padding:110px 20px;position:relative;overflow:hidden;
}
.quote-mark{
  font-family:var(--display);font-size:6rem;color:var(--accent);
  opacity:.55;display:block;line-height:0;margin-bottom:18px;
}
.quote p{
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:clamp(2rem,4.6vw,3.6rem);line-height:1.15;margin:0;
}
.quote-attr{display:block;margin-top:24px;letter-spacing:.22em;font-size:.7rem;color:#B8AFA1;text-transform:uppercase}

/* ---------- Gallery ---------- */
.masonry{columns:3 280px;column-gap:16px;margin-top:38px}
.masonry img{
  width:100%;display:block;margin:0 0 16px;border-radius:var(--radius-md);
  break-inside:avoid;filter:saturate(1.02);
}

/* ---------- About ---------- */
.about{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center}
.about-photo{
  min-height:640px;border-radius:var(--radius-lg);
  background:var(--bg) center/cover no-repeat;
}
.about-copy p{max-width:520px;color:var(--ink-soft);font-size:1.03rem}
.text-link{
  display:inline-flex;gap:6px;color:var(--accent-deep);font-weight:600;
  text-decoration:none;border-bottom:1px solid var(--accent-deep);padding-bottom:2px;
}

/* ---------- Contact ---------- */
.contact{text-align:center;background:var(--cream-deep)}
.contact p{color:var(--ink-soft)}
.socials{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:32px}
.socials a{
  color:var(--ink);text-decoration:none;font-weight:600;font-size:.88rem;
  padding:12px 22px;border:1px solid var(--ink);border-radius:999px;
  transition:background .2s ease, color .2s ease;
}
.socials a:hover{background:var(--ink);color:var(--cream)}

/* ---------- Footer ---------- */
footer{background:#141110;color:#fff;text-align:center;padding:60px 7vw}
footer .brand{color:#fff;font-size:1.2rem}
footer p{color:#C9C1B4;margin:.6em 0 0;font-size:.92rem}
.copyright{color:#7d766b;font-size:.8rem}

/* ---------- Mobile ---------- */
@media(max-width:760px){
  .site-header{padding:18px 6vw}
  .nav{
    display:none;position:absolute;top:64px;left:5vw;right:5vw;
    flex-direction:column;background:#141110;padding:22px;border-radius:16px;gap:16px;
  }
  .nav a::after{display:none}
  .nav.open{display:flex}
  .menu-btn{display:block}
  .hero{height:92svh;min-height:600px;background-position:56% center}
  .hero-content{padding:0 6vw 8vh}
  .hero h1{font-size:clamp(2.7rem,11vw,4rem)}
  .stamp{width:88px;height:88px;right:6vw;bottom:6vh;opacity:.85}
  .stamp-ring text{font-size:9.5px}
  .section{padding:64px 6vw}
  .intro{padding-bottom:16px}
  #adventures{padding-top:20px}
  .cards{grid-template-columns:1fr;grid-template-rows:auto;gap:14px}
  .card.tall{grid-row:auto;min-height:440px}
  .card{min-height:340px}
  .card:hover{transform:none}
  .about{grid-template-columns:1fr;gap:32px}
  .about-photo{min-height:420px}
  .masonry{columns:2 150px;column-gap:10px}
  .masonry img{margin-bottom:10px;border-radius:14px}
  .quote{padding:80px 20px}
}