/* =====================================================================
   Sequim Lavender — Design System v2 "Field Journal" (2026-10-25)
   Spec: festival-studio/brand/DESIGN-SYSTEM.md
   Scoped to <body class="v2"> so pages move over one at a time.
   ===================================================================== */

/* Font faces live in tokens.css (loaded on every page). */

body.v2 {
  /* Color roles */
  --paper: #F6F1E7;
  --paper-2: #EDE5D6;
  --ink: #1F1D1A;
  --ink-2: #4A4643;
  --ink-soft: #6B655F;
  --plum: #3E3355;
  --plum-deep: #2B2238;
  --lav: #6B5B8A;
  --lav-500: #9B7DB8;
  --lav-wash: #ECE4F0;
  --gold: #C4A34A;
  --gold-700: #7D6522;
  --sage-700: #5C6E4F;
  --rule: rgba(31, 29, 26, .14);

  /* Type */
  --serif: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  --sans: 'Figtree', 'Figtree Fallback', Arial, sans-serif;
  --step-display: clamp(3.25rem, 1.671rem + 6.48vw, 7.5rem);
  --step-h1: clamp(2.5rem, 1.664rem + 3.43vw, 4.75rem);
  --step-h2: clamp(2rem, 1.443rem + 2.29vw, 3.5rem);
  --step-h3: clamp(1.5rem, 1.268rem + .952vw, 2.125rem);
  --step-h4: clamp(1.25rem, 1.157rem + .381vw, 1.5rem);
  --step-lead: clamp(1.1875rem, 1.071rem + .476vw, 1.5rem);
  --step-body: clamp(1.0625rem, 1.016rem + .19vw, 1.1875rem);
  --step-small: clamp(.875rem, .852rem + .095vw, .9375rem);
  --step-label: .8125rem;

  /* Space + layout */
  --section-y: clamp(4rem, 2.143rem + 7.62vw, 9rem);
  --gutter: clamp(1.25rem, .6rem + 2.67vw, 3rem);
  --stack-lg: clamp(2rem, 1.257rem + 3.05vw, 4rem);
  --w-wide: 1440px;
  --w-content: 1280px;
  --w-text: 40rem;

  /* Motion */
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --ease-std: cubic-bezier(.4, 0, .2, 1);

  /* Hand the shared header/footer the new fonts too */
  --font-serif: var(--serif);
  --font-system: var(--sans);

  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--step-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.v2::before { display: none; } /* drop the old paper-texture overlay */
.v2 h1, .v2 h2, .v2 h3 { font-family: var(--serif); font-weight: 420; letter-spacing: -.01em; text-wrap: balance; }
body.v2 { font-synthesis: none; }
.v2 h4, .v2 .h4 { font-family: var(--sans); font-weight: 600; letter-spacing: 0; }
.v2 p { text-wrap: pretty; }
/* Plain in-content links only. Classed links (header buttons, strip, cards) keep their own colors. */
.v2 main a:not([class]) { color: var(--lav); text-decoration-color: var(--lav-500); text-underline-offset: .2em; }
.v2 :focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; box-shadow: 0 0 0 4px var(--paper); border-radius: 4px; }

/* Shared header/footer on paper */
.v2 .site-header.sh-v3 { background: rgba(246, 241, 231, .94); border-bottom-color: var(--rule); }
.v2 .site-header.sh-v3.scrolled { background: rgba(246, 241, 231, .98); }
.v2 .sh-brand-title { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; }
.v2 .mobile-app-bar { display: none !important; } /* one floating element on phones: Lavi */

/* ---------- Layout primitives ---------- */
.v2-wrap { width: 100%; max-width: calc(var(--w-content) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.v2-wide { max-width: calc(var(--w-wide) + 2 * var(--gutter)); }
.v2-text { max-width: var(--w-text); }
.v2-section { padding: var(--section-y) 0; }
.v2-section + .v2-section { padding-top: 0; }
.v2-section.is-alt { background: var(--paper-2); padding-top: var(--section-y); }
.v2-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

.v2-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--stack-lg) 24px; align-items: start; }
.v2-col-4 { grid-column: span 4; } .v2-col-5 { grid-column: span 5; } .v2-col-6 { grid-column: span 6; }
.v2-col-7 { grid-column: span 7; } .v2-col-8 { grid-column: span 8; } .v2-col-12 { grid-column: 1 / -1; }
@media (max-width: 900px) { .v2-grid { grid-template-columns: 1fr; gap: 28px; } .v2-grid > * { grid-column: 1 / -1; } }

/* ---------- Type helpers ---------- */
.v2-label { display: inline-flex; align-items: center; gap: 10px; font: 600 var(--step-label)/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin: 0 0 18px; }
.v2-label::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.v2-display { font-size: var(--step-display); line-height: .98; letter-spacing: -.02em; font-weight: 400; margin: 0; font-variation-settings: 'opsz' 144; }
.v2-h1 { font-size: var(--step-h1); line-height: 1.02; margin: 0 0 .4em; }
.v2-h2 { font-size: var(--step-h2); line-height: 1.08; margin: 0 0 .45em; }
.v2-h3 { font-size: var(--step-h3); line-height: 1.15; margin: 0 0 .4em; }
.v2-lead { font-size: var(--step-lead); line-height: 1.45; color: var(--ink-2); max-width: 32em; margin: 0 0 1.2em; }
.v2-body { color: var(--ink-2); max-width: 36em; }
.v2-small { font-size: var(--step-small); color: var(--ink-soft); }
.v2-em { font-style: normal; color: var(--lav); }

/* ---------- Buttons + links ---------- */
.v2-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 1.375rem; border-radius: 999px; font: 600 1rem/1 var(--sans); text-decoration: none !important; border: 1.5px solid transparent; cursor: pointer; transition: transform 150ms var(--ease-std), background-color 150ms var(--ease-std), color 150ms var(--ease-std); white-space: nowrap; }
.v2-btn:active { transform: scale(.98); }
.v2-btn .arr { transition: transform 150ms var(--ease-std); }
.v2-btn:hover .arr { transform: translateX(3px); }
.v2-btn--plum { background: var(--plum); color: var(--paper) !important; }
.v2-btn--plum:hover { background: var(--plum-deep); }
.v2-btn--gold { background: var(--gold); color: var(--ink) !important; }
.v2-btn--gold:hover { background: #B8963E; }
.v2-btn--outline { border-color: var(--plum); color: var(--plum) !important; background: transparent; }
.v2-btn--outline:hover { background: var(--plum); color: var(--paper) !important; }
.v2-btn--paper { background: var(--paper); color: var(--ink) !important; }
.v2-btn--paper:hover { background: #fff; }
.v2-link { display: inline-flex; align-items: center; gap: 8px; font: 600 1rem/1.3 var(--sans); color: var(--ink) !important; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: var(--ink-soft); min-height: 44px; }
.v2-link:hover { text-decoration-thickness: 2px; text-decoration-color: var(--ink); }
.v2-link--light { color: #fff !important; text-decoration-color: rgba(255,255,255,.7); }
.v2-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }

/* ---------- Hero: untinted photo, headline bottom-left ---------- */
.v2-hero { position: relative; color: #fff; background: var(--plum-deep); }
.v2-hero__media { position: relative; height: min(88svh, 880px); min-height: 520px; overflow: hidden; }
.v2-hero__media picture { display: block; width: 100%; height: 100%; }
.v2-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.v2-hero__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,16,28,.72) 0%, rgba(20,16,28,.32) 38%, rgba(20,16,28,0) 66%); pointer-events: none; }
.v2-hero__content { position: absolute; left: 0; right: 0; bottom: 0; padding-bottom: clamp(2rem, 1rem + 4vw, 4.5rem); z-index: 1; }
.v2-hero .v2-label { color: rgba(255,255,255,.9); }
.v2-hero .v2-display { color: #fff; max-width: 13ch; }
.v2-hero__sub { font-size: var(--step-lead); line-height: 1.4; color: rgba(255,255,255,.92); max-width: 30em; margin: 18px 0 26px; }
.v2-hero__caption { position: absolute; right: var(--gutter); bottom: 14px; z-index: 1; font: 500 .8125rem/1.2 var(--sans); color: rgba(255,255,255,.78); }
@media (max-width: 700px) {
  /* Phones: photo first, words on paper underneath */
  .v2-hero { color: var(--ink); background: var(--paper); }
  .v2-hero__media { height: auto; min-height: 0; aspect-ratio: 4 / 5; max-height: 72svh; }
  .v2-hero__media::after { display: none; }
  .v2-hero__media img { object-position: 50% 50%; } /* phones get a pre-cropped 4:5 file */
  .v2-hero__content { position: static; padding: 28px 0 8px; }
  .v2-hero .v2-label { color: var(--ink-2); }
  .v2-hero .v2-display { color: var(--ink); }
  .v2-hero__sub { color: var(--ink-2); margin: 14px 0 22px; }
  .v2-hero .v2-link--light { color: var(--ink) !important; text-decoration-color: var(--ink-soft); }
  .v2-hero__caption { right: 12px; bottom: auto; top: calc(min(72svh, 125vw) - 30px); color: rgba(255,255,255,.85); text-shadow: 0 1px 6px rgba(0,0,0,.4); }
}

/* ---------- Field note ---------- */
.v2-note__facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.v2-note__facts li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: var(--step-small); }
.v2-note__facts span:first-child { color: var(--ink-soft); }
.v2-note__facts span:last-child { color: var(--ink); font-weight: 600; text-align: right; }
.v2-note__date { font: 600 var(--step-label)/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--sage-700); margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.v2-note__date::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sage-700); }

/* ---------- Numbered list ---------- */
.v2-num { list-style: none; margin: 8px 0 28px; padding: 0; counter-reset: v2n; }
.v2-num li { counter-increment: v2n; display: grid; grid-template-columns: 3.2rem 1fr; gap: 4px 12px; padding: 18px 0; border-top: 1px solid var(--rule); }
.v2-num li:last-child { border-bottom: 1px solid var(--rule); }
.v2-num li::before { content: counter(v2n, decimal-leading-zero); font: 400 1.25rem/1.3 var(--serif); color: var(--lav); grid-row: span 2; }
.v2-num b { font: 600 1.0625rem/1.35 var(--sans); color: var(--ink); }
.v2-num p { margin: 0; color: var(--ink-2); font-size: var(--step-small); line-height: 1.55; }

/* ---------- Figures ---------- */
.v2-figure { margin: 0; }
.v2-figure img { width: 100%; height: auto; display: block; border-radius: 4px; }
.v2-figure figcaption { margin-top: 10px; font: 400 .875rem/1.4 var(--sans); color: var(--ink-soft); }
.v2-poster { background: #fff; padding: clamp(10px, 1.5vw, 18px); box-shadow: 0 30px 60px -36px rgba(43,34,56,.55); transform: rotate(-1.2deg); max-width: 460px; }
.v2-poster img { border-radius: 0; }

/* ---------- Full-bleed photo break ---------- */
.v2-break { position: relative; color: #fff; }
.v2-break img { width: 100%; height: clamp(360px, 62vw, 760px); object-fit: cover; display: block; }
.v2-break::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,16,28,.7), rgba(20,16,28,.2) 45%, rgba(20,16,28,0) 70%); }
.v2-break__text { position: absolute; left: 0; right: 0; bottom: clamp(1.5rem, 1rem + 3vw, 3.5rem); z-index: 1; }
.v2-break__text p { font: 400 var(--step-h2)/1.1 var(--serif); color: #fff; max-width: 18ch; margin: 0; text-wrap: balance; }
.v2-break__cap { display: block; margin-top: 12px; font: 500 .8125rem/1.2 var(--sans); color: rgba(255,255,255,.8); }

/* ---------- Stats + milestones ---------- */
.v2-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.v2-stats div { padding: 22px 18px 22px 0; }
.v2-stats div + div { padding-left: 18px; border-left: 1px solid var(--rule); }
.v2-stats b { display: block; font: 400 var(--step-h3)/1.05 var(--serif); color: var(--ink); }
.v2-stats span { font-size: var(--step-small); color: var(--ink-soft); }
@media (max-width: 700px) { .v2-stats { grid-template-columns: 1fr 1fr; } .v2-stats div:nth-child(3) { border-left: 0; padding-left: 0; } .v2-stats div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); } }
.v2-years { list-style: none; margin: 0; padding: 0; }
.v2-years li { display: grid; grid-template-columns: 5rem 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--rule); }
.v2-years li:last-child { border-bottom: 1px solid var(--rule); }
.v2-years b { font: 400 1.5rem/1.1 var(--serif); color: var(--lav); }
.v2-years span { color: var(--ink-2); }

/* ---------- Trip modes: editorial link list ---------- */
.v2-modes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
.v2-modes li { border-top: 1px solid var(--rule); }
.v2-modes a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; text-decoration: none; color: var(--ink); min-height: 48px; }
.v2-modes .t { font: 400 var(--step-h4)/1.2 var(--serif); }
.v2-modes .s { display: block; font: 400 var(--step-small)/1.4 var(--sans); color: var(--ink-soft); margin-top: 4px; }
.v2-modes .go { font-size: 1.25rem; color: var(--lav); transition: transform 150ms var(--ease-std); }
.v2-modes a:hover .go { transform: translateX(4px); }
.v2-modes a:hover .t { color: var(--lav); }
@media (max-width: 700px) { .v2-modes { grid-template-columns: 1fr; } }

/* ---------- Plum band ---------- */
.v2-band { background: var(--plum); color: var(--paper); padding: var(--section-y) 0; }
.v2-band .v2-label { color: rgba(246,241,231,.85); }
.v2-band h2 { color: var(--paper); }
.v2-band p { color: rgba(246,241,231,.88); }
.v2-band a:not(.v2-btn) { color: var(--paper); text-decoration-color: rgba(246,241,231,.6); }

/* ---------- Sponsors grid ---------- */
.v2-sponsors { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.v2-sponsors > * { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; min-height: 104px; padding: 18px; text-align: center; text-decoration: none; color: var(--ink-2); font: 600 .9375rem/1.3 var(--sans); }
.v2-sponsors img { max-height: 54px; max-width: 100%; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .85; transition: filter 150ms var(--ease-std), opacity 150ms var(--ease-std); }
.v2-sponsors a:hover img { filter: none; opacity: 1; }

/* ---------- Signup ---------- */
.v2-signup { display: flex; gap: 10px; flex-wrap: wrap; max-width: 520px; }
.v2-signup input { flex: 1 1 240px; min-height: 52px; padding: 0 18px; font: 400 1rem var(--sans); color: var(--ink); background: #fff; border: 1.5px solid #C9C1B5; border-radius: 999px; }
.v2-signup input:focus { outline: none; border-color: var(--plum); box-shadow: 0 0 0 3px rgba(62,51,85,.15); }
.v2-signup-msg { min-height: 1.5em; margin: 12px 0 0; font-weight: 600; color: var(--plum); }

/* ---------- Map section on paper ---------- */
.v2 .map-layout { border-top: 1px solid var(--rule); padding-top: 20px; }
.v2 .map-sidebar { background: transparent; border: 0; box-shadow: none; }
.v2 .map-tab.active { color: var(--plum); border-color: var(--plum); }

/* ---------- Motion (progressive, CSS only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .v2-reveal { animation: v2-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 38%; }
    @keyframes v2-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  }
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 250ms; }
  @media (hover: hover) {
    .v2-zoom { overflow: hidden; }
    .v2-zoom img { transition: transform 600ms var(--ease-out); }
    .v2-zoom:hover img { transform: scale(1.03); }
  }
}

/* ---------- Phones: map list inline under the map (no fixed bottom sheet) ---------- */
@media (max-width: 768px) {
  .v2 .map-sidebar { position: static; transform: none !important; max-height: none; border-radius: 0; box-shadow: none; padding-top: 0; z-index: auto; margin-top: 16px; }
  .v2 .map-sidebar::before { display: none; }
  .v2 .map-sidebar-list { max-height: 360px; overflow: auto; }
  .v2 .map-main #farm-map, .v2 .map-main .farm-map { margin-bottom: 0; height: 420px !important; }
  .v2 .map-main .map-legend { margin-bottom: 0; }
}

/* ---------- Footer: deep plum ---------- */
.v2 .site-footer.sf-v3 { background: var(--plum-deep); color: rgba(246,241,231,.82); border-top: 0; margin-top: 0; padding: clamp(56px, 3rem + 3vw, 96px) 0 28px; }
.v2 .sf-brand-link { color: var(--paper); }
.v2 .sf-brand-mark { background: rgba(246,241,231,.1); }
.v2 .sf-brand-text strong { font-family: var(--serif); font-weight: 500; color: var(--paper); font-size: 1.35rem; }
.v2 .sf-brand-text span, .v2 .sf-brand-blurb, .v2 .sf-address, .v2 .sf-col .sf-dim, .v2 .sf-a11y-note { color: rgba(246,241,231,.72); }
.v2 .sf-address a { color: var(--paper); }
.v2 .sf-col h4, .v2 .sf-col .h4 { color: var(--gold); letter-spacing: .12em; }
.v2 .sf-col a { color: rgba(246,241,231,.82); }
.v2 .sf-col a:hover { color: #fff; }
.v2 .sf-newsletter { background: rgba(246,241,231,.06); border-color: rgba(246,241,231,.16); }
.v2 .sf-newsletter-text h4, .v2 .sf-newsletter-text .h4 { font-family: var(--serif); font-weight: 450; color: var(--paper); }
.v2 .sf-newsletter-text p { color: rgba(246,241,231,.72); }
.v2 .sf-newsletter-form input[type="email"] { background: var(--paper); color: var(--ink); border-color: transparent; }
.v2 .sf-newsletter-ok { color: var(--lav-wash); }
.v2 .site-footer label, .v2 .site-footer .sf-a11y-toggle span { color: rgba(246,241,231,.82); }
.v2 .site-footer h2.h4, .v2 .site-footer h4 { color: var(--gold); }
.v2 .sf-bottom { border-top-color: rgba(246,241,231,.14); color: rgba(246,241,231,.66); }
.v2 .sf-bottom a, .v2 .sf-legal a { color: rgba(246,241,231,.82); }
.v2 .sf-bottom a:hover, .v2 .sf-legal a:hover { color: #fff; }

/* =====================================================================
   BRIDGE: legacy shared components restyled for v2 pages (2026-10-25).
   Lets every page adopt the Field Journal look without rewriting markup.
   ===================================================================== */

/* Page hero: untinted photo, words bottom-left over a local fade */
.v2 .page-hero { background: var(--plum-deep); text-align: left; min-height: clamp(360px, 50vh, 560px) !important; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: calc(var(--header-height, 72px) + 32px) max(var(--gutter), calc((100% - var(--w-content)) / 2)) clamp(2rem, 1rem + 3vw, 3.5rem); }
.v2 .page-hero::before { display: none; }
.v2 .page-hero-bg { inset: 0; width: 100%; height: 100%; opacity: 1; animation: none; }
.v2 .page-hero-overlay { background: linear-gradient(to top, rgba(20,16,28,.74) 0%, rgba(20,16,28,.34) 45%, rgba(20,16,28,.06) 78%); }
.v2 .page-hero .section-label { color: rgba(255,255,255,.9); animation: none; margin-bottom: 14px; }
.v2 .page-hero h1 { font-family: var(--serif); font-size: var(--step-h1); font-weight: 400; line-height: 1.04; letter-spacing: -.015em; text-shadow: none; max-width: 16ch; margin: 0 0 .25em; animation: none; color: #fff; }
.v2 .page-hero p { margin: 0; max-width: 34em; font-size: var(--step-lead); line-height: 1.45; animation: none; color: rgba(255,255,255,.92); }

/* Section labels and headers: left, quiet, editorial */
.v2 .section-label { display: inline-flex; align-items: center; gap: 10px; font: 600 var(--step-label)/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); padding-bottom: 0; }
.v2 .section-label::after { display: none; }
.v2 .section-label::before { content: ''; width: 28px; height: 1px; background: currentColor; opacity: .6; }
.v2 .section-header { text-align: left; max-width: var(--w-content); margin-left: 0; margin-right: 0; }
.v2 .section-header h2 { font-size: var(--step-h2); font-weight: 400; line-height: 1.08; }
.v2 .section-header p { color: var(--ink-2); max-width: 38em; margin-left: 0; margin-right: 0; }
.v2 h2 { font-weight: 420; }
.v2 .section { padding-top: clamp(3.5rem, 2rem + 5vw, 7rem); padding-bottom: clamp(3.5rem, 2rem + 5vw, 7rem); }
.v2 .section-alt { background: var(--paper-2); }
.v2 .section-alt::before { display: none; }

/* Buttons: plum pills, one gold feature, no glows or gradients */
.v2 .btn { border-radius: 999px; min-height: 48px; padding: 0 1.375rem; font-family: var(--sans); font-weight: 600; letter-spacing: 0; box-shadow: none; }
.v2 .btn-sm { min-height: 44px; padding: 0 1.1rem; }
.v2 .btn-primary { background: var(--plum); color: var(--paper); border-color: var(--plum); }
.v2 .btn-primary:hover { background: var(--plum-deep); color: var(--paper); box-shadow: none; transform: none; }
.v2 .btn-accent { background: var(--gold); color: var(--ink); }
.v2 .btn-accent:hover { background: #B8963E; color: var(--ink); box-shadow: none; }
.v2 .btn-outline { border: 1.5px solid var(--plum); color: var(--plum); background: transparent; }
.v2 .btn-outline:hover { background: var(--plum); color: var(--paper); }
.v2 .btn-g-primary { background: var(--plum); color: var(--paper); box-shadow: none; }
.v2 .btn-g-primary:hover { background: var(--plum-deep); color: var(--paper); }

/* Cards and boxes: hairlines instead of shadows, small radius */
.v2 .card, .v2 .info-card, .v2 .gi-card, .v2 .highlight-box, .v2 .direction-card, .v2 .guide-card, .v2 .event-card, .v2 .vendor-card, .v2 .itinerary-card, .v2 .merch-card {
  border-radius: 6px; box-shadow: none; border: 1px solid var(--rule); background: rgba(255,255,255,.55);
}
.v2 .card:hover, .v2 .info-card:hover, .v2 .gi-card:hover { transform: none; box-shadow: 0 22px 44px -32px rgba(43,34,56,.45); border-color: rgba(31,29,26,.22); }
.v2 .card-img { border-radius: 0; }
.v2 .card-title, .v2 .info-card-title { font-family: var(--serif); font-weight: 450; }
.v2 .gi-card .gi-icon { background: var(--paper-2); }

/* Callouts */
.v2 .season-callout { background: var(--paper-2); border: 0; border-left: 3px solid var(--sage-700); border-radius: 0 6px 6px 0; }

/* Badges/chips on paper */
.v2 .chip { border-radius: 999px; }
.v2 .chip.active { background: var(--plum); border-color: var(--plum); color: var(--paper); }

/* =====================================================================
   Line icons that replaced emoji (2026-10-25, _vibe/de-emoji.py).
   One stroke weight, plum on paper, so cards read as a set.
   ===================================================================== */
.v2 .ic { display: inline-block; vertical-align: middle; flex-shrink: 0; color: var(--lav); }
.v2 .gi-card .gi-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--paper-2); }
.v2 .gi-card .gi-icon .ic,
.v2 .info-card .icon .ic,
.v2 .tier-badge-icon .ic,
.v2 .step-icon .ic { color: var(--plum); }
.v2 .benefit-card .benefit-icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 50%; background: var(--paper-2); }
.v2 .benefit-card { border-top: 0; text-align: left; }
.v2 .process-step .step-icon { background: var(--paper); border: 1px solid var(--rule); }
.v2 .tier-badge-icon { background: var(--paper-2) !important; }
.v2 .info-card .icon { background: var(--paper-2); border: 0; }
.v2 .empty-state .icon .ic, .v2 .tb-empty-icon .ic { color: var(--lav-500); }
.v2 .season-callout > span:first-child { display: inline-flex; padding-top: 2px; }
.v2 .season-callout .ic { color: var(--sage-700); }
.v2 .booking-card > div:first-child { margin-bottom: .5rem; }
.v2 .ic-lg .ic { color: var(--sage-700); }

/* a11y fixes after the v2 Lighthouse pass (2026-10-25) */
body.v2 { --text-secondary: #5C5866; --text-light: #5C5866; --primary: #6B5B8A; --gold-700: #6F5A1C; }
.v2 .sf-bottom p { color: inherit; }
.v2 .process-step .step-title { font-family: var(--sans); font-size: .95rem; font-weight: 700; margin: 0 0 4px; letter-spacing: 0; }
.v2 .gi-tag { color: var(--lav) !important; }
.v2 .gi-card:last-child:nth-child(3n+1) { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr auto; column-gap: 1.5rem; row-gap: .25rem; align-items: center; }
.v2 .gi-card:last-child:nth-child(3n+1) .gi-icon { grid-row: 1 / span 3; }
.v2 .gi-card:last-child:nth-child(3n+1) .gi-actions { grid-column: 3; grid-row: 1 / span 3; margin: 0; padding: 0; }
@media (max-width: 760px) {
  .v2 .gi-card:last-child:nth-child(3n+1) { display: flex; }
}
.v2 .season-callout:has(> span:first-child svg) { flex-wrap: nowrap; flex-direction: row; gap: .875rem; align-items: flex-start; text-align: left; }
.v2 .season-callout:has(> span:first-child svg) > span:first-child { flex: none; display: inline-flex; padding-top: 3px; }
.v2 .season-callout:has(> span:first-child svg) > div { flex: 1; min-width: 0; }
@media (max-width: 600px) { .v2 .season-callout { text-align: left; align-items: flex-start; } }

/* Legacy .visual-break photo bands -> Field Journal photo break (2026-10-25).
   No fixed-attachment parallax (blank on iOS and in screenshots), no purple
   wash, text visible without JS, headline bottom-left like the heroes. */
.v2 .visual-break { min-height: clamp(360px, 52vw, 640px); align-items: flex-end; justify-content: flex-start; background-attachment: scroll !important; background-size: cover; background-position: center; background-color: var(--plum-deep); }
.v2 .visual-break-bg { inset: 0; background-attachment: scroll; will-change: auto; }
.v2 .visual-break::before { background: linear-gradient(to top, rgba(20,16,28,.68) 0%, rgba(20,16,28,.22) 45%, rgba(20,16,28,0) 72%); }
.v2 .visual-break::after { display: none; }
.v2 .visual-break-content { opacity: 1; transform: none; text-align: left; width: 100%; max-width: none; padding: 0 max(var(--gutter), calc((100% - var(--w-content)) / 2)) clamp(1.75rem, 1rem + 3vw, 3.5rem); }
.v2 .visual-break-content h3 { font-family: var(--serif); font-weight: 400; font-size: var(--step-h2); letter-spacing: -.01em; line-height: 1.08; max-width: 18ch; text-shadow: none; margin-bottom: .35em; }
.v2 .visual-break-content p { max-width: 46ch; font-size: var(--step-body); text-shadow: none; }

/* App banner: a quiet paper band instead of a purple gradient, so pages don't
   end in two purple slabs (banner + footer). 2026-10-25 */
.v2 .app-banner { background: var(--paper); color: var(--ink); text-align: left; padding: clamp(3.5rem, 2rem + 5vw, 6.5rem) 0; border-top: 1px solid var(--rule); }
.v2 .app-banner .container { max-width: calc(var(--w-content) + 2 * var(--gutter)); padding: 0 var(--gutter); }
.v2 .app-banner .ab-flex { justify-content: space-between; align-items: center; }
.v2 .app-banner h2 { color: var(--ink); font-family: var(--serif); font-weight: 400; font-size: var(--step-h2); line-height: 1.05; letter-spacing: -.01em; max-width: 14ch; margin-bottom: .4em; }
.v2 .app-banner p { color: var(--ink-2); font-size: var(--step-body); max-width: 44ch; }
.v2 .app-banner .btn-group { justify-content: flex-start; }
.v2 .app-banner .btn-g-primary { background: var(--plum); color: var(--paper); }
.v2 .app-banner .btn-g-ghost { background: transparent; color: var(--plum); border: 1.5px solid var(--plum); }
.v2 .app-banner .btn-g-ghost:hover { background: var(--plum); color: var(--paper); }
.v2 .app-banner p[style*="opacity"] { color: var(--ink-soft); opacity: 1 !important; }
.v2 .app-banner .app-qr-wrap img { box-shadow: none; border: 1px solid var(--rule); }
.v2 .app-banner .app-qr-wrap span { color: var(--ink-soft); opacity: 1; }

/* Visit: four direction cards in one row on desktop (was 3 + an orphan). 2026-10-26 */
.v2 .directions-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.v2 .btn-success { background: var(--plum); border-color: var(--plum); color: var(--paper); }

/* Farm page gallery: two columns on phones instead of one long strip of photos. 2026-10-26 */
.v2 .farm-gallery-item { border-radius: 4px; box-shadow: none; }
@media (max-width: 719px) {
  .v2 .farm-gallery { grid-template-columns: 1fr 1fr; gap: 8px; }
  .v2 .farm-gallery > .farm-gallery-item:first-child { grid-column: span 2; aspect-ratio: 16 / 10; }
}

/* No whole-page fade-in on v2 pages. site.css faded <main> in from opacity 0,
   which held back the first paint of the hero photo (Lighthouse showed ~4s of
   LCP "render delay" on the homepage). View transitions cover page changes. */
.v2 main { animation: none; }