@charset "UTF-8"; /* --------------------------------------------------------------------------- HOME PAGE — the page-level rules that belong to no single component. Added 2026-08-13. --------------------------------------------------------------------------- */ /* Binds a region to the one after it, for elements that are the trailing half of something rather than sections in their own right. Without it every one of the page's sixteen section boundaries is the same 37→67px: a metronome, not a cadence. The interval is not new — .expectations-layout already uses $space-xl to bind the retreat cards up to their heading, so this reuses the relationship the theme has defined for "belongs to its neighbour" and applies it downward too. It is fluid, not flat, and that is the point. A flat $space-xl reads correctly at 1425px (37 tight against 67 standard) but at 390px .group's own clamp is already at its 37px floor, so tight and standard collapse to the same value and the phrasing disappears. Ramped 28→37px it stays one step below .group at every width. Both endpoints are on the harmonic scale ($space-lg, $space-xl). Competitors, both at (0-1-0): .group margin-bottom $section-margin-bottom containers.scss .expectations-layout margin-bottom $section-margin-bottom expectation-cards.scss A bare .bound-to-next would tie both and resolve on load order. Compounded to (0-2-0) it wins outright on each host, so the hosts are named. */ .group.bound-to-next, .expectations-layout.bound-to-next { margin-bottom: clamp(1.75rem, 1.438rem + 1vw, 2.313rem); } /* --------------------------------------------------------------------------- GUEST REVIEWS — the consolidated review list. The grid is the theme's own .reviews-container (components/review.scss), the same container /ayahuasca-retreat-reviews already wraps these exact .review-item cards in. Two things it does not supply for a four-item set: --------------------------------------------------------------------------- */ /* 1. Row gap. .reviews-container sets `gap: var(--gapBetween)`, and --gapBetween is `min(1em, 1vw)` declared on `main` (layout/containers.scss) — 14px at 1425px but 3.9px at 390px, where the cards are stacked and that gap is the only thing separating them. Column gap keeps the theme's value; only the row gap is raised. Competitor: .reviews-container (0-1-0); this is (0-2-0) and wins outright rather than tying and resolving on load order. */ .guest-reviews .reviews-container { row-gap: 1.313rem; /* Space below the card grid, so the trailing `Read more reviews` link is not flush against the last row. Added 2026-08-18. This is not a new interval — it is the one the page already uses everywhere else. A trailing link normally follows a

, and gets that

's own margin-bottom: measured on the rendered home page, seven such links all sit 24px below the paragraph above them. Only two sit at 0, and both follow a

instead of a

— this one after .reviews-container, and `More about Huachuma →` after div.prose in an .hhc-card__content. The value is the global p margin-bottom's top end, and it is flat, not fluid, for a reason. The p rule is clamp 16→24px; the row-gap immediately above is $space-md, a flat 21px. Ramping this one would put it at 16px at 390px — BELOW the gap between the cards themselves, so on a stacked mobile layout the link would read as another row of the grid rather than as the thing that follows it. A flat $space-24 clears the 21px row-gap at every width and lands exactly on the 24px paragraph gap at the widths where paragraphs are 24px. Both values are on the harmonic scale. */ margin-bottom: 1.5rem; } /* 2. A 2-up at the widest tier. The theme's ladder is 31% / 48% / 98% across its own 1100px and 700px breakpoints — three-up above 1100px, which with exactly four reviews orphans the fourth on its own row. Held at the theme's own 48% instead, so the set reads 2x2 down to 700px and stacks below it. min-width: 1101px is the exact complement of review.scss's `@media (max-width: 1100px)`, so this rule does not exist at the widths the theme already handles. That matters: at (0-2-0) it would otherwise beat the theme's own `div.review-item` overrides at (0-1-1) and force 48% onto the 390px stacked case too. The fix is the query's range, not a heavier selector — a media query does not beat specificity. */ @media (min-width: 1101px) { .guest-reviews .review-item { flex-basis: 48%; } } /* 3. Inset from the coloured ground. Added 2026-08-18, when this block gained a .background-tan wrapper and the cards ended up 16px from the top edge of the band and 99px from the bottom — see review-tan.jpg. The 99px was three separate things stacking INSIDE the band, none of them designed for a band: 24px the `Read more reviews`

, from the global p margin-bottom (clamped 16→24px, base/elements.scss) 67px .guest-reviews is also a .group, and .group carries $section-margin-bottom (clamped 37→67px, layout/containers.scss) 8px .width-100-pct padding-bottom ($space-xs) against 16px at the top — .width-100-pct padding-top alone ($colored-section-padding, clamped 8→16px). The .group margin is the real defect: on paper it separates one section from the next, but nested in a ground it inflates the ground instead. The band's own margin-bottom already handles the gap to the next block, so zeroing it here loses nothing. Blocks 195 and 203 avoid this by writing `class="group margin-bottom-zero"` in the body; this block cannot, because the same wrapper also carries .guest-reviews and the fix belongs with the other .guest-reviews rules rather than split across content and CSS. SCOPE. Both constraints are the maintainer's: - Nothing here touches .background-tan or .width-100-pct. Tan also carries the site's review-quote strips (block 173 and the retreat-page quotes), which are 273px tall and correctly padded as they are. - Nothing here touches bare .reviews-container. That class is live on 11 other pages — node 13 and the country pages 129-139 — verified against node__body and block_content__body, not assumed. .guest-reviews appears in exactly one body on the site (block 200), and this stylesheet is attached only on (hhc.theme), so the blast radius is this one block. The two padding values differ by 8px because the band's own padding is asymmetric: 16px top against 8px bottom at the wide end. Adding 32/40 lands both visual gaps on 48px at 1400px, and 32/40 at 390px where the band contributes 8/8. Read them as "48px of air, minus whatever the band already gave that side". */ .background-tan .guest-reviews { padding-top: clamp(1.5rem, 1.222rem + 0.889vw, 2rem); padding-bottom: clamp(2rem, 1.722rem + 0.889vw, 2.5rem); margin-bottom: 0; } /* The trailing `Read more reviews` link. Its margin-bottom is the global p rule at (0-0-1) and would add 16→24px on top of the padding above, reopening the asymmetry from the other end. Scoped to the last child so the paragraphs inside the review cards keep their rhythm. */ .guest-reviews > p:last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------- OWNER-COPY MARKER — staging only. Deliberately loud so it can never be mistaken for finished design. The maintainer is keeping it on /home-v2 as their own reminder to write the missing sentence. IT MUST NOT SURVIVE THE CUTOVER TO . --------------------------------------------------------------------------- */ .content-placeholder { border: 2px dashed #8D2565; padding: 0.75rem 1rem; color: #3F5B5F; font-style: italic; } /*# sourceMappingURL=home-page.css.map */