/* The website's own pages (About Karen, Destinations: Karen, 11 Nov "page to page okay
   but the sliding is what is getting to me"). Same header, fonts and colours as the
   homepage and the Groups page, a Back button at the top and the bottom, and no smooth
   scrolling anywhere. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400;1,700&family=Inter:wght@300;400;500;600;700&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --black: #000000; --white: #ffffff; --gold: #c9973a; --gold2: #e8b84b;
  --navy: #0e1c33; --blue: #0a4f7a; --blue2: #1472aa; --orange: #e07b2a; --light: #f4f8fc;
  --text: #1a1a1a; --muted: #5d6675; --border: #e2e8f0; --radius: 14px;
}
html { scroll-behavior: auto; }
body { font-family: 'Inter', sans-serif; color: var(--text); background: var(--white); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ── Header (the homepage's, always solid) ── */
nav { position: sticky; top: 0; z-index: 50; height: 70px; display: flex; align-items: center; padding: 0 28px;
  background: rgba(0,0,0,0.94); border-bottom: 1px solid rgba(201,151,58,0.25); backdrop-filter: blur(12px); }
.nav-logo img { height: 48px; width: auto; filter: brightness(0) invert(1); }
.nav-links { display: flex; gap: 26px; align-items: center; margin-left: auto; margin-right: 22px; }
.nav-links a { color: rgba(255,255,255,0.75); font-size: 13px; font-weight: 500; text-decoration: none;
  letter-spacing: 0.06em; text-transform: uppercase; transition: color 0.2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--gold2); }
.nav-links .nav-cta { background: var(--gold); color: #fff; padding: 8px 20px; border-radius: 24px; font-weight: 600; }
.nav-links .nav-cta:hover { color: #fff; background: var(--gold2); }
.nav-login { color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; padding: 8px 18px; border-radius: 24px; border: 1px solid var(--gold);
  background: rgba(0,0,0,0.35); transition: background 0.2s; }
.nav-login:hover { background: var(--gold); }
.hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: 0; padding: 8px; }
.hamburger span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; }
@media (max-width: 1020px) {
  nav { padding: 0 16px; }
  .nav-links { display: none; position: absolute; top: 70px; left: 0; right: 0; flex-direction: column; gap: 0;
    margin: 0; padding: 8px 0 16px; background: rgba(0,0,0,0.97); border-bottom: 1px solid rgba(201,151,58,0.25); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 13px 20px; width: 100%; text-align: center; }
  .nav-links .nav-cta { width: auto; margin-top: 8px; }
  .nav-login { margin-left: auto; margin-right: 10px; font-size: 12px; padding: 7px 14px; }
  .hamburger { display: flex; }
}

/* ── Back buttons ── */
.back-row { width: min(1100px, 100% - 32px); margin: 22px auto 0; }
.back-row--bottom { margin: 0 auto 48px; text-align: center; }
.back-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border-radius: 999px;
  border: 1px solid var(--gold); background: #fff; color: var(--navy); font: 600 14px 'Inter', sans-serif;
  text-decoration: none; cursor: pointer; }
.back-btn:hover { background: var(--gold); color: #fff; }

/* ── Page body ── */
.section { padding: 40px 16px 64px; }
.section-inner { max-width: 1100px; margin: 0 auto; }
.section-tag { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--orange); margin-bottom: 10px; }
.section-title, .page-title { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 2.8rem); color: var(--black); margin-bottom: 14px; line-height: 1.2; }
.gold-bar { width: 48px; height: 3px; background: var(--gold); border-radius: 2px; margin: 14px 0 32px; }
.lead { font-size: 16px; color: var(--muted); line-height: 1.8; max-width: 640px; margin: -12px 0 32px; }
.cta-row { margin-top: 40px; text-align: center; }
.btn-gold { display: inline-block; background: var(--gold); color: #fff; padding: 14px 30px; border-radius: 999px;
  font: 600 15px 'Inter', sans-serif; text-decoration: none; }
.btn-gold:hover { background: var(--gold2); }

/* ── Footer ── */
footer { background: #000; color: rgba(255,255,255,0.7); text-align: center; padding: 40px 16px; font-size: 14px; line-height: 1.8; }
footer img { height: 54px; margin: 0 auto 10px; filter: brightness(0) invert(1); }
footer a { color: var(--gold2); text-decoration: none; }