/* =============================================================
   OFF THE BEATEN PATH — Design System v4
   Non-scrolling on desktop. Flat/editorial.
   One breakpoint: mobile only (<= 768px).
   Desktop layout is LOCKED — does not reflow on resize.
   ============================================================= */

/* ── TOKENS ──────────────────────────────────────────────── */
:root {
  --bg:           #fafaf8;
  --text:         #1a1a1a;
  --text-muted:   #6b6b6b;
  --text-ghost:   rgba(26,26,26,0.13);
  --accent:       #b87a2a;
  --rule:         #d8d8d4;
  --font-sans:    'Inter', system-ui, sans-serif;
  --font-serif:   'Lora', Georgia, serif;

  /* Fixed section heights — desktop only */
  --h-hero:         52vh;
  --h-offerings:    22vh;
  --h-exclusive:    30vh;
  --h-footer:       5vh;
}

/* ── RESET ───────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { height: 100%; }
img  { display: block; max-width: 100%; }
a    { color: inherit; text-decoration: none; }
button { background: none; border: none; cursor: pointer; font: inherit; padding: 0; }

/* ── BODY — locked desktop, no scroll ───────────────────── */
body {
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  row-gap: 1.5rem;
}

/* ── RULE ────────────────────────────────────────────────── */
.rule { border: none; border-top: 1px solid var(--rule); }

/* ── GHOST HOME ──────────────────────────────────────────── */
.ghost-home {
  font-family: var(--font-sans);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  color: var(--text-ghost);
  transition: color 0.2s;
  user-select: none;
}
.ghost-home:hover { color: var(--accent); }
.ghost-home--tr {
  position: fixed;
  top: 0.6rem;
  right: 1.25rem;
  z-index: 60;
}
.ghost-home--bl {
  position: absolute;
  left: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}

/* ═══════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════ */
.hero {
  display: flex;
  height: var(--h-hero);
  min-height: 0;
  flex-shrink: 0;
}

/* ── LEFT: rotating images ───────────────────────────────── */
.hero-left {
  position: relative;
  width: 55%;
  overflow: hidden;
  flex-shrink: 0;
  /* Mask dissolves right edge + bottom edge — no overlay lines */
  -webkit-mask-image:
    linear-gradient(to right,
      black 0%, black 80%,
      rgba(0,0,0,0.7)  90%,
      rgba(0,0,0,0.2)  97%,
      transparent      100%),
    linear-gradient(to bottom,
      black 0%, black 72%,
      rgba(0,0,0,0.7)  84%,
      rgba(0,0,0,0.2)  95%,
      transparent      100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,
      black 0%, black 80%,
      rgba(0,0,0,0.7)  90%,
      rgba(0,0,0,0.2)  97%,
      transparent      100%),
    linear-gradient(to bottom,
      black 0%, black 72%,
      rgba(0,0,0,0.7)  84%,
      rgba(0,0,0,0.2)  95%,
      transparent      100%);
  mask-composite: intersect;
}
.hero-bg-wrap { position: absolute; inset: 0; }
.hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}
.hero-bg.is-active { opacity: 1; }

/* hero-fade-bottom — disabled; mask handles bottom dissolve */
.hero-fade-bottom { display: none; }

/* Logo — full-width white bar, single abrupt fade into image */
.hero-logo-wrap {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  background: linear-gradient(to bottom, var(--bg) 0%, var(--bg) 62%, transparent 78%);
  padding: 1.5rem 1.75rem 4rem;
}
.hero-logo { height: 96px; width: auto; }

/* ── RIGHT: phrases (top ~42%) + blog preview (bottom ~58%) */
.hero-right {
  width: 45%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ── PHRASES STRIP — taller, more padding, more energy ──── */
.phrases-strip {
  flex: 0 0 42%;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  cursor: pointer;
  background: #f8f6f2;   /* very slight warm differentiation */
}
/* Fixed context label — always visible */
.phrases-label {
  position: absolute;
  top: 0.7rem;
  left: 2.5rem;
  font-size: 0.4375rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  pointer-events: none;
  z-index: 2;
}
/* Advance arrow */
.phrases-strip::after {
  content: '›';
  position: absolute;
  right: 1.75rem;
  font-size: 1.3rem;
  color: rgba(26,26,26,0.15);
  transition: color 0.2s;
  pointer-events: none;
}
.phrases-strip:hover::after { color: var(--accent); }

.phrase {
  position: absolute;
  left: 0; right: 0;
  padding: 1.5rem 4rem 1.5rem 2.5rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
  color: var(--text);
  line-height: 1.45;
  transform: translateX(110%);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.phrase.is-active  { transform: translateX(0); }
.phrase.is-exiting { transform: translateX(-110%); }

.phrase-connect {
  color: var(--accent);
  font-style: italic;
  font-family: var(--font-serif);
  font-size: clamp(1rem, 1.5vw, 1.3rem);
}

/* ── BLOG PREVIEW — text-only, editorial ─────────────────── */
.blog-preview {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

/* Left/right fades — obvious */
.blog-preview::before,
.blog-preview::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 14%;
  z-index: 3;
  pointer-events: none;
}
.blog-preview::before {
  left: 0;
  background: linear-gradient(to right, var(--bg) 25%, transparent);
}
.blog-preview::after {
  right: 0;
  background: linear-gradient(to left, var(--bg) 25%, transparent);
}

/* Large faded logo — watercolor backdrop for blog slides */
.blog-preview-logo {
  position: absolute;
  right: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: 52%;
  height: 70%;
  background-image: url('../graphics/Off-the-beaten-path-logo-3.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center right;
  opacity: 0.07;
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
}

.blog-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.7s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.25rem 3.75rem;   /* inside the fade zones */
  z-index: 2;
}
.blog-slide.is-active { opacity: 1; }

.blog-tag {
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 0.45rem;
}
.blog-title {
  font-family: var(--font-serif);
  font-size: clamp(0.9rem, 1.3vw, 1.1rem);
  color: var(--text);
  line-height: 1.45;
  margin-bottom: 0.5rem;
}
.blog-teaser {
  font-size: 0.6875rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 0.65rem;
}
.blog-readmore {
  font-size: 0.6875rem;
  color: var(--accent);
  letter-spacing: 0.02em;
  transition: color 0.15s;
}
.blog-readmore:hover { color: #9a6420; }

/* Blog nav arrows — dark on light background now */
.blog-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(26,26,26,0.18);
  font-size: 1.4rem;
  padding: 0.5rem;
  z-index: 5;
  transition: color 0.15s;
  line-height: 1;
}
.blog-nav:hover { color: rgba(26,26,26,0.5); }
.blog-nav--prev { left: 0.2rem; }
.blog-nav--next { right: 0.2rem; }

/* ═══════════════════════════════════════════════════════════
   THREE OFFERINGS
   ═══════════════════════════════════════════════════════════ */
.offerings {
  display: flex;
  height: var(--h-offerings);
  flex-shrink: 0;
  padding: 0 1.5rem;
  gap: 1.5rem;
}
.offering-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

/* Card stack */
.offering-cards {
  flex: 1;
  position: relative;
  overflow: hidden;
  min-height: 0;
  cursor: pointer;
  /* Mask dissolves all four edges — top/bottom + left/right, smooth corners */
  -webkit-mask-image:
    linear-gradient(to bottom,
      transparent      0%,
      rgba(0,0,0,0.3)  9%,
      rgba(0,0,0,0.7)  20%,
      black            32%,
      black            68%,
      rgba(0,0,0,0.7)  80%,
      rgba(0,0,0,0.3)  91%,
      transparent      100%),
    linear-gradient(to right,
      transparent      0%,
      rgba(0,0,0,0.5)  10%,
      black            20%,
      black            80%,
      rgba(0,0,0,0.5)  90%,
      transparent      100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom,
      transparent      0%,
      rgba(0,0,0,0.3)  9%,
      rgba(0,0,0,0.7)  20%,
      black            32%,
      black            68%,
      rgba(0,0,0,0.7)  80%,
      rgba(0,0,0,0.3)  91%,
      transparent      100%),
    linear-gradient(to right,
      transparent      0%,
      rgba(0,0,0,0.5)  10%,
      black            20%,
      black            80%,
      rgba(0,0,0,0.5)  90%,
      transparent      100%);
  mask-composite: intersect;
}
.offering-card {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.offering-card.is-active { opacity: 1; }

.offering-img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
}

/* CTA card — link inside handles navigation */
.offering-card--cta {
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  cursor: default;
}
.cta-card-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.65rem, 0.85vw, 0.8rem);
  text-align: center;
  color: var(--text-muted);
  line-height: 1.3;
}
.cta-card-link {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.01em;
  transition: color 0.15s;
  cursor: pointer;
}
.cta-card-link:hover { color: #9a6420; }

/* Label row — clickable, navigates to category listing */
.offering-label-wrap {
  flex: 0 0 auto;
  padding: 0.4rem 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
}
.offering-label-wrap:hover { background: rgba(184,122,42,0.05); }
.offering-label {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.offering-sublabel {
  font-size: 0.5625rem;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════
   EXCLUSIVE STRIP — Farms & Plantations (Members Only)
   ═══════════════════════════════════════════════════════════ */
.exclusive-strip {
  height: var(--h-exclusive);
  background: #1c1810;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 3.5rem;
  gap: 3rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: background 0.3s;
}
.exclusive-strip:hover { background: #241f14; }

/* Warm left-side glow */
.exclusive-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(184,122,42,0.1) 0%, transparent 50%);
  pointer-events: none;
}


.exclusive-left {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: relative;
  flex: 1;
}
.exclusive-eyebrow {
  font-size: 0.4375rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.1rem;
}
.exclusive-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  color: #ece0c8;
  line-height: 1.15;
}
.exclusive-desc {
  font-size: 0.6rem;
  color: rgba(232,223,200,0.5);
  line-height: 1.6;
  max-width: 46ch;
  margin-top: 0.15rem;
}
.exclusive-why {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.5625rem;
  color: rgba(184,122,42,0.55);
  margin-top: 0.1rem;
}

.exclusive-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  position: relative;
  flex: 0 0 auto;
  min-width: 14rem;
  text-align: right;
}
.exclusive-badge {
  font-size: 0.4375rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(184,122,42,0.7);
  border: 1px solid rgba(184,122,42,0.28);
  padding: 0.2rem 0.65rem;
  align-self: flex-end;
}
.exclusive-price-hint {
  font-size: 0.5625rem;
  color: rgba(232,223,200,0.4);
  letter-spacing: 0.04em;
}
.exclusive-cta {
  font-size: 0.75rem;
  font-family: var(--font-serif);
  font-style: italic;
  color: rgba(232,223,200,0.45);
  letter-spacing: 0.02em;
  transition: color 0.2s;
  margin-top: 0.25rem;
}
.exclusive-strip:hover .exclusive-cta { color: var(--accent); }

/* ═══════════════════════════════════════════════════════════
   TESTIMONIALS — breathing room, proper attribution
   ═══════════════════════════════════════════════════════════ */
.testimonials {
  height: var(--h-testimonials);
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.testimonials .rule { flex: 0 0 auto; }
.testimonial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  padding: 0.65rem 2.5rem;
  overflow: hidden;
  flex: 1;
  align-items: center;
}
.t-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.6875rem;
  color: var(--text-muted);
  line-height: 1.5;
  display: block;
  margin-bottom: 0.45rem;
}
.t-cite {
  display: block;
  font-style: normal;
  border-top: 1px solid var(--rule);
  padding-top: 0.3rem;
}
.t-name {
  display: block;
  font-size: 0.5625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text);
  margin-bottom: 0.05rem;
}
.t-org {
  display: block;
  font-size: 0.5rem;
  color: var(--text-ghost);
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════
   FOOTER — contact link only
   ═══════════════════════════════════════════════════════════ */
.site-footer {
  height: var(--h-footer);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0.2rem;
  flex-shrink: 0;
  overflow: hidden;
}
.footer-nav {
  display: flex;
  align-items: center;
}
.footer-link {
  font-size: 0.625rem;
  color: var(--text-muted);
  transition: color 0.15s;
  letter-spacing: 0.04em;
}
.footer-link:hover { color: var(--text); }
.footer-copy { font-size: 0.5rem; color: var(--text-ghost); }

/* ═══════════════════════════════════════════════════════════
   CONTACT POPUP
   ═══════════════════════════════════════════════════════════ */
.popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(26,26,26,0.48);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}
.popup-overlay.is-open { opacity: 1; pointer-events: auto; }
.popup-box {
  background: var(--bg);
  padding: 2rem 2.25rem 1.75rem;
  width: min(420px, 90vw);
  position: relative;
}
.popup-close {
  position: absolute;
  top: 0.7rem; right: 1rem;
  font-size: 1.2rem;
  color: var(--text-muted);
  transition: color 0.15s;
  line-height: 1;
}
.popup-close:hover { color: var(--text); }
.popup-heading {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 500;
  margin-bottom: 1.1rem;
}
.popup-form { display: flex; flex-direction: column; gap: 0.55rem; }
.popup-input {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--text);
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
}
.popup-input:focus { border-color: var(--accent); }
.popup-textarea { resize: vertical; min-height: 72px; }
.popup-submit {
  font-family: var(--font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  padding: 0.55rem 1.1rem;
  background: var(--text);
  color: var(--bg);
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.18s;
}
.popup-submit:hover { background: var(--accent); }

/* ═══════════════════════════════════════════════════════════
   MOBILE ONLY — allow scroll, stack layout
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body {
    height: auto;
    overflow: auto;
  }
  .hero {
    height: auto;
    flex-direction: column;
  }
  .hero-left {
    width: 100%;
    height: 52vw;
    flex-shrink: 0;
  }
  .hero-right {
    width: 100%;
    height: 82vw;
    border-left: none;
    border-top: 1px solid var(--rule);
  }
  .offerings {
    height: auto;
    flex-direction: column;
  }
  .offering-col {
    border-right: none;
    border-bottom: 1px solid var(--rule);
    height: auto;
  }
  .offering-cards      { height: 48vw; cursor: default; }
  .exclusive-strip     { height: auto; padding: 1.5rem 1.5rem; flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .exclusive-strip::after { display: none; }
  .exclusive-desc      { max-width: none; }
  .exclusive-right     { align-items: flex-start; min-width: auto; text-align: left; }
  .site-footer         { height: auto; padding: 0.65rem 1rem; }
  .ghost-home--bl      { position: static; transform: none; }
}