/* =============================================================
   TREEBONES RESORT — COMPILED CSS
   Design tokens live in style.css (:root).
   This file handles all page-level layout and components.
   ============================================================= */

/* ─── HERO SYSTEM ─── */
/* v3.6.10 — touch-action: pan-y stops the browser from interpreting
   horizontal swipes as page-pan / pull-to-refresh / rubber-band scroll
   on mobile. The slideshow swipe handler at slideshow.js:265 is
   passive (can't preventDefault), so without this CSS rule the browser
   default fires alongside (or instead of) our slide-change. With pan-y,
   only vertical scroll is allowed natively; horizontal touch deltas
   pass through to JS cleanly. pinch-zoom remains enabled (a11y).
   Same rule mirrored to .page-hero below for interior-page consistency. */
/* v4.0.12 — touch-action was 'pan-y' to keep the browser from competing
   with the horizontal swipe-to-prev/next handler in slideshow.js. That
   side-effected pinch-zoom on mobile: zooming any photo on the page
   shifted the layout sideways with a phantom right-side bar. Adding
   'pinch-zoom' explicitly preserves the swipe block AND restores the
   browser's native zoom gesture. */
.hero-wrap{position:relative;width:100%;height:100vh;min-height:600px;overflow:hidden;background:var(--tb-shadow);touch-action:pan-y pinch-zoom}
.hero-photo{position:absolute;inset:0;background-size:cover;background-position:center;transition:opacity 1.4s ease}
.layer-a{z-index:0;opacity:1}.layer-b{z-index:1;opacity:0}.layer-b.show{opacity:1}
/* v4.0.22 — Hero overlay calibration pass 2: Matt's QA on v4.0.21 hit it half-right —
   photos finally breathing in the middle (great), but bottom-text legibility dropped
   too far on bright slides. Recalibrated grad-bottom to restore darkening in the text
   zone (bottom 35%) while keeping the middle 55%+ of the image transparent. Also bumped
   text-shadow blur/alpha on .hero-h1/.hero-body/.hero-eyebrow as the safety net.
   v4.0.21 history: dropped 4-layer system to film+vignette transparent + lighter gradients.
   v2.15.0 history: film .08→.22 + grad-bottom extended 42%→75% (now superseded). */
.grad-film{position:absolute;inset:0;z-index:2;pointer-events:none;background:transparent}
.grad-top{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,rgba(42,41,39,.62) 0%,rgba(42,41,39,.38) 10%,rgba(42,41,39,.14) 22%,rgba(42,41,39,0) 38%)}
.grad-bottom{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(0deg,rgba(42,41,39,.88) 0%,rgba(42,41,39,.70) 10%,rgba(42,41,39,.50) 22%,rgba(42,41,39,.28) 36%,rgba(42,41,39,.10) 50%,rgba(42,41,39,0) 62%)}
.grad-vignette{position:absolute;inset:0;z-index:4;pointer-events:none;background:transparent}
/* v4.3.10 — Lower-left text scrim. Radial ellipse anchored at the text-block
   center (18% × 88%) so it has no visible edge — bright photos behind the
   text get a soft localized darkening, the rest of the photo stays clean.
   Layers cleanly with the existing grad-bottom; no impact on dark slides. */
.hero-wrap::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(ellipse 52% 65% at 18% 88%,rgba(10,12,8,.78) 0%,rgba(10,12,8,.55) 22%,rgba(10,12,8,.30) 45%,rgba(10,12,8,.10) 72%,rgba(10,12,8,0) 100%)}
.hero-content{position:absolute;bottom:clamp(80px,10vh,110px);left:clamp(18px,5vw,52px);z-index: var(--z-overlay);max-width:min(620px,calc(100vw - 36px))}
.slide-in{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease}
.slide-in.show{opacity:1;transform:translateY(0)}
.slide-out{opacity:0;transform:translateY(-8px);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
/* v3.3.0: tracking nudged .4em → --ls-xwide. v3.4.0: weight 300→400 +
   size floor bumped to clamp(10px,1.2vw,11px) — the prior 8-10px @ 300
   read as a watermark on dark hero photos. */
.hero-eyebrow{font-family:var(--font-body);font-weight:400;font-size:clamp(10px,1.2vw,11px);letter-spacing:var(--ls-xwide);text-transform:uppercase;color:var(--tb-dryglass);margin-bottom:14px;display:flex;align-items:center;gap:12px;text-shadow:0 1px 18px rgba(10,12,8,.98),0 1px 6px rgba(10,12,8,.85),0 0 2px rgba(10,12,8,.7)}
.hero-eyebrow::before{content:'';display:block;width:22px;height:.5px;background:var(--tb-canvas);flex-shrink:0}
/* v3.2.4: cap reduced 80→64 so multi-word interior-page H1s
   ("Dining Experiences at Treebones", "Luxury Autonomous Tents in Big Sur")
   wrap to 2 lines max instead of 3-4 at desktop widths. The hub heroes
   become more legible without losing display impact.
   v3.6.4: cap further reduced 64→54 + scale slope 5vw→4.2vw. The May 4
   punch list flagged clipped H1 on every hub hero (Stay/Dine/Experience/
   Contact). Even after v3.2.4, 7-word H1s like "Unique Stays and Glamping
   in Big Sur" wrapped to 4 lines × 64px × 1.02 line-height = ~261px stack
   height, which overflowed the safe area between the top scrim and the
   bottom CTA padding on shorter desktop viewports (1024×900-and-below).
   At 54px the same H1 fits in 3 lines, and shorter ones (Stay/Dine/Map)
   in 2. Combined with the min-height bump in .page-hero below. */
.hero-h1{font-family:var(--font-display);font-weight:300;font-size:clamp(38px,4.2vw,54px);line-height:1.05;letter-spacing:.01em;color:#fff;margin-bottom:18px;text-shadow:0 2px 36px rgba(10,12,8,.95),0 2px 14px rgba(10,12,8,.82),0 1px 4px rgba(10,12,8,.7)}
.hero-h1 em{font-style:italic;color:var(--tb-latesun)}
.hero-body{font-family:var(--font-body);font-weight:400;font-size:clamp(12px,1.4vw,15px);letter-spacing:.04em;color:rgba(245,238,216,.92);line-height:1.85;margin-bottom:28px;max-width:min(480px,85vw);text-shadow:0 1px 26px rgba(10,12,8,.98),0 1px 8px rgba(10,12,8,.85),0 0 2px rgba(10,12,8,.7)}
@media(max-width:640px){.hero-body{font-size:12px;line-height:1.65;margin-bottom:20px;max-width:90vw}}
.hero-ctas{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
@media(max-width:640px){.hero-ctas .btn-ghost{display:none}}
/* v4.3.11 — Mobile breathing room. Drop the text block lower and hide
   the scroll-hint so the slide UI has room above the screen edge.
   v4.5.3 — Reverted hero-content bottom back to clamp(56,7vh,80) now
   that .slide-ui has been flipped to the bottom-right corner on mobile
   (see rule below). The vertical-stacking conflict is gone, so the hero
   text can sit closer to the bottom edge again — more breathing room
   for the photo, more comfortable reading position. */
@media(max-width:640px){
  .hero-content{bottom:clamp(56px,7vh,80px)}
  .scroll-hint{display:none}
}
/* v4.5.3 — Slide controls flipped to bottom-right on mobile. Desktop
   keeps the bottom-left anchor where there's horizontal room next to
   the hero CTAs. On mobile the CTAs claim the bottom-left corner; the
   slide UI (arrows + dots) tucks into the opposite corner. row-reverse
   puts the arrows at the right edge for right-thumb tap reach, dots to
   their left. Counter + progress-bar are already hidden via existing
   rules at lines 83 & 92. */
@media(max-width:640px){
  .slide-ui{left:auto;right:clamp(18px,5vw,52px);flex-direction:row-reverse;gap:14px}
}

/* Slideshow controls */
.slide-ui{position:absolute;bottom:clamp(20px,3vh,28px);left:clamp(18px,5vw,52px);z-index: var(--z-overlay);display:flex;align-items:center;gap:12px}
.dots{display:flex;gap:7px;align-items:center}
.dot{width:18px;height:1.5px;background:rgba(245,238,216,.28);cursor:pointer;border:none;padding:0;border-radius:0;transition:background var(--t-medium),width .35s cubic-bezier(.4,0,.2,1);position:relative}
.dot::before{content:'';position:absolute;inset:-20px -6px;/* 44px tall tap zone */}
.dot.active{background:var(--tb-dryglass);width:32px}.dot:hover{background:rgba(245,238,216,.55)}
.progress-wrap{width:120px;height:1px;background:rgba(245,238,216,.14);position:relative;overflow:hidden}
@media(max-width:640px){.progress-wrap{display:none}}
.progress-bar{position:absolute;left:0;top:0;bottom:0;background:var(--tb-dryglass);width:0%}
.s-arrows{display:flex;gap:6px}
/* v3.4.0: arrow icon color rgba(.65) → .85 for AA contrast. */
.s-arrow{width:30px;height:30px;background:rgba(245,238,216,.07);border:var(--b-hair) solid rgba(245,238,216,.18);color:rgba(245,238,216,.85);font-size:13px;cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius: var(--r-card);transition:all var(--t-medium)}
@media(hover:none) and (pointer:coarse){.s-arrow{width:44px;height:44px;font-size:15px}}
.s-arrow:hover{background:rgba(245,238,216,.16);color:#fff;border-color:rgba(245,238,216,.45)}
/* v3.4.0: 9/300/.60 → 10/400/.85 (was failing AA on dark hero bg). */
.slide-counter{font-family:var(--font-body);font-weight:400;font-size:10px;letter-spacing:.2em;color:rgba(245,238,216,.85)}
@media(max-width:640px){.slide-counter{display:none}}
.scroll-hint{position:absolute;bottom:clamp(24px,3.5vh,34px);right:clamp(18px,5vw,52px);z-index: var(--z-overlay);display:flex;align-items:center;gap:10px}
@media(max-width:640px){.scroll-hint{display:none}}
.scroll-line{width:28px;height:.5px;background:rgba(196,168,122,.3)}
/* v3.4.0: 8/300 → 10/400 + opacity .65→.85 for AA on dark bg. */
.scroll-text{font-family:var(--font-body);font-weight:400;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:rgba(196,168,122,.85)}

/* ─── INTERIOR PAGE HERO ─── */
/* v3.2.4: Hero design pass.
   - Top padding bumped from --hdr-sticky (52px) to --hdr-full (116px) at
     desktop so the eyebrow + H1 stack can never ride into the full-state
     nav, even when the H1 wraps to 3-4 lines.
   - Top scrim (::before) renders a dark gradient under the nav surface so
     the nav has a controlled backdrop AND there's a visual barrier
     between nav and hero text.
   - With align-items:flex-end, content stays bottom-anchored regardless.
   - Mobile (<1024px) keeps the lighter guard since the hamburger nav is
     compact and doesn't visually compete with hero text. */
/* v3.6.4: min-height 520→600 to give 80px more breathing room above
   wrapped hub-hero H1s. Pairs with the hero-h1 cap reduction at line 29.
   v3.6.10: touch-action: pan-y so interior-page heroes don't get
   pulled / rubber-banded on mobile horizontal swipes. Mirrors the
   .hero-wrap rule above. */
/* v4.0.12 — same pinch-zoom fix as .hero-wrap above. .page-hero doesn't
   currently have swipe handling but inherits the pan-y lock for parity
   with the homepage hero's gesture model. Adding pinch-zoom restores
   the browser's native mobile zoom gesture. */
.page-hero{position:relative;height:68vh;min-height:600px;background-color:var(--tb-shadow);background-size:cover;background-position:center;display:flex;align-items:flex-end;overflow:hidden;touch-action:pan-y pinch-zoom}
@media (min-width: 1024px){.page-hero{padding-top:var(--hdr-full)}}
.page-hero::before{
    content:"";
    position:absolute;
    top:0;left:0;right:0;
    height:var(--hdr-full);
    background:linear-gradient(180deg,
        rgba(10,12,8,.78) 0%,
        rgba(10,12,8,.62) 35%,
        rgba(10,12,8,.30) 70%,
        rgba(10,12,8,0)  100%);
    pointer-events:none;
    z-index:1;
}
/* Base gradient — stronger top + bottom for text legibility */
.page-hero .hero-grad{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(30,28,26,.85) 0%,rgba(30,28,26,.35) 20%,rgba(30,28,26,.05) 45%,rgba(30,28,26,.45) 68%,rgba(30,28,26,.88) 92%,rgba(30,28,26,.95) 100%)}
/* v2.0.7: Bottom-left DARK POCKET — replaces v2.0.0 radial vignette.
   Stacked gradients create a dark rectangle in the bottom-left quadrant
   (where .hero-content lives) without affecting the right half of the
   photo where the accommodation subject typically sits.
     • Horizontal: left-dark → transparent at 60%
     • Vertical:   bottom-dark → transparent at 65%
   Multiplied, they darken only the text zone. Works across all 7 stay
   heroes (A-Tent, Yurts, Campsites, Cove, Nest, Treehouse, Twig Hut)
   regardless of where the bright band sits in the photo. */
.page-hero::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:
        linear-gradient(to right,
            rgba(12,10,8,.80) 0%,
            rgba(12,10,8,.55) 25%,
            rgba(12,10,8,.15) 45%,
            rgba(12,10,8,0)   60%),
        linear-gradient(to top,
            rgba(12,10,8,.95) 0%,
            rgba(12,10,8,.50) 25%,
            rgba(12,10,8,.20) 45%,
            rgba(12,10,8,0)   65%);
}
/* v3.2.4: widened to 720px so H1s wrap to 2 lines max instead of 3-4.
   Combined with smaller H1 cap (64px) below this prevents the eyebrow
   from being pushed up against the nav by a too-tall content stack.
   Z-index:2 keeps content above the new top scrim (z-index:1). */
.page-hero .hero-content{position:relative;z-index:2;max-width:720px;padding:0 var(--pad-x) clamp(60px,8vh,90px);top:auto;bottom:auto;left:auto;right:auto}
/* Text-shadow safety on hero copy — subtle, doesn't read as shadowed, just restores contrast on busy photos */
.page-hero .hero-body,.page-hero .hero-ctas .btn-ghost{text-shadow:0 1px 24px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.35)}
.page-hero .hero-h1{text-shadow:0 2px 32px rgba(0,0,0,.65),0 1px 4px rgba(0,0,0,.45)}
/* v2.0.7: hero eyebrow brightened from dryglass (var(--tb-dryglass)) to parchment
   (var(--tb-parchment)). Dryglass dims to invisible against bright horizon bands
   (ocean, sunset sky). Parchment with stronger shadow reads clean on
   every photo. The underline-tick before it follows the same color. */
.page-hero .hero-eyebrow{color:var(--tb-parchment);text-shadow:0 1px 14px rgba(0,0,0,.85),0 1px 3px rgba(0,0,0,.7)}
.page-hero .hero-eyebrow::before{background:var(--tb-parchment);opacity:.7}

/* ── v2.12.0 — HERO SLIDESHOW (.page-hero--slideshow)
   Stack of absolutely-positioned photo layers behind the hero gradient
   and content. JS toggles .is-active to fade through. The hero element
   itself is set to background-color:#000 in PHP so the brief moment
   between slides shows pure black, not the previous photo. */
.page-hero--slideshow .page-hero-slides {
    position: absolute; inset: 0; z-index: 0;
    pointer-events: none;
}
.page-hero-slide {
    position: absolute; inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.4s ease;
    will-change: opacity;
}
.page-hero-slide.is-active { opacity: 1; }
/* Lift the existing gradient + content above the slide stack. */
.page-hero--slideshow .hero-grad { z-index: 2; }
.page-hero--slideshow .hero-content,
.page-hero--slideshow .scroll-hint { z-index: 3; }

/* ── v2.12.0 — HERO FOREST GRADE (.page-hero--forest)
   Per-page modifier currently used only on /experience/concerts/. Adds
   a forest-tinted multiply layer + a saturation/contrast lift on the
   slides so the foliage in concert photos really pops. Other pages keep
   the standard dark .hero-grad with no green wash. */
.page-hero-tint {
    position: absolute; inset: 0; z-index: 1;
    pointer-events: none;
    mix-blend-mode: multiply;
    background: linear-gradient(105deg,
        rgba(20, 32, 24, 0.55)  0%,
        rgba(46, 56, 40, 0.42)  35%,
        rgba(46, 56, 40, 0.22)  70%,
        rgba(46, 56, 40, 0.10)  100%);
}
.page-hero--forest .hero-grad { z-index: 2; }
.page-hero--forest .hero-content,
.page-hero--forest .scroll-hint { z-index: 3; }
.page-hero--forest .page-hero-slide,
.page-hero--forest { /* applies to single-photo fallback too */
    /* Photo punch: more saturated greens, slight contrast lift. */
}
.page-hero--forest .page-hero-slide { filter: saturate(1.18) contrast(1.04); }
/* When a forest-graded hero has NO slideshow (single-photo fallback),
   the bg-image lives on .page-hero itself; can't filter that without
   also filtering the gradient overlay. The tint layer alone still
   delivers the forest mood. */

/* Honor reduced-motion preference: no transitions on slides. */
@media (prefers-reduced-motion: reduce) {
    .page-hero-slide { transition: none; }
}

/* ─── SECTION SYSTEM ─── */
.section{padding:var(--pad-section) var(--pad-x)}
.section-inner{max-width:var(--max-w);margin:0 auto}
.bg-parchment{background:var(--tb-parchment)}.bg-dark{background:var(--tb-shadow)}.bg-mid{background:var(--tb-bark)}.bg-floor{background:var(--tb-nightfall)}
.section-rule-top{border-top:var(--b-hair) solid rgba(168,149,110,.25)}.section-rule-bottom{border-bottom:var(--b-hair) solid rgba(168,149,110,.25)}

/* ─── OVERVIEW BLOCK ─── */
.overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:center}
@media(max-width:768px){.overview-grid{grid-template-columns:1fr}}
.overview-img{aspect-ratio:4/5;background-size:cover;background-position:center;border-radius: var(--r-img);position:relative;overflow:hidden}
.overview-img::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(196,168,122,.06) 0%,transparent 60%)}
.overview-secondary{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:start;margin-top:clamp(48px,6vw,80px);padding-top:clamp(48px,6vw,80px);border-top:var(--b-hair) solid rgba(168,149,110,.28)}
@media(max-width:768px){.overview-secondary{grid-template-columns:1fr}}
.quick-facts{display:flex;flex-direction:column;gap:12px}
.quick-fact{background:rgba(168,149,110,.12);border:var(--b-hair) solid rgba(168,149,110,.28);padding:18px 22px;border-radius: var(--r-card)}
/* v3.4.0: 8/300 → 10/400 for legibility on parchment bg. */
.quick-fact-label{font-family:var(--font-body);font-weight:400;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--tb-canvas);margin-bottom:5px}
.quick-fact-value{font-family:var(--font-display);font-weight:300;font-size:20px;color:var(--tb-shadow);line-height:1.2}

/* ─── TYPES GRID ─── */
.types-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(168,149,110,.22);border:var(--b-hair) solid rgba(168,149,110,.22);margin-top:clamp(32px,4vw,48px)}
@media(max-width:768px){.types-grid{grid-template-columns:1fr}}
@media(max-width:1024px) and (min-width:768px){.types-grid{grid-template-columns:repeat(2,1fr)}}
.type-card{background:var(--tb-parchment);padding:clamp(24px,3vw,36px)}
/* v3.4.0: 8/300 → 10/400. */
.type-card-eyebrow{font-family:var(--font-body);font-weight:400;font-size:10px;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;color:var(--tb-canvas);margin-bottom:10px}
.type-card-h3{font-family:var(--font-display);font-weight:300;font-size:22px;color:var(--tb-shadow);margin-bottom:10px;line-height:1.1}
.type-card-body{font-family:var(--font-body);font-weight:400;font-size:13px;color:var(--tb-earth);line-height:1.75;margin-bottom:18px}
.type-card-rule{width:24px;height:.5px;background:var(--tb-canvas);margin-bottom:14px}
/* v3.4.0: 9/300 → 11/400 — the underlined CTA was disappearing as a watermark. */
.type-card-cta{font-family:var(--font-body);font-weight:400;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tb-tungsten);border-bottom:var(--b-hair) solid rgba(196,136,48,.35);padding-bottom:1px;text-decoration:none;display:inline-block;transition:color var(--t-fast)}
.type-card-cta:hover{color:var(--tb-earth)}

/* ─── DIFFERENTIATOR BLOCK ─── */
.diff-section{background:var(--tb-shadow)}
.diff-intro{max-width:680px;margin-bottom:clamp(40px,5vw,60px)}

/* ─── GALLERY STRIP ─── */
.gallery-strip{display:grid;grid-template-columns:1fr 1fr 1fr;height:clamp(260px,38vw,480px);gap:2px}
@media(max-width:640px){.gallery-strip{grid-template-columns:1fr;height:auto}.gal-photo{height:240px}}
.gal-photo{background-size:cover;background-position:center;overflow:hidden;transition:transform var(--t-slow) ease}
.gal-photo:hover{transform:scale(1.025)}

/* ─── WHAT TO EXPECT / TABS ─── */
.expect-section{background:var(--tb-shadow)}
.expect-intro{margin-bottom:clamp(36px,4vw,56px)}
.expect-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,80px);align-items:start}
@media(max-width:768px){.expect-grid{grid-template-columns:1fr}}
.expect-img{aspect-ratio:3/4;background-size:cover;background-position:center;border-radius: var(--r-img);position:sticky;top:calc(var(--hdr-sticky) + 52px)}
@media(max-width:768px){.expect-img{position:static;aspect-ratio:16/9}}
.tab-btns{display:flex;border-bottom:var(--b-hair) solid rgba(92,84,64,.4);margin-bottom:28px}
/* v3.4.0: 10/300 → 10/400 + opacity .70→.85 for tab-button legibility. */
.tab-btn{font-family:var(--font-body);font-weight:400;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:rgba(196,178,148,.85);background:none;border:none;border-bottom:1px solid transparent;padding:12px 20px 11px;cursor:pointer;transition:color var(--t-fast),border-color var(--t-fast);white-space:nowrap}
.tab-btn:hover{color:rgba(245,238,216,.7)}.tab-btn.active{color:var(--tb-dryglass);border-bottom-color:var(--tb-canvas)}
.tab-panel{display:none}.tab-panel.active{display:block}
.tab-h3{font-family:var(--font-display);font-weight:300;font-size:24px;color:var(--tb-parchment);margin-bottom:18px;letter-spacing:.02em}
.tab-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.tab-list li{display:flex;align-items:flex-start;gap:12px;font-family:var(--font-body);font-weight:400;font-size:14px;letter-spacing:.03em;color:var(--tb-dryglass);line-height:1.65}
.tab-list li::before{content:'';display:block;width:4px;height:4px;border-radius:50%;background:var(--tb-canvas);flex-shrink:0;margin-top:8px}

/* ─── FAQ ─── */
/* v2.2.0: FAQ polish — warmer typography, smooth accordion, gold accents */
.faq-section{background:var(--tb-parchment)}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(40px,6vw,80px);margin-top:clamp(32px,4vw,48px)}
@media(max-width:768px){.faq-grid{grid-template-columns:1fr}}
.faq-item{border-top:var(--b-hair) solid rgba(168,149,110,.32)}
.faq-q{display:flex;align-items:center;justify-content:space-between;font-family:var(--font-body);font-weight:400;font-size:15px;letter-spacing:.02em;color:var(--tb-shadow);padding:20px 0;cursor:pointer;gap:16px;background:none;border:none;text-align:left;width:100%;transition:color var(--t-fast),padding-left var(--t-fast)}
.faq-q:hover{color:var(--tb-latesun);padding-left:4px}
.faq-item.open .faq-q{color:var(--tb-latesun);font-weight:500}
.faq-icon{width:20px;height:20px;flex-shrink:0;border:var(--b-hair) solid rgba(196,168,122,.45);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.4,0,.2,1),background var(--t-fast),border-color var(--t-fast);position:relative}
.faq-icon::before{content:'';display:block;width:9px;height:.5px;background:rgba(196,168,122,.7)}
.faq-icon::after{content:'';display:block;width:.5px;height:9px;background:rgba(196,168,122,.7);position:absolute;transition:transform .35s cubic-bezier(.4,0,.2,1)}
.faq-item.open .faq-icon{transform:rotate(45deg);background:rgba(196,168,122,.12);border-color:var(--tb-latesun)}
.faq-a{max-height:0;overflow:hidden;font-family:var(--font-body);font-weight:400;font-size:14px;letter-spacing:.02em;color:#6B6252;line-height:1.85;transition:max-height .4s cubic-bezier(.4,0,.2,1),padding var(--t-medium),opacity var(--t-medium);opacity:0;padding:0 0 0}
.faq-item.open .faq-a{max-height:600px;opacity:1;padding:0 0 22px}

/* ─── REVIEWS ─── */
.reviews-section{background:var(--tb-parchment)}
.reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(168,149,110,.18);border:var(--b-hair) solid rgba(168,149,110,.18);margin-top:clamp(32px,4vw,48px)}
@media(max-width:768px){.reviews-grid{grid-template-columns:1fr}}
@media(max-width:1024px) and (min-width:768px){.reviews-grid{grid-template-columns:repeat(2,1fr)}}
.review-card{background:var(--tb-parchment);padding:28px 24px}
.review-stars{display:flex;gap:3px;margin-bottom:12px}
.review-star{width:12px;height:12px;background:var(--tb-tungsten);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.review-text{font-family:var(--font-display);font-weight:300;font-size:17px;font-style:italic;color:var(--tb-shadow);line-height:1.55;margin-bottom:16px}
.review-rule{width:20px;height:.5px;background:var(--tb-canvas);margin-bottom:12px}
.review-author{font-family:var(--font-body);font-weight:400;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tb-trail)}
/* v3.4.0: 10/300 → 11/400 for byline legibility on review cards. */
.review-source{font-family:var(--font-body);font-weight:400;font-size:11px;color:var(--tb-dryglass);margin-top:3px}

/* ─── RELATED STAYS ─── */
.related-section{background:var(--tb-bark)}

/* ─── GLOBAL CTA BANNER ─── */
/* v1.6.3: opts into the .tb-dark-texture cinematic backdrop via
   the class added in the PHP partial. The base CSS below stays
   for font/spacing; texture layers come from .tb-dark-texture
   defined further down. */
/* v1.9.4: promoted from flat dark section to hero-grade sunset-with-people photo.
   Silhouettes of guests gathered at golden hour on the bluff — the literal
   "Treebones moment" every visitor comes for. This is a CTA photo (emotion)
   not a hero photo (scenery): shows people HAVING the experience, which is
   the strongest pre-book conversion trigger.
   Previously considered: A-Tent golden hour (felt "exclusive" — highest-priced
   unit), Big Sur coastline (universal but no human story), Starry-night Cove
   (moody but too dark + feels like product photo). */
/* v1.9.5: text treatment pass — bigger, brighter, higher contrast.
   The golden horizon band in MG_5329 was eating the H2 at smaller sizes.
   Bumped: H2 clamp 28-52 → 38-72, body 15 → 17, eyebrow 9 → 11.
   Brightened: H2 #FFFCF2, body var(--tb-parchment), eyebrow var(--tb-parchment).
   Strengthened: center radial scrim .55 → .78 at core. */
.cta-banner{position:relative;background:var(--tb-shadow);padding:clamp(130px,16vw,200px) var(--pad-x);text-align:center;border-top:var(--b-hair) solid rgba(212,188,144,.12);overflow:hidden}

/* Photo layer — MG_5329: silhouettes at sunset.
   v2.0.3 briefly swapped to TB24-111 couple-with-wine, but we're keeping
   MG_5329 here — the sunset silhouettes are the brand's canonical booking
   moment, and the couple shot has a new home on the A-Tent "Shared Amenities"
   experience row where it represents the communal dining draw. */
.cta-banner.tb-dark-texture::before,
.cta-banner.tb-dark-texture.is-centered::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    background-image:url('/wp-content/uploads/2026/04/MG_5329.webp');
    background-size:cover;
    /* 55% vertical bias keeps the golden horizon band centered where the H2 lands;
       silhouettes frame the left/right edges and bottom. */
    background-position:center 55%;
    background-attachment:scroll;
    filter:brightness(.70) saturate(1.08) contrast(1.04);
    pointer-events:none;
}
/* v2.0.1: Scrim rebuilt to match the dining-hub-hero pattern.
   Previous scrim layered a radial-gradient with 78% black at 50%/50% center,
   which sat directly on top of the text zone — the heavy "overlay filter"
   look we were fighting. Text colors and brightness were being crushed by
   a big black ellipse mask. New pattern is purely vertical: dark at top
   (70%) and bottom (75%) to frame the section, near-clear band (5%) at
   the center so text reads against the photo with full intended contrast. */
.cta-banner::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    background: linear-gradient(180deg,
        rgba(12,10,8,.70) 0%,
        rgba(12,10,8,.25) 20%,
        rgba(12,10,8,.05) 42%,
        rgba(12,10,8,.05) 62%,
        rgba(12,10,8,.35) 82%,
        rgba(12,10,8,.75) 100%);
    pointer-events:none;
}
.cta-banner > *{position:relative;z-index:2}

/* v2.0.2: scroll offset for anchor targets so the sticky header
   doesn't cover the top of the card when jumping via /dining/#the-lodge
   or /dining/#wild-coast from the nav dropdowns. */
.tb-dc[id] { scroll-margin-top: calc(var(--hdr-sticky, 60px) + 16px); }

/* v2.0.2: Text treatment rebuilt to match dining-hero-grade contrast.
   Previous colors (#FFFCF2 H2, var(--tb-parchment) body at 92% opacity) were tuned
   against a dark solid wall — against a sunset photo bleeding warm orange
   through the scrim, near-white creams desaturate into "muddy grey" which
   reads like an opacity filter. Dining hero uses pure #FFFFFF with lighter
   shadows and reads crisp. Matching that pattern.
   Changes:
     - H2 #FFFCF2 → #FFFFFF (pure white)
     - H2 shadow: heavy 3-layer black → 2-layer softer (matches .hero-h1)
     - eyebrow opacity .85 → 1.0, bump color to full parchment
     - body copy brightness: opacity .92 → 1.0, lighter shadow */
.cta-banner-eyebrow{font-family:var(--font-body);font-weight:400;font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--tb-parchment);margin-bottom:20px;text-shadow:0 1px 18px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.55)}
.cta-banner-h2{font-family:var(--font-display);font-weight:300;font-size:clamp(38px,5.8vw,72px);line-height:1.04;letter-spacing:.02em;color:#FFFFFF;margin-bottom:22px;text-shadow:0 2px 32px rgba(0,0,0,.65),0 1px 4px rgba(0,0,0,.45)}
/* v2.0.1: matched the canonical italic gold pattern used site-wide.
   Every other italic .em on the site (.hero-h1 em, .tb-dc-h3 em) uses
   var(--tb-latesun) — v1.9.5 broke the pattern here by introducing a
   bespoke #F5D9A0 cream that blended into the H2. Restoring the canon
   gives "Treebones" the distinct warm gold that reads against the white
   H2 and echoes every other italic highlight on the site. */
.cta-banner-h2 em{font-style:italic;color:var(--tb-latesun)}
.cta-banner-body{font-family:var(--font-body);font-weight:400;font-size:17px;letter-spacing:.03em;color:var(--tb-parchment);line-height:1.65;max-width:560px;margin:0 auto 36px;text-shadow:0 1px 18px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.5)}
.cta-banner-btns{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap}
/* v2.0.4: note color brightened from cream@.78 → full-alpha cream. The alpha
   was stacking with the scrim to produce a muddy gray-brown that ate the
   phone/address line. Lighter shadow too — was 0.95 pure black (too heavy). */
/* v3.4.0: 300 → 400 (size 11px stays). The CTA banner sits over a dark
   texture; 300 weight Jost was reading as ghost text. */
.cta-banner-note{font-family:var(--font-body);font-weight:400;font-size:11px;letter-spacing:.16em;color:var(--tb-parchment);max-width:720px;margin:28px auto 0;line-height:1.7;text-shadow:0 1px 14px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.55)}
/* v2.0.4: scoped ghost button override so RESERVE DINING reads crisp against
   the sunset. Base .btn-ghost uses dryglass (var(--tb-dryglass)) which dims against the
   warm photo — here we push to parchment w/ shadow for legibility. */
.cta-banner .btn-ghost{color:var(--tb-parchment);text-shadow:0 1px 14px rgba(0,0,0,.7),0 1px 3px rgba(0,0,0,.5)}

/* Gold button glow — stronger to resonate with the warm photo */
.cta-banner .btn-primary,
.cta-banner [class*="cta-btn-primary"]{box-shadow:0 14px 60px rgba(196,136,48,.55),0 2px 14px rgba(0,0,0,.6)}

/* Mobile: disable parallax — iOS Safari has known bugs with fixed bg on touch devices */
@media (max-width:768px),(hover:none) and (pointer:coarse){
    .cta-banner.tb-dark-texture::before,
    .cta-banner.tb-dark-texture.is-centered::before{
        background-attachment:scroll;
    }
}

/* ─── BLOG / PRESS ─── */
.blog-hero{background:var(--tb-shadow);padding:calc(var(--hdr-full) + 48px) var(--pad-x) 64px;text-align:center}

/* ── Archive section wrapper ── */
.press-archive-section{background:var(--tb-shadow);padding:0 0 clamp(48px,8vw,80px)}
.press-archive-inner{max-width:var(--max-w);margin:0 auto}

/* ── Featured article (hero split) ── */
.press-feat{display:grid;grid-template-columns:1fr 1fr;text-decoration:none;color:var(--tb-parchment);border-bottom:var(--b-hair) solid rgba(168,149,110,.12)}
@media(max-width:768px){.press-feat{grid-template-columns:1fr}}
.press-feat-img{min-height:clamp(240px,36vw,400px);background-size:cover;background-position:center;transition:opacity var(--t-slow) var(--ease-smooth)}
.press-feat-img--empty{background:linear-gradient(145deg,#3a3630 0%,#5a4f3e 50%,#2a2520 100%)}
.press-feat:hover .press-feat-img{opacity:.85}
.press-feat-body{padding:clamp(28px,4vw,48px) clamp(24px,4vw,40px);display:flex;flex-direction:column;justify-content:flex-end}
.press-pub-pill{display:inline-block;align-self:flex-start;font-family:var(--font-body);font-weight:400;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:var(--tb-goldenhour);border:var(--b-hair) solid rgba(216,168,85,.35);padding:5px 14px;margin-bottom:12px}
.press-feat-title{font-family:var(--font-display);font-weight:300;font-size:clamp(22px,3vw,34px);line-height:1.1;letter-spacing:.01em;margin-bottom:12px}
/* v3.4.0: opacity .5 → .80 on dark press section bg. */
.press-feat-excerpt{font-family:var(--font-body);font-weight:400;font-size:13px;color:rgba(245,238,216,.80);line-height:1.7;margin-bottom:16px}
.press-feat-meta{font-family:var(--font-body);font-weight:400;font-size:10px;letter-spacing:.1em;color:rgba(245,238,216,.3);display:flex;gap:6px}
.press-feat-meta span{color:rgba(196,136,48,.55)}

/* ── List header ── */
.press-list-header{padding:clamp(20px,3vw,32px) clamp(20px,3vw,40px) clamp(10px,2vw,14px)}
.press-list-header span{font-family:var(--font-body);font-weight:400;font-size:9px;letter-spacing:.3em;text-transform:uppercase;color:rgba(245,238,216,.25)}

/* ── List items ── */
.press-list{margin:0 clamp(20px,3vw,40px)}
.press-list-item{display:grid;grid-template-columns:clamp(80px,10vw,120px) 1fr auto;gap:clamp(14px,2vw,24px);align-items:center;padding:clamp(14px,2vw,20px) 0;border-top:var(--b-hair) solid rgba(168,149,110,.1);text-decoration:none;color:var(--tb-parchment);transition:background var(--t-fast)}
.press-list-item:hover{background:rgba(245,238,216,.02);border-radius: var(--r-card);padding-left:8px;padding-right:8px;margin-left:-8px;margin-right:-8px}
@media(max-width:480px){.press-list-item{grid-template-columns:64px 1fr auto;gap:12px}}
.press-list-thumb{width:100%;aspect-ratio:3/2;background-size:cover;background-position:center;border-radius: var(--r-img);overflow:hidden}
.press-list-thumb--empty{background:linear-gradient(145deg,#3a3630,#4a3f30)}
.press-list-body{min-width:0}
.press-list-pub{display:block;font-family:var(--font-body);font-weight:400;font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--tb-goldenhour);margin-bottom:4px}
.press-list-title{font-family:var(--font-display);font-weight:300;font-size:clamp(15px,2vw,19px);line-height:1.15;color:var(--tb-parchment);white-space:normal}
.press-list-end{text-align:right;white-space:nowrap;padding-left:8px}
.press-list-date{display:block;font-family:var(--font-body);font-weight:400;font-size:9px;letter-spacing:.1em;color:rgba(245,238,216,.25);margin-bottom:4px}
.press-list-arrow{font-size:16px;color:rgba(196,136,48,.35);transition:color var(--t-fast)}
.press-list-item:hover .press-list-arrow{color:rgba(196,136,48,.7)}

/* ── No-image card — text-only style ── */

/* ── Activity page (wrapper for editor content) ── */
.activity-content{background:var(--tb-parchment);padding:clamp(40px,6vw,72px) var(--pad-x)}
.activity-content-inner{max-width:800px;margin:0 auto}
.activity-content-inner img{max-width:100%;height:auto;border-radius: var(--r-img);margin:16px 0}
.activity-content-inner p{font-family:var(--font-body);font-size:15px;color:var(--tb-trail);line-height:1.8;margin-bottom:16px}
.activity-content-inner h2,.activity-content-inner h3{font-family:var(--font-display);font-weight:300;color:var(--tb-shadow);margin:28px 0 12px}
.activity-content-inner h2{font-size:clamp(22px,3vw,32px)}
.activity-content-inner h3{font-size:clamp(18px,2.5vw,24px)}
.activity-content-inner a{color:var(--tb-tungsten);text-decoration:underline;text-underline-offset:2px}
.activity-related{background:var(--tb-shadow);padding:clamp(40px,6vw,64px) var(--pad-x)}
.activity-related-inner{max-width:var(--max-w);margin:0 auto}
.activity-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(168,149,110,.12)}
@media(max-width:768px){.activity-related-grid{grid-template-columns:1fr}}
.activity-related-card{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;background:var(--tb-shadow);text-decoration:none;transition:background var(--t-fast)}
.activity-related-card:hover{background:rgba(245,238,216,.04)}
.activity-related-title{font-family:var(--font-display);font-weight:300;font-size:18px;color:var(--tb-parchment)}
.activity-related-arrow{font-size:18px;color:rgba(196,136,48,.4);transition:color var(--t-fast)}
.activity-related-card:hover .activity-related-arrow{color:rgba(196,136,48,.8)}

/* ── Single post header ── */
.single-post-header{padding:calc(var(--hdr-full) + 40px) var(--pad-x) 48px;background:var(--tb-shadow);text-align:center}
.single-post-h1{font-family:var(--font-display);font-weight:300;font-size:clamp(28px,4vw,52px);color:var(--tb-parchment);line-height:1.08;letter-spacing:.02em;max-width:720px;margin:0 auto}
.single-post-hero-img{width:100%;aspect-ratio:16/8;object-fit:cover;display:block}
.single-post-body{padding:clamp(40px,6vw,72px) var(--pad-x);background:var(--tb-parchment)}
.single-post-body .entry-content{max-width:680px;margin:0 auto;font-family:var(--font-body);font-weight:400;font-size:16px;line-height:1.85;letter-spacing:.025em;color:var(--tb-earth)}
.single-post-body .entry-content h2{font-family:var(--font-display);font-weight:300;font-size:clamp(24px,3vw,36px);color:var(--tb-shadow);margin:1.6em 0 .5em;line-height:1.08}
.single-post-body .entry-content h3{font-family:var(--font-display);font-weight:300;font-size:22px;color:var(--tb-shadow);margin:1.4em 0 .4em}
.single-post-body .entry-content p{margin-bottom:1.2em}
.single-post-body .entry-content a{color:var(--tb-tungsten);border-bottom:var(--b-hair) solid rgba(196,136,48,.4);text-decoration:none}
.single-post-body .entry-content blockquote{border-left:2px solid var(--tb-canvas);margin:1.5em 0;padding:4px 0 4px 24px;font-family:var(--font-display);font-style:italic;font-size:20px;color:var(--tb-deadwood);line-height:1.5}
.single-post-body .entry-content img{width:100%;border-radius: var(--r-img);margin:1.5em 0}
.archive-pagination{display:flex;gap:8px;justify-content:center;margin-top:clamp(40px,6vw,64px)}
.archive-pagination a,.archive-pagination span{font-family:var(--font-body);font-weight:400;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tb-trail);text-decoration:none;border:var(--b-hair) solid rgba(168,149,110,.3);padding:8px 14px;border-radius: var(--r-card);transition:all var(--t-fast)}
.archive-pagination a:hover,.archive-pagination .current{border-color:var(--tb-canvas);color:var(--tb-tungsten)}

/* ─── 404 (v4.4.5 — rebuilt) ─── */
.tb-404{position:relative;min-height:100vh;background-size:cover;background-position:center;background-repeat:no-repeat;display:flex;align-items:center;justify-content:center;padding:clamp(80px,12vw,140px) var(--pad-x) clamp(64px,9vw,96px)}
.tb-404-inner{position:relative;max-width:760px;width:100%;text-align:center;color:var(--tb-parchment)}
.tb-404-number{font-family:var(--font-display);font-weight:300;font-size:clamp(96px,18vw,200px);color:rgba(245,238,216,.07);line-height:.85;letter-spacing:-.03em;margin-bottom:-44px;user-select:none}
.tb-404-eyebrow{color:var(--tb-latesun);justify-content:center;margin-bottom:14px}
.tb-404-h1{font-family:var(--font-display);font-weight:300;font-size:clamp(32px,5.2vw,58px);color:var(--tb-parchment);line-height:1.04;letter-spacing:-.005em;margin:0 0 18px;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.tb-404-h1 em{font-style:italic;color:var(--tb-latesun)}
.tb-404 .tb-rule{margin:0 auto 22px;width:56px;height:1px;background:rgba(245,238,216,.4)}
.tb-404-body{font-family:var(--font-body);font-weight:400;font-size:16px;color:rgba(245,238,216,.85);line-height:1.7;max-width:520px;margin:0 auto 32px}

/* Search */
.tb-404-search{display:flex;gap:8px;max-width:480px;margin:0 auto 36px;background:rgba(245,238,216,.08);border:1px solid rgba(245,238,216,.2);border-radius:8px;padding:6px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.tb-404-search:focus-within{border-color:rgba(245,238,216,.5);background:rgba(245,238,216,.12)}
.tb-404-search-input{flex:1;background:transparent;border:0;outline:0;color:var(--tb-parchment);font-family:var(--font-body);font-size:15px;padding:10px 14px}
.tb-404-search-input::placeholder{color:rgba(245,238,216,.55)}
.tb-404-search-btn{display:inline-flex;align-items:center;gap:8px;background:var(--tb-tungsten);color:var(--tb-shadow);border:0;border-radius:6px;padding:10px 18px;font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:background .2s}
.tb-404-search-btn:hover{background:var(--tb-latesun)}

/* Explore grid */
.tb-404-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0 auto 32px;max-width:680px}
.tb-404-card{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:18px 12px;background:rgba(245,238,216,.06);border:1px solid rgba(245,238,216,.18);border-radius:8px;color:var(--tb-parchment);text-decoration:none;transition:background .2s,border-color .2s,transform .2s;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);min-height:84px}
.tb-404-card:hover{background:rgba(245,238,216,.12);border-color:rgba(245,238,216,.4);transform:translateY(-2px)}
.tb-404-card-label{font-family:var(--font-display);font-weight:400;font-size:20px;color:var(--tb-parchment);line-height:1}
.tb-404-card-detail{font-family:var(--font-body);font-size:11px;color:rgba(245,238,216,.65);line-height:1.3;text-align:center;letter-spacing:.01em}

/* CTA row */
.tb-404-cta-row{display:flex;gap:24px;justify-content:center;align-items:center;flex-wrap:wrap;font-family:var(--font-body);font-size:14px;letter-spacing:.04em}
.tb-404-home{color:rgba(245,238,216,.75);text-decoration:none;border-bottom:1px solid rgba(245,238,216,.25);padding-bottom:2px;transition:color .2s,border-color .2s}
.tb-404-home:hover{color:var(--tb-parchment);border-color:var(--tb-parchment)}
.tb-404-book{color:var(--tb-latesun);text-decoration:none;font-weight:500;border-bottom:1px solid var(--tb-latesun);padding-bottom:2px;transition:color .2s,border-color .2s}
.tb-404-book:hover{color:var(--tb-parchment);border-color:var(--tb-parchment)}

/* Responsive */
@media (max-width:680px){
  .tb-404-grid{grid-template-columns:repeat(2,1fr);max-width:360px}
  .tb-404-search{flex-direction:row;max-width:100%}
  .tb-404-search-btn span{display:none}
  .tb-404-search-btn{padding:10px 14px}
  .tb-404-cta-row{flex-direction:column;gap:14px}
}
@media (max-width:420px){
  .tb-404-h1{font-size:30px}
  .tb-404-body{font-size:15px}
  .tb-404-number{margin-bottom:-32px}
}

/* Legacy 404 selectors — kept as aliases so any stale links/CSS keep rendering. */
.error-404-wrap{min-height:100vh;background:var(--tb-shadow);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:var(--pad-x)}
.error-404-number{font-family:var(--font-display);font-weight:300;font-size:clamp(80px,15vw,160px);color:rgba(245,238,216,.06);line-height:1;letter-spacing:-.02em;margin-bottom:-20px}
.error-404-h1{font-family:var(--font-display);font-weight:300;font-size:clamp(28px,4vw,48px);color:var(--tb-parchment);line-height:1.08;margin-bottom:16px}
.error-404-h1 em{font-style:italic;color:var(--tb-latesun)}
.error-404-body{font-family:var(--font-body);font-weight:400;font-size:15px;color:var(--tb-driftwood);line-height:1.75;max-width:440px;margin:0 auto 32px}
.error-404-btns{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* =============================================================
   CUSTOM REVIEWS SECTION
   template-parts/reviews.php
   No Elfsight dependency — fully theme-native.
   ============================================================= */
.tb-reviews-section {
    position: relative;
    background: var(--tb-shadow);
    padding: clamp(44px, 6vw, 64px) var(--pad-x);
    border-top:var(--b-hair) solid rgba(92,84,64,.35);
    border-bottom:var(--b-hair) solid rgba(92,84,64,.35);
    overflow: hidden;
}
/* Soft "orb" ambient washes — warm gold top-left, cooler dryglass bottom-right */
.tb-reviews-section::before,
.tb-reviews-section::after {
    content: "";
    position: absolute;
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
    filter: blur(60px);
}
.tb-reviews-section::before {
    width: 540px;
    height: 540px;
    top: -180px;
    left: -120px;
    background: radial-gradient(closest-side, rgba(212,188,144,.14), rgba(212,188,144,0) 70%);
}
.tb-reviews-section::after {
    width: 620px;
    height: 620px;
    bottom: -240px;
    right: -180px;
    background: radial-gradient(closest-side, rgba(196,168,122,.08), rgba(196,168,122,0) 70%);
}
.tb-reviews-inner {
    position: relative;
    z-index: 1;
    max-width: var(--max-w);
    margin: 0 auto;
}

/* Header strip — single row: eyebrow + score + "all reviews" link */
.tb-rev-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding-bottom: 20px;
    margin-bottom: 26px;
    border-bottom:var(--b-hair) solid rgba(212,188,144,.18);
    flex-wrap: wrap;
}
.tb-rev-bar-left {
    display: flex;
    align-items: baseline;
    gap: 20px;
    flex-wrap: wrap;
}
.tb-rev-bar-eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tb-dryglass);
    font-weight: 500;
}
.tb-rev-bar-score {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--tb-parchment);
    letter-spacing: .01em;
    flex-wrap: wrap;
}
.tb-rev-bar-score strong {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 26px;
    color: var(--tb-parchment);
    margin-right: 2px;
    letter-spacing: .01em;
}
.tb-rev-bar-score .tb-rev-stars-inline {
    display: inline-flex;
    gap: 2px;
    margin-right: 6px;
}
.tb-rev-bar-score .tb-rev-sep {
    color: rgba(156,144,128,.45);
    margin: 0 4px;
}
.tb-rev-bar-src {
    color: var(--tb-sandstone);
    font-size: 12px;
    letter-spacing: .03em;
}
.tb-rev-bar-all {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tb-latesun);
    text-decoration: none;
    border-bottom: 1px solid rgba(212,188,144,.4);
    padding-bottom: 2px;
    transition: color var(--t-fast), border-color var(--t-fast);
    white-space: nowrap;
}
.tb-rev-bar-all:hover {
    color: var(--tb-parchment);
    border-bottom-color: var(--tb-parchment);
}

/* 3-column card grid */
.tb-reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (max-width: 768px)  { .tb-reviews-grid { grid-template-columns: 1fr; gap: 12px; } }
@media (max-width: 1024px) and (min-width: 768px) {
    .tb-reviews-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Individual card — floating panel, subtle backdrop-blur so orb reads through */
.tb-rev-card {
    border:var(--b-hair) solid rgba(212,188,144,.16);
    background: rgba(42,41,39,.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 20px 22px 18px;
    /* v4.0.5 — radius added to match the rest of the card system. The
       reviews module was designed early (square corners) before the
       --r-card token was unified at 6px. This brings it into the same
       family as accommodation cards, dining cards, gift cards, etc. */
    border-radius: var(--r-card);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 240px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .5s ease, transform .5s ease,
                border-color .3s, background .3s;
}
.tb-rev-card.visible {
    opacity: 1;
    transform: translateY(0);
}
.tb-rev-card:hover {
    border-color: rgba(212,188,144,.28);
    background: rgba(42,41,39,.75);
}

/* Card header — stars + platform */
.tb-rev-top {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 10.5px;
    color: var(--tb-sandstone);
    letter-spacing: .14em;
    text-transform: uppercase;
    font-family: var(--font-body);
    font-weight: 500;
}
.tb-rev-stars {
    display: inline-flex;
    gap: 2px;
    align-items: center;
}

/* Pull quote */
.tb-rev-quote {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.22;
    color: var(--tb-parchment);
    font-style: italic;
    margin: 0;
    letter-spacing: .005em;
}

/* Body — readable Jost 14.5, clamped to 4 lines */
.tb-rev-body {
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--tb-sandstone);
    margin: 0;
    flex: 1;
    font-weight: 300;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Attribution line */
.tb-rev-name {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tb-latesun);
    margin-top: auto;
    font-weight: 500;
}

/* =============================================================
   PRESS BAR — "Featured in" logo strip
   template-parts/press-bar.php
   Parchment background. Logos greyscale by default,
   full color on hover. Horizontal scroll on mobile.

   v1.9.2: removed max-width constraint so the bar fills wider
   viewports, switched track to space-between for even distribution,
   tightened logo-height range for optical weight balance.
   ============================================================= */
.press-bar-section {
    background: var(--tb-parchment);
    padding: 38px clamp(32px, 4vw, 72px);
    border-bottom:var(--b-hair) solid rgba(168,149,110,.22);
}
.press-bar-inner {
    /* No max-width — let the bar breathe to the viewport edge */
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: clamp(28px, 3vw, 56px);
}
.press-bar-label {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--tb-stone-warm);
    white-space: nowrap;
    flex: 0 0 auto;
}
.press-bar-track {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    padding: 4px 0;
}
.press-bar-track::-webkit-scrollbar { display: none; }

/* v2.13.0 — Marquee variant: infinite slow horizontal slide.
   Two identical logo lists inside .press-bar-stage; the keyframe
   slides the stage by -50% (one full list width) so the second
   list lands exactly where the first started — seamless loop.
   Edge fade masks hide the slide-in/out points. */
.press-bar-track--marquee {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    /* Mask both edges so logos don't pop in/out abruptly */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}
.press-bar-stage {
    display: flex;
    width: max-content;
    animation: tbPressMarquee 70s linear infinite;
}
.press-bar-track--marquee:hover .press-bar-stage {
    animation-play-state: paused;
}
.press-bar-list {
    display: flex;
    align-items: center;
    gap: clamp(72px, 7vw, 120px);
    /* Same gap on the right edge so the duplicated list reads as
       one continuous gap instead of a tighter join at the boundary */
    padding-right: clamp(72px, 7vw, 120px);
    flex-shrink: 0;
}
@keyframes tbPressMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .press-bar-stage { animation: none; }
}

.press-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 auto;
    transition: opacity var(--t-medium) ease;
}
.press-logo {
    display: block;
    width: auto;
    object-fit: contain;
    /* v2.15.0 — Lighter editorial wash (was: sepia .55 / saturate 1.4 /
       brightness .78 / opacity .85 — too heavy and crushed). New chain
       reads as "ink on old paper" softer and more breathable: less sepia,
       brightness restored toward neutral, lower opacity. Multiply blend
       still removes white background rects on PNG logos. */
    filter: grayscale(1) sepia(0.3) saturate(1.15) brightness(0.92) contrast(0.92);
    opacity: 0.72;
    mix-blend-mode: multiply;
    transition: filter var(--t-medium) ease, opacity var(--t-medium) ease;
}
.press-logo-link:hover .press-logo {
    filter: grayscale(1) sepia(0.3) saturate(1.15) brightness(0.78) contrast(1);
    opacity: 0.95;
}

/* Sunset SVG had a white background rect baked in — multiply removes
   it. Now that ALL logos use multiply by default, this rule is a
   no-op kept for explicit clarity. */
.press-logo-link[title="Sunset Magazine"] .press-logo {
    mix-blend-mode: multiply;
}

/* Invert for logos with dark/black backgrounds (kept for future use) */
.press-logo--invert {
    filter: invert(1) grayscale(1) contrast(.8);
}
.press-logo-link:hover .press-logo--invert {
    filter: invert(1);
}

/* Mobile: label stacks above, marquee runs full-width below */
@media (max-width: 640px) {
    .press-bar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
    .press-bar-track--marquee {
        width: 100%;
    }
    .press-bar-list {
        gap: clamp(48px, 8vw, 80px);
        padding-right: clamp(48px, 8vw, 80px);
    }
}

/* =============================================================
   PRESS POST — single.php (is_press)
   Dark header, centred quote content, read-more CTA.
   Also handles standard blog post layout.
   ============================================================= */

/* ── Press header ── */
.press-post-header {
    position: relative;
    background: var(--tb-shadow);
    background-size: cover;
    background-position: center 40%;
    padding: calc(var(--hdr-full) + 64px) var(--pad-x) 64px;
    min-height: 340px;
    display: flex;
    align-items: flex-end;
    text-align: center;
    border-bottom:var(--b-hair) solid rgba(92,84,64,.35);
}
.press-post-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(42,41,39,.4) 0%,
        rgba(42,41,39,.35) 30%,
        rgba(42,41,39,.72) 100%);
    z-index: 0;
}
.press-post-header-inner {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.press-post-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(26px,4vw,50px);
    line-height: 1.06;
    letter-spacing: .02em;
    color: var(--tb-parchment);
    margin-bottom: 8px;
    text-shadow: 0 2px 20px rgba(0,0,0,.3);
}
.press-header-date {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: .08em;
    color: rgba(245,238,216,0.6);
    margin-top: 4px;
}
.press-source-badge {
    display: inline-flex;
    align-items: center;
    border:var(--b-hair) solid rgba(196,168,122,.38);
    padding: 7px 18px;
    margin-top: 4px;
}
.press-source-link {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 9px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tb-dryglass);
    text-decoration: none;
    transition: color var(--t-fast);
}
.press-source-link:hover { color: var(--tb-parchment); }

/* ── Press hero image ── */
.press-post-hero {
    position: relative;
    height: clamp(260px,40vw,480px);
    overflow: hidden;
}
.press-post-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
.press-post-hero-grad {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(26,29,22,.25) 0%,
        rgba(26,29,22,0) 40%,
        rgba(26,29,22,.55) 100%);
}

/* ── Press body ── */
.press-post-body {
    background: var(--tb-parchment);
    padding: clamp(52px,8vw,88px) var(--pad-x);
}
.press-post-content {
    max-width: 680px;
    margin: 0 auto;
}
.press-opening-rule {
    width: 40px;
    height: .5px;
    background: var(--tb-dryglass);
    margin: 0 auto 40px;
}

/* Press entry content — clean editorial body text */
/* v3.6.1 — punch list P2: press post body copy now italicized + bumped
   weight 300 → 400 (300 italic at 15-17px was ghost text on parchment;
   400 italic reads as deliberate editorial pull-quote feel). Cormorant
   display would also work but Jost italic at 400 keeps it scannable
   while still feeling typeset. */
.press-entry-content {
    font-family: var(--font-body);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(15px,1.6vw,17px);
    line-height: 1.85;
    letter-spacing: .01em;
    color: var(--tb-bark);
    text-align: left;
}
.press-entry-content p {
    margin-bottom: 1.4em;
    font-style: italic;
}
.press-entry-content p:last-child { margin-bottom: 0; }

/* Links within press content */
.press-entry-content a {
    color: var(--tb-tungsten);
    text-decoration: none;
    border-bottom:var(--b-hair) solid rgba(196,136,48,.4);
}
.press-entry-content a:hover { color: var(--tb-earth); }

/* Strong within press content — keep italic, slightly bolder */
.press-entry-content strong,
.press-entry-content b {
    font-weight: 400;
    font-style: italic;
}

/* ── Read more CTA ── */
.press-read-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 48px;
    padding-top: 40px;
    border-top:var(--b-hair) solid rgba(168,149,110,.28);
}
.press-read-more-btn {
    /* extends .btn-primary from style.css */
    padding: 14px 36px;
    font-size: 9px;
    letter-spacing: .3em;
}
.press-read-more-pub {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: .14em;
    color: var(--tb-ash);
    text-transform: uppercase;
}

/* ── Publication eyebrow (single post header) ── */
.press-pub-eyebrow {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--tb-goldenhour);
    margin-bottom: 18px;
}
.press-header-date {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 11px;
    letter-spacing: .08em;
    color: var(--tb-driftwood);
    margin-top: 4px;
}

/* ── Related press — text rows (not photo cards) ── */
.press-related-label {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tb-dryglass);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: var(--b-hair) solid rgba(196,168,122,.15);
    text-align: left;
}
.press-rel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-bottom: var(--b-hair) solid rgba(92,84,64,.2);
    text-decoration: none;
    transition: background var(--t-fast);
}
.press-rel-row:hover {
    background: rgba(255,255,255,.03);
    padding-left: 8px;
    padding-right: 8px;
}
.press-rel-row .press-rel-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 18px;
    font-style: italic;
    color: var(--tb-parchment);
    line-height: 1.2;
    margin: 0;
}
.press-rel-row .press-rel-arrow {
    color: var(--tb-driftwood);
    font-size: 16px;
    flex-shrink: 0;
    transition: color var(--t-fast), transform var(--t-fast);
}
.press-rel-row:hover .press-rel-arrow {
    color: var(--tb-goldenhour);
    transform: translateX(4px);
}
.press-back-link {
    display: inline-block;
    margin-top: 28px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tb-canvas);
    text-decoration: none;
    transition: color var(--t-fast);
}
.press-back-link:hover { color: var(--tb-goldenhour); }

/* ── Related press grid ── */
.press-related {
    background: var(--tb-bark);
    padding: clamp(52px,8vw,80px) var(--pad-x);
    border-top:var(--b-hair) solid rgba(92,84,64,.35);
}
.press-related-inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: left;
}
.press-related-h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(26px,3.5vw,42px);
    color: var(--tb-parchment);
    line-height: 1.08;
    margin-bottom: 36px;
}
.press-related-h2 em { font-style: italic; color: var(--tb-latesun); }

.press-related-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    background: rgba(92,84,64,.3);
    text-align: left;
}
@media(max-width:768px) { .press-related-grid { grid-template-columns: 1fr; } }
@media(max-width:1024px) and (min-width:768px) {
    .press-related-grid { grid-template-columns: repeat(2,1fr); }
}

.press-rel-card {
    background: var(--tb-bark);
    text-decoration: none;
    display: block;
    transition: background var(--t-fast);
}
.press-rel-card:hover { background: rgba(57,52,38,.55); }

.press-rel-img {
    height: 160px;
    background-size: cover;
    background-position: center;
    transition: transform .5s;
}
.press-rel-img--no-photo {
    background: var(--tb-shadow);
}
.press-rel-card:hover .press-rel-img { transform: scale(1.03); }

.press-rel-body { padding: 20px 22px 24px; }
.press-rel-date {
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tb-stone-warm);
    font-weight: 400;
    margin-bottom: 7px;
}
.press-rel-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: 18px;
    color: var(--tb-parchment);
    line-height: 1.15;
    margin-bottom: 10px;
}
.press-rel-cta {
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tb-dryglass);
    font-weight: 400;
}

/* ── Standard blog post nav ── */
.post-nav {
    display: flex;
    justify-content: space-between;
    margin-top: 52px;
    padding-top: 24px;
    border-top:var(--b-hair) solid rgba(168,149,110,.28);
    gap: 16px;
}
.post-nav-link {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tb-stone-warm);
    text-decoration: none;
    transition: color var(--t-fast);
    max-width: 45%;
    line-height: 1.5;
}
.post-nav-link:hover { color: var(--tb-tungsten); }
.post-nav-link--next { text-align: right; margin-left: auto; }

/* ── Archive page breadcrumb context ── */
.press-archive-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tb-stone-warm);
    text-decoration: none;
    margin-bottom: 24px;
    font-weight: 400;
}
.press-archive-back:hover { color: var(--tb-tungsten); }

/* ── Video slide support — v1.3.0 ── */
.hero-wrap.has-video .layer-a,
.hero-wrap.has-video .layer-b {
    opacity: 0 !important;
    pointer-events: none;
}
.hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 0;
}
/* Ensure gradients stay above the video */
.hero-wrap.has-video .grad-film,
.hero-wrap.has-video .grad-top,
.hero-wrap.has-video .grad-bottom,
.hero-wrap.has-video .grad-vignette {
    z-index: 3;
}
/* Hero content stays above everything */
.hero-wrap.has-video .hero-content,
.hero-wrap.has-video .slide-ui,
.hero-wrap.has-video .scroll-hint {
    z-index: var(--z-overlay);
}

/* =============================================================
   FAQ PAGE — template-faq.php
   v1.3.1
   ============================================================= */

/* ── Hero ── */
.tb-faq-hero {
    background: var(--tb-shadow);
    padding: calc(var(--hdr-full) + clamp(40px,6vw,72px)) var(--pad-x) clamp(52px,7vw,80px);
    border-bottom:var(--b-hair) solid rgba(92,84,64,.35);
}
.tb-faq-hero-inner {
    max-width: 680px;
}
.tb-faq-phone {
    color: var(--tb-canvas);
    border-bottom:var(--b-hair) solid rgba(168,149,110,.38);
    text-decoration: none;
    transition: color var(--t-fast);
}
.tb-faq-phone:hover { color: var(--tb-dryglass); }

/* ── Body ── */
.tb-faq-body {
    background: var(--tb-parchment);
    padding: clamp(52px,7vw,88px) var(--pad-x) clamp(64px,8vw,100px);
}
.tb-faq-body-inner {
    max-width: var(--max-w);
    margin: 0 auto;
}

/* ── Category filter pills (v2.2.0 polished) ── */
.tb-faq-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: clamp(48px,6vw,72px);
}
.tb-faq-pill {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--tb-trail);
    background: none;
    border:var(--b-hair) solid rgba(168,149,110,.28);
    padding: 10px 20px;
    border-radius: var(--r-card);
    cursor: pointer;
    transition: all var(--t-fast);
    white-space: nowrap;
}
.tb-faq-pill:hover {
    color: var(--tb-shadow);
    border-color: rgba(168,149,110,.55);
    background: rgba(196,168,122,.06);
}
.tb-faq-pill.active {
    color: var(--tb-nightfall);
    background: var(--tb-latesun);
    border-color: var(--tb-latesun);
    font-weight: 500;
}

/* ── Section headers (v2.2.0 — editorial feel) ── */
.tb-faq-section {
    margin-bottom: clamp(48px,6vw,72px);
}
.tb-faq-section-head {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}
.tb-faq-section-rule {
    width: 32px;
    height: 0.5px;
    background: var(--tb-latesun);
    flex-shrink: 0;
    opacity: .6;
}
.tb-faq-category {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--tb-trail);
}

/* ── Two-column FAQ grid ── */
/* Uses existing .faq-grid, .faq-item, .faq-q, .faq-icon, .faq-a */
.tb-faq-col {
    display: flex;
    flex-direction: column;
}

/* ── "Still have a question?" CTA ── */
.tb-faq-cta {
    background: var(--tb-shadow);
    padding: clamp(64px,8vw,100px) var(--pad-x);
    text-align: center;
}
.tb-faq-cta-inner {
    max-width: 560px;
    margin: 0 auto;
}
.tb-faq-cta .eyebrow {
    font: 400 12px/1.2 var(--font-body);
    letter-spacing: .285em;
    text-transform: uppercase;
    color: var(--tb-latesun);
    margin-bottom: 16px;
}
.tb-faq-cta h2 {
    font: 300 clamp(28px,3.2vw,40px)/1.15 var(--font-display);
    color: var(--tb-parchment);
    margin: 0 0 16px;
}
.tb-faq-cta h2 em {
    color: var(--tb-latesun);
    font-style: italic;
    font-weight: 300;
}
.tb-faq-cta p {
    font: 400 15px/1.7 var(--font-body);
    color: var(--tb-dryglass);
    margin: 0 0 32px;
}
.tb-faq-cta-links {
    display: flex;
    justify-content: center;
    gap: clamp(24px,3vw,40px);
    flex-wrap: wrap;
}
.tb-faq-cta-link {
    font: 400 11px/1 var(--font-body);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--tb-parchment);
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom:var(--b-hair) solid rgba(245,238,216,.3);
    transition: color var(--t-fast), border-color var(--t-fast);
}
.tb-faq-cta-link:hover {
    color: var(--tb-latesun);
    border-bottom-color: var(--tb-latesun);
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .tb-faq-nav { gap: 6px; }
    .tb-faq-pill { font-size: 8px; padding: 7px 12px; }
}

/* =============================================================
   BRAND ANCHOR — homepage SEO H1 section
   v1.3.3
   ============================================================= */
.tb-brand-anchor {
    background: var(--tb-shadow);
    border-bottom:var(--b-hair) solid rgba(92,84,64,.35);
}
.tb-ba-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: 0 var(--pad-x);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: stretch;
}
@media(max-width:768px) { .tb-ba-inner { grid-template-columns: 1fr; } }

.tb-ba-text {
    padding: clamp(26px,3.5vw,40px) clamp(32px,4vw,52px) clamp(26px,3.5vw,40px) 0;
    border-right:var(--b-hair) solid rgba(92,84,64,.32);
    display: flex; flex-direction: column;
    justify-content: center; gap: 10px;
}
@media(max-width:768px) {
    .tb-ba-text { border-right: none; border-bottom:var(--b-hair) solid rgba(92,84,64,.28); padding-right: 0; }
}
.tb-ba-h1 {
    font-family: var(--font-body); font-weight: 400;
    font-size: clamp(10px,1.1vw,12px); letter-spacing: .3em; text-transform: uppercase;
    color: var(--tb-canvas); display: flex; align-items: center; gap: 14px;
}
.tb-ba-h1::before { content:''; width:28px; height:.5px; background:var(--tb-canvas); flex-shrink:0; }
.tb-ba-body {
    font-size: clamp(13px,1.3vw,15px); letter-spacing: .025em;
    color: var(--tb-dryglass); line-height: 1.78;
    padding-left: 42px; max-width: 600px;
}
.tb-ba-pills {
    padding: clamp(18px,2.5vw,28px) 0 clamp(18px,2.5vw,28px) clamp(32px,4vw,52px);
    display: flex; flex-direction: column;
    justify-content: center; gap: 0; min-width: 200px;
}
/* v4.5.0 — mobile pills: was row + wrap which produced an awkward 3+1
   line break at 414px. Reverted to column (matches desktop) so each pill
   becomes its own clean tap row with the existing bottom-border. */
@media(max-width:768px) { .tb-ba-pills { padding-left:0; flex-direction:column; gap:0; padding-top:16px; } }
.tb-ba-pill {
    display: flex; align-items: center; gap: 10px;
    font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
    color: var(--tb-canvas); text-decoration: none;
    padding: 8px 0; border-bottom:var(--b-hair) solid rgba(92,84,64,.28);
    transition: color var(--t-fast);
}
.tb-ba-pill:last-child { border-bottom: none; }
.tb-ba-pill:hover { color: var(--tb-dryglass); }
.tb-ba-arr { margin-left: auto; color: rgba(196,136,48,.4); transition: transform var(--t-fast), color var(--t-fast); }
.tb-ba-pill:hover .tb-ba-arr { transform: translateX(3px); color: var(--tb-tungsten); }

/* =============================================================
   ACCOMMODATIONS SECTION
   v1.3.3
   ============================================================= */

/* ── Section header ── */
.tb-accom-section { background: var(--tb-parchment); }
.tb-accom-hdr { padding: clamp(56px,7vw,88px) var(--pad-x) clamp(44px,5vw,60px); }
.tb-accom-hdr-in {
    max-width: var(--max-w); margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(40px,6vw,80px); align-items: end;
}
@media(max-width:768px) { .tb-accom-hdr-in { grid-template-columns:1fr; gap:20px; } }
.tb-accom-intro { display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; }
.tb-accom-ctas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }


/* ── Hub intro band ──
   Used on /stay/, /dine/, /experience/ (and any future category hub)
   that calls a section partial with hide_header=true. Sits between
   the breadcrumb and the cards section, providing transition space +
   a brand-voice H2 layer beneath the page hero's H1.

   Two theme variants — light (parchment) for /stay/ and any partial
   that displays cards on parchment, dark (shadow) for /dine/ and
   /experience/ which display cards on the dark texture. The variant
   should match the section background that follows it so the band
   reads as the section's intro, not a separator strip.

   Markup lives in template-parts/hub-intro.php (since v2.17.0). */
/* v3.6.2 — punch list About #4: padding tightened ~28% so the hub-intro
   band on /about/ and /our-story/ sits closer to the surrounding content
   blocks. Was 56-80 / 36-56 px; now 40-58 / 24-40 px. */
.tb-hub-intro {
    padding: clamp(40px,4.5vw,58px) var(--pad-x) clamp(24px,3vw,40px);
    text-align: center;
}
.tb-hub-intro-inner { max-width: 720px; margin: 0 auto; }
/* v3.2.0: switch to inline-flex so the eyebrow's flex layout (tick + label)
   doesn't span full container width — parent text-align:center then
   centers the shrink-to-fit eyebrow visually. */
.tb-hub-intro .tb-eyebrow { display: inline-flex; margin-bottom: 22px; }
/* Same fix for the timeline eyebrow on /about/ — centered parent context */
.tb-int-timeline-inner .tb-eyebrow { display: inline-flex; }
.tb-hub-intro-h2 {
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-size: clamp(34px, 3.6vw, 48px);
    font-weight: 300;
    line-height: 1.15;
    margin: 0 0 20px;
    letter-spacing: -0.01em;
}
.tb-hub-intro-h2 em {
    font-style: italic;
    color: var(--tb-tungsten);
}
.tb-hub-intro-body {
    font-family: var(--font-body, 'Jost', sans-serif);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.7;
    margin: 0;
}
.tb-hub-intro-rule {
    width: 40px; height: 1px;
    background: var(--tb-tungsten);
    margin: 28px auto 0;
}

/* Light theme (parchment) — used on /stay/ */
.tb-hub-intro--light {
    background: var(--tb-parchment);
}
.tb-hub-intro--light .tb-hub-intro-h2 { color: var(--tb-nightfall); }
.tb-hub-intro--light .tb-hub-intro-body { color: var(--tb-deadwood); }

/* Dark theme (shadow) — used on /dine/, /experience/ */
.tb-hub-intro--dark {
    background: var(--tb-shadow);
}
.tb-hub-intro--dark .tb-eyebrow { color: var(--tb-canvas); }
.tb-hub-intro--dark .tb-hub-intro-h2 { color: var(--tb-parchment); }
.tb-hub-intro--dark .tb-hub-intro-body { color: rgba(245, 238, 216, 0.78); }
.tb-hub-intro--dark .tb-hub-intro-h2 em { color: var(--tb-goldenhour); }

@media (max-width: 768px) {
    .tb-hub-intro { padding: 48px var(--pad-x) 32px; }
    .tb-hub-intro-body { font-size: 15px; }
}


/* ── Cards shell ── */
/* v3.6.0 — punch list L3: bottom padding tightened so the "All accommodations
   include resort amenity access..." footer band sits closer to the cards
   on desktop. Was 48-72px (felt airy), now 24-40px. Top stays 0. */
/* v3.6.4: bottom padding 24-40 → 12-20 per May 4 punch list "Reduce
   padding below cards, on desktop the spacing should be tighter from
   bottom of cards to the this text". Pairs with .tb-accom-foot-wrap
   top padding tightening below. */
.tb-cards-wrap { padding: 0 var(--pad-x) clamp(12px,1.6vw,20px); }
.tb-cards-stack {
    max-width: var(--max-w); margin: 0 auto;
    display: flex; flex-direction: column; gap: 20px;
}

/* ── Featured cards ── */
.tb-fc { display: grid; border-radius: var(--r-card); overflow: hidden; }
.tb-fc-left  { grid-template-columns: 1.1fr 1fr; }
.tb-fc-right { grid-template-columns: 1fr 1.1fr; }
@media(max-width:1024px) { .tb-fc-left, .tb-fc-right { grid-template-columns: 1fr; } }

.tb-fc-img { position: relative; overflow: hidden; min-height: 460px; }
@media(max-width:1024px) { .tb-fc-img { min-height: 0; aspect-ratio: 16/9; } }
.tb-fc-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transition: transform var(--t-slow) cubic-bezier(.25,.46,.45,.94);
}
.tb-fc:hover .tb-fc-bg { transform: scale(1.04); }

.tb-fc-tag {
    position: absolute; top: 18px; left: 18px; z-index: 2;
    font-size: 8px; letter-spacing: .22em; text-transform: uppercase;
    background: rgba(20,16,12,.8); backdrop-filter: blur(8px);
    color: var(--tb-dry, var(--tb-dryglass));
    border:var(--b-hair) solid rgba(196,168,122,.28);
    padding: 5px 11px; border-radius: var(--r-card);
}
.tb-fc-tag-r { left: auto; right: 18px; }

.tb-fc-strip {
    position: absolute; bottom: 0; left: 0; right: 0;
    display: flex; height: 76px; gap: 2px; z-index: 2;
}
.tb-fc-thumb {
    flex: 1; background-size: cover; background-position: center;
    cursor: pointer; filter: brightness(.55);
    transition: filter var(--t-fast), flex .35s cubic-bezier(.25,.46,.45,.94);
}
.tb-fc-thumb:hover { filter: brightness(1); flex: 1.9; }

.tb-fc-body {
    background: var(--tb-shadow);
    padding: clamp(40px,5vw,64px);
    display: flex; flex-direction: column; justify-content: center;
}
.tb-fc-body-dark { background: var(--tb-nightfall); }
/* On mobile, body-first (tent body) should stack above image */
@media(max-width:1024px) {
    .tb-fc-right .tb-fc-body { order: -1; }
}

/* v3.3.0: switched to --ls-eyebrow token (was .28em literal — same value). */
.tb-fc-ey { font-size: 9px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--tb-canvas); margin-bottom: 14px; }
.tb-fc-ey--muted { color: rgba(168,149,110,.6); }
.tb-fc-h3 { font-family: var(--font-display); font-weight: 300; font-size: clamp(28px,3.2vw,44px); line-height: 1.04; color: var(--tb-parchment); margin-bottom: 6px; }
.tb-fc-h3 em { font-style: italic; color: var(--tb-latesun); }
/* v3.4.0: 300 italic display at 16px on dark bg was below AA — bumped
   weight to 400 and color opacity .55 → .85. Keeps editorial italic feel
   but readable. */
.tb-fc-tagline { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: 16px; color: rgba(196,178,148,.85); margin-bottom: 22px; }
.tb-fc-rule { width: 32px; height: .5px; background: var(--tb-canvas); margin-bottom: 22px; }
.tb-fc-desc { font-size: 14px; color: var(--tb-dryglass); line-height: 1.88; margin-bottom: 28px; }
.tb-fc-specs { display: flex; border-top:var(--b-hair) solid rgba(92,84,64,.3); padding-top: 20px; margin-bottom: 30px; }
.tb-fc-specs--dark { border-top-color: rgba(255,255,255,.08); }
.tb-fc-spec { flex: 1; padding: 0 10px; border-right:var(--b-hair) solid rgba(92,84,64,.22); }
.tb-fc-spec:first-child { padding-left: 0; }
.tb-fc-spec:last-child { border-right: none; }
.tb-fc-slbl { font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--tb-canvas); margin-bottom: 5px; }
.tb-fc-sval { font-family: var(--font-display); font-weight: 300; font-size: 20px; color: var(--tb-parchment); }
.tb-fc-ctas { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }

/* ── Mosaic grid ── */
.tb-mosaic-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 320px 320px;
    gap: 3px;
}
@media(max-width:1024px) { .tb-mosaic-row { grid-template-columns: 1fr 1fr; grid-template-rows: auto; } }
@media(max-width:640px) { .tb-mosaic-row { grid-template-columns: 1fr; } }

.tb-mc { position: relative; overflow: hidden; cursor: pointer; background: var(--tb-nightfall); border-radius: var(--r-card); }

/* v3.0.9 — stretched-link overlay so the entire mosaic card navigates to its
   accommodation detail page. The inner "Check Availability" CTA stays clickable
   via higher z-index. <span> inside is visually hidden but read by SR/aria. */
.tb-mc-link-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    text-decoration: none;
    color: transparent;
    background: transparent;
    border: 0;
}
.tb-mc-link-overlay > span,
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.tb-mc-link-overlay:focus-visible {
    outline: 2px solid var(--tb-tungsten);
    outline-offset: -4px;
}
/* Lift the booking CTA above the overlay so it can be clicked through */
.tb-mc-cta { position: relative; z-index: 3; }
/* Tag, badge, and price chip stay above the overlay too (visual hover layers) */
.tb-mc-tag, .tb-mc-badge, .tb-mc-price-rest, .tb-mc-rest, .tb-mc-reveal {
    position: relative;
    z-index: 2;
}
.tb-mc-tall { grid-row: span 2; }
.tb-mc-h-std { /* height set by grid rows */ }
.tb-mc-h-tall { /* spans 2 rows via grid */ }
@media(max-width:1024px) {
    .tb-mc-tall { grid-row: span 1; }
    .tb-mc { height: 300px; }
}

.tb-mc-photo { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1s cubic-bezier(.25,.46,.45,.94); }
.tb-mc:hover .tb-mc-photo { transform: scale(1.06); }

/* v3.2.0: gradient strengthened. Prior stops bottomed out at .06 alpha by
   50%, leaving card titles invisible against bright top-heavy photos
   (yurt interior, night sky, sushi bar) on the Stay hub mosaic. New
   stack holds darkness through the title zone.
   v3.6.7: hover-veil curve held even higher to cover the full reveal
   stack (foot CTA + pills + body + rule + title) on bright photos like
   the Twig Hut interior. Prior stop at 55%/.45 alpha was leaving body
   copy ghosting on backlit shots. New curve holds .80+ alpha through
   the body zone (~50%) and .50+ through the title zone (~65%). The
   color also shifts from pure warm-black (rgb(18,14,10)) toward a
   bark-tinted dark at the bottom (rgb(20,14,8)) so the overlay reads
   as "themed wash" rather than generic black scrim — subtle but
   coherent with the bark / nightfall tokens used elsewhere on dark
   sections (see --tb-bark #464139 / --tb-nightfall #2A2927). */
.tb-mc-veil { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18,14,10,.92) 0%, rgba(18,14,10,.62) 30%, rgba(18,14,10,.32) 55%, rgba(18,14,10,.08) 78%, transparent 95%); transition: opacity .5s; }
.tb-mc-veil-hover {
    position: absolute; inset: 0; opacity: 0;
    background: linear-gradient(0deg,
        rgba(20,14,8,.97)   0%,     /* foot CTA zone — solid */
        rgba(18,13,8,.94)   22%,    /* pills zone — solid */
        rgba(16,12,8,.86)   42%,    /* body copy — strong */
        rgba(14,11,8,.66)   58%,    /* rule + title — moderate */
        rgba(14,11,8,.34)   76%,    /* fade through upper third */
        rgba(12,10,8,.10)   90%,    /* nearly clear */
        transparent         100%);
    transition: opacity .5s;
}
.tb-mc:hover .tb-mc-veil { opacity: .3; }
.tb-mc:hover .tb-mc-veil-hover { opacity: 1; }

.tb-mc-tag { position: absolute; top: 14px; left: 14px; z-index: 3; font-size: 8px; letter-spacing: .2em; text-transform: uppercase; background: rgba(18,14,10,.82); backdrop-filter: blur(10px); color: var(--tb-dryglass); border:var(--b-hair) solid rgba(196,168,122,.28); padding: 4px 10px; border-radius: var(--r-card); transition: border-color var(--t-medium), color var(--t-medium); }
.tb-mc:hover .tb-mc-tag { border-color: rgba(196,136,48,.6); color: var(--tb-latesun); }
.tb-mc-badge { position: absolute; top: 14px; right: 14px; z-index: 3; font-family: var(--font-display); font-weight: 300; font-style: italic; font-size: 12px; color: var(--tb-latesun); background: rgba(18,14,10,.7); backdrop-filter: blur(8px); padding: 3px 9px; border-radius: var(--r-card); border:var(--b-hair) solid rgba(196,168,122,.16); }

.tb-mc-drawer { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: clamp(16px,2vw,24px); }
.tb-mc-rest { transition: transform .5s cubic-bezier(.25,.46,.45,.94); }
.tb-mc:hover .tb-mc-rest { transform: translateY(-6px); }
/* v3.3.0: tracking nudged .26em → --ls-eyebrow (.28em) for cross-card
   consistency. Note: this rule is dormant — v3.2.0 removed `tb-mc-ey`
   from the rendered markup of the stay hub mosaic per punch list. Kept
   here as a no-op safety net in case markup is restored later. */
.tb-mc-ey { font-size: 9px; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--tb-canvas); margin-bottom: 5px; }
.tb-mc-title { font-family: var(--font-display); font-weight: 300; font-size: clamp(18px,2.2vw,24px); line-height: 1.06; color: #fff; }
.tb-mc-title em { font-style: italic; color: var(--tb-latesun); }
.tb-mc-price-rest { font-family: var(--font-display); font-weight: 300; font-size: 13px; color: rgba(196,178,148,.55); margin-top: 3px; transition: opacity .25s, max-height .25s; }
.tb-mc:hover .tb-mc-price-rest { opacity: 0; max-height: 0; overflow: hidden; margin: 0; }

.tb-mc-reveal { max-height: 0; overflow: hidden; opacity: 0; transform: translateY(14px); transition: max-height var(--t-slow) cubic-bezier(.25,.46,.45,.94), opacity .4s ease .1s, transform .5s cubic-bezier(.25,.46,.45,.94) .06s; }
.tb-mc:hover .tb-mc-reveal { max-height: 200px; opacity: 1; transform: translateY(0); }
.tb-mc-rule { width: 0; height: .5px; background: linear-gradient(90deg, var(--tb-tungsten), var(--tb-goldenhour)); margin: 10px 0 12px; transition: width .65s cubic-bezier(.25,.46,.45,.94) .08s; }
.tb-mc:hover .tb-mc-rule { width: 36px; }
.tb-mc-desc { font-size: 12.5px; color: var(--tb-dryglass); line-height: 1.75; margin-bottom: 11px; }
.tb-mc-pills { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.tb-mc-pill { font-size: 7.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--tb-canvas); border:var(--b-hair) solid rgba(168,149,110,.3); padding: 3px 8px; border-radius: var(--r-card); white-space: nowrap; background: rgba(18,14,10,.3); }
.tb-mc-foot { display: flex; align-items: center; justify-content: space-between; border-top:var(--b-hair) solid rgba(168,149,110,.18); padding-top: 10px; gap: 8px; }
.tb-mc-price { font-family: var(--font-display); font-weight: 300; font-size: 15px; color: var(--tb-latesun); }
.tb-mc-cta { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; color: var(--tb-tungsten); border-bottom: 1px solid rgba(196,136,48,.42); padding-bottom: 2px; text-decoration: none; transition: color var(--t-fast), letter-spacing .22s; white-space: nowrap; }
.tb-mc:hover .tb-mc-cta { color: var(--tb-goldenhour); letter-spacing: .23em; }

/* ── Campsite overflow strip ── */
.tb-campsite-strip {
    background: var(--tb-shadow);
    border-radius: var(--r-card);
    border:var(--b-hair) solid rgba(92,84,64,.35);
    padding: clamp(18px,2.5vw,26px) clamp(22px,3vw,34px);
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 20px; flex-wrap: wrap;
}
.tb-campsite-strip-thumb {
    width: 52px; height: 52px; flex-shrink: 0;
    border-radius: var(--r-img); overflow: hidden;
    background-size: cover; background-position: center;
    opacity: .72;
}
.tb-campsite-strip-body { flex: 1; min-width: 200px; }
.tb-campsite-strip-label { font-size: 8px; letter-spacing: .26em; text-transform: uppercase; color: var(--tb-canvas); margin-bottom: 4px; }
.tb-campsite-strip-title { font-family: var(--font-display); font-weight: 300; font-size: 20px; color: var(--tb-parchment); line-height: 1.1; }
.tb-campsite-strip-title em { font-style: italic; color: var(--tb-latesun); }
.tb-campsite-strip-meta { font-size: 12px; color: var(--tb-dryglass); margin-top: 4px; letter-spacing: .02em; }
.tb-campsite-strip-meta span { color: rgba(196,178,148,.45); }
.tb-campsite-strip-cta {
    display: inline-block; font-size: 9px; letter-spacing: .2em; text-transform: uppercase;
    color: var(--tb-tungsten); border:var(--b-hair) solid rgba(196,136,48,.4);
    padding: 10px 20px; border-radius: var(--r-card); text-decoration: none;
    transition: background var(--t-fast), color var(--t-fast); white-space: nowrap; flex-shrink: 0;
}
.tb-campsite-strip-cta:hover { background: rgba(196,136,48,.1); color: var(--tb-goldenhour); }

/* ── Section footer ──
   v3.6.0 — punch list L3: footer-wrap padding tightened on top so the
   amenity note/CTA sits closer to the cards above. Was 32-52px both
   sides, now 16-28px top, 32-52px bottom.
   v3.6.4 — May 4 punch list further tightened top: 16-28 → 8-16. The
   gap between mosaic cards and the amenity note still read as too
   loose on desktop. Bottom padding unchanged so the section→reviews
   transition keeps its breathing room. */
.tb-accom-foot-wrap {
    max-width: var(--max-w); margin: 0 auto;
    padding: clamp(8px,1.2vw,16px) var(--pad-x) clamp(32px,4vw,52px);
    display: flex; align-items: center;
    justify-content: space-between;
    flex-wrap: wrap; gap: 18px;
}
.tb-accom-foot-note { font-size: 13px; color: var(--tb-trail); line-height: 1.78; }
.tb-accom-foot-note strong { color: var(--tb-earth); font-weight: 400; }
.tb-accom-foot-note a { color: var(--tb-canvas); text-decoration: none; border-bottom:var(--b-hair) solid rgba(168,149,110,.35); }
.tb-accom-foot-note a:hover { color: var(--tb-dryglass); }

/* ── Mosaic explicit column + row placement ── */
.tb-mc-col2-r1 { grid-column: 2; grid-row: 1; }
.tb-mc-col3-r1 { grid-column: 3; grid-row: 1; }
.tb-mc-col2-r2 { grid-column: 2; grid-row: 2; }
.tb-mc-col3-r2 { grid-column: 3; grid-row: 2; }
@media(max-width:1024px) {
  .tb-mc-col2-r1, .tb-mc-col3-r1,
  .tb-mc-col2-r2, .tb-mc-col3-r2 { grid-column: auto; grid-row: auto; }
}

/* ── Mosaic hover: boost specificity to beat WP stylesheet conflicts ── */
.tb-accom-section .tb-mc:hover .tb-mc-reveal {
  max-height: 200px !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.tb-accom-section .tb-mc:hover .tb-mc-rule {
  width: 36px !important;
}
.tb-accom-section .tb-mc:hover .tb-mc-veil-hover {
  opacity: 1 !important;
}
.tb-accom-section .tb-mc:hover .tb-mc-veil {
  opacity: .3 !important;
}
.tb-accom-section .tb-mc:hover .tb-mc-photo {
  transform: scale(1.06) !important;
}
.tb-accom-section .tb-mc:hover .tb-mc-rest {
  transform: translateY(-6px) !important;
}
.tb-accom-section .tb-mc:hover .tb-mc-price-rest {
  opacity: 0 !important;
}

/* =============================================================
   DINING SECTION — homepage
   v1.4.0
   ============================================================= */

.tb-dining-section {
    /* v1.6.4: section is now a .tb-dark-texture (class added in PHP)
       which lays a photographic duotone backdrop behind the cards.
       The cards themselves remain --tb-shadow / --tb-nightfall solid
       so they read as distinct objects on top of the atmospheric bg. */
    background: var(--tb-shadow);
    padding-bottom: clamp(60px, 7vw, 100px);
}

/* ── Section header ── */
.tb-dining-hdr {
    padding: clamp(56px,7vw,88px) var(--pad-x) clamp(44px,5vw,60px);
    border-bottom:var(--b-hair) solid rgba(92,84,64,.25);
}
.tb-dining-hdr-in {
    max-width: var(--max-w); margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(40px,6vw,80px); align-items: end;
}
@media(max-width:768px) { .tb-dining-hdr-in { grid-template-columns: 1fr; gap: 20px; } }

.tb-dining-ey {
    font-family: var(--font-body); font-size: 9px;
    letter-spacing: .38em; text-transform: uppercase;
    color: var(--tb-canvas);
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px;
}
.tb-dining-ey::before {
    content: ''; width: 22px; height: .5px;
    background: var(--tb-canvas); flex-shrink: 0;
}
.tb-dining-h2 {
    font-family: var(--font-display); font-weight: 300;
    font-size: clamp(32px,4.5vw,54px);
    line-height: 1.02; color: var(--tb-parchment);
}
.tb-dining-h2 em { font-style: italic; color: var(--tb-latesun); }
.tb-dining-intro {
    font-size: 15px; line-height: 1.85;
    color: var(--tb-dryglass); letter-spacing: .025em;
    align-self: end;
}

/* ── v1.6.5 — 3-column editorial: photo | gallery divider | content ──
   Hero photo on left, vertical stack of square thumbnails in middle
   acts as both gallery and visual divider, body content on right.
   Same structure for both restaurants for consistency. */
.tb-dining-cards {
    max-width: var(--max-w); margin: 0 auto;
    padding: 0 var(--pad-x);
    display: flex; flex-direction: column;
    gap: clamp(64px, 8vw, 120px);
    padding-top: clamp(32px,4vw,48px);
}

/* ── Individual restaurant card — 3-column ── */
.tb-dc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 120px minmax(0, 1fr);
    background: var(--tb-shadow);
    border-radius: var(--r-card); overflow: hidden;
    position: relative;
    /* v1.9.6: dropped the full-box border. The cards were framed by a
       .5px rule on all sides, which created duplicate horizontal lines
       where adjacent cards met (Lodge ↔ Wild Coast) and where the top
       edge met the breadcrumb's bottom border. The cards already have
       their own visual identity via the photo-grid layout + shadow;
       the box outline was fighting the editorial style. */
    box-shadow: 0 20px 60px -20px rgba(0,0,0,.55);
    min-height: 480px;
}
.tb-dc--sushi { background: var(--tb-nightfall); }

/* Collapse to single column below tablet */
@media (max-width: 1024px) {
    .tb-dc, .tb-dc--sushi {
        grid-template-columns: 1fr;
        min-height: 0;
    }
}

/* Photo pane */
.tb-dc-img {
    position: relative; overflow: hidden;
}
@media (max-width: 1024px) { .tb-dc-img { aspect-ratio: 16/10; } }

.tb-dc-bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
    transition: transform .9s cubic-bezier(.25,.46,.45,.94);
}
.tb-dc:hover .tb-dc-bg { transform: scale(1.04); }

/* Gradient over photo */
.tb-dc-grad {
    position: absolute; inset: 0;
    background: linear-gradient(
        0deg,
        rgba(50,48,46,.85) 0%,
        rgba(50,48,46,.3) 40%,
        transparent 70%
    );
}
/* Sushi gets a slightly cooler/deeper gradient */
.tb-dc-grad--sushi {
    background: linear-gradient(
        0deg,
        rgba(28,30,36,.92) 0%,
        rgba(28,30,36,.35) 40%,
        transparent 70%
    );
}

/* Restaurant name pill on photo */
.tb-dc-label {
    position: absolute; bottom: 16px; left: 18px; z-index: 2;
    font-family: var(--font-body); font-size: 8px;
    letter-spacing: .24em; text-transform: uppercase;
    background: rgba(42,41,39,.8); backdrop-filter: blur(8px);
    color: var(--tb-canvas);
    border:var(--b-hair) solid rgba(168,149,110,.28);
    padding: 5px 12px; border-radius: var(--r-card);
}

/* Body content — sits below the filmstrip divider */
.tb-dc-body {
    padding: clamp(32px, 4vw, 56px) clamp(28px, 3.5vw, 48px);
    display: flex; flex-direction: column;
    background: var(--tb-shadow);
}
/* Sushi body gets a touch darker */
.tb-dc-body--sushi { background: var(--tb-nightfall); }

.tb-dc-ey {
    font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
    color: var(--tb-dryglass); margin-bottom: 10px; font-weight: 400;
}
.tb-dc-h3 {
    font-family: var(--font-display); font-weight: 300;
    font-size: clamp(24px,3vw,38px);
    line-height: 1.04; color: var(--tb-parchment); margin-bottom: 6px;
}
.tb-dc-h3 em { font-style: italic; color: var(--tb-latesun); }
.tb-dc-rule {
    width: 32px; height: .5px;
    background: var(--tb-dryglass); margin: 16px 0 18px;
}
.tb-dc-desc {
    font-size: 15px; color: var(--tb-parchment); font-weight: 400;
    line-height: 1.8; margin-bottom: 26px;
}

/* Service rows */
.tb-dc-services {
    display: flex; flex-direction: column;
    gap: 0;
    border-top:var(--b-hair) solid rgba(92,84,64,.3);
    margin-bottom: 24px;
}
.tb-dc-svc {
    display: grid; grid-template-columns: 120px 1fr;
    gap: 12px; padding: 12px 0;
    border-bottom:var(--b-hair) solid rgba(92,84,64,.2);
    align-items: baseline;
}
.tb-dc-svc:last-child { border-bottom: none; }
.tb-dc-svc--featured {
    background: rgba(196,136,48,.06);
    margin: 0 -clamp(28px,3.5vw,44px);
    padding: 14px clamp(28px,3.5vw,44px);
    border-left: 2px solid var(--tb-tungsten);
    border-bottom:var(--b-hair) solid rgba(92,84,64,.2);
}
.tb-dc-svc-label {
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--tb-latesun); flex-shrink: 0; font-weight: 400;
}
.tb-dc-svc--featured .tb-dc-svc-label { color: var(--tb-goldenhour); }
.tb-dc-svc-detail {
    font-size: 13px; color: var(--tb-dryglass); line-height: 1.6; font-weight: 400;
}
.tb-dc-svc--featured .tb-dc-svc-detail { color: var(--tb-parchment); }

/* Small note (sushi restrictions) */
.tb-dc-note {
    font-size: 12px; letter-spacing: .04em;
    color: var(--tb-dryglass); font-weight: 400;
    margin-bottom: 22px; line-height: 1.7;
}

/* CTAs */
.tb-dc-ctas {
    display: flex; align-items: center;
    gap: 20px; flex-wrap: wrap;
    margin-top: auto; padding-top: 8px;
}
.tb-dc-cta-primary {
    display: inline-block;
    font-family: var(--font-body); font-weight: 500; font-size: 9px;
    letter-spacing: .26em; text-transform: uppercase;
    background: var(--tb-tungsten); color: var(--tb-nightfall);
    padding: 14px 30px; border-radius: var(--r-card);
    text-decoration: none;
    transition: background var(--t-fast); white-space: nowrap;
}
.tb-dc-cta-primary:hover { background: var(--tb-goldenhour); }
.tb-dc-cta-ghost {
    display: inline-block;
    font-family: var(--font-body); font-weight: 500; font-size: 9px;
    letter-spacing: .26em; text-transform: uppercase;
    color: rgba(245,238,216,.58);
    border-bottom:var(--b-hair) solid rgba(245,238,216,.24);
    padding-bottom: 2px; text-decoration: none;
    transition: color var(--t-fast); white-space: nowrap;
}
.tb-dc-cta-ghost:hover { color: rgba(245,238,216,.92); }

/* ── Walk-in note strip ── */
.tb-dining-walkin {
    border-top:var(--b-hair) solid rgba(92,84,64,.25);
    padding: clamp(18px,2.5vw,26px) var(--pad-x);
}
.tb-dining-walkin-in {
    max-width: var(--max-w); margin: 0 auto;
    display: flex; align-items: center;
    gap: 20px; flex-wrap: wrap;
}
/* v3.6.4 — May 4 punch list flagged the walkin row as "pretty hard to
   read" — root cause was 9px label + 9px link well under the 11px
   footnote floor we hit elsewhere. Color was already AA-compliant
   from v3.2.0; this bump is sized only. */
.tb-dining-walkin-label {
    font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
    color: var(--tb-canvas); flex-shrink: 0;
}
/* v3.2.0: bumped opacity .5 → .92 for WCAG AA compliance on dark bg
   (was reading as low-contrast watermark per client review). */
.tb-dining-walkin-text {
    font-size: 13px; color: rgba(245,238,216,.92);
    flex: 1; min-width: 200px;
    line-height: 1.6;
}

/* ── Experience hub events bridge (v3.2.0 — punch list) ──
   Orange bar below the 3 activity cards on /experience/. Links to /events/
   so the hub still surfaces events without giving them their own tile. */
.tb-activ-events-bar {
    background: var(--tb-shadow);
    padding: clamp(20px, 2.5vw, 28px) var(--pad-x);
    display: flex;
    justify-content: center;
    border-top: var(--b-hair) solid rgba(196,136,48,.25);
}
.tb-activ-events-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: .04em;
    color: var(--tb-tungsten);
    text-decoration: none;
    padding: 14px 22px;
    border: var(--b-hair) solid rgba(196,136,48,.45);
    border-radius: var(--r-card);
    background: rgba(196,136,48,.08);
    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.tb-activ-events-link:hover {
    background: rgba(196,136,48,.16);
    color: var(--tb-goldenhour);
    border-color: rgba(196,136,48,.7);
}
.tb-activ-events-arr {
    transition: transform var(--t-fast);
}
.tb-activ-events-link:hover .tb-activ-events-arr { transform: translateX(4px); }
/* v3.6.4 — bumped 9px → 11px to match the legibility floor used
   elsewhere on the site. Same family as .tb-dining-walkin-label. */
.tb-dining-walkin-link {
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
    color: var(--tb-tungsten);
    border-bottom: 1px solid rgba(196,136,48,.38);
    padding-bottom: 2px; text-decoration: none;
    transition: color var(--t-fast); flex-shrink: 0;
}
.tb-dining-walkin-link:hover { color: var(--tb-goldenhour); }

/* ── Dining gallery divider — vertical stack of square thumbs ── */
.tb-dc-strip {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-rows: 1fr;
    gap: 1px;
    flex-shrink: 0;
    background: rgba(0,0,0,.45);
    border-left:var(--b-hair) solid rgba(196,168,122,.18);
    border-right:var(--b-hair) solid rgba(196,168,122,.18);
}
.tb-dc-thumb {
    aspect-ratio: 1/1;
    background-size: cover; background-position: center;
    cursor: pointer; position: relative; overflow: hidden;
    filter: brightness(.55) saturate(.85);
    transition: filter .25s ease;
}
.tb-dc-thumb:hover { filter: brightness(.85) saturate(1); }
.tb-dc-thumb.active { filter: brightness(1) saturate(1); }
.tb-dc-thumb.active::after {
    content: ''; position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 2px; background: var(--tb-tungsten);
}

/* Mobile: filmstrip goes back to horizontal */
@media (max-width: 1024px) {
    .tb-dc-strip {
        grid-template-columns: repeat(5, 1fr);
        grid-auto-rows: auto;
        border-left: none; border-right: none;
        border-top:var(--b-hair) solid rgba(196,168,122,.18);
        border-bottom:var(--b-hair) solid rgba(196,168,122,.18);
    }
    .tb-dc-thumb.active::after {
        top: auto; bottom: 0; left: 0; right: 0;
        width: auto; height: 2px;
    }
}
/* On very narrow screens, drop the 5th thumb to keep them readable */
@media (max-width: 640px) {
    .tb-dc-strip { grid-template-columns: repeat(4, 1fr); }
    .tb-dc-thumb:nth-child(5) { display: none; }
}

/* ── Dining: big restaurant name on photo ── */
.tb-dc-name {
    position: absolute; bottom: 0; left: 0; right: 0; z-index: 2;
    padding: clamp(20px,2.8vw,32px) clamp(20px,2.8vw,32px) clamp(18px,2.5vw,26px);
}
.tb-dc-name-title {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(28px,3.6vw,48px);
    line-height: 1.0; color: #fff;
    letter-spacing: .01em;
    text-shadow: 0 2px 24px rgba(10,8,6,.55);
    margin-bottom: 5px;
}
.tb-dc-name-title em { font-style: italic; color: var(--tb-latesun); }
.tb-dc-name-chef {
    font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
    color: rgba(196,168,110,.65);
    display: flex; align-items: center; gap: 10px;
}
.tb-dc-name-chef::before {
    content: ''; width: 18px; height: .5px;
    background: rgba(196,168,110,.45); flex-shrink: 0;
}

/* ── Dining mobile stacking ── */
@media(max-width:1024px) {
    .tb-dining-cards {
        gap: clamp(32px, 6vw, 48px);
    }
}
/* Stack the dining header on mobile */
@media(max-width:768px) {
    .tb-dining-hdr-in {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
}



/* =============================================================
   RESTAURANT DETAIL PAGES — v2.9.0
   Extends .tb-dc-* from dining hub for full-page context.
   Used by: template-restaurant.php
   ============================================================= */

/* ── Full-page hero photo (taller than hub card) ── */
.tb-dc-img--full { aspect-ratio: unset !important; min-height: clamp(400px, 60vh, 640px); }
@media (max-width: 1024px) { .tb-dc-img--full { min-height: clamp(320px, 50vh, 480px); } }

/* ── Detail page context: stacked full-width layout ── */
.tb-dc--detail .tb-dc {
    margin: 0;
    grid-template-columns: 1fr;
    min-height: auto;
}
.tb-dc--detail .tb-dc:hover .tb-dc-bg { transform: none; }

/* Hero photo: full-width cinematic, no fixed aspect — let content breathe */
.tb-dc--detail .tb-dc-img--full {
    aspect-ratio: unset;
    min-height: clamp(440px, 56vh, 620px);
}
@media (max-width: 768px) {
    .tb-dc--detail .tb-dc-img--full {
        min-height: clamp(300px, 44vh, 420px);
    }
}

/* Name overlay: elevated presence */
.tb-dc--detail .tb-dc-name {
    bottom: clamp(28px, 4vw, 48px);
    left: clamp(32px, 4vw, 56px);
}
.tb-dc--detail .tb-dc-name-title {
    font-size: clamp(32px, 4.5vw, 52px);
}
.tb-dc--detail .tb-dc-name-chef {
    font-size: 11px;
    letter-spacing: .22em;
    margin-top: 6px;
}

/* Filmstrip: horizontal, square thumbs — captures focal points */
.tb-dc--detail .tb-dc-strip {
    grid-template-columns: repeat(6, 1fr);
    grid-auto-rows: auto;
    border-left: none;
    border-right: none;
}
.tb-dc--detail .tb-dc-thumb {
    aspect-ratio: 1 / 1;
}
.tb-dc--detail .tb-dc-thumb.active::after {
    top: auto; bottom: 0; left: 0; right: 0;
    width: auto; height: 2px;
}
/* Video thumbnail: play icon overlay */
.tb-dc-thumb--video {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.tb-dc-thumb--video::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(19,21,16,.3);
    transition: background var(--t-medium);
    z-index: 1;
}
.tb-dc-thumb--video:hover::before { background: rgba(19,21,16,.1); }
.tb-dc-thumb-play {
    position: relative;
    z-index: 2;
    transition: transform var(--t-medium);
}
.tb-dc-thumb--video:hover .tb-dc-thumb-play { transform: scale(1.15); }
@media (max-width: 768px) {
    .tb-dc--detail .tb-dc-strip { grid-template-columns: repeat(5, 1fr); }
    .tb-dc--detail .tb-dc-thumb:nth-child(5) { display: none; }
}
@media (max-width: 480px) {
    .tb-dc--detail .tb-dc-strip { grid-template-columns: repeat(4, 1fr); }
    .tb-dc--detail .tb-dc-thumb:nth-child(4) { display: none; }
}

/* Body: centered editorial with generous spacing */
.tb-dc--detail .tb-dc-body {
    max-width: 920px;
    margin: 0 auto;
    padding: clamp(44px, 6vw, 72px) clamp(32px, 4vw, 48px);
}
.tb-dc--detail .tb-dc-ey {
    margin-bottom: 14px;
}
.tb-dc--detail .tb-dc-h3 {
    font-size: clamp(32px, 5vw, 48px);
    line-height: 1.08;
    margin-bottom: 10px;
}
.tb-dc--detail .tb-dc-rule {
    width: 40px;
    margin: 20px 0 24px;
}
.tb-dc--detail .tb-dc-desc {
    max-width: 640px;
    font-size: 15px;
    line-height: 1.9;
    margin-bottom: 32px;
}
.tb-dc--detail .tb-dc-services { margin-bottom: 32px; }
.tb-dc--detail .tb-dc-svc { grid-template-columns: 140px 1fr; padding: 16px 0; }
.tb-dc--detail .tb-dc-svc--featured {
    margin: 4px 0;
    padding: 18px clamp(28px,3.5vw,44px);
}
.tb-dc--detail .tb-dc-ctas { margin-top: 12px; padding-top: 8px; gap: 14px; }

/* ── Detail page: tablet/mobile responsive ── */
@media (max-width: 768px) {
    .tb-dc--detail .tb-dc-name-title { font-size: clamp(22px, 5vw, 32px); }
    .tb-dc--detail .tb-dc-name-chef { font-size: 9px; letter-spacing: .18em; }
    .tb-dc--detail .tb-dc-body { padding: clamp(28px, 5vw, 44px) clamp(20px, 4vw, 32px); }
    .tb-dc--detail .tb-dc-h3 { font-size: clamp(24px, 6vw, 36px); }
    .tb-dc--detail .tb-dc-svc { grid-template-columns: 110px 1fr; padding: 12px 0; }
    .tb-dc--detail .tb-dc-svc--featured { margin: 2px -20px; padding: 14px 20px; }
    .tb-dc-expanded,
    .tb-dc-chef-block,
    .tb-dc-faq { padding-left: clamp(20px, 4vw, 40px); padding-right: clamp(20px, 4vw, 40px); }
    .tb-dc-offering { grid-template-columns: 1fr; }
    .tb-dc-off-link { margin-top: 8px; }
}
@media (max-width: 480px) {
    .tb-dc--detail .tb-dc-name-title { font-size: clamp(18px, 5.5vw, 26px); }
    .tb-dc--detail .tb-dc-svc { grid-template-columns: 1fr; gap: 4px; }
    .tb-dc--detail .tb-dc-svc-label { font-size: 10px; }
    .tb-dc--detail .tb-dc-svc-detail { font-size: 12px; }
    .tb-dc-chef-inner { flex-direction: column; align-items: center; text-align: center; }
    .tb-dc-chef-portrait { width: 80px; height: 80px; }
}

/* ═══════════════════════════════════════════════════════
   RESTAURANT DETAIL — Full-bleed treatment  (v2.17.9)
   Hero + filmstrip go edge-to-edge; editorial content
   stays centered. Scoped class so homepage dining cards
   are unaffected.
   ═══════════════════════════════════════════════════════ */
.tb-restaurant-detail .tb-dining-cards {
    padding-left: 0;
    padding-right: 0;
    max-width: 100%;
}
.tb-restaurant-detail .tb-dc {
    border-radius: 0;
    box-shadow: none;
    width: 100%;
}
.tb-restaurant-detail .tb-dc-img {
    border-radius: 0;
}
.tb-restaurant-detail .tb-dc-strip {
    border-radius: 0;
}

/* ── Expanded content (offerings, chef, FAQ below the card) ── */
.tb-dc-expanded { padding: clamp(32px, 4vw, 48px) clamp(48px, 6vw, 80px) 16px; background: var(--tb-shadow); border-top: 1px solid rgba(196,168,122,.08); max-width: 920px; margin: 0 auto; }
.tb-dc-expanded-inner { max-width: 100%; }
/* v3.3.0: tracking widened .14em → --ls-eyebrow (.28em). Was conspicuously
   cramped relative to other eyebrows on the same restaurant page. */
.tb-dc-expanded-ey { font-family: var(--font-body); font-size: 11px; font-weight: 400; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--tb-dryglass); margin: 0 0 14px; padding-bottom: 10px; border-bottom:var(--b-hair) solid rgba(196,168,122,.1); }
.tb-dc-offering { padding: 18px 22px; background: var(--tb-bark); border-radius: var(--r-card); border-left: 3px solid var(--tb-tungsten); display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; margin: 0 0 12px; }
.tb-dc-off-h3 { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--tb-parchment); margin: 0 0 6px; }
.tb-dc-off-desc { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--tb-parchment); line-height: 1.65; margin: 0; }
.tb-dc-off-meta { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--tb-latesun); margin: 8px 0 0; }
.tb-dc-off-link { font-family: var(--font-body); font-size: 11px; font-weight: 400; letter-spacing: .05em; text-transform: uppercase; color: var(--tb-goldenhour); text-decoration: none; white-space: nowrap; align-self: center; }
.tb-dc-off-link:hover { color: var(--tb-goldenhour); }

/* ── Chef bio ── */
.tb-dc-chef-block { padding: 0 clamp(48px, 6vw, 80px) clamp(28px, 3.5vw, 40px); background: var(--tb-shadow); border-top: none; max-width: 920px; margin: 0 auto; }
.tb-dc-chef-inner { display: flex; gap: 24px; align-items: flex-start; max-width: 100%; padding: 22px 24px; background: var(--tb-bark); border-radius: var(--r-card); border-left: 3px solid var(--tb-tungsten); }
.tb-dc-chef-portrait { width: clamp(88px, 12vw, 110px); height: clamp(88px, 12vw, 110px); border-radius: 50%; background-size: cover; flex-shrink: 0; }
.tb-dc-chef-name { font-family: var(--font-display); font-size: 20px; font-weight: 300; color: var(--tb-parchment); margin: 0 0 8px; }
.tb-dc-chef-bio { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--tb-parchment); line-height: 1.7; margin: 0; }

/* ── FAQ (dining detail) ── */
.tb-dc-faq { padding: clamp(20px, 2.5vw, 32px) clamp(48px, 6vw, 80px) clamp(28px, 3.5vw, 44px); background: var(--tb-shadow); max-width: 920px; margin: 0 auto; }
.tb-dc-faq-inner { max-width: 100%; }
.tb-dc-faq-h2 { font-family: var(--font-display); font-size: 20px; font-weight: 300; color: var(--tb-parchment); margin: 0 0 6px; }
.tb-dc-faq-intro { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--tb-dryglass); margin: 0 0 16px; }
.tb-dc-faq-item { border-bottom: 1px solid rgba(196,168,122,.1); }
.tb-dc-faq-q { padding: 11px 0; font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--tb-latesun); cursor: pointer; display: flex; justify-content: space-between; align-items: center; list-style: none; }
.tb-dc-faq-q::-webkit-details-marker { display: none; }
.tb-dc-faq-chevron { color: var(--tb-canvas); font-size: 16px; transition: transform var(--t-fast); }
.tb-dc-faq-item[open] .tb-dc-faq-chevron { transform: rotate(45deg); }
.tb-dc-faq-a { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--tb-parchment); line-height: 1.65; padding: 0 0 12px; }

/* ── Cross-sell ── */
.tb-dc-xsell { display: flex; align-items: center; justify-content: center; position: relative; min-height: clamp(200px, 28vw, 280px); background-size: cover; text-decoration: none; overflow: hidden; }
.tb-dc-xsell-ov { position: absolute; inset: 0; background: rgba(19,21,16,.68); transition: background var(--t-medium); }
.tb-dc-xsell:hover .tb-dc-xsell-ov { background: rgba(19,21,16,.45); }
.tb-dc-xsell-content { position: relative; z-index: 1; text-align: center; padding: 24px; }
/* v3.6.0 — punch list B5: 'Other offerings' (cross-sell) eyebrow + CTA
   were 300 weight on dark photo overlay, reading as ghost text. Bumped
   weight 300 → 400 and tracking widened on eyebrow. CTA color shifted
   tungsten → goldenhour for better contrast on the bg-image overlay. */
.tb-dc-xsell-ey { font-family: var(--font-body); font-size: 10px; font-weight: 400; letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--tb-canvas); margin: 0 0 8px; }
.tb-dc-xsell-h3 { font-family: var(--font-display); font-size: clamp(26px, 4vw, 38px); font-weight: 300; color: var(--tb-parchment); }
.tb-dc-xsell-h3 em { font-style: italic; color: var(--tb-latesun); }
.tb-dc-xsell-cta { display: inline-block; margin-top: 14px; font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--tb-goldenhour); border-bottom: var(--b-hair) solid rgba(216,168,85,.45); padding-bottom: 2px; }

/* ── Video popup modal ── */
.tb-video-modal {
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none;
    transition: opacity .35s;
}
.tb-video-modal.open { opacity: 1; pointer-events: all; }
.tb-video-modal-backdrop {
    position: absolute; inset: 0;
    background: rgba(19,21,16,.88);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.tb-video-modal-wrap {
    position: relative; z-index: 1;
    width: 90vw; max-width: 960px;
    aspect-ratio: 16 / 9;
    transform: translateY(20px) scale(.97);
    transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.tb-video-modal.open .tb-video-modal-wrap {
    transform: translateY(0) scale(1);
}
.tb-video-modal-player {
    width: 100%; height: 100%;
    border-radius: var(--r-modal);
    overflow: hidden;
    background: #000;
}
.tb-video-modal-close {
    position: absolute; top: -40px; right: 0;
    background: none; border: none;
    color: var(--tb-parchment);
    font-size: 28px; font-weight: 300;
    cursor: pointer;
    padding: 4px 8px;
    transition: opacity var(--t-fast);
    line-height: 1;
}
.tb-video-modal-close:hover { opacity: .6; }

/* ── Dark breadcrumb wrapper ── */
.tb-dark-crumb .breadcrumb-bar { background: rgba(26,29,22,.96); border-bottom-color: rgba(168,149,110,.12); }
.tb-dark-crumb .breadcrumb-bar a, .tb-dark-crumb .breadcrumb-bar span { color: var(--tb-canvas); }
.tb-dark-crumb .breadcrumb-bar a:hover { color: var(--tb-tungsten); }
.tb-dark-crumb .breadcrumb-bar .breadcrumb-current { color: var(--tb-dryglass); }

/* ── Shared FAQ (experience template) ── */
/* v2.11.2: sticky-header offset for #faq anchor (used on experience pages). */
.tb-rp-faq { padding: clamp(28px, 3.5vw, 40px) var(--pad-x); background: var(--tb-shadow); scroll-margin-top: clamp(64px, 8vh, 96px); }
.tb-rp-faq-h2 { font-family: var(--font-display); font-size: 18px; font-weight: 300; color: var(--tb-parchment); margin: 0 0 6px; }
.tb-rp-faq-intro { font-family: var(--font-body); font-size: 12px; font-weight: 300; color: var(--tb-canvas); margin: 0 0 14px; }
.tb-rp-faq-list { max-width: var(--max-w); }
.tb-rp-faq-item { border-bottom: 1px solid rgba(196,168,122,.1); }
.tb-rp-faq-q { padding: 10px 0; font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--tb-latesun); cursor: pointer; display: flex; justify-content: space-between; align-items: center; list-style: none; }
.tb-rp-faq-q::-webkit-details-marker { display: none; }
.tb-rp-faq-chevron { color: var(--tb-canvas); font-size: 16px; transition: transform var(--t-fast) ease; }
.tb-rp-faq-item[open] .tb-rp-faq-chevron { transform: rotate(45deg); }
.tb-rp-faq-a { padding: 0 0 12px; }
.tb-rp-faq-a p { font-family: var(--font-body); font-size: 12px; font-weight: 300; color: var(--tb-dryglass); line-height: 1.65; margin: 0; }

/* =============================================================
   EXPERIENCE DETAIL PAGES — v2.7.0
   Used by: template-experience.php (Massage, Yoga, Concerts)
   Reuses .tb-rp-faq-* for FAQ accordion, .tb-xp-off-* for cards.
   ============================================================= */

/* ── Hero ── */
/* DEPRECATED v2.11.0: The .tb-xp-hero* system is no longer used.
   The experience detail pages (/experience/massage|yoga|concerts/) now share
   the .page-hero system with Stay, Dine, and Contact pages. Styles below
   are kept as a safety net in case any in-flight content references them. */
.tb-xp-hero {
    position: relative;
    min-height: clamp(360px, 55vh, 520px);
    background-size: cover;
    display: flex;
    align-items: flex-end;
}
.tb-xp-hero-ov {
    position: absolute; inset: 0;
    background: linear-gradient(to top,
        rgba(19,21,16,.9) 0%,
        rgba(19,21,16,.25) 50%,
        rgba(19,21,16,.1) 100%);
}
.tb-xp-hero-content {
    position: relative; z-index: 1;
    padding: 0 var(--pad-x) clamp(28px, 4vw, 44px);
    max-width: var(--max-w);
    margin: 0 auto; width: 100%;
}
.tb-xp-hero-ey {
    font-family: var(--font-body);
    font-size: 10px; font-weight: 300;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--tb-canvas); margin: 0 0 10px;
}
.tb-xp-hero-h1 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4.5vw, 48px);
    font-weight: 300; line-height: 1.08;
    color: var(--tb-parchment); margin: 0 0 10px;
}
.tb-xp-hero-h1 em { font-style: italic; color: var(--tb-latesun); }
.tb-xp-hero-body {
    font-family: var(--font-body);
    font-size: clamp(13px, 1.5vw, 15px);
    font-weight: 300; color: var(--tb-dryglass);
    max-width: 460px; margin: 0 0 18px;
}
.tb-xp-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Overview (parchment) ── */
.tb-xp-overview {
    background: var(--tb-parchment);
    padding: clamp(32px, 4.5vw, 56px) var(--pad-x);
}
.tb-xp-ov-inner { max-width: 640px; margin: 0 auto; }
.tb-xp-ov-text { /* default: single column lives in -inner directly */ }
.tb-xp-ov-ey {
    font-family: var(--font-body);
    font-size: 10px; font-weight: 300;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--tb-canvas); margin: 0 0 10px;
}
.tb-xp-ov-h2 {
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 300; line-height: 1.15;
    color: var(--tb-bark); margin: 0;
}
.tb-xp-ov-h2 em { font-style: italic; color: var(--tb-tungsten); }
.tb-xp-ov-rule { width: 36px; height: 1px; background: var(--tb-dryglass); margin: 16px 0; }
.tb-xp-ov-body {
    font-family: var(--font-body);
    font-size: 14px; font-weight: 300; line-height: 1.75;
    color: var(--tb-earth); margin: 0;
}

/* v2.11.0: 50/50 split layout when the overview includes an inset image.
   Used to break up the parchment ocean on Massage and (eventually) Yoga.
   Image gets a tall aspect ratio so portrait phone shots like IMG_3939.jpg
   render gracefully without cropping out the subject. */
.tb-xp-overview--split .tb-xp-ov-inner {
    max-width: var(--max-w);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: center;
}
.tb-xp-overview--split .tb-xp-ov-text { max-width: 520px; }
.tb-xp-ov-media {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border-radius: var(--r-img);
    box-shadow: 0 12px 36px rgba(30,28,26,.18);
}
.tb-xp-ov-media img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}
@media (max-width: 768px) {
    .tb-xp-overview--split .tb-xp-ov-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .tb-xp-ov-media { aspect-ratio: 3 / 4; max-width: 480px; margin: 0 auto; }
}

/* ── Offerings section + cards ── */
.tb-xp-offerings {
    background: var(--tb-nightfall);
    padding: clamp(40px, 5vw, 56px) var(--pad-x);
}
/* v2.11.0: wrap H2 + grid in a shared 920px container so the heading
   no longer floats at the page edge while the cards sit centered below. */
.tb-xp-off-inner { max-width: 920px; margin: 0 auto; }
.tb-xp-off-h2 {
    font-family: var(--font-display);
    font-size: clamp(20px, 2.4vw, 24px);
    font-weight: 300;
    color: var(--tb-parchment);
    margin: 0 0 20px;
}
.tb-xp-off-h2 em { font-style: italic; color: var(--tb-latesun); }
.tb-xp-off-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.tb-xp-off-card {
    padding: 22px 24px;
    background: var(--tb-bark);
    border-radius: var(--r-card);
    border-left: 3px solid var(--tb-tungsten);
}
.tb-xp-off-h3 {
    font-family: var(--font-display);
    font-size: 20px; font-weight: 400;
    color: var(--tb-parchment);
    margin: 0 0 8px;
}
.tb-xp-off-desc {
    font-family: var(--font-body);
    font-size: 14px; font-weight: 400;
    color: var(--tb-dryglass);
    line-height: 1.7;
    margin: 0 0 12px;
}
/* v3.6.0 — punch list B4: '.tb-xp-off-link' was using browser-default
   link color (dark blue) on the dark experience-page card background,
   rendering as invisible. Now uses the brand tungsten gold with a
   subtle hairline underline, matching the dining card link affordance. */
.tb-xp-off-link {
    display: inline-block;
    margin-top: 12px;
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tb-goldenhour);
    text-decoration: none;
    border-bottom: var(--b-hair) solid rgba(216,168,85,.45);
    padding-bottom: 2px;
    transition: color var(--t-fast), border-color var(--t-fast);
}
.tb-xp-off-link:hover { color: var(--tb-tungsten); border-bottom-color: var(--tb-tungsten); }

.tb-xp-off-meta {
    font-family: var(--font-body);
    font-size: 12px; font-weight: 400;
    color: var(--tb-canvas);
    letter-spacing: .04em;
}

/* ── Retreat / Highlight block ── */
.tb-xp-retreat {
    background: var(--tb-shadow);
    padding: clamp(28px, 3.5vw, 40px) var(--pad-x);
}
.tb-xp-rt-inner { max-width: 640px; margin: 0 auto; }
.tb-xp-rt-h2 {
    font-family: var(--font-display);
    font-size: 20px; font-weight: 300;
    color: var(--tb-parchment); margin: 0 0 10px;
}
.tb-xp-rt-h2 em { font-style: italic; color: var(--tb-latesun); }
.tb-xp-rt-body {
    font-family: var(--font-body);
    font-size: 14px; font-weight: 400;
    color: var(--tb-dryglass); line-height: 1.75;
    margin: 0 0 16px;
}
.tb-xp-rt-cta {
    font-family: var(--font-body);
    font-size: 12px; font-weight: 400;
    color: var(--tb-tungsten); text-decoration: none;
    letter-spacing: .06em; text-transform: uppercase;
}

/* ── Past performances archive (v2.11.4) ──
   Parchment-vintage poster wall. Renders just before the FAQ
   on /experience/concerts/. Posters are migrated by ?tb_migrate_assets=1
   and resolved at render via tb_attachment_url_by_filename(). */
.tb-xp-archive {
    background: var(--tb-parchment);
    padding: clamp(40px, 5vw, 64px) var(--pad-x);
}
.tb-xp-ar-inner { max-width: var(--max-w); margin: 0 auto; }
/* v3.3.0: tracking widened .12em → --ls-eyebrow (.28em). Was the most
   cramped eyebrow on the site by a factor of 2x — sat awkwardly above
   the Past Performances grid on Concerts. Now reads as proper editorial
   caption. */
.tb-xp-ar-ey {
    font-family: var(--font-body);
    font-size: 10px; font-weight: 300;
    letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
    color: var(--tb-canvas); margin: 0 0 10px;
}
.tb-xp-ar-h2 {
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 300; line-height: 1.15;
    color: var(--tb-bark); margin: 0;
}
.tb-xp-ar-h2 em { font-style: italic; color: var(--tb-tungsten); }
.tb-xp-ar-rule { width: 36px; height: 1px; background: var(--tb-dryglass); margin: 16px 0; }
.tb-xp-ar-intro {
    font-family: var(--font-body);
    font-size: 14px; font-weight: 300; line-height: 1.75;
    color: var(--tb-earth); margin: 0 0 32px;
    max-width: 640px;
}
.tb-xp-ar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px 24px;
    margin-top: 8px;
}
.tb-xp-ar-item {
    margin: 0;
    transition: transform .25s ease;
}
.tb-xp-ar-item:hover { transform: translateY(-3px); }
/* v3.6.0 — punch list G1: switched object-fit cover → contain so the
   full poster is visible (was being cropped because posters have
   different native aspect ratios). Container stays at 2/3 so the grid
   reads as uniform tiles; letterboxing is filled with bark color and
   reads as a deliberate matte border around each poster. */
.tb-xp-ar-img {
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-radius: var(--r-img);
    background: var(--tb-bark);
    box-shadow: 0 10px 28px rgba(30,28,26,.32);
    padding: 8px;
}
.tb-xp-ar-img img {
    width: 100%; height: 100%;
    object-fit: contain; object-position: center;
    display: block;
    transition: transform var(--t-slow) ease;
}
.tb-xp-ar-item:hover .tb-xp-ar-img img { transform: scale(1.02); }
.tb-xp-ar-cap {
    margin-top: 12px;
    text-align: left;
    display: flex; flex-direction: column;
    gap: 2px;
}
.tb-xp-ar-title {
    font-family: var(--font-display);
    font-size: 16px; font-weight: 400;
    color: var(--tb-bark); line-height: 1.3;
}
.tb-xp-ar-meta {
    font-family: var(--font-body);
    font-size: 10px; font-weight: 400;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--tb-trail);
}
@media (max-width: 1024px) {
    .tb-xp-ar-grid { grid-template-columns: repeat(3, 1fr); gap: 24px 18px; }
}
@media (max-width: 640px) {
    .tb-xp-ar-grid { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
}

/* ── Moments gallery (v3.2.6 — Concerts page only) ──
   Editorial photo grid sitting between the overview and the past-performances
   archive on /experience/concerts/. Dark section to contrast with the
   parchment archive below it. 3-column on desktop, asymmetrical first
   row (2/3-1/3) for editorial rhythm.  */
.tb-xp-moments {
    background: var(--tb-shadow);
    padding: clamp(56px, 7vw, 96px) var(--pad-x) clamp(48px, 6vw, 72px);
    color: var(--tb-parchment);
}
.tb-xp-mom-inner { max-width: var(--max-w); margin: 0 auto; }
.tb-xp-mom-ey {
    font-family: var(--font-body);
    font-size: 10px; font-weight: 300;
    letter-spacing: .32em; text-transform: uppercase;
    color: var(--tb-canvas); margin: 0 0 12px;
}
.tb-xp-mom-h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.5vw, 42px);
    font-weight: 300; line-height: 1.1;
    color: var(--tb-parchment); margin: 0;
}
.tb-xp-mom-h2 em { font-style: italic; color: var(--tb-latesun); }
.tb-xp-mom-rule { width: 40px; height: 1px; background: var(--tb-tungsten); margin: 18px 0 clamp(28px,3vw,40px); }
.tb-xp-mom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(12px, 1.4vw, 18px);
}
.tb-xp-mom-item { margin: 0; }
.tb-xp-mom-img {
    aspect-ratio: 4 / 3;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: var(--r-img);
    transition: transform var(--t-slow) ease;
    box-shadow: 0 12px 34px rgba(0,0,0,.38);
}
.tb-xp-mom-item:hover .tb-xp-mom-img { transform: scale(1.015); }
/* Editorial first item — make the lead photo larger (spans 2 cols × 2 rows)
   so the gallery has a focal point instead of a flat 2×3 grid. */
.tb-xp-mom-item--1 { grid-column: span 2; grid-row: span 2; }
.tb-xp-mom-item--1 .tb-xp-mom-img { aspect-ratio: 16 / 11; }
@media (max-width: 1024px) {
    .tb-xp-mom-grid { grid-template-columns: repeat(2, 1fr); }
    .tb-xp-mom-item--1 { grid-column: span 2; grid-row: auto; }
    .tb-xp-mom-item--1 .tb-xp-mom-img { aspect-ratio: 16 / 9; }
}
@media (max-width: 640px) {
    .tb-xp-mom-grid { grid-template-columns: 1fr; }
    .tb-xp-mom-item--1 { grid-column: auto; }
    .tb-xp-mom-img,
    .tb-xp-mom-item--1 .tb-xp-mom-img { aspect-ratio: 4 / 3; }
}

/* ── Related experiences ── */
.tb-xp-related {
    background: var(--tb-nightfall);
    padding: clamp(32px, 4vw, 48px) var(--pad-x);
}
.tb-xp-rel-inner { max-width: 920px; margin: 0 auto; }
.tb-xp-rel-ey {
    font-family: var(--font-body);
    font-size: 10px; font-weight: 400;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--tb-canvas); margin: 0 0 16px;
}
.tb-xp-rel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}
.tb-xp-rel-card {
    padding: 18px 20px;
    background: var(--tb-bark);
    border-radius: var(--r-card);
    text-decoration: none;
    transition: transform var(--t-fast);
    display: block;
}
.tb-xp-rel-card:hover { transform: translateY(-2px); }
.tb-xp-rel-card h3 {
    font-family: var(--font-display);
    font-size: 18px; font-weight: 400;
    color: var(--tb-parchment); margin: 0 0 6px;
}
.tb-xp-rel-card p {
    font-family: var(--font-body);
    font-size: 12px; font-weight: 400;
    color: var(--tb-dryglass); line-height: 1.6;
    margin: 0 0 8px;
}
.tb-xp-rel-card span {
    font-family: var(--font-body);
    font-size: 11px; font-weight: 400;
    color: var(--tb-tungsten);
    letter-spacing: .04em; text-transform: uppercase;
}

/* ── Booking / Schedule ── */
.tb-xp-booking {
    padding: clamp(24px, 3vw, 36px) var(--pad-x);
    background: var(--tb-shadow);
    /* v2.11.2: sticky-header offset for #booking anchor. */
    scroll-margin-top: clamp(64px, 8vh, 96px);
}
/* v3.6.0 — punch list C3: H2 was fixed at 20px while sibling section H2s
   on the same page (overview, retreat) scale clamp(20-30px). On wide
   screens "How to Book" / "Morning Yoga Schedule" looked undersized
   relative to "Outdoor Yoga at Treebones" above it. Now matches the
   retreat H2 scale. */
.tb-xp-bk-h2 {
    font-family: var(--font-display);
    font-size: clamp(20px, 3vw, 28px); font-weight: 300;
    line-height: 1.15;
    color: var(--tb-parchment); margin: 0 0 10px;
}
.tb-xp-bk-h2 em { font-style: italic; color: var(--tb-latesun); }
.tb-xp-bk-body {
    font-family: var(--font-body);
    font-size: 13px; font-weight: 300;
    color: var(--tb-dryglass); line-height: 1.7;
    margin: 0 0 20px; max-width: 600px;
}
.tb-xp-bk-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}
.tb-xp-bk-h3 {
    font-family: var(--font-display);
    font-size: 16px; font-weight: 400;
    color: var(--tb-parchment); margin: 0 0 10px;
}
.tb-xp-bk-list {
    list-style: none; padding: 0; margin: 0;
}
.tb-xp-bk-list li {
    font-family: var(--font-body);
    font-size: 12px; font-weight: 300;
    color: var(--tb-dryglass); line-height: 1.7;
    padding: 4px 0 4px 16px;
    position: relative;
}
.tb-xp-bk-list li::before {
    content: ''; position: absolute;
    left: 0; top: 11px;
    width: 6px; height: 1px;
    background: var(--tb-canvas);
}
/* v2.11.0: previously a salmon-tinted callout pill that didn't match the
   design system. Now renders as inline italic prose, consistent with other
   "supporting" copy on the page. */
.tb-xp-bk-note {
    margin: 16px 0 0;
    font-family: var(--font-body);
    font-size: 12px; font-weight: 300;
    color: var(--tb-canvas); font-style: italic;
    line-height: 1.7;
    max-width: 600px;
}

/* ── Retreat CTA ── */
.tb-xp-retreat {
    padding: clamp(32px, 5vw, 56px) var(--pad-x);
    background: var(--tb-bark);
    text-align: center;
}
.tb-xp-rt-inner { max-width: 560px; margin: 0 auto; }
.tb-xp-rt-h2 {
    font-family: var(--font-display);
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 300; color: var(--tb-parchment);
    margin: 0 0 12px;
}
.tb-xp-rt-h2 em { font-style: italic; color: var(--tb-latesun); }
.tb-xp-rt-body {
    font-family: var(--font-body);
    font-size: 13px; font-weight: 300;
    color: var(--tb-dryglass); line-height: 1.75;
    margin: 0 0 20px;
}

/* ── Concert CTA ── */
.tb-xp-concert-cta {
    padding: clamp(32px, 5vw, 56px) var(--pad-x);
    background: var(--tb-bark);
    text-align: center;
}
.tb-xp-cc-inner { max-width: 560px; margin: 0 auto; }
.tb-xp-cc-h2 {
    font-family: var(--font-display);
    font-size: clamp(20px, 3vw, 28px);
    font-weight: 300; color: var(--tb-parchment);
    margin: 0 0 12px;
}
.tb-xp-cc-h2 em { font-style: italic; color: var(--tb-latesun); }
.tb-xp-cc-body {
    font-family: var(--font-body);
    font-size: 13px; font-weight: 300;
    color: var(--tb-dryglass); line-height: 1.75;
    margin: 0 0 20px;
}

/* ── Related Experiences ── */
.tb-xp-related {
    padding: clamp(24px, 3vw, 36px) var(--pad-x);
    background: var(--tb-nightfall);
}
.tb-xp-rel-inner { max-width: var(--max-w); margin: 0 auto; text-align: center; }
.tb-xp-rel-ey {
    font-family: var(--font-body);
    font-size: 10px; font-weight: 300;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--tb-canvas); margin: 0 0 14px;
}
.tb-xp-rel-grid {
    display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.tb-xp-rel-card {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 20px;
    background: var(--tb-bark); border-radius: var(--r-card);
    font-family: var(--font-body);
    font-size: 12px; font-weight: 400;
    color: var(--tb-latesun); text-decoration: none;
    transition: background var(--t-fast);
}
.tb-xp-rel-card:hover { background: var(--tb-earth); }


/* =============================================================
   EVENTS — v2.8.0
   Index (template-events.php) + Single (single-tb_event.php)
   ============================================================= */

/* ── Index: Filter pills ── */
.tb-ev-index {
    padding: clamp(32px, 5vw, 56px) var(--pad-x);
    background: var(--tb-nightfall);
}
.tb-ev-index-inner { max-width: var(--max-w); margin: 0 auto; }
.tb-ev-filters {
    display: flex; gap: 8px; flex-wrap: wrap;
    justify-content: center; margin: 0 0 clamp(24px, 4vw, 40px);
}
.tb-ev-pill {
    font-family: var(--font-body);
    font-size: 11px; font-weight: 300;
    letter-spacing: .08em; text-transform: uppercase;
    padding: 8px 20px; border: 1px solid rgba(196,168,122,.2);
    border-radius: var(--r-card); background: transparent;
    color: var(--tb-canvas); cursor: pointer;
    transition: all var(--t-fast);
}
.tb-ev-pill:hover { border-color: var(--tb-dryglass); color: var(--tb-latesun); }
.tb-ev-pill.active {
    background: var(--tb-bark); border-color: var(--tb-bark);
    color: var(--tb-parchment);
}

/* ── Index: Event cards ── */
.tb-ev-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: clamp(16px, 2vw, 24px);
}
.tb-ev-card {
    background: var(--tb-shadow);
    border-radius: var(--r-card);
    overflow: hidden;
    transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.tb-ev-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.3);
}
.tb-ev-card-link { text-decoration: none; display: block; }
.tb-ev-card-img {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
}
.tb-ev-card-body { padding: 18px 20px; }
.tb-ev-card-type {
    font-family: var(--font-body);
    font-size: 10px; font-weight: 300;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--tb-tungsten); margin: 0 0 6px;
}
.tb-ev-card-title {
    font-family: var(--font-display);
    font-size: 20px; font-weight: 300;
    color: var(--tb-parchment); margin: 0 0 6px;
    line-height: 1.2;
}
.tb-ev-card-date {
    font-family: var(--font-body);
    font-size: 12px; font-weight: 300;
    color: var(--tb-latesun); margin: 0 0 8px;
}
.tb-ev-card-excerpt {
    font-family: var(--font-body);
    font-size: 12px; font-weight: 300;
    color: var(--tb-dryglass); line-height: 1.6;
    margin: 0 0 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.tb-ev-card-footer {
    display: flex; justify-content: space-between;
    align-items: center;
}
.tb-ev-card-price {
    font-family: var(--font-body);
    font-size: 12px; font-weight: 400;
    color: var(--tb-canvas);
}
.tb-ev-card-badge {
    font-family: var(--font-body);
    font-size: 10px; font-weight: 400;
    letter-spacing: .06em; text-transform: uppercase;
    color: var(--tb-parchment); background: rgba(163,45,45,.7);
    padding: 3px 10px; border-radius: var(--r-card);
}
.tb-ev-card--soldout { opacity: .6; }
.tb-ev-card--soldout:hover { transform: none; box-shadow: none; }

/* ── Index: Empty state ── */
.tb-ev-empty {
    text-align: center;
    padding: clamp(40px, 8vw, 80px) 20px;
}
.tb-ev-empty-icon { font-size: 32px; margin: 0 0 12px; }
.tb-ev-empty-h2 {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 300;
    color: var(--tb-parchment); margin: 0 0 8px;
}
.tb-ev-empty-body {
    font-family: var(--font-body);
    font-size: 13px; font-weight: 300;
    color: var(--tb-dryglass); max-width: 420px;
    margin: 0 auto; line-height: 1.7;
}

/* ── Single: Hero ── */
.tb-ev-hero {
    position: relative;
    min-height: clamp(320px, 50vh, 480px);
    background-size: cover;
    display: flex; align-items: flex-end;
}
.tb-ev-hero-ov {
    position: absolute; inset: 0;
    background: linear-gradient(to top,
        rgba(19,21,16,.9) 0%,
        rgba(19,21,16,.3) 50%,
        rgba(19,21,16,.1) 100%);
}
.tb-ev-hero-content {
    position: relative; z-index: 1;
    padding: 0 var(--pad-x) clamp(24px, 4vw, 44px);
    max-width: var(--max-w); margin: 0 auto; width: 100%;
}
.tb-ev-hero-ey {
    font-family: var(--font-body);
    font-size: 10px; font-weight: 300;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--tb-canvas); margin: 0 0 8px;
}
.tb-ev-hero-h1 {
    font-family: var(--font-display);
    font-size: clamp(28px, 4.5vw, 46px);
    font-weight: 300; line-height: 1.1;
    color: var(--tb-parchment); margin: 0 0 8px;
}
.tb-ev-hero-date {
    font-family: var(--font-body);
    font-size: 13px; font-weight: 300;
    color: var(--tb-latesun);
}

/* ── Single: Content layout ── */
.tb-ev-content {
    padding: clamp(32px, 5vw, 56px) var(--pad-x);
    background: var(--tb-nightfall);
}
/* v3.4.1: sidebar widened 280 → 340px so the "Call Donna to Reserve"
   CTA fits the column without clipping. Right (main content) column
   loses 60px which is well within its working width. */
.tb-ev-content-layout {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: clamp(24px, 4vw, 48px);
    max-width: var(--max-w); margin: 0 auto;
}
@media(max-width:768px) {
    .tb-ev-content-layout {
        grid-template-columns: 1fr;
    }
}

/* ── Single: Sidebar details card ── */
.tb-ev-sidebar { position: sticky; top: calc(var(--hdr-sticky, 48px) + 48px); align-self: start; }
.tb-ev-details-card {
    background: var(--tb-shadow);
    border-radius: var(--r-card);
    padding: 20px;
    border: 1px solid rgba(196,168,122,.1);
}
.tb-ev-badge-sold {
    background: rgba(163,45,45,.7);
    color: var(--tb-parchment);
    font-family: var(--font-body);
    font-size: 11px; font-weight: 400;
    letter-spacing: .06em; text-transform: uppercase;
    text-align: center;
    padding: 6px; border-radius: var(--r-card);
    margin: 0 0 14px;
}
.tb-ev-detail-row {
    padding: 10px 0;
    border-bottom: 1px solid rgba(196,168,122,.08);
}
.tb-ev-detail-row:last-of-type { border: none; }
.tb-ev-detail-label {
    font-family: var(--font-body);
    font-size: 10px; font-weight: 300;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--tb-canvas); margin: 0 0 4px;
}
.tb-ev-detail-value {
    font-family: var(--font-body);
    font-size: 13px; font-weight: 400;
    color: var(--tb-parchment); line-height: 1.5;
}
.tb-ev-detail-cta {
    display: block; text-align: center;
    margin-top: 16px; width: 100%;
}

/* ── Single: Main content (editor output) ── */
.tb-ev-main {
    font-family: var(--font-body);
    font-size: 14px; font-weight: 300;
    color: var(--tb-dryglass); line-height: 1.75;
}
.tb-ev-main h2 {
    font-family: var(--font-display);
    font-size: 22px; font-weight: 300;
    color: var(--tb-parchment);
    margin: clamp(24px, 3vw, 36px) 0 10px;
}
.tb-ev-main h3 {
    font-family: var(--font-display);
    font-size: 17px; font-weight: 400;
    color: var(--tb-latesun);
    margin: 20px 0 8px;
}
.tb-ev-main p { margin: 0 0 14px; }
.tb-ev-main ul, .tb-ev-main ol {
    padding-left: 20px; margin: 0 0 14px;
}
.tb-ev-main li { margin: 0 0 6px; }
.tb-ev-main a { color: var(--tb-tungsten); }
.tb-ev-main a:hover { color: var(--tb-goldenhour); }
.tb-ev-main strong { font-weight: 400; color: var(--tb-parchment); }

/* ── Single: Back link ── */
.tb-ev-back {
    margin-top: clamp(24px, 3vw, 40px);
    max-width: var(--max-w); margin-left: auto; margin-right: auto;
}
.tb-ev-back a {
    font-family: var(--font-body);
    font-size: 12px; font-weight: 300;
    color: var(--tb-tungsten); text-decoration: none;
    letter-spacing: .04em;
}
.tb-ev-back a:hover { color: var(--tb-goldenhour); }


/* =============================================================
   HOMEPAGE SECTIONS — v2.10.0
   Accommodations tabs, dining 50/50, activities cards.
   ============================================================= */

/* ── Accommodations Tabs ── */
.tb-accom-tabs { background: var(--tb-nightfall); padding: clamp(48px, 7vw, 80px) var(--pad-x); }
.tb-accom-tabs-inner { max-width: var(--max-w); margin: 0 auto; }
.tb-accom-tabs-h2 { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 38px); font-weight: 300; color: var(--tb-parchment); margin: 0 0 28px; text-align: center; }
.tb-accom-tabs-h2 em { font-style: italic; color: var(--tb-latesun); }

/* v3.7.25 — secondary CTA below the stay-tabs cards linking to Send Your
   Love. Soft text-link treatment so it doesn't compete with per-card CTAs. */
.tb-accom-tabs-cta { text-align: center; margin-top: clamp(28px, 3.5vw, 44px); }
.tb-accom-tabs-cta-link {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--tb-dryglass);
    text-decoration: none;
    border-bottom: 1px solid rgba(196,168,122,.45);
    padding-bottom: 4px;
    transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.tb-accom-tabs-cta-link:hover {
    color: var(--tb-parchment);
    border-bottom-color: var(--tb-goldenhour);
}

.tb-accom-pills { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 0 0 clamp(24px, 4vw, 40px); }
.tb-accom-pill { font-family: var(--font-body); font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; padding: 10px 18px; border: 1px solid rgba(196,168,122,.2); border-radius: var(--r-card); background: transparent; color: var(--tb-canvas); cursor: pointer; transition: all var(--t-fast); }
@media (max-width: 768px) { .tb-accom-pill { padding: 12px 16px; } }
.tb-accom-pill:hover { border-color: var(--tb-dryglass); color: var(--tb-latesun); }
.tb-accom-pill.active { background: var(--tb-bark); border-color: var(--tb-bark); color: var(--tb-parchment); }

.tb-accom-panel { display: none; grid-template-columns: 1fr 1fr; gap: 0; background: var(--tb-shadow); border-radius: var(--r-card); overflow: hidden; min-height: 380px; }
.tb-accom-panel.active { display: grid; }
@media(max-width:768px) { .tb-accom-panel { grid-template-columns: 1fr; min-height: auto; } }
.tb-accom-panel-photo { background-size: cover; min-height: 380px; }
@media(max-width:768px) { .tb-accom-panel-photo { min-height: 260px; } }
.tb-accom-panel-body { padding: clamp(32px, 5vw, 56px) clamp(28px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; }
.tb-accom-panel-h3 { font-family: var(--font-display); font-size: clamp(24px, 3vw, 32px); font-weight: 300; color: var(--tb-parchment); margin: 0 0 14px; line-height: 1.15; }
.tb-accom-panel-snippet { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--tb-dryglass); line-height: 1.8; margin: 0 0 22px; }
.tb-accom-panel-cta { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--tb-tungsten); text-decoration: none; letter-spacing: .06em; text-transform: uppercase; }
.tb-accom-panel-cta:hover { color: var(--tb-goldenhour); }

/* ── Homepage Dining 50/50 ── */
.tb-hp-dining { background: var(--tb-shadow); padding: clamp(48px, 7vw, 80px) var(--pad-x); }
.tb-hp-dining-hdr { max-width: var(--max-w); margin: 0 auto clamp(28px, 4vw, 44px); text-align: center; }
.tb-hp-dining-h2 { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 38px); font-weight: 300; color: var(--tb-parchment); margin: 0 0 10px; }
.tb-hp-dining-h2 em { font-style: italic; color: var(--tb-latesun); }
.tb-hp-dining-body { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--tb-dryglass); max-width: 560px; margin: 0 auto; line-height: 1.75; }
.tb-hp-dining-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: var(--max-w); margin: 0 auto; }
@media(max-width:768px) { .tb-hp-dining-pair { grid-template-columns: 1fr; } }
.tb-hp-dining-card { background: var(--tb-bark); border-radius: var(--r-card); overflow: hidden; transition: transform var(--t-fast); }
.tb-hp-dining-card:hover { transform: translateY(-2px); }
.tb-hp-dining-img { aspect-ratio: 16/10; background-size: cover; background-position: center; }
.tb-hp-dining-copy { padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 32px); }
.tb-hp-dining-h3 { font-family: var(--font-display); font-size: clamp(22px, 2.8vw, 28px); font-weight: 300; color: var(--tb-parchment); margin: 0 0 10px; }
.tb-hp-dining-h3 em { font-style: italic; color: var(--tb-latesun); }
.tb-hp-dining-copy p { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--tb-dryglass); line-height: 1.75; margin: 0 0 16px; }
.tb-hp-dining-link { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--tb-tungsten); text-decoration: none; letter-spacing: .06em; text-transform: uppercase; }
.tb-hp-dining-link:hover { color: var(--tb-goldenhour); }

/* ── Homepage Activities ── */
.tb-hp-act { background: var(--tb-nightfall); padding: clamp(48px, 7vw, 80px) var(--pad-x); }
.tb-hp-act-hdr { max-width: var(--max-w); margin: 0 auto clamp(24px, 4vw, 40px); text-align: center; }
.tb-hp-act-h2 { font-family: var(--font-display); font-size: clamp(26px, 3.5vw, 38px); font-weight: 300; color: var(--tb-parchment); margin: 0 0 10px; }
.tb-hp-act-h2 em { font-style: italic; color: var(--tb-latesun); }
.tb-hp-act-body { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--tb-dryglass); max-width: 480px; margin: 0 auto; line-height: 1.75; }
.tb-hp-act-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 920px; margin: 0 auto; }
@media(max-width:640px) { .tb-hp-act-grid { grid-template-columns: 1fr; } }

/* v3.0.8 — 4-up variant for the homepage Activities block */
.tb-hp-act-grid--4up { grid-template-columns: repeat(4, 1fr); max-width: 1240px; gap: 18px; }
@media(max-width:1024px) { .tb-hp-act-grid--4up { grid-template-columns: 1fr 1fr; } }
@media(max-width:640px)  { .tb-hp-act-grid--4up { grid-template-columns: 1fr; } }
.tb-hp-act-card { background: var(--tb-shadow); border-radius: var(--r-card); overflow: hidden; text-decoration: none; transition: transform var(--t-fast); }
.tb-hp-act-card:hover { transform: translateY(-2px); }
.tb-hp-act-img { aspect-ratio: 16/9; background-size: cover; background-position: center; }
.tb-hp-act-card-body { padding: 20px 24px; }
.tb-hp-act-card-body h3 { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--tb-parchment); margin: 0 0 6px; }
.tb-hp-act-card-body p { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--tb-dryglass); line-height: 1.6; margin: 0 0 10px; }
.tb-hp-act-cta { font-family: var(--font-body); font-size: 11px; font-weight: 400; color: var(--tb-tungsten); letter-spacing: .04em; text-transform: uppercase; }


/* =============================================================
   INTERIOR PAGES — v2.10.0
   Shared components for About, Contact, FAQs sub-pages.
   ============================================================= */

/* ── Parchment Overview ── */
/* v3.6.2 — punch list About #4: parchment "Rooted in Community" overview
   tightened ~30%. Was 48-80, now 36-56. */
.tb-int-overview { background: var(--tb-parchment); padding: clamp(36px, 5vw, 56px) var(--pad-x); }
.tb-int-ov-inner { max-width: 680px; margin: 0 auto; }
.tb-int-ov-h2 { font-family: var(--font-display); font-size: clamp(24px, 3.5vw, 34px); font-weight: 300; line-height: 1.15; color: var(--tb-bark); margin: 0 0 4px; }
.tb-int-ov-h2 em { font-style: italic; color: var(--tb-tungsten); }
.tb-int-ov-rule { width: 36px; height: 1px; background: var(--tb-dryglass); margin: 16px 0 20px; }
.tb-int-overview p { font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 1.8; color: var(--tb-earth); margin: 0 0 16px; }
.tb-int-overview p:last-child { margin-bottom: 0; }

/* ── Quote Block (Our Story) ── */
/* v3.6.2 — punch list About #4: quote band tightened ~28%. */
.tb-int-quote { background: var(--tb-bark); padding: clamp(28px, 4vw, 52px) var(--pad-x); text-align: center; }
.tb-int-quote-text { font-family: var(--font-display); font-size: clamp(20px, 2.8vw, 30px); font-weight: 300; font-style: italic; color: var(--tb-parchment); line-height: 1.5; max-width: 740px; margin: 0 auto; border: none; padding: 0; }

/* ── Long-form Story ── */
/* v3.6.2 — punch list About #4: long-form story padding trimmed slightly. */
.tb-int-story { background: var(--tb-nightfall); padding: clamp(36px, 5vw, 60px) var(--pad-x); }
.tb-int-story-inner { max-width: 680px; margin: 0 auto; }
.tb-int-story-h2 { font-family: var(--font-display); font-size: clamp(28px, 4vw, 40px); font-weight: 300; color: var(--tb-parchment); margin: 0 0 32px; }
.tb-int-story-h2 em { font-style: italic; color: var(--tb-latesun); }
.tb-int-ch { font-family: var(--font-display); font-size: clamp(20px, 2.5vw, 26px); font-weight: 300; color: var(--tb-latesun); margin: clamp(36px, 5vw, 56px) 0 14px; }
.tb-int-story p { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--tb-parchment); line-height: 1.85; margin: 0 0 16px; }
.tb-int-imgbreak { margin: clamp(32px, 4vw, 48px) calc(-1 * var(--pad-x)); }
.tb-int-imgbreak img { width: 100%; height: auto; display: block; }
.tb-int-caption { display: block; font-family: var(--font-body); font-size: 11px; font-weight: 300; color: var(--tb-canvas); letter-spacing: .06em; text-align: center; padding: 10px var(--pad-x) 0; }

/* ── Family Timeline (v3.1.2) — milestone strip below the long-form story ── */
.tb-int-timeline {
    background: var(--tb-parchment);
    padding: clamp(56px, 7vw, 96px) var(--pad-x);
}
/* v3.7.7 — Matt punch list (About): when the timeline directly follows
   the hub-intro band on /about/ → /our-story/, the two share the same
   parchment background and now read as a single continuous block. The
   "Four Decades on the Coast" eyebrow + "From Dream to Place" H2 were
   dropped from the timeline markup, so the only thing creating a seam
   between the two was the timeline's own top padding stacking on the
   hub-intro's bottom padding. Override here to ~12-20px so the
   timeline track sits right under the hub-intro body without feeling
   like a fresh section. The original padding value is retained on
   pages where the timeline doesn't follow a hub-intro (none currently,
   but kept for forward compatibility). */
.tb-hub-intro + .tb-int-timeline,
.tb-int-timeline--merged {
    padding-top: clamp(12px, 1.4vw, 20px);
}
.tb-int-timeline-inner {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}
.tb-int-timeline-inner .tb-eyebrow {
    margin: 0 auto 14px;
    color: var(--tb-deadwood);
}
.tb-int-timeline-h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.1;
    color: var(--tb-nightfall);
    margin: 0 0 clamp(40px, 5vw, 64px);
}
.tb-int-timeline-h2 em { font-style: italic; color: var(--tb-ember); }

/* Track — horizontal 5-up on desktop */
.tb-int-timeline-track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(20px, 2.4vw, 36px);
    text-align: left;
    position: relative;
}
.tb-int-timeline-track::before {
    /* hairline running across the top of the row, behind year markers */
    content: '';
    position: absolute;
    top: 16px;
    left: 0; right: 0;
    height: 1px;
    background: rgba(92,84,64,.22);
    z-index: 0;
}
.tb-int-timeline-item {
    position: relative;
    padding-top: 8px;
    z-index: 1;
}
.tb-int-timeline-item::before {
    /* Tick mark on the hairline above each year */
    content: '';
    position: absolute;
    top: 12px;
    left: 0;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--tb-ember);
    box-shadow: 0 0 0 4px var(--tb-parchment);
}
.tb-int-timeline-year {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(22px, 2.4vw, 30px);
    color: var(--tb-ember);
    margin: 14px 0 8px;
    line-height: 1;
}
.tb-int-timeline-rule {
    width: 24px;
    height: 1px;
    background: var(--tb-tungsten);
    margin: 0 0 10px;
}
.tb-int-timeline-label {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.6;
    color: var(--tb-earth);
    letter-spacing: .005em;
}
@media (max-width: 1024px) {
    .tb-int-timeline-track {
        grid-template-columns: 1fr 1fr;
        gap: clamp(28px, 3vw, 40px);
    }
    .tb-int-timeline-track::before { display: none; }
    .tb-int-timeline-item::before { display: none; }
    .tb-int-timeline-year { font-size: 26px; }
}
@media (max-width: 600px) {
    .tb-int-timeline-track { grid-template-columns: 1fr; gap: 24px; }
    .tb-int-timeline-item { padding: 16px 0 0; border-top: 1px solid rgba(92,84,64,.18); }
    .tb-int-timeline-item:first-child { border-top: none; padding-top: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v4.0.18 — About-page redesign modules (May 11, 2026)
   ─────────────────────────────────────────────────────────────────────────
   New modules for the /about/ page archival-photo redesign. Most are scoped
   either via a parent class (.tb-int-story descendants) or a modifier
   (.tb-hub-intro--with-photo, .tb-int-quote--with-photo, .page-hero--compact)
   so other pages remain unaffected.

   Per-module widths:
     --w-prose         680px   text column, readability
     --w-visual        1280px  most image modules (split, hub-intro)
     --w-visual-wide   1440px  pair + build strip — needs more breathing room
   ═══════════════════════════════════════════════════════════════════════════ */

/* Design tokens used by the about-page redesign. Defined here (not :root)
   so they're scoped to about-page modules only. */
.tb-int-story,
.tb-int-quote--with-photo,
.tb-hub-intro--with-photo,
.tb-int-wideband {
    --w-prose: 680px;
    --w-visual: 1280px;
    --w-visual-wide: 1440px;
}


/* ═══════════════════════════════════════════════════════════
   v4.3.18 — MENU LIGHTBOX
   Image-format sample menus (WebP/JPG/PNG) open in an inline
   overlay instead of a new tab. PDF menus still open in a new
   tab. JS in assets/js/menu-lightbox.js.
   ═══════════════════════════════════════════════════════════ */
.tb-mlb {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10, 12, 8, 0.86);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(24px, 4vw, 56px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;
}
.tb-mlb.is-open {
    opacity: 1;
    pointer-events: auto;
}

.tb-mlb-close {
    position: absolute;
    top: clamp(16px, 2vw, 24px);
    right: clamp(16px, 2vw, 24px);
    background: none;
    border: none;
    color: var(--tb-parchment);
    font-size: 36px;
    line-height: 1;
    padding: 0;
    width: 48px;
    height: 48px;
    cursor: pointer;
    text-shadow: 0 1px 8px rgba(0,0,0,0.5);
    transition: color 0.18s ease, transform 0.18s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tb-mlb-close:hover {
    color: #fff;
    transform: scale(1.08);
}

.tb-mlb-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    max-width: 100%;
    max-height: 100%;
}

.tb-mlb-img {
    display: block;
    max-width: min(960px, 96vw);
    max-height: calc(100vh - 140px);
    width: auto;
    height: auto;
    border-radius: var(--r-card);
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
    background: var(--tb-parchment);
}

.tb-mlb-caption {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(245,238,216,0.8);
    text-align: center;
    margin: 0;
}

@media (max-width: 640px) {
    .tb-mlb { padding: 16px; }
    .tb-mlb-img { max-height: calc(100vh - 100px); }
    .tb-mlb-caption { font-size: 10px; }
}

/* ── 1. Compact hero modifier — shorter for /about/ so the hub-intro band is visible above the fold ── */
.page-hero--compact {
    height: 56vh;
    min-height: 440px;
}
.page-hero--compact .hero-content {
    padding-bottom: clamp(48px, 6vh, 72px);
}

/* ── 2. Hub-intro with paper-card photo — about-page only ── */
.tb-hub-intro--with-photo .tb-hub-intro-inner {
    max-width: var(--w-visual);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
    text-align: left;
}
.tb-hub-intro--with-photo .tb-eyebrow { margin-left: 0; margin-right: 0; }
.tb-hub-intro--with-photo .tb-hub-intro-h2 { text-align: left; }
.tb-hub-intro--with-photo .tb-hub-intro-body { font-size: 18px; line-height: 1.7; }
.tb-hub-intro--with-photo .tb-hub-intro-rule { margin-top: 24px; }
.hub-intro-photo {
    position: relative;
    padding: 12px 12px 18px;
    background: var(--tb-cream);
    border: 1px solid rgba(92,84,64,0.18);
    box-shadow: 0 16px 40px rgba(42,41,39,0.16), 0 2px 6px rgba(42,41,39,0.08);
    transform: rotate(-1.5deg);
    max-width: 380px;
    margin: 0 auto;
}
.hub-intro-photo img { width: 100%; height: auto; display: block; }
.hub-intro-photo .caption {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16px;
    color: var(--tb-deadwood);
    text-align: center;
    margin-top: 12px;
    padding: 0 6px;
}
@media (max-width: 900px) {
    .tb-hub-intro--with-photo .tb-hub-intro-inner { grid-template-columns: 1fr; gap: 32px; }
    .hub-intro-photo { transform: none; }
}

/* ── 3. Timeline 6-up — adjust grid + bump label/year size for legibility ── */
.tb-int-timeline-track { grid-template-columns: repeat(6, 1fr); }
.tb-int-timeline-year { font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 10px; }
.tb-int-timeline-label { font-size: 14px; line-height: 1.55; }
@media (max-width: 1024px) {
    .tb-int-timeline-track { grid-template-columns: 1fr 1fr; gap: clamp(28px, 3vw, 40px); }
    .tb-int-timeline-year { font-size: 28px; }
}
@media (max-width: 600px) {
    .tb-int-timeline-track { grid-template-columns: 1fr; gap: 24px; }
}

/* ── 4. Story-section enhancements — prose helper + bumped typography ── */
.tb-int-story { padding: clamp(48px, 6vw, 84px) var(--pad-x); }
.tb-int-story--continued { padding-top: clamp(48px, 6vw, 84px); padding-bottom: clamp(48px, 6vw, 84px); }
.tb-int-prose {
    max-width: var(--w-prose);
    margin-left: auto;
    margin-right: auto;
}
.tb-int-story-h2 { font-size: clamp(32px, 4.4vw, 46px); margin-bottom: 36px; text-align: center; }
.tb-int-ch { font-size: clamp(24px, 2.8vw, 32px); margin-top: clamp(36px, 5vw, 56px); margin-bottom: 16px; }
.tb-int-ch--lead { margin-top: 0; }
.tb-int-story p,
.tb-int-prose p,
.tb-int-split-content p {
    font-family: var(--font-body);
    font-size: 17px;
    color: var(--tb-parchment);
    line-height: 1.75;
    margin: 0 0 18px;
}

/* ── 5. Image break — contained, intimate scale (replaces old full-bleed pattern) ── */
.tb-int-imgbreak {
    max-width: 800px;
    margin: clamp(48px, 5vw, 72px) auto;
    padding: 0 var(--pad-x);
}
.tb-int-imgbreak img {
    width: 100%; height: auto; display: block;
    border-radius: var(--r-card);
    max-height: 54vh;
    object-fit: cover;
}
/* Caption — typography bump + warm-gold color so it pops on the dark band */
.tb-int-caption {
    display: block;
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 400;
    color: var(--tb-latesun);
    letter-spacing: .08em;
    text-align: center;
    padding: 16px var(--pad-x) 0;
}

/* ── 6. 50/50 Split — paper-card photo + chapter content ── */
.tb-int-split {
    max-width: var(--w-visual);
    margin: clamp(56px, 6vw, 80px) auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
}
.tb-int-split--reverse { grid-template-columns: 1.2fr 1fr; }
.tb-int-split--reverse .tb-int-split-photo { order: 2; }
.tb-int-split--reverse .tb-int-split-content { order: 1; }
.tb-int-split-photo {
    padding: 14px 14px 22px;
    background: var(--tb-cream);
    border: 1px solid rgba(245,238,216,0.16);
    box-shadow: 0 20px 50px rgba(0,0,0,0.42), 0 3px 10px rgba(0,0,0,0.20);
    transform: rotate(-1.2deg);
    max-width: 400px;
    margin: 0 auto;
}
.tb-int-split--reverse .tb-int-split-photo { transform: rotate(1.2deg); }
.tb-int-split-photo--small { max-width: 300px; }
.tb-int-split-photo img { width: 100%; height: auto; display: block; }
.tb-int-split-photo .caption {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16px;
    color: var(--tb-deadwood);
    text-align: center;
    margin-top: 12px;
}
.tb-int-split-content { max-width: var(--w-prose); }
.tb-int-split-content .tb-int-ch:first-child { margin-top: 0; }
@media (max-width: 900px) {
    .tb-int-split,
    .tb-int-split--reverse { grid-template-columns: 1fr; gap: 32px; }
    .tb-int-split--reverse .tb-int-split-photo { order: 1; }
    .tb-int-split--reverse .tb-int-split-content { order: 2; }
    .tb-int-split-photo { transform: none; }
}

/* ── 7. 2-up pair — documentary moment (e.g., 1999 clearing + 2000 survey) ── */
.tb-int-pair {
    max-width: var(--w-visual-wide);
    margin: clamp(56px, 6vw, 80px) auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(20px, 2.5vw, 32px);
}
.tb-int-pair-item { margin: 0; }
.tb-int-pair-item img {
    width: 100%; height: auto; display: block;
    border-radius: var(--r-card);
    aspect-ratio: 3/2;
    object-fit: cover;
}
.tb-int-pair-item .tb-int-caption { padding: 14px 8px 0; }
@media (max-width: 900px) {
    .tb-int-pair { grid-template-columns: 1fr; gap: 28px; }
}

/* ── 8. 3-up build strip — "By Many Hands" construction sequence ── */
.tb-int-buildstrip {
    max-width: var(--w-visual-wide);
    margin: clamp(56px, 6vw, 80px) auto;
}
.tb-int-buildstrip-label {
    text-align: center;
    margin-bottom: clamp(28px, 3vw, 40px);
}
.tb-int-buildstrip-label .tb-eyebrow {
    color: var(--tb-goldenhour);
    margin-bottom: 8px;
}
.tb-int-buildstrip-label .title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 300;
    color: var(--tb-latesun);
}
.tb-int-buildstrip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: clamp(16px, 2vw, 24px);
}
.tb-int-buildstrip-item { margin: 0; }
.tb-int-buildstrip-item img {
    width: 100%; height: auto; display: block;
    border-radius: var(--r-card);
    aspect-ratio: 4/3;
    object-fit: cover;
}
.tb-int-buildstrip-item .year-pill {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.10em;
    color: var(--tb-nightfall);
    background: var(--tb-goldenhour);
    padding: 4px 12px;
    border-radius: 3px;
    margin: 16px 0 8px;
}
.tb-int-buildstrip-item .caption {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 17px;
    color: var(--tb-latesun);
    line-height: 1.4;
    padding: 0 4px;
}
@media (max-width: 900px) {
    .tb-int-buildstrip-grid { grid-template-columns: 1fr; gap: 28px; }
}

/* ── 9. Full-bleed wide band — family-portrait anchor moment ── */
.tb-int-wideband {
    margin: 0;
    width: 100%;
    background: var(--tb-nightfall);
}
.tb-int-wideband img {
    width: 100%; height: auto; display: block;
    max-height: 64vh;
    object-fit: cover;
    object-position: center 35%;
}
.tb-int-wideband .tb-int-caption {
    padding: 18px var(--pad-x) 8px;
}

/* ── 10. Closing quote with paired photo — bark background, paper-card photo on the left ── */
.tb-int-quote--with-photo .tb-int-quote-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.8fr;
    gap: clamp(40px, 5vw, 72px);
    align-items: center;
    text-align: left;
}
.tb-int-quote--with-photo .tb-int-quote-text {
    font-size: clamp(24px, 3vw, 36px);
    text-align: left;
    margin: 0;
}
.tb-int-quote--with-photo .tb-int-quote-text::before {
    content: "";
    display: block;
    width: 48px; height: 2px;
    background: var(--tb-latesun);
    margin-bottom: 24px;
}
.tb-int-quote-photo {
    padding: 12px 12px 20px;
    background: var(--tb-cream);
    border: 1px solid rgba(245,238,216,0.18);
    box-shadow: 0 18px 44px rgba(0,0,0,0.40);
    transform: rotate(1.6deg);
}
.tb-int-quote-photo img { width: 100%; height: auto; display: block; }
.tb-int-quote-photo .caption {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15px;
    color: var(--tb-deadwood);
    text-align: center;
    margin-top: 10px;
}
@media (max-width: 900px) {
    .tb-int-quote--with-photo .tb-int-quote-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
    .tb-int-quote--with-photo .tb-int-quote-text { text-align: center; }
    .tb-int-quote--with-photo .tb-int-quote-text::before { margin-left: auto; margin-right: auto; }
    .tb-int-quote-photo { transform: none; max-width: 360px; margin: 0 auto; }
}

/* ── End v4.0.18 about-page modules ─────────────────────────────────────── */

/* ── Impact Blocks ── */
/* v3.6.2 — punch list About #4: impact section padding tightened. */
.tb-int-impact { background: var(--tb-nightfall); padding: clamp(28px, 4vw, 52px) var(--pad-x); }
.tb-int-impact--env { background: var(--tb-shadow); }
.tb-int-impact-inner { max-width: 920px; margin: 0 auto; }
.tb-int-impact-h2 { font-family: var(--font-display); font-size: clamp(24px, 3.5vw, 34px); font-weight: 300; color: var(--tb-parchment); margin: 0 0 12px; }
.tb-int-impact-h2 em { font-style: italic; color: var(--tb-latesun); }
.tb-int-impact-intro { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--tb-dryglass); line-height: 1.75; margin: 0 0 28px; max-width: 680px; }
.tb-int-impact-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tb-int-impact-grid--2col { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.tb-int-impact-block { padding: 20px 24px; background: var(--tb-bark); border-radius: var(--r-card); border-left: 3px solid var(--tb-tungsten); }
.tb-int-impact-block h3 { font-family: var(--font-display); font-size: 18px; font-weight: 400; color: var(--tb-parchment); margin: 0 0 10px; }
.tb-int-impact-block p { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--tb-dryglass); line-height: 1.65; margin: 0 0 8px; }
.tb-int-impact-block ul { list-style: none; padding: 0; margin: 0; }
.tb-int-impact-block li { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--tb-parchment); line-height: 1.6; padding: 5px 0 5px 16px; position: relative; }
.tb-int-impact-block li::before { content: ''; position: absolute; left: 0; top: 12px; width: 6px; height: 1px; background: var(--tb-tungsten); }

/* ── CTA Cards ── */
/* v3.6.2 — punch list About #4: bottom CTA-cards block tightened. */
.tb-int-cta-cards { background: var(--tb-shadow); padding: clamp(28px, 4vw, 48px) var(--pad-x); text-align: center; }
.tb-int-cta-h2 { font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); font-weight: 300; color: var(--tb-parchment); margin: 0 0 10px; }
.tb-int-cta-h2 em { font-style: italic; color: var(--tb-latesun); }
.tb-int-cta-body { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--tb-dryglass); margin: 0 0 24px; }
.tb-int-cta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; max-width: 700px; margin: 0 auto; text-align: left; }
/* v3.7.4 — single-card variant for the events page (NEW1: Event
   Inquiries removed). Centers a lone card so it doesn't span the
   full 700px width and read as orphaned. */
.tb-int-cta-grid--single { grid-template-columns: minmax(280px, 360px); justify-content: center; }
.tb-int-cta-card { padding: 24px; background: var(--tb-bark); border-radius: var(--r-card); text-decoration: none; transition: transform var(--t-fast); }
.tb-int-cta-card:hover { transform: translateY(-2px); }
.tb-int-cta-card h3 { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--tb-parchment); margin: 0 0 8px; }
.tb-int-cta-card p { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--tb-dryglass); line-height: 1.6; margin: 0 0 12px; }
.tb-int-cta-link { font-family: var(--font-body); font-size: 11px; font-weight: 400; color: var(--tb-tungsten); letter-spacing: .04em; text-transform: uppercase; }

/* ─── BACK LINK (accommodation / activity detail) ─── */
.tb-int-back-link-wrap { padding: clamp(24px, 3vw, 40px) var(--pad-x); text-align: center; background: var(--tb-shadow); }
.tb-int-back-link { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--tb-dryglass); text-decoration: none; transition: color var(--t-fast); }
.tb-int-back-link:hover { color: var(--tb-tungsten); }

/* ── Press Grid ── */
.tb-int-press { background: var(--tb-nightfall); padding: clamp(40px, 6vw, 72px) var(--pad-x); }
.tb-int-press-inner { max-width: 920px; margin: 0 auto; }
.tb-int-press-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.tb-int-press-card { background: var(--tb-shadow); border-radius: var(--r-card); overflow: hidden; text-decoration: none; transition: transform var(--t-fast); }
.tb-int-press-card:hover { transform: translateY(-2px); }
.tb-int-press-img { aspect-ratio: 16/9; background-size: cover; background-position: center; }
.tb-int-press-body { padding: 18px 20px; }
.tb-int-press-source { font-family: var(--font-body); font-size: 10px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; color: var(--tb-tungsten); margin: 0 0 6px; }
.tb-int-press-title { font-family: var(--font-display); font-size: 18px; font-weight: 400; color: var(--tb-parchment); margin: 0 0 6px; line-height: 1.3; }
.tb-int-press-excerpt { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--tb-dryglass); line-height: 1.6; margin: 0 0 10px; }
.tb-int-press-link { font-family: var(--font-body); font-size: 11px; color: var(--tb-tungsten); letter-spacing: .04em; text-transform: uppercase; }
.tb-int-press-empty { font-family: var(--font-body); font-size: 14px; color: var(--tb-canvas); text-align: center; padding: 48px 0; }

/* ── Contact ── */
.tb-int-contact { background: var(--tb-nightfall); padding: clamp(48px, 6vw, 72px) var(--pad-x); }
.tb-int-contact-inner { max-width: 920px; margin: 0 auto; }
.tb-int-contact-h2 { font-family: var(--font-display); font-size: clamp(24px, 3.5vw, 34px); font-weight: 300; color: var(--tb-parchment); margin: 0 0 24px; }
.tb-int-contact-h2 em { font-style: italic; color: var(--tb-latesun); }
.tb-int-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media(max-width:640px) { .tb-int-contact-grid { grid-template-columns: 1fr; } }
.tb-int-contact-card { padding: 24px; background: var(--tb-bark); border-radius: var(--r-card); border-left: 3px solid var(--tb-tungsten); }
.tb-int-contact-card h3 { font-family: var(--font-display); font-size: 18px; font-weight: 400; color: var(--tb-parchment); margin: 0 0 12px; }
.tb-int-contact-phone { display: block; font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--tb-latesun); text-decoration: none; margin: 0 0 4px; }
.tb-int-contact-email { display: block; font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--tb-tungsten); text-decoration: none; }

/* ── Location ── */
/* ── Reach Us cards: signposting line ── */
/* v2.11.1: one-line "best for…" copy under each card heading to help
   users self-select the right channel without inventing hours. */
.tb-int-contact-best {
    font-family: var(--font-body);
    font-size: 12px; font-weight: 300;
    color: var(--tb-canvas);
    line-height: 1.55;
    margin: 0 0 14px;
    font-style: italic;
}

/* ── Location ── */
/* DEPRECATED v2.11.1: replaced by the richer .tb-int-find 50/50 section
   below. Styles kept as a safety net in case other pages reference them. */
.tb-int-location { background: var(--tb-shadow); padding: clamp(36px, 5vw, 56px) var(--pad-x); }
.tb-int-location-inner { max-width: 920px; margin: 0 auto; }
.tb-int-location-h2 { font-family: var(--font-display); font-size: 22px; font-weight: 300; color: var(--tb-parchment); margin: 0 0 12px; }
.tb-int-location-h2 em { font-style: italic; color: var(--tb-latesun); }
.tb-int-address { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--tb-parchment); font-style: normal; line-height: 1.6; margin: 0 0 8px; }
.tb-int-location-note { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--tb-canvas); margin: 0 0 12px; }
.tb-int-location-link { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--tb-tungsten); text-decoration: none; letter-spacing: .04em; text-transform: uppercase; }

/* ── Find Us — 50/50 split: drive guidance + embedded map ── */
/* v2.11.1: replaces the sparse text-only Location block. Left column
   gives the visitor everything they need to actually arrive (address,
   drive times from north and south, landmark cue, GPS warning, internal
   links to the full directions page and resort map). Right column shows
   a Google Maps embed so the location reads at a glance. */
.tb-int-find {
    background: var(--tb-shadow);
    padding: clamp(48px, 6vw, 80px) var(--pad-x);
    /* v2.11.2: anchor target offset so the sticky header doesn't clip
       the eyebrow when users click the hero "Find Us" CTA. */
    scroll-margin-top: clamp(64px, 8vh, 96px);
}
.tb-int-find-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: clamp(36px, 5vw, 64px);
    align-items: stretch;
}
.tb-int-find-text {
    max-width: 540px;
    align-self: center;
}
.tb-int-find-ey {
    font-family: var(--font-body);
    font-size: 10px; font-weight: 300;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--tb-canvas);
    margin: 0 0 10px;
    display: flex; align-items: center; gap: 12px;
}
.tb-int-find-ey::before {
    content: ''; display: block;
    width: 22px; height: .5px;
    background: var(--tb-canvas);
    flex-shrink: 0;
}
.tb-int-find-h2 {
    font-family: var(--font-display);
    font-size: clamp(28px, 3.5vw, 38px);
    font-weight: 300; line-height: 1.1;
    color: var(--tb-parchment);
    margin: 0;
}
.tb-int-find-h2 em { font-style: italic; color: var(--tb-latesun); }
.tb-int-find-rule {
    width: 36px; height: 1px;
    background: var(--tb-dryglass);
    margin: 18px 0 22px;
}
.tb-int-find-address {
    font-family: var(--font-body);
    font-size: 16px; font-weight: 400;
    color: var(--tb-parchment);
    font-style: normal; line-height: 1.55;
    margin: 0 0 24px;
}
.tb-int-find-drives {
    margin: 0 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 24px;
}
.tb-int-find-drive dt {
    font-family: var(--font-body);
    font-size: 10px; font-weight: 400;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--tb-tungsten);
    margin: 0 0 6px;
}
.tb-int-find-drive dd {
    font-family: var(--font-body);
    font-size: 13px; font-weight: 300;
    color: var(--tb-parchment);
    line-height: 1.55;
    margin: 0;
}
.tb-int-find-note {
    font-family: var(--font-body);
    font-size: 13px; font-weight: 300;
    color: var(--tb-canvas);
    line-height: 1.7;
    margin: 0 0 24px;
    font-style: italic;
    max-width: 480px;
}
.tb-int-find-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
}
.tb-int-find-link {
    font-family: var(--font-body);
    font-size: 11px; font-weight: 400;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--tb-tungsten);
    text-decoration: none;
    border-bottom:var(--b-hair) solid rgba(196, 136, 48, .38);
    padding-bottom: 3px;
    transition: color var(--t-fast);
}
.tb-int-find-link:hover { color: var(--tb-goldenhour); }
.tb-int-find-link span { margin-left: 4px; }

.tb-int-find-map {
    position: relative;
    min-height: 360px;
    border-radius: var(--r-img);
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(0, 0, 0, .35);
    /* Warm bark base color sits behind the iframe in case it loads slow. */
    background: var(--tb-bark);
}
/* v2.11.2: "Parchment Vintage" map treatment — selected from a 3-style
   comparison. Sepia + warm hue-rotate pulls Google's blue-and-green out
   of the way; a low-opacity parchment overlay (multiply blend) marries
   the result to the Treebones palette. Reads like a hand-tinted
   travel-map illustration instead of a generic Google Maps embed. */
.tb-int-find-map iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
    filter: sepia(.55) saturate(.85) contrast(1.05) brightness(.96) hue-rotate(-6deg);
}
.tb-int-find-map::after {
    content: '';
    position: absolute; inset: 0;
    background: rgba(245, 238, 216, .12);
    mix-blend-mode: multiply;
    pointer-events: none;
}

@media (max-width: 1024px) {
    .tb-int-find-inner {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .tb-int-find-text { max-width: none; }
    .tb-int-find-drives { grid-template-columns: 1fr; gap: 14px; }
    .tb-int-find-map { min-height: 320px; }
}

/* ── Contact FAQ wrapper ── */
.tb-int-faq { background: var(--tb-shadow); padding: clamp(36px, 5vw, 56px) var(--pad-x); }
.tb-int-faq-inner { max-width: 920px; margin: 0 auto; }

/* ── Directions ── */
.tb-int-directions { background: var(--tb-nightfall); padding: clamp(48px, 6vw, 72px) var(--pad-x); }
.tb-int-dir-inner { max-width: 920px; margin: 0 auto; }
.tb-int-dir-h2 { font-family: var(--font-display); font-size: clamp(24px, 3.5vw, 34px); font-weight: 300; color: var(--tb-parchment); margin: 0 0 24px; }
.tb-int-dir-h2 em { font-style: italic; color: var(--tb-latesun); }
.tb-int-dir-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media(max-width:768px) { .tb-int-dir-grid { grid-template-columns: 1fr; } }
.tb-int-dir-col h3 { font-family: var(--font-display); font-size: 18px; font-weight: 400; color: var(--tb-latesun); margin: 0 0 10px; }
.tb-int-dir-col address { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--tb-parchment); font-style: normal; line-height: 1.6; }
.tb-int-dir-col p { font-family: var(--font-body); font-size: 14px; font-weight: 400; color: var(--tb-parchment); line-height: 1.75; }
.tb-int-dir-note { font-family: var(--font-body); font-size: 12px; font-weight: 400; color: var(--tb-canvas); margin: 8px 0 0; font-style: italic; }
.tb-int-dir-footer { font-family: var(--font-body); font-size: 13px; font-weight: 400; color: var(--tb-canvas); text-align: center; margin: 24px 0 0; font-style: italic; }

/* ── Resort Map ── */
/* v3.6.9 — Resort Map section reverted to a light/parchment surface to
   match the .tb-int-overview band above it. Prior version (--tb-nightfall
   bg + sepia/saturate/contrast/brightness/hue-rotate filter on the
   image + a multiply overlay on the inner box) was tinting the
   hand-drawn map a brown wash and making the section feel like a
   forced editorial "vintage" treatment that didn't match the rest of
   the page. The map asset is already a clean white-paper hand-drawing;
   we trust it. Box-shadow softened from .35 → .14 since it now sits
   on parchment (was on nightfall, where stronger shadow read as paper-
   on-bg). Caption moved to the parent section in the PHP so it sits
   on the section bg directly — no longer inside the shadowed inner
   box, no longer under the (now-removed) multiply overlay. */
.tb-int-map { background: var(--tb-parchment); padding: clamp(28px, 4vw, 56px) var(--pad-x) clamp(20px, 3vw, 40px); }
.tb-int-map-inner {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: 0 8px 28px rgba(46, 41, 39, .14),
                0 2px 6px rgba(46, 41, 39, .08);
}
.tb-int-map-img { width: 100%; height: auto; display: block; border-radius: var(--r-card); }
.tb-int-map-placeholder { background: var(--tb-bark); border-radius: var(--r-img); padding: 80px 24px; text-align: center; font-family: var(--font-body); font-size: 14px; color: var(--tb-canvas); }
.tb-int-map-caption {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 400;
    color: var(--tb-trail);
    text-align: center;
    margin: 18px auto 0;
    max-width: 1100px;
    letter-spacing: .12em;
    text-transform: uppercase;
}


/* =============================================================
   ABOUT SECTION — v1.7.0 (pillars-led layout)
   "Family Built. Rooted in Big Sur."
   1) Eyebrow → 2) Pillars (4-up lead variant) → 3) Photo full width
   → 4) 2-col post-photo: H2/body left, CTA stack right.
   Section clamped to ~1140px so parchment frames it instead of swallowing.
   ============================================================= */

.tb-about-section {
    background: var(--tb-parchment);
    padding: clamp(56px,7vw,104px) var(--pad-x);
    position: relative;
}
.tb-about-section::before,
.tb-about-section::after {
    content: '';
    position: absolute; left: var(--pad-x); right: var(--pad-x);
    height: .5px;
    background: rgba(92,84,64,.22);
}
.tb-about-section::before { top: 0; }
.tb-about-section::after  { bottom: 0; }

.tb-about-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: block;
}

/* ── Lead eyebrow centered (v1.7.0) ── */
.tb-about-eyebrow-lead {
    text-align: center;
    margin: 0 auto clamp(20px, 2.5vw, 32px);
    color: var(--tb-deadwood);
}

/* ── Photo full-width variant (v3.1.3 — final: native aspect, centered) ── */
/* Earlier 16/7 and 7/5 both cropped faces. Stopping the crop fight by
   matching the composite's native 6/5 aspect exactly — every family
   member AND the signature are always in frame, no cover/position math.
   Constrained max-width so the section doesn't get dominated by the
   tall photo on wide displays. */
.tb-about-figure--full {
    aspect-ratio: 6 / 5;
    width: min(100%, 760px);
    margin: clamp(28px, 3.5vw, 44px) auto clamp(36px, 4.5vw, 56px);
}
.tb-about-figure--full .tb-about-photo {
    background-position: center center;
}
@media (max-width: 640px) {
    .tb-about-figure--full { width: 100%; }
}

/* ── Photo (shared) ── */
.tb-about-figure {
    position: relative;
    margin: 0;
    width: 100%;
    aspect-ratio: 6 / 5;
    border-radius: var(--r-img);
    overflow: hidden;
    background: var(--tb-bark);
    display: block;
    text-decoration: none;
    color: inherit;
}
.tb-about-figure:hover .tb-about-photo { transform: scale(1.02); }

/* v3.2.2: signature + caption overlay rendered in code (not baked into
   the photo). Sits bottom-left over a soft gradient scrim for legibility.
   Replaces the earlier "screenshot-of-drawn-proposal" approach. */
.tb-about-figure::after {
    content: "";
    position: absolute;
    inset: 50% 0 0 0;
    background: linear-gradient(180deg, transparent 0%, rgba(20,16,12,.0) 35%, rgba(20,16,12,.55) 100%);
    pointer-events: none;
    z-index: 1;
}
.tb-about-figure-sig {
    position: absolute;
    bottom: clamp(16px, 2.4vw, 28px);
    left: clamp(20px, 2.8vw, 36px);
    z-index: 3;
    isolation: isolate;
    pointer-events: none;
    color: var(--tb-parchment);
    transform: translateZ(0);
}
.tb-about-figure-sig-name {
    font-family: var(--font-display, 'Cormorant Garamond', serif);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(28px, 3.4vw, 44px);
    line-height: 1;
    letter-spacing: -0.005em;
    color: var(--tb-parchment);
    text-shadow: 0 1px 12px rgba(10,8,6,.55), 0 1px 3px rgba(10,8,6,.4);
    margin-bottom: 6px;
}
.tb-about-figure-sig-meta {
    font-family: var(--font-body, 'Jost', sans-serif);
    font-weight: 400;
    font-size: 9px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--tb-latesun);
    text-shadow: 0 1px 8px rgba(10,8,6,.7);
    opacity: .92;
}
@media (max-width: 640px) {
    .tb-about-figure-sig-name { font-size: clamp(24px, 7vw, 32px); }
    .tb-about-figure-sig-meta { font-size: 8px; letter-spacing: .22em; }
}
.tb-about-photo {
    position: absolute; inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    transform: scale(1.01);
    transition: transform .8s var(--ease-smooth);
}

/* ── Side caption column ── */
.tb-about-side {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: clamp(12px, 2vw, 28px);
}
.tb-about-side .tb-rule { margin: 18px 0; }

.tb-about-h2 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(32px, 4.4vw, 54px);
    line-height: 1.05;
    letter-spacing: -.005em;
    color: var(--tb-nightfall);
    margin: 0;
}
.tb-about-h2 em {
    font-style: italic;
    color: var(--tb-ember);
}

/* Lede sits in the side column under the headline; tuned for narrower measure */
.tb-about-side .tb-about-lede {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: clamp(17px, 1.35vw, 20px);
    line-height: 1.5;
    color: var(--tb-earth);
    letter-spacing: .005em;
    margin: 0;
    max-width: none;
}
/* v3.7.20 — separate stacked .tb-about-lede paragraphs visually so the
   "More than two decades later..." line reads as a distinct beat from
   the opening "What started as a dream..." sentence. The base rule sets
   margin: 0 (no top margin into the hero/heading); this adjacent-sibling
   rule only fires between two consecutive ledes. Matches the signoff's
   top-margin scale for visual rhythm. */
.tb-about-side .tb-about-lede + .tb-about-lede {
    margin-top: clamp(14px, 1.5vw, 20px);
}

/* ── Body grid: flow (left) + pillars stack (right) ── */
.tb-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: clamp(36px, 5vw, 72px);
    align-items: start;
}
@media (max-width: 1024px) {
    .tb-about-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Post-photo grid: text on left, CTA aside on right (v1.7.0) ── */
.tb-about-grid--postphoto {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
}
@media (max-width: 1024px) {
    .tb-about-grid--postphoto { grid-template-columns: 1fr; gap: 28px; }
}

/* ── CTA aside (right column post-photo) ──
   v3.1.3: align-self center so the aside sits vertically centered
   against the body copy column instead of pinning to the top with
   a tall dead-parchment zone below it. Sticky removed; alignment
   does the same job at rest without the JS-feeling scroll behavior. */
.tb-about-cta-stack {
    background: rgba(168,149,110,.08);
    border:var(--b-hair) solid rgba(92,84,64,.18);
    border-radius: var(--r-card);
    padding: clamp(20px, 2.5vw, 32px);
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-self: center;
}
@media (max-width: 1024px) {
    .tb-about-cta-stack { align-self: auto; }
}
.tb-about-cta-eyebrow {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 10px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--tb-deadwood);
    margin: 0;
}
.tb-about-cta-pitch {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.55;
    color: var(--tb-earth);
    margin: 0;
}

.tb-about-flow {
    max-width: 58ch;
    display: flex;
    flex-direction: column;
}

.tb-about-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: .015em;
    color: var(--tb-earth);
    margin: 0 0 18px;
}

/* ── Value pillars (default = vertical stack on right) ── */
.tb-about-pillars {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
.tb-about-pillar {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: var(--b-hair) solid rgba(92,84,64,.18);
}
.tb-about-pillar:first-child { padding-top: 4px; }
.tb-about-pillar:last-child  { border-bottom: none; padding-bottom: 4px; }
@media (max-width: 1024px) {
    .tb-about-pillars:not(.tb-about-pillars--lead) {
        margin-top: 8px;
        padding-top: 16px;
        border-top: var(--b-hair) solid rgba(92,84,64,.25);
    }
    .tb-about-pillars:not(.tb-about-pillars--lead) .tb-about-pillar:first-child { padding-top: 16px; }
}

/* ── Pillars 2×2 variant (v3.2.0 — punch list) — compact grid for the
       right-column placement on the homepage About block. No numbering. ── */
.tb-about-pillars--2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(14px, 1.6vw, 20px) clamp(20px, 2.4vw, 32px);
    margin-top: clamp(20px, 2.5vw, 28px);
    padding-top: clamp(18px, 2vw, 26px);
    border-top: var(--b-hair) solid rgba(92,84,64,.22);
}
.tb-about-pillars--2x2 .tb-about-pillar {
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    gap: 4px;
    border-bottom: none;
}
.tb-about-pillars--2x2 .tb-about-pillar:first-child,
.tb-about-pillars--2x2 .tb-about-pillar:last-child { padding: 0; }
.tb-about-pillars--2x2 .tb-about-pillar-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 12px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tb-nightfall);
    margin: 0;
}
.tb-about-pillars--2x2 .tb-about-pillar-note {
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.55;
    color: var(--tb-earth);
}
@media (max-width: 640px) {
    .tb-about-pillars--2x2 { grid-template-columns: 1fr; gap: 12px; }
}

/* ── Signoff line (v3.2.0) — italic close to the brief lede above ── */
.tb-about-signoff {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.6;
    color: var(--tb-earth);
    margin: clamp(14px, 1.5vw, 20px) 0 clamp(18px, 2vw, 24px);
}
.tb-about-signoff em { font-style: italic; color: var(--tb-deadwood); }

/* ── Pillars LEAD variant (v1.7.0) — 4-up across desktop, bigger numbers/titles,
       used when pillars are the section opener instead of the closer ── */
.tb-about-pillars--lead {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(20px, 2.5vw, 36px);
    padding-top: clamp(8px, 1.2vw, 16px);
    padding-bottom: clamp(8px, 1.2vw, 16px);
    border-top: var(--b-hair) solid rgba(92,84,64,.22);
    border-bottom: var(--b-hair) solid rgba(92,84,64,.22);
}
.tb-about-pillars--lead .tb-about-pillar {
    border-bottom: none;
    padding: clamp(16px, 1.8vw, 24px) 0;
    flex-direction: column;
    gap: 10px;
}
.tb-about-pillars--lead .tb-about-pillar-num {
    font-size: clamp(28px, 3vw, 38px);
    color: var(--tb-ember);
}
.tb-about-pillars--lead .tb-about-pillar-title {
    font-size: clamp(14px, 1.1vw, 16px);
    letter-spacing: .12em;
}
.tb-about-pillars--lead .tb-about-pillar-note {
    font-size: clamp(13px, 1vw, 14px);
    line-height: 1.6;
    color: var(--tb-earth);
}
@media (max-width: 1024px) {
    .tb-about-pillars--lead { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
    .tb-about-pillars--lead {
        grid-template-columns: 1fr;
        gap: 6px;
    }
    .tb-about-pillars--lead .tb-about-pillar {
        flex-direction: row;
        align-items: flex-start;
        padding: 14px 0;
        border-bottom: var(--b-hair) solid rgba(92,84,64,.14);
    }
    .tb-about-pillars--lead .tb-about-pillar:last-child { border-bottom: none; }
    .tb-about-pillars--lead .tb-about-pillar-num {
        font-size: 24px;
        min-width: 36px;
    }
}

.tb-about-pillar-num {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: 24px;
    line-height: 1;
    color: var(--tb-tungsten);
    flex-shrink: 0;
    padding-top: 2px;
    min-width: 32px;
}
.tb-about-pillar-body { flex: 1; }
.tb-about-pillar-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 13px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--tb-nightfall);
    margin: 0 0 6px;
    line-height: 1.15;
}
.tb-about-pillar-note {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 13px;
    line-height: 1.55;
    color: var(--tb-deadwood);
    letter-spacing: .01em;
}

/* ── Read Our Full Story link (end of body flow) ── */
.tb-about-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--tb-nightfall);
    text-decoration: none;
    padding-bottom: 6px;
    border-bottom: var(--b-hair) solid var(--tb-tungsten);
    align-self: flex-start;
    /* v3.2.3: bumped bottom margin so the snippet pillars below aren't
       crowding the underlined link (was tight per client review). */
    margin: 18px 0 clamp(20px, 2.4vw, 32px);
    transition: gap .25s ease, color .25s ease, border-color .25s ease;
}
.tb-about-link:hover {
    gap: 18px;
    color: var(--tb-ember);
    border-bottom-color: var(--tb-ember);
}
.tb-about-link-arr {
    font-size: 14px;
    line-height: 1;
    transition: transform .25s ease;
}
.tb-about-link:hover .tb-about-link-arr { transform: translateX(2px); }

/* ── Mobile tweak: photo aspect on small screens ── */
@media (max-width: 640px) {
    .tb-about-figure { aspect-ratio: 5 / 4; }
    .tb-about-mark-sig-img { width: 100px; }
    .tb-about-mark-est { font-size: 9px; letter-spacing: .25em; }
}


/* =============================================================
   HOMEPAGE TEASERS — v2.6.0
   Stay / Dine / Activities editorial previews.
   Dark section, 3-column card grid. Each card is a link to its
   hub page. Adds keyword-rich body content for SEO.
   ============================================================= */
.hp-teasers {
    background: var(--tb-shadow);
    padding: clamp(48px, 7vw, 80px) var(--pad-x);
}
.hp-teasers-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: rgba(168,149,110,.1);
}
.hp-teaser {
    display: flex;
    flex-direction: column;
    background: var(--tb-shadow);
    text-decoration: none;
    color: inherit;
    overflow: hidden;
    transition: background var(--t-medium) ease;
}
.hp-teaser:hover { background: rgba(245,238,216,.03); }
.hp-teaser-img {
    width: 100%;
    aspect-ratio: 16/9;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1.01);
    transition: transform .7s var(--ease-smooth);
}
.hp-teaser:hover .hp-teaser-img { transform: scale(1.04); }
.hp-teaser-body {
    padding: clamp(20px, 2.5vw, 32px);
    flex: 1;
    display: flex;
    flex-direction: column;
}
.hp-teaser-eyebrow {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 9px;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--tb-dryglass);
    margin-bottom: 10px;
}
.hp-teaser-h3 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(22px, 2.2vw, 30px);
    line-height: 1.15;
    color: var(--tb-parchment);
    margin: 0 0 14px;
}
.hp-teaser-h3 em {
    font-style: italic;
    color: var(--tb-goldenhour);
}
.hp-teaser-text {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.9;
    letter-spacing: .015em;
    color: rgba(245,238,216,.7);
    margin: 0 0 auto;
    padding-bottom: 20px;
}
.hp-teaser-cta {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--tb-dryglass);
    transition: color var(--t-fast);
}
.hp-teaser:hover .hp-teaser-cta { color: var(--tb-parchment); }

/* Responsive: stack on tablet/mobile */
@media (max-width: 1024px) {
    .hp-teasers-inner { grid-template-columns: 1fr; gap: 1px; }
    .hp-teaser { flex-direction: row; }
    .hp-teaser-img { width: 40%; aspect-ratio: 3/4; flex-shrink: 0; }
    .hp-teaser-body { width: 60%; }
}
@media (max-width: 640px) {
    .hp-teaser { flex-direction: column; }
    .hp-teaser-img { width: 100%; aspect-ratio: 16/9; }
    .hp-teaser-body { width: 100%; }
}


/* =============================================================
   ACTIVITIES SECTION — v1.6.0
   "Relax, Restore, and Reconnect."
   Dark bg. 4-card offset grid w/ editorial italic titles.
   ============================================================= */

.tb-activ-section {
    background: var(--tb-shadow);
    padding: clamp(64px,8vw,112px) 0 clamp(56px,7vw,96px);
    position: relative;
}

/* ── Section header ── */
.tb-activ-hdr {
    padding: 0 var(--pad-x) clamp(40px,5vw,64px);
    border-bottom:var(--b-hair) solid rgba(196,168,122,.18);
    margin-bottom: clamp(40px,5vw,64px);
}
.tb-activ-hdr-in {
    max-width: var(--max-w); margin: 0 auto;
    display: grid; grid-template-columns: 1fr 1fr;
    gap: clamp(40px,6vw,80px);
    align-items: end;
}
@media (max-width: 1024px) {
    .tb-activ-hdr-in { grid-template-columns: 1fr; gap: 18px; }
}

/* v1.6.4 — Right-anchor override removed since duotone is now
   gradient-only (no photo to leave left-side breathing room for).
   Header now uses the default 1fr 1fr split from .tb-activ-hdr-in. */

.tb-activ-ey {
    font-family: var(--font-body); font-size: 9px;
    letter-spacing: .38em; text-transform: uppercase;
    color: var(--tb-canvas);
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 16px;
}
.tb-activ-ey::before {
    content: ''; width: 22px; height: .5px;
    background: var(--tb-canvas); flex-shrink: 0;
}
.tb-activ-h2 {
    font-family: var(--font-display); font-weight: 300;
    font-size: clamp(34px, 4.8vw, 56px);
    line-height: 1.02; letter-spacing: -.005em;
    color: var(--tb-parchment);
    margin: 0;
}
.tb-activ-h2 em { font-style: italic; color: var(--tb-latesun); }

.tb-activ-intro {
    font-family: var(--font-body); font-weight: 400;
    font-size: 15px; line-height: 1.8;
    color: var(--tb-dryglass);
    letter-spacing: .025em;
    max-width: 520px; margin: 0;
    align-self: end;
}

/* ── Grid wrap & grid ── */
.tb-activ-grid-wrap {
    padding: 0 var(--pad-x);
}
/* v3.7.4 — grid bumped from 3 → 4 columns to accommodate the new
   Retreats card (NEW9). Tablet breakpoint already collapses to 2x2,
   which is now also the natural "balanced" layout for 4 cards.
   Mobile stays single-column. */
.tb-activ-grid {
    max-width: var(--max-w); margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(20px, 2.5vw, 36px) clamp(16px, 2vw, 28px);
    align-items: start;
}
@media (max-width: 1024px) {
    .tb-activ-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
    .tb-ac--up, .tb-ac--down { transform: none !important; }
}
@media (max-width: 640px) {
    .tb-activ-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ── Individual card ── */
.tb-ac {
    display: flex; flex-direction: column;
    background: transparent;
}
.tb-ac--up   { transform: translateY(-28px); }
.tb-ac--down { transform: translateY(28px); }

/* Photo block */
.tb-ac-photo-link {
    display: block;
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: var(--r-img);
    background: var(--tb-nightfall);
    text-decoration: none;
}
.tb-ac-photo {
    position: absolute; inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1.02);
    transition: transform .9s cubic-bezier(.2,.6,.2,1);
}
.tb-ac-photo-link:hover .tb-ac-photo { transform: scale(1.08); }
.tb-ac-scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(42,41,39,.15) 0%, rgba(42,41,39,0) 45%, rgba(42,41,39,.68) 100%);
    pointer-events: none;
}
.tb-ac-title {
    position: absolute;
    left: 20px; right: 20px; bottom: 20px;
    display: flex; flex-direction: column;
    color: var(--tb-parchment);
    pointer-events: none;
    font-family: var(--font-display);
    font-weight: 300;
    line-height: .95;
    letter-spacing: -.005em;
}
.tb-ac-title-a {
    font-size: clamp(26px, 2.6vw, 34px);
    font-style: normal;
}
.tb-ac-title-b {
    font-size: clamp(26px, 2.6vw, 34px);
    font-style: italic;
    color: var(--tb-latesun);
    margin-top: 2px;
}

/* Body block */
.tb-ac-body {
    padding: 18px 2px 0;
    display: flex; flex-direction: column;
}
.tb-ac-ey {
    font-family: var(--font-body); font-weight: 400;
    font-size: 9px; letter-spacing: .32em;
    text-transform: uppercase;
    color: var(--tb-canvas);
    margin-bottom: 10px;
}
.tb-ac-desc {
    font-family: var(--font-body); font-weight: 400;
    font-size: 13.5px; line-height: 1.65;
    color: var(--tb-dryglass);
    letter-spacing: .02em;
    margin: 0 0 14px;
}
.tb-ac-pills {
    list-style: none; padding: 0; margin: 0 0 18px;
    display: flex; flex-wrap: wrap; gap: 6px;
}
.tb-ac-pill {
    font-family: var(--font-body); font-weight: 400;
    font-size: 10px; letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tb-latesun);
    padding: 5px 10px;
    border:var(--b-hair) solid rgba(196,168,122,.32);
    border-radius: var(--r-pill);
    background: rgba(196,168,122,.04);
}
.tb-ac-link {
    font-family: var(--font-body); font-weight: 500;
    font-size: 10px; letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--tb-parchment);
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 10px;
    padding-bottom: 6px;
    border-bottom:var(--b-hair) solid rgba(196,168,122,.4);
    align-self: flex-start;
    transition: gap .25s ease, color .25s ease, border-color .25s ease;
}
.tb-ac-link:hover {
    gap: 16px;
    color: var(--tb-latesun);
    border-bottom-color: var(--tb-latesun);
}
.tb-ac-link-arr {
    font-size: 13px; line-height: 1;
    transition: transform .25s ease;
}
.tb-ac-link:hover .tb-ac-link-arr { transform: translateX(2px); }

/* ── Section footer ── */
.tb-activ-foot {
    max-width: var(--max-w); margin: 0 auto;
    padding: clamp(40px,5vw,72px) var(--pad-x) 0;
}
.tb-activ-foot-note {
    font-family: var(--font-body); font-weight: 400;
    font-size: 12px; line-height: 1.7;
    color: var(--tb-trail);
    letter-spacing: .04em;
    text-align: center;
    max-width: 720px; margin: 0 auto;
    border-top:var(--b-hair) solid rgba(196,168,122,.18);
    padding-top: clamp(28px,3vw,40px);
}


/* =============================================================
   DARK SECTION TEXTURE — v1.6.4
   Gradient-only duotone (no photo backdrop). Warm amber shadow
   grade + horizontal vignette on top of the section's base bg.
   Sections that opt in get a cinematic atmospheric wash without
   competing imagery.
   ============================================================= */

.tb-dark-texture {
    position: relative;
    isolation: isolate;
}

/* Single overlay layer — color gradient only, no photo */
.tb-dark-texture::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(100deg,
            rgba(42,41,39,.15) 0%,
            rgba(42,41,39,.35) 45%,
            rgba(42,41,39,.55) 85%,
            rgba(42,41,39,.65) 100%),
        linear-gradient(180deg,
            rgba(196,120,40,.12) 0%,
            rgba(20,18,15,.45) 100%);
    z-index: 0;
    pointer-events: none;
}

/* Ensure all direct children sit above the overlay */
.tb-dark-texture > * { position: relative; z-index: 1; }

/* Mobile: vignette pivot rotates to vertical so content (which stacks
   vertically on mobile) stays readable. */
@media (max-width: 1024px) {
    .tb-dark-texture::before {
        background:
            linear-gradient(180deg,
                rgba(42,41,39,.25) 0%,
                rgba(42,41,39,.45) 50%,
                rgba(42,41,39,.55) 100%),
            linear-gradient(180deg,
                rgba(196,120,40,.08) 0%,
                rgba(20,18,15,.35) 100%);
    }
}

/* ── Centered layout variant (CTA banner) ──
   Symmetric radial vignette for centered content — darker at edges,
   lighter in middle where the centered content sits. */
.tb-dark-texture.is-centered::before {
    background:
        radial-gradient(ellipse at center,
            rgba(42,41,39,.10) 0%,
            rgba(42,41,39,.35) 55%,
            rgba(42,41,39,.60) 100%),
        linear-gradient(180deg,
            rgba(196,120,40,.10) 0%,
            rgba(20,18,15,.35) 100%);
}

/* ═════════════════════════════════════════════════════════
   ACCOMMODATION PAGES (v2.0.0)
   Shared layout for all 7 /stay/* pages.
   Block order: Hero → Breadcrumb → Overview → Cards →
                What-to-Expect tabs → Education (optional) → FAQ
   ═════════════════════════════════════════════════════════ */

/* ─── OVERVIEW ─── */
.tb-accom-overview {
    background: var(--tb-parchment);
    padding: clamp(80px, 10vw, 140px) var(--pad-x);
}
.tb-accom-overview-inner {
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(56px, 7vw, 96px);
}
.tb-accom-ov-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}
.tb-accom-ov-h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(28px, 3.5vw, 44px);
    line-height: 1.1;
    letter-spacing: .01em;
    color: var(--tb-shadow);
    margin: 0 0 8px;
    max-width: 680px;
}
.tb-accom-ov-body p {
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.7;
    color: var(--tb-floor);
    margin: 0 0 14px;
    max-width: 680px;
}
.tb-accom-ov-body p:last-child { margin-bottom: 0; }

/* ─── CARDS ─── */
.tb-accom-cards {
    background: var(--tb-parchment);
    padding: clamp(80px, 10vw, 140px) var(--pad-x);
    border-top:var(--b-hair) solid rgba(92,84,64,.12);
}
.tb-accom-cards-inner {
    max-width: 1280px;
    margin: 0 auto;
}
.tb-accom-cards-hdr {
    text-align: center;
    margin-bottom: clamp(48px, 6vw, 72px);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}
.tb-accom-cards-h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(28px, 3.5vw, 44px);
    line-height: 1.1;
    letter-spacing: .01em;
    color: var(--tb-shadow);
    margin: 0 0 18px;
}
.tb-accom-cards-intro {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--tb-earth);
    margin: 0;
}
/* 3-col grid for 3 cards, 2×2 for 4 cards */
.tb-accom-cards-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.tb-accom-cards--count-3 .tb-accom-cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.tb-accom-cards--count-4 .tb-accom-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
}
@media (min-width: 1024px) {
    .tb-accom-cards--count-4 .tb-accom-cards-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        max-width: none;
    }
}
@media (max-width: 768px) {
    .tb-accom-cards-grid,
    .tb-accom-cards--count-3 .tb-accom-cards-grid,
    .tb-accom-cards--count-4 .tb-accom-cards-grid {
        grid-template-columns: 1fr;
    }
}
.tb-accom-card {
    background: var(--tb-cream);
    padding: 32px 28px;
    border-radius: var(--r-card);
    border:var(--b-hair) solid rgba(92,84,64,.18);
    transition: transform var(--t-medium) ease, box-shadow var(--t-medium) ease;
}
.tb-accom-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 50px -25px rgba(50,48,46,.3);
}
.tb-accom-card-h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 22px;
    line-height: 1.2;
    color: var(--tb-shadow);
    margin: 0 0 12px;
}
.tb-accom-card-body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.65;
    color: var(--tb-earth);
    margin: 0;
}

/* ─── WHAT TO EXPECT (tabs) ─── */
.tb-accom-expect {
    background: var(--tb-shadow);
    padding: clamp(80px, 10vw, 140px) var(--pad-x);
    color: var(--tb-parchment);
}
.tb-accom-expect-inner {
    max-width: 980px;
    margin: 0 auto;
}
.tb-accom-expect-hdr {
    text-align: center;
    margin-bottom: clamp(40px, 5vw, 56px);
}
.tb-accom-expect-h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(28px, 3.5vw, 44px);
    line-height: 1.1;
    color: var(--tb-parchment);
    margin: 0 0 16px;
}
.tb-accom-expect-intro {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--tb-dryglass);
    max-width: 640px;
    margin: 0 auto;
}
.tb-accom-tablist {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 40px;
    border-bottom:var(--b-hair) solid rgba(212,188,144,.2);
    flex-wrap: wrap;
}
.tb-accom-tab {
    background: transparent;
    border: none;
    padding: 14px 28px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 11px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--tb-dryglass);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--t-fast) ease, border-color var(--t-fast) ease;
}
.tb-accom-tab:hover { color: var(--tb-parchment); }
.tb-accom-tab.is-active {
    color: var(--tb-latesun);
    border-bottom-color: var(--tb-latesun);
}
.tb-accom-tabpanel { display: none; }
.tb-accom-tabpanel.is-active { display: block; }
.tb-accom-tabpanel-h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 26px;
    color: var(--tb-parchment);
    margin: 0 0 24px;
    text-align: center;
}
.tb-accom-tabpanel-list {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 640px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px 32px;
}
.tb-accom-tabpanel-list li {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.6;
    color: var(--tb-parchment);
    padding-left: 18px;
    position: relative;
}
.tb-accom-tabpanel-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--tb-latesun);
}

/* ─── EDUCATION ─── */
.tb-accom-education {
    background: var(--tb-parchment);
    padding: clamp(72px, 9vw, 120px) var(--pad-x);
    border-top:var(--b-hair) solid rgba(92,84,64,.1);
    border-bottom:var(--b-hair) solid rgba(92,84,64,.1);
}
.tb-accom-education-inner {
    max-width: 780px;
    margin: 0 auto;
    text-align: center;
}
.tb-accom-education-h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1.15;
    color: var(--tb-shadow);
    margin: 0 0 20px;
}
.tb-accom-education-body p {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;
    color: var(--tb-floor);
    margin: 0;
}

/* ─── FAQ ─── */
.tb-accom-faq {
    background: var(--tb-parchment);
    padding: clamp(80px, 10vw, 140px) var(--pad-x);
}
.tb-accom-faq-inner {
    max-width: 820px;
    margin: 0 auto;
}
.tb-accom-faq-hdr {
    text-align: center;
    margin-bottom: clamp(40px, 5vw, 56px);
}
.tb-accom-faq-h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(28px, 3.5vw, 44px);
    line-height: 1.1;
    color: var(--tb-shadow);
    margin: 0 0 16px;
}
.tb-accom-faq-intro {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--tb-earth);
    max-width: 640px;
    margin: 0 auto;
}
.tb-accom-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.tb-accom-faq-item {
    border-bottom:var(--b-hair) solid rgba(92,84,64,.18);
}
.tb-accom-faq-item:first-child {
    border-top:var(--b-hair) solid rgba(92,84,64,.18);
}
.tb-accom-faq-q {
    list-style: none;
    padding: 22px 8px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 17px;
    line-height: 1.4;
    color: var(--tb-shadow);
    transition: color var(--t-fast) ease;
}
.tb-accom-faq-q::-webkit-details-marker { display: none; }
.tb-accom-faq-q:hover { color: var(--tb-latesun); }
.tb-accom-faq-chevron {
    flex-shrink: 0;
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 24px;
    line-height: 1;
    color: var(--tb-latesun);
    transition: transform var(--t-medium) ease;
}
.tb-accom-faq-item[open] .tb-accom-faq-chevron {
    transform: rotate(45deg);
}
.tb-accom-faq-a {
    padding: 0 8px 24px;
}
.tb-accom-faq-a p {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.75;
    color: var(--tb-earth);
    margin: 0;
    max-width: 680px;
}

/* ─── HERO CTA button size ─── */
.accom-hero .hero-ctas {
    margin-top: 32px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.accom-hero .btn-lg {
    padding: 16px 34px;
    font-size: 12px;
    letter-spacing: .2em;
}

/* v4.0.3 — secondary CTA in accommodation hero (Order Flowers or Gift
   Baskets, added in v3.7.25) was inheriting .btn-lg's 16×34 box padding,
   which pushed its border-bottom 34px past the text on each side and
   16px below — read as a horizontal rule rather than a tertiary link.
   Strip the box padding so the underline hugs the text directly (4px
   below), shift to gold tone so it signals tertiary affordance vs. the
   primary's filled gold, and vertical-center it against the primary
   button so the pair reads as intentional. */
.accom-hero .hero-ctas .btn-ghost {
    padding: 0 0 4px 0;
    align-self: center;
    border-bottom: 1px solid rgba(196, 168, 122, .45);
    color: var(--tb-dryglass);
    transition: color var(--t-fast), border-color var(--t-fast);
}
.accom-hero .hero-ctas .btn-ghost:hover {
    color: var(--tb-parchment);
    border-bottom-color: var(--tb-goldenhour);
}


/* =============================================================
   v2.1.0 — ACCOMMODATION SNAPSHOT LAYOUT
   Two-tier template: premier (photo-rich) + simplified (photo-light).
   Both tiers share the .av3-snap overview block for cross-venue
   visual consistency. Premier adds photo cards + experience rows;
   simplified adds an amenity grid + explore-more cross-link grid.
   ============================================================= */

/* ═══════ SNAPSHOT OVERVIEW (both tiers) ═══════ */
/* v3.6.0 — punch list L1: padding tightened ~33% so accommodation pages
   feel less airy on desktop. Was 90-150px, now 64-100px. */
/* v3.7.26 — Full-bleed wide image band, optional per-accommodation slot.
   Sits between snapshot and overview when populated. Designed for
   landscape interior shots that need width to breathe. Optional caption
   overlay uses display-italic for an editorial feel. */
.av3-wide { position: relative; width: 100%; }
.av3-wide-photo {
    width: 100%;
    height: clamp(360px, 56vh, 620px);
    background-size: cover;
    background-repeat: no-repeat;
}
.av3-wide-caption {
    position: absolute;
    bottom: clamp(20px, 3vw, 40px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(16px, 1.6vw, 22px);
    line-height: 1.4;
    color: var(--tb-parchment);
    text-shadow: 0 1px 24px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.35);
    text-align: center;
    max-width: min(720px, 86%);
    padding: 0 16px;
    margin: 0;
}

.av3-snap{background:var(--tb-parchment);padding:clamp(64px,8vw,100px) clamp(24px,5vw,80px)}
.av3-snap-inner{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(48px,6vw,100px);max-width:1320px;margin:0 auto;align-items:center}
@media(max-width:1024px){.av3-snap-inner{grid-template-columns:1fr;gap:40px}}
.av3-figure{position:relative}
.av3-photo{aspect-ratio:4/5;background-size:cover;background-position:center;box-shadow:0 30px 80px -40px rgba(50,48,46,.35)}
.av3-mark{position:absolute;left:clamp(20px,3vw,36px);bottom:clamp(20px,3vw,36px);color:var(--tb-parchment);text-shadow:0 2px 14px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.45)}
.av3-mark-sig{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:clamp(22px,2.3vw,28px);line-height:1;margin-bottom:6px}
.av3-mark-est{font:400 10px/1.6 var(--font-body);letter-spacing:.24em;text-transform:uppercase;color:rgba(245,238,216,.88)}
.av3-copy{max-width:520px}
.av3-eyebrow{font:400 12px/1.75 var(--font-body);letter-spacing:.285em;text-transform:uppercase;color:var(--tb-trail);margin-bottom:18px;display:flex;align-items:center;gap:14px}
.av3-eyebrow::before{content:"";display:block;width:28px;height:1px;background:currentColor;opacity:.6}
.av3-h2{font:300 clamp(38px,4.4vw,60px)/1 var(--font-display);letter-spacing:-.01em;color:var(--tb-shadow);margin:0 0 24px}
.av3-h2 em{color:var(--tb-latesun);font-style:italic;font-weight:300}
.av3-rule{width:56px;height:1px;background:rgba(50,48,46,.3);margin:0 0 26px}
.av3-lede{font:400 italic 20px/1.5 var(--font-display);letter-spacing:.006em;color:var(--tb-earth);margin:0 0 22px}
.av3-body{font:400 15px/1.85 var(--font-body);letter-spacing:.02em;color:var(--tb-earth);margin:0 0 38px}
.av3-pillars{list-style:none;padding:0;margin:0 0 40px;display:grid;grid-template-columns:repeat(2,1fr);gap:28px 36px;border-top:1px solid rgba(50,48,46,.15);padding-top:32px}
@media(max-width:640px){.av3-pillars{grid-template-columns:1fr}}
.av3-pillar{display:flex;gap:18px;align-items:baseline}
.av3-pillar-num{font:300 italic 22px/1 var(--font-display);color:var(--tb-latesun);flex:0 0 auto;letter-spacing:.02em}
.av3-pillar-body{flex:1}
.av3-pillar-title{font:500 11px/1.4 var(--font-body);letter-spacing:.22em;text-transform:uppercase;color:var(--tb-shadow);margin-bottom:6px}
.av3-pillar-note{font:400 13px/1.55 var(--font-body);color:#6B6252}
.av3-link{display:inline-flex;align-items:center;gap:10px;font:400 11px/1 var(--font-body);letter-spacing:.24em;text-transform:uppercase;color:var(--tb-shadow);text-decoration:none;padding-top:14px;border-top:1px solid rgba(50,48,46,.25);transition:gap .25s ease}
.av3-link:hover{gap:16px}

/* ═══════ PHOTO CARDS (premier) ═══════ */
.av3-cards{background:var(--tb-parchment);padding:clamp(80px,10vw,130px) clamp(24px,5vw,80px)}
/* v3.6.0 — punch list L1: bottom margin trimmed. */
.av3-cards-hdr{text-align:center;max-width:640px;margin:0 auto clamp(32px,4vw,52px)}
.av3-cards-hdr .eyebrow{font:400 12px/1.2 var(--font-body);letter-spacing:.285em;text-transform:uppercase;color:var(--tb-trail);margin-bottom:14px}
.av3-cards-hdr h2{font:300 clamp(30px,3.5vw,44px)/1.1 var(--font-display);color:var(--tb-shadow);margin:0 0 16px}
.av3-cards-hdr p{font:400 15px/1.7 var(--font-body);color:var(--tb-earth);margin:0}
/* v3.7.0 — count-aware photo-cards grid. Default + .av3-cards-grid--4
   stays 2x2 (perfect for A-Tents 4-card layout). .av3-cards-grid--3
   switches to 3 columns × 1 row for the 3-card Yurts layout (Jenna
   feedback PH5: dropped redundant 4th card). The two variants share
   the same gap, max-width, and mobile collapse. */
.av3-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;max-width:1320px;margin:0 auto}
.av3-cards-grid--3{grid-template-columns:repeat(3,1fr)}
@media(max-width:1024px){.av3-cards-grid--3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.av3-cards-grid,.av3-cards-grid--3{grid-template-columns:1fr}}
.av3-card{position:relative;aspect-ratio:16/10;overflow:hidden;cursor:pointer;background:var(--tb-nightfall)}
.av3-card-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.av3-card:hover .av3-card-bg{transform:scale(1.05)}
.av3-card-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 45%,rgba(0,0,0,.4) 75%,rgba(0,0,0,.85) 100%)}
.av3-card-txt{position:absolute;left:0;right:0;bottom:0;padding:clamp(24px,3vw,36px);color:#fff}
.av3-card-txt h3{font:400 clamp(22px,2.2vw,28px)/1.15 var(--font-display);color:#fff;margin:0 0 8px}
.av3-card-txt p{font:400 14px/1.5 var(--font-body);color:rgba(255,255,255,.9);margin:0;max-width:420px}

/* ═══════ EXPERIENCE ROWS (premier) ═══════ */
/* v3.6.0 — punch list L1: padding tightened. */
.av3-exp{background:var(--tb-shadow);padding:clamp(64px,8vw,100px) 0;color:var(--tb-parchment)}
.av3-exp-hdr{text-align:center;max-width:640px;margin:0 auto clamp(60px,7vw,90px);padding:0 clamp(24px,5vw,80px)}
.av3-exp-hdr .eyebrow{font:400 12px/1.2 var(--font-body);letter-spacing:.285em;text-transform:uppercase;color:var(--tb-latesun);margin-bottom:14px}
.av3-exp-hdr h2{font:300 clamp(30px,3.5vw,44px)/1.1 var(--font-display);color:var(--tb-parchment);margin:0 0 16px}
.av3-exp-hdr p{font:400 15px/1.7 var(--font-body);color:var(--tb-dryglass);margin:0}
/* v3.6.0 — punch list B8: explicit cursor:default on rows and images.
   Earlier these were rendering with pointer cursor (browser default
   for some content slots), giving false 'clickable' affordance. */
.av3-exp-row{display:grid;grid-template-columns:1fr 1fr;gap:0;max-width:1320px;margin:0 auto clamp(2px,.3vw,6px);align-items:stretch;cursor:default}
.av3-exp-row.reverse .av3-exp-img{order:2}
/* v3.2.3: aspect-ratio scoped to mobile only. On desktop the photo
   stretches to match the content column height — prevents the long
   A-Tents amenity list from overflowing into the next row visually. */
.av3-exp-img{background-size:cover;background-position:center;min-height:100%;cursor:default}
@media(max-width:768px){.av3-exp-img{aspect-ratio:5/4;min-height:0}}
.av3-exp-content{padding:clamp(40px,6vw,80px) clamp(32px,5vw,72px);display:flex;flex-direction:column;justify-content:center}
.av3-exp-content .label{font:400 12px/1.2 var(--font-body);letter-spacing:.285em;text-transform:uppercase;color:var(--tb-latesun);margin-bottom:14px}
.av3-exp-content h3{font:300 clamp(24px,2.6vw,34px)/1.1 var(--font-display);color:var(--tb-parchment);margin:0 0 28px}
.av3-exp-content ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.av3-exp-content li{font:400 15px/1.55 var(--font-body);color:var(--tb-parchment);padding-left:20px;position:relative}
.av3-exp-content li::before{content:"";position:absolute;left:0;top:10px;width:6px;height:6px;border-radius:50%;background:var(--tb-latesun)}
@media(max-width:768px){
    .av3-exp-row,.av3-exp-row.reverse{grid-template-columns:1fr}
    .av3-exp-row.reverse .av3-exp-img{order:0}
    .av3-exp-img{aspect-ratio:4/3}
}

/* ═══════ AMENITY GRID (simplified) ═══════ */
/* v3.6.0 — punch list L1: padding tightened. */
.av3-amenities{background:var(--tb-shadow);padding:clamp(56px,7vw,90px) clamp(24px,5vw,80px)}
.av3-amenities-inner{max-width:1100px;margin:0 auto}
.av3-amenities-hdr{text-align:center;max-width:600px;margin:0 auto clamp(48px,6vw,72px)}
.av3-amenities-hdr .eyebrow{font:400 12px/1.2 var(--font-body);letter-spacing:.285em;text-transform:uppercase;color:var(--tb-latesun);margin-bottom:14px}
.av3-amenities-hdr h2{font:300 clamp(30px,3.5vw,44px)/1.1 var(--font-display);color:var(--tb-parchment);margin:0}
.av3-amenities-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid rgba(196,168,122,.2)}
@media(max-width:768px){.av3-amenities-grid{grid-template-columns:1fr}}
.av3-amenities-col{padding:clamp(32px,4vw,48px) clamp(24px,3vw,36px);border-right:1px solid rgba(196,168,122,.12)}
.av3-amenities-col:last-child{border-right:none}
@media(max-width:768px){.av3-amenities-col{border-right:none;border-bottom:1px solid rgba(196,168,122,.12)}.av3-amenities-col:last-child{border-bottom:none}}
.av3-amenities-col .label{font:400 12px/1.2 var(--font-body);letter-spacing:.285em;text-transform:uppercase;color:var(--tb-latesun);margin-bottom:20px}
.av3-amenities-col ul{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.av3-amenities-col li{font:400 14px/1.55 var(--font-body);color:rgba(245,238,216,.85);padding-left:18px;position:relative}
.av3-amenities-col li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--tb-latesun);opacity:.6}

/* ═══════ EXPLORE MORE STAYS (simplified — cross-link grid) ═══════ */
/* v3.6.0 — punch list L1: padding tightened. */
.av3-more{background:var(--tb-parchment);padding:clamp(56px,7vw,90px) clamp(24px,5vw,80px)}
.av3-more-hdr{text-align:center;max-width:600px;margin:0 auto clamp(40px,5vw,64px)}
.av3-more-hdr .eyebrow{font:400 12px/1.2 var(--font-body);letter-spacing:.285em;text-transform:uppercase;color:var(--tb-trail);margin-bottom:14px}
.av3-more-hdr h2{font:300 clamp(30px,3.5vw,44px)/1.1 var(--font-display);color:var(--tb-shadow);margin:0}
/* v3.6.8 — gap bumped 2px → clamp(10px,1.4vw,18px). The hairline 2px
   gap was reading as "broken / aliased" rather than as a deliberate
   grid; punch list flagged it as too tight. New gap matches the cadence
   used by the .tb-mosaic-row grid on the Stay hub. */
.av3-more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(10px,1.4vw,18px);max-width:1320px;margin:0 auto}
@media(max-width:1024px){.av3-more-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.av3-more-grid{grid-template-columns:1fr}}
/* v3.6.8 — added border-radius: var(--r-card) so cards match the
   rounded-edge design language used by every other card surface on
   the site (mosaic, dining, experience, bento). overflow: hidden was
   already in place so the photo + scrim clip cleanly to the radius. */
.av3-more-card{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--tb-nightfall);text-decoration:none;display:block;border-radius:var(--r-card)}
.av3-more-card-bg{position:absolute;inset:0;background-size:cover;background-position:center;transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.av3-more-card:hover .av3-more-card-bg{transform:scale(1.06)}
.av3-more-card-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(0,0,0,.7) 85%,rgba(0,0,0,.9) 100%)}
.av3-more-card-txt{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,2.5vw,28px);color:#fff}
.av3-more-card-txt h3{font:300 clamp(18px,1.8vw,22px)/1.15 var(--font-display);color:#fff;margin:0 0 6px}
.av3-more-card-txt p{font:400 12px/1.45 var(--font-body);color:rgba(255,255,255,.8);margin:0}
.av3-more-card-txt .arrow{font:400 11px/1 var(--font-body);letter-spacing:.2em;text-transform:uppercase;color:var(--tb-latesun);margin-top:10px;display:block}

/* ═══════════════════════════════════════════════════════════
   PRESS DIRECTORY v2.17.3
   ═══════════════════════════════════════════════════════════ */
/* v3.6.2 — punch list About #4: press directory padding tightened. */
.tb-press-dir {
    background: var(--tb-shadow);
    padding: clamp(36px,5vw,60px) var(--pad-x);
}
.tb-press-dir-inner {
    max-width: var(--max-w);
    margin: 0 auto;
}
.tb-press-dir-label {
    font-size: 11px; font-weight: 400;
    letter-spacing: 0.32em;
    color: var(--tb-canvas);
    text-transform: uppercase;
    margin-bottom: 32px;
    display: flex; align-items: center; gap: 16px;
}
.tb-press-dir-label::after {
    content: '';
    flex: 1; height: 1px;
    background: rgba(196,136,48,0.18);
}
.tb-press-row {
    display: grid;
    grid-template-columns: 180px 1fr auto;
    align-items: baseline;
    gap: 24px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(196,136,48,0.1);
    text-decoration: none;
    transition: background var(--t-fast);
}
.tb-press-row:first-of-type {
    border-top: 1px solid rgba(196,136,48,0.1);
}
.tb-press-row:hover {
    background: rgba(196,136,48,0.03);
}
.tb-press-pub {
    font-size: 11px; font-weight: 500;
    letter-spacing: 0.2em;
    color: var(--tb-tungsten);
    text-transform: uppercase;
}
.tb-press-title {
    font-family: var(--font-display);
    font-size: 20px; font-weight: 300;
    color: var(--tb-parchment);
    font-style: italic;
    line-height: 1.35;
    transition: color var(--t-fast);
}
.tb-press-row:hover .tb-press-title {
    color: var(--tb-goldenhour);
}
.tb-press-arrow {
    font-size: 14px;
    color: var(--tb-driftwood);
    transition: color var(--t-fast);
}
.tb-press-row:hover .tb-press-arrow {
    color: var(--tb-tungsten);
}
.tb-press-dir-spacer { height: 48px; }
.tb-press-dir-empty {
    font-size: 14px; font-weight: 300;
    color: var(--tb-driftwood);
    text-align: center;
    padding: 48px 0;
}
@media (max-width: 640px) {
    .tb-press-row {
        grid-template-columns: 1fr auto;
        gap: 8px;
    }
    .tb-press-pub {
        grid-column: 1 / -1;
        font-size: 9px;
        margin-bottom: -4px;
    }
    .tb-press-title { font-size: 17px; }
}

/* ═══════════════════════════════════════════════════════════════════
   PRINT STYLESHEET (v3.2.8)
   Treebones is a real-world destination — guests print directions,
   FAQ pages, menus. Without explicit print rules the dark hero photos
   waste a ton of ink and the sticky nav lands at the top of the
   printout. This block hides the heavy chrome, flattens to black on
   white, and ensures URLs are visible after links.
   =================================================================== */
@media print {
    /* Reset page surface to white + black for ink economy */
    *, *::before, *::after {
        background: transparent !important;
        color: #000 !important;
        text-shadow: none !important;
        box-shadow: none !important;
        filter: none !important;
    }

    body {
        font: 12pt/1.55 Georgia, "Cormorant Garamond", serif;
        background: #fff !important;
    }

    /* Hide site chrome that's not useful on paper */
    .site-header,
    .breadcrumb-bar,
    .scroll-hint,
    .slide-ui,
    .booking-overlay,
    .hero-ctas,
    .tb-fc-ctas,
    .tb-dc-ctas,
    .tb-mc-cta,
    .cta-banner,
    .tb-activ-events-bar,
    .tb-dining-walkin,
    .footer-stream,
    .footer-press-bar,
    .footer-social,
    .site-footer .footer-grid > .footer-col:nth-child(n+2) {
        display: none !important;
    }

    /* Hero photos are inkwasters — drop the imagery, keep the text */
    .page-hero,
    .page-hero::before,
    .page-hero::after,
    .page-hero .hero-grad,
    .page-hero .hero-tint,
    .page-hero-slide {
        background: none !important;
    }
    .page-hero {
        height: auto !important;
        min-height: 0 !important;
        padding: 0 0 12pt !important;
        border-bottom: 1pt solid #000;
    }
    .page-hero .hero-content {
        position: static !important;
        padding: 0 !important;
        max-width: none !important;
    }
    .hero-h1, .tb-h2, h1, h2, h3 {
        page-break-after: avoid;
    }
    .hero-h1 { font-size: 24pt !important; line-height: 1.15 !important; }
    h2 { font-size: 18pt !important; }
    h3 { font-size: 13pt !important; }

    /* Print URL after links so the address remains usable on paper */
    a[href^="http"]::after,
    a[href^="https"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #444 !important;
        font-weight: 400;
    }
    /* Don't clutter mailto/tel/anchor links with the href */
    a[href^="mailto"]::after,
    a[href^="tel"]::after,
    a[href^="#"]::after { content: ""; }

    /* Avoid orphan widows */
    p, blockquote, li { page-break-inside: avoid; }
    img { max-width: 100% !important; page-break-inside: avoid; }

    /* Ensure FAQ details are open in print */
    details { display: block !important; }
    details > summary { list-style: none !important; cursor: default; }
    details[open] > * { display: block !important; }
    details:not([open]) > *:not(summary) { display: block !important; }
}

/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE FAQ BLOCK — v3.7.4 (Jenna NEW10)
   Sits between Activities and the global CTA banner. Six high-
   frequency questions in a centered accordion. Reuses the global
   .faq-q / .faq-a / .faq-item styles defined at treebones.css:271 so
   the interaction model + visual rhythm match the /faqs/ page.
   ═══════════════════════════════════════════════════════════════ */
.tb-home-faq {
    background: var(--tb-parchment);
    padding: clamp(56px, 7vw, 90px) var(--pad-x);
}
.tb-home-faq-inner {
    max-width: 760px;
    margin: 0 auto;
}
.tb-home-faq-hdr {
    text-align: center;
    margin-bottom: clamp(28px, 3.5vw, 44px);
}
.tb-home-faq-h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.12;
    color: var(--tb-shadow);
    margin: 0 0 16px;
    letter-spacing: 0.01em;
}
.tb-home-faq-h2 em {
    font-style: italic;
    color: var(--tb-tungsten);
}
.tb-home-faq-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 15px;
    line-height: 1.7;
    color: var(--tb-earth);
    max-width: 540px;
    margin: 0 auto;
}
.tb-home-faq-link {
    color: var(--tb-tungsten);
    text-decoration: none;
    border-bottom: var(--b-hair) solid rgba(196,168,122,.45);
    transition: color var(--t-fast), border-color var(--t-fast);
}
.tb-home-faq-link:hover {
    color: var(--tb-goldenhour);
    border-color: var(--tb-goldenhour);
}
.tb-home-faq-list {
    /* The shared .faq-item border-top from treebones.css:271 paints
       a hairline separator between rows. Add a matching bottom
       border so the list feels enclosed. */
    border-bottom: var(--b-hair) solid rgba(168,149,110,.32);
}

/* ═══════════════════════════════════════════════════════════════
   PRESS PAGE — FEATURED STRIP (top of /about/press/) — v3.7.4 NEW4
   Mirrors the footer As-Featured-In marquee pattern from v3.6.5
   (translateX 0 → -50% over 36s on mobile, static row on desktop).
   Top 10 most recent press mentions render here as inline links to
   the specific article. The full list of every post lives below
   under "All Coverage".
   ═══════════════════════════════════════════════════════════════ */
.tb-press-featured {
    background: var(--tb-parchment);
    padding: clamp(28px, 4vw, 44px) var(--pad-x) clamp(20px, 2.5vw, 28px);
    border-bottom: var(--b-hair) solid rgba(168,149,110,.22);
}
.tb-press-featured-inner {
    max-width: var(--max-w);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
.tb-press-featured-label {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 10px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--tb-trail);
    white-space: nowrap;
}
.tb-press-featured-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex: 1;
    min-width: 0;
}
.tb-press-featured-track {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.tb-press-featured-pub {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: 16px;
    letter-spacing: .01em;
    color: var(--tb-shadow);
    text-decoration: none;
    transition: color var(--t-fast);
    white-space: nowrap;
}
.tb-press-featured-pub:hover { color: var(--tb-tungsten); }
.tb-press-featured-track a + a::before {
    content: "\00B7";
    margin-right: 10px;
    color: rgba(168,149,110,.45);
}
/* Desktop: hide the marquee clone (single static row). */
.tb-press-featured-track--clone { display: none; }

/* Mobile marquee — 10 publications scroll past at a slow,
   readable pace. translateX 0 → -50% (one full track-width).
   Same engine as the footer "As Featured In" strip. */
@media (max-width: 640px) {
    .tb-press-featured-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
    .tb-press-featured-strip {
        width: 100%;
        flex-wrap: nowrap;
        overflow: hidden;
    }
    .tb-press-featured-strip > .tb-press-featured-track,
    .tb-press-featured-strip > .tb-press-featured-track--clone {
        flex-wrap: nowrap;
        flex-shrink: 0;
    }
    .tb-press-featured-track--clone { display: inline-flex; }
    .tb-press-featured-strip {
        animation: tb-press-featured-marquee 36s linear infinite;
        will-change: transform;
    }
    .tb-press-featured-strip:hover,
    .tb-press-featured-strip:focus-within { animation-play-state: paused; }
    .tb-press-featured-track::after {
        content: "\00B7";
        color: rgba(168,149,110,.45);
        padding: 0 10px;
        flex-shrink: 0;
    }
}

@keyframes tb-press-featured-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .tb-press-featured-strip { animation: none; }
    .tb-press-featured-track--clone { display: none; }
    @media (max-width: 640px) {
        .tb-press-featured-strip { overflow: visible; flex-wrap: wrap; }
        .tb-press-featured-track { flex-wrap: wrap; }
    }
}


/* ═══════════════════════════════════════════════════════════
   SEND YOUR LOVE — service page (v3.7.22)
   Hero (shared .page-hero) + intro overview + 3-card product
   grid + closing CTA. Tokens reused: --tb-parchment / --tb-bark
   surfaces, --font-display / --font-body, --r-card radius.
   ═══════════════════════════════════════════════════════════ */

.tb-syl-intro {
    background: var(--tb-parchment);
    padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 48px) clamp(28px, 3vw, 40px);
}
.tb-syl-intro-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.tb-syl-eyebrow {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--tb-earth);
    margin-bottom: 14px;
}
.tb-syl-h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(32px, 4.5vw, 48px);
    color: var(--tb-nightfall);
    margin: 0 0 18px;
    letter-spacing: .02em;
    line-height: 1.1;
}
.tb-syl-h2 em {
    font-style: italic;
    color: var(--tb-tungsten);
}
.tb-syl-rule {
    width: 40px;
    height: 1px;
    background: var(--tb-tungsten);
    margin: 0 auto 24px;
}
.tb-syl-body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--tb-earth);
    margin: 0 0 14px;
}
.tb-syl-body:last-child { margin-bottom: 0; }
.tb-syl-body a {
    color: var(--tb-tungsten);
    border-bottom: 1px solid currentColor;
    text-decoration: none;
    transition: color var(--t-fast) ease;
}
.tb-syl-body a:hover { color: var(--tb-goldenhour); }
.tb-syl-body strong {
    color: var(--tb-nightfall);
    font-weight: 500;
}
/* v3.7.24 — emphasis modifier for the CTA paragraph (matches PDF source
   which bolds the whole "To place an order…" paragraph). 600 weight is
   the bold variant of Jost; pairs with --tb-nightfall to deepen contrast
   so the call-to-action lifts from the surrounding body copy. */
.tb-syl-body--strong {
    font-weight: 600;
    color: var(--tb-nightfall);
}

/* ── Offerings header (offerings H2 + rule, above the card grid) ── */
.tb-syl-products-header {
    max-width: 1200px;
    margin: 0 auto clamp(28px, 3vw, 40px);
    text-align: center;
}
.tb-syl-products-header .tb-syl-h2 { margin-bottom: 14px; }
.tb-syl-products-header .tb-syl-rule { margin-bottom: 0; }

/* ── Product cards ── */
/* v4.0.2 — top padding reduced from clamp(40,5vw,64) → clamp(8,1vw,16)
   now that the offerings H2 has been dropped. Cards now flow directly
   out of the overview block above (which closes on its own bottom
   padding of clamp(28,3vw,40)), so the visual gap between them stays
   intentional but reads as one continuous block, not two sections. */
.tb-syl-products {
    background: var(--tb-parchment);
    padding: clamp(8px, 1vw, 16px) clamp(24px, 4vw, 48px) clamp(60px, 7vw, 100px);
}
.tb-syl-products-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 3vw, 36px);
}
@media (max-width: 900px) {
    .tb-syl-products-inner {
        grid-template-columns: 1fr;
        max-width: 480px;
    }
}
.tb-syl-card {
    background: #fff;
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(42, 41, 39, .08);
    display: flex;
    flex-direction: column;
    transition: transform var(--t-medium) ease, box-shadow var(--t-medium) ease;
}
.tb-syl-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(42, 41, 39, .12);
}
.tb-syl-card-img {
    width: 100%;
    /* v3.7.30 — switched from 4/3 (landscape) to 3/4 (portrait) so the
       gift photos display in their natural orientation without cropping.
       Source shots are 1000×1300 (0.77:1); 3/4 (0.75:1) crops just ~3%
       on the sides instead of 25% off the top + bottom. Cards render
       taller and read as "product portraits," matching the luxury-gift
       aesthetic of the page. */
    aspect-ratio: 3 / 4;
    background-size: cover;
    background-repeat: no-repeat;
}
.tb-syl-card-body {
    padding: clamp(20px, 2.4vw, 28px);
    display: flex;
    flex-direction: column;
    flex: 1;
}
.tb-syl-card-h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(20px, 1.8vw, 24px);
    color: var(--tb-nightfall);
    margin: 0 0 8px;
    line-height: 1.25;
    letter-spacing: .01em;
}
/* v4.0.0 — Price now renders BELOW the description (was above). Soft
   gold-tinted top border for visual separation, "plus tax" pushed to a
   small tracked-uppercase note for a refined retail feel. */
.tb-syl-card-price {
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--tb-tungsten);
    letter-spacing: .04em;
    border-top: 1px solid rgba(168, 149, 110, .25);
    padding-top: 14px;
    margin-top: 4px;
}
.tb-syl-card-price span {
    display: inline-block;
    font-weight: 400;
    color: var(--tb-deadwood);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    margin-left: 8px;
    vertical-align: middle;
}
.tb-syl-card-rule {
    width: 32px;
    height: 1px;
    background: var(--tb-tungsten);
    margin: 0 0 16px;
}
.tb-syl-card-desc {
    font-family: var(--font-body);
    font-size: 14px;
    line-height: 1.65;
    color: var(--tb-earth);
    margin: 0 0 18px;
    flex: 1;
}
.tb-syl-card-meta {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--tb-deadwood);
    border-top: 1px solid rgba(168, 149, 110, .25);
    padding-top: 14px;
    margin-top: auto;
}

/* ── Closing CTA on dark surface ── */
.tb-syl-cta {
    background: var(--tb-bark);
    padding: clamp(60px, 8vw, 100px) clamp(24px, 4vw, 48px);
    text-align: center;
}
.tb-syl-cta-inner {
    max-width: 640px;
    margin: 0 auto;
}
.tb-syl-cta-h2 {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(32px, 4.5vw, 48px);
    color: var(--tb-parchment);
    margin: 0 0 14px;
    letter-spacing: .02em;
    line-height: 1.15;
}
.tb-syl-cta-h2 em {
    font-style: italic;
    color: var(--tb-goldenhour);
}
.tb-syl-cta-body {
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.7;
    color: var(--tb-stone);
    margin: 0 0 28px;
}
.tb-syl-cta .btn-primary {
    display: inline-block;
    margin: 0 auto;
}
.tb-syl-cta-note {
    font-family: var(--font-body);
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--tb-trail);
    margin: 22px 0 0;
}


/* =============================================================
   PHOTO MOSAIC (premier tier — opt-in via $data['mosaic'])
   v4.4.10 — Curated day-arc gallery. First populated on /stay/the-cove/
   ("A Day at the Cove" — 7 photos from morning to twilight). Reusable
   on any premier accommodation page by adding a 'mosaic' array.
   Tile spans 1–7 are wired for the 7-photo layout; extending requires
   adding new .mt-N rules below.
   ============================================================= */
.av3-mosaic {
    background: var(--tb-shadow);
    padding: clamp(64px,8vw,100px) clamp(24px,5vw,80px) clamp(48px,6vw,72px);
}
.av3-mosaic-hdr {
    max-width: 720px;
    margin: 0 auto clamp(40px,5vw,64px);
    text-align: center;
}
.av3-mosaic-hdr .eyebrow {
    font: 400 12px/1.2 var(--font-body);
    letter-spacing: .285em; text-transform: uppercase;
    color: var(--tb-latesun);
    margin-bottom: 14px;
}
.av3-mosaic-hdr h2 {
    font: 300 clamp(30px,3.5vw,44px)/1.1 var(--font-display);
    color: var(--tb-parchment);
    margin: 0 0 16px;
}
.av3-mosaic-hdr h2 em { color: var(--tb-latesun); font-style: italic; }
.av3-mosaic-hdr p {
    font: 400 15px/1.7 var(--font-body);
    color: var(--tb-dryglass);
    margin: 0;
}

/* Asymmetric 12-col grid — narrative day-arc.
   v4.4.21 — Reworked for 6-tile layout: row1 = 2 wide openers (6+6),
   row2 = 3 middle frames (4+4+4), row3 = full-width panorama closer
   (12 cols × 3 rows). mt-7 rules retained for backward-compat with any
   future 7-tile mosaic; unused by The Cove. */
.av3-mosaic-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: clamp(120px, 13vw, 180px);
    gap: clamp(8px, .8vw, 14px);
    max-width: 1440px;
    margin: 0 auto;
}
.av3-mosaic-grid .mt-1 { grid-column: span 6; grid-row: span 2; }
.av3-mosaic-grid .mt-2 { grid-column: span 6; grid-row: span 2; }
.av3-mosaic-grid .mt-3 { grid-column: span 4; grid-row: span 2; }
.av3-mosaic-grid .mt-4 { grid-column: span 4; grid-row: span 2; }
.av3-mosaic-grid .mt-5 { grid-column: span 4; grid-row: span 2; }
.av3-mosaic-grid .mt-6 { grid-column: span 12; grid-row: span 3; }
.av3-mosaic-grid .mt-7 { grid-column: span 4; grid-row: span 3; }

@media (max-width: 900px) {
    .av3-mosaic-grid { grid-template-columns: repeat(6, 1fr); grid-auto-rows: clamp(90px, 16vw, 140px); }
    .av3-mosaic-grid .mt-1,
    .av3-mosaic-grid .mt-2 { grid-column: span 3; grid-row: span 2; }
    .av3-mosaic-grid .mt-3,
    .av3-mosaic-grid .mt-4,
    .av3-mosaic-grid .mt-5 { grid-column: span 2; grid-row: span 2; }
    .av3-mosaic-grid .mt-6 { grid-column: span 6; grid-row: span 3; }
    .av3-mosaic-grid .mt-7 { grid-column: span 6; grid-row: span 2; }
}
@media (max-width: 520px) {
    .av3-mosaic-grid { grid-template-columns: 1fr; grid-auto-rows: 200px; gap: 8px; }
    .av3-mosaic-grid .mt-1,
    .av3-mosaic-grid .mt-2,
    .av3-mosaic-grid .mt-3,
    .av3-mosaic-grid .mt-4,
    .av3-mosaic-grid .mt-5,
    .av3-mosaic-grid .mt-6,
    .av3-mosaic-grid .mt-7 { grid-column: 1 / -1; grid-row: span 1; }
    .av3-mosaic-grid .mt-6 { grid-row: span 2; }
}

/* Tile */
.av3-mt {
    position: relative;
    overflow: hidden;
    border-radius: var(--r-img);
    background: var(--tb-nightfall);
    cursor: pointer;
    isolation: isolate; /* contain blend modes inside tile */
    text-decoration: none;
}
.av3-mt img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    transition: transform 1s cubic-bezier(.2,.6,.2,1);
    display: block;
}
.av3-mt:hover img { transform: scale(1.04); }

/* WARM WASH filter overlay — unifies tone across the 7 photos.
   Soft amber multiply from top deepening to bark at bottom. Hover peels
   it off so the raw photo can be appreciated. */
.av3-mt::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(180deg,
        rgba(212,188,144,.10) 0%,
        rgba(165,135,90,.06) 50%,
        rgba(50,48,46,.18) 100%);
    mix-blend-mode: multiply;
    pointer-events: none;
    transition: opacity .35s ease;
}
.av3-mt:hover::after { opacity: 0; }

/* Tile caption — reveals on hover. Slim, italicized. */
.av3-mt-cap {
    position: absolute;
    left: clamp(14px,1.4vw,22px);
    bottom: clamp(14px,1.4vw,20px);
    z-index: 2;
    color: var(--tb-parchment);
    pointer-events: none;
    text-shadow: 0 1px 12px rgba(10,12,8,.85), 0 0 24px rgba(10,12,8,.55);
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .35s ease, transform .35s ease;
}
.av3-mt:hover .av3-mt-cap { opacity: 1; transform: translateY(0); }
.av3-mt-cap .av3-mt-eb {
    display: block;
    font: 500 9px/1 var(--font-body);
    letter-spacing: .32em; text-transform: uppercase;
    color: var(--tb-latesun);
    margin-bottom: 6px;
}
.av3-mt-cap .av3-mt-ti {
    font: 400 clamp(14px,1.4vw,18px)/1.15 var(--font-display);
    font-style: italic;
}