/* Off to Grape Places — redesign layer v3 (14 Jun 2026)
   Loads AFTER styles.css. Same locked tokens (bordeaux/vellum/gold,
   Cormorant/Inter). New structure: intent-led entry, the app/site bridge,
   learn-before-you-book region pages, lesson previews. Gold = the one answer. */

:root{
  --r-pill: 999px;
  --shadow-soft: 0 1px 2px rgba(58,48,41,.05), 0 14px 34px rgba(58,48,41,.08);
  --shadow-lift: 0 18px 40px rgba(58,48,41,.14);
}

/* ---------- Rhythm + dividers ---------- */
.section{ padding: 84px 0; }
.section + .section{ border-top: none; }
/* a quiet compass divider between major bands */
.band-divider{
  display:flex; align-items:center; justify-content:center; gap:0;
  max-width: 1040px; margin: 0 auto; padding: 0 22px; color: var(--oak-soft);
}
.band-divider::before, .band-divider::after{
  content:""; flex:1; border-top:1px solid var(--line);
}
.band-divider svg{ width:22px; height:22px; margin:0 18px; color:var(--gold); flex:none; opacity:.9; }

.kicker{ letter-spacing:.26em; }

/* ---------- Header: sharper, app button gets gold edge ---------- */
.site-head{ background: rgba(251,247,238,.92); }
.site-nav a.btn{
  padding: 10px 20px; letter-spacing:.04em;
  box-shadow: 0 1px 0 rgba(74,15,31,.4), 0 6px 16px rgba(107,26,45,.18);
  border:1px solid rgba(204,171,114,.5);
}

/* ---------- Intent entry cards (home: "what's the moment") ---------- */
.intent-grid{
  display:grid; gap:16px; margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
}
.intent-card{
  position:relative; overflow:hidden; text-decoration:none;
  background: linear-gradient(168deg, var(--paper), var(--vellum) 130%);
  border:1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px 22px 20px; min-height: 188px;
  display:flex; flex-direction:column;
  box-shadow: var(--shadow-soft);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s;
}
.intent-card:hover{ transform: translateY(-5px); border-color: var(--oak-soft); box-shadow: var(--shadow-lift); }
.intent-card .ic-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color: var(--oak); margin-bottom:12px;
}
.intent-card h3{
  font-family:var(--serif); font-weight:600; font-size:25px; line-height:1.12;
  color: var(--bordeaux); margin-bottom:8px;
}
.intent-card p{ font-size:14.5px; color: var(--ink-soft); line-height:1.55; margin:0; }
.intent-card .ic-go{
  margin-top:auto; padding-top:16px; font-size:13px; font-weight:600;
  letter-spacing:.04em; color: var(--bordeaux);
  display:inline-flex; align-items:center; gap:7px;
}
.intent-card .ic-go::after{ content:"→"; color:var(--gold); transition: transform .3s; }
.intent-card:hover .ic-go::after{ transform: translateX(4px); }

/* ---------- The answer: a gold-edged deep-link band ---------- */
.answer-cta{
  position:relative; overflow:hidden;
  margin: 40px 0;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(204,171,114,.16), rgba(204,171,114,0) 60%),
    linear-gradient(160deg, var(--bordeaux) 0%, var(--bordeaux-ink) 100%);
  border-radius: var(--r-lg);
  border:1px solid rgba(204,171,114,.4);
  padding: 30px 30px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  box-shadow: var(--shadow-soft);
}
.answer-cta .ac-copy{ max-width: 560px; }
.answer-cta .ac-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color: var(--oak-soft); margin-bottom:8px;
}
.answer-cta h3{
  font-family:var(--serif); font-weight:600; font-size: clamp(24px,3.2vw,30px);
  line-height:1.14; color: var(--cream); margin:0 0 6px;
}
.answer-cta p{ font-size:14.5px; color: rgba(251,247,238,.74); margin:0; }
.btn-gold{
  display:inline-block; white-space:nowrap;
  background: var(--gold); color: var(--bordeaux-ink);
  font-family:var(--sans); font-size:14px; font-weight:700; letter-spacing:.04em;
  text-decoration:none; padding:14px 26px; border-radius: var(--r-sm);
  box-shadow: 0 1px 0 rgba(120,90,40,.5), 0 10px 24px rgba(204,171,114,.3);
  transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, background .2s;
}
.btn-gold:hover{ background:#d9bb86; transform: translateY(-2px); box-shadow: 0 2px 0 rgba(120,90,40,.5), 0 16px 32px rgba(204,171,114,.4); }

/* ---------- Learn before you book: numbered editorial steps ---------- */
.lbb{ margin: 8px 0 0; }
.lbb .lbb-step{
  display:grid; grid-template-columns: 44px 1fr; gap: 18px;
  padding: 22px 0; border-top: 1px solid var(--line-soft);
}
.lbb .lbb-step:first-child{ border-top: none; }
.lbb .lbb-idx{
  font-family:var(--serif); font-weight:700; font-size:30px; line-height:1;
  color: var(--gold);
}
.lbb .lbb-body h3{
  font-family:var(--serif); font-weight:600; font-size:22px; color: var(--bordeaux-ink);
  margin:2px 0 8px; display:block;
}
.lbb .lbb-body h3::before{ content:none; }
.lbb .lbb-body p{ margin:0 0 10px; color: var(--ink); }
.lbb .lbb-body p:last-child{ margin-bottom:0; }

/* ---------- Affiliate disclosure (framed, visible, after context) ---------- */
.aff-disclosure{
  display:flex; gap:12px; align-items:flex-start;
  background: var(--vellum); border:1px solid var(--line);
  border-left:3px solid var(--gold); border-radius: var(--r-sm);
  padding: 13px 16px; margin: 0 0 20px;
  font-size: 13px; color: var(--ink-soft); line-height:1.5;
}
.aff-disclosure svg{ width:18px; height:18px; color: var(--gold); flex:none; margin-top:2px; }

/* ---------- App → public return loop note ---------- */
.return-loop{
  position:relative;
  background: var(--vine-wash);
  border:1px solid #DCE6D0; border-radius: var(--r);
  padding: 20px 22px; margin: 36px 0 0;
}
.return-loop .rl-eyebrow{
  font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color: var(--vine); margin-bottom:6px;
}
.return-loop p{ margin:0 0 12px; color: var(--ink); font-size:15px; }
.return-loop a.rl-link{
  font-weight:600; color: var(--bordeaux); text-decoration:none;
  border-bottom:1.5px solid var(--gold); padding-bottom:1px;
}

/* ---------- Lesson preview pages ---------- */
.answer-block{
  background: linear-gradient(168deg, var(--paper), var(--vellum) 140%);
  border:1px solid var(--line); border-left:3px solid var(--gold);
  border-radius: var(--r); padding: 24px 24px; margin: 22px 0 12px;
  box-shadow: var(--shadow-soft);
}
.answer-block .ab-label{
  font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color: var(--oak); margin-bottom:8px;
}
.answer-block p{ font-size:18px; line-height:1.6; color: var(--ink); margin:0; }
.answer-block .ab-pull{
  font-family:var(--serif); font-style:italic; font-size:21px; color: var(--bordeaux); line-height:1.4;
}
.preview-meta{
  display:flex; gap:18px; flex-wrap:wrap; font-size:12.5px; letter-spacing:.04em;
  color: var(--ink-faint); margin-top:10px;
}

/* ---------- Per-region accent (drives the gold-answer + map ink) ---------- */
.r-vine .answer-cta{ background: radial-gradient(ellipse at 18% 0%, rgba(204,171,114,.14), rgba(204,171,114,0) 60%), linear-gradient(160deg, var(--vine) 0%, #2f4a28 100%); }
.r-sea  .answer-cta{ background: radial-gradient(ellipse at 18% 0%, rgba(204,171,114,.14), rgba(204,171,114,0) 60%), linear-gradient(160deg, var(--sea) 0%, #1f4e59 100%); }
.r-oak  .answer-cta{ background: radial-gradient(ellipse at 18% 0%, rgba(204,171,114,.16), rgba(204,171,114,0) 60%), linear-gradient(160deg, var(--oak) 0%, #5f4a2a 100%); }

/* ---------- Responsive ---------- */
@media (max-width: 640px){
  .section{ padding: 60px 0; }
  .answer-cta{ padding: 24px 22px; }
  .answer-cta .btn-gold{ width:100%; text-align:center; }
  .intent-card{ min-height: 0; }
}

@media (prefers-reduced-motion: reduce){
  .intent-card, .btn-gold, .intent-card .ic-go::after{ transition:none; }
}