and are now must not inherit the
design's contextual paragraph rules (".card-copy p", ".section-heading p",
".terrain-copy p:not(.eyebrow)" ...). Specificity is deliberately high. --- */
:is(.entry-content, .editor-styles-wrapper) .wp-block-group p.section-index { margin: 0; max-width: none; line-height: 1.47; font-size: .75rem; color: #676960; }
:is(.entry-content, .editor-styles-wrapper) .process-heading p.section-index, :is(.entry-content, .editor-styles-wrapper) .detail-section.dark p.section-index,
:is(.entry-content, .editor-styles-wrapper) .retreat-schedule p.section-index { color: rgba(255,255,255,.45); }
:is(.entry-content, .editor-styles-wrapper) .wp-block-group p.card-meta { margin: 0; max-width: none; line-height: 1.47; font-size: .64rem; color: #6d706a; }
:is(.entry-content, .editor-styles-wrapper) .retreat-card-copy p.card-meta { color: rgba(255,255,255,.62); }
:is(.entry-content, .editor-styles-wrapper) .wp-block-group p.card-link { max-width: none; line-height: 1.47; color: inherit; }
:is(.entry-content, .editor-styles-wrapper) .contact-heading p.email-link { display: inline-block; max-width: none; margin: 2rem 0 0; line-height: 1.47; color: inherit; font-weight: 700; }
:is(.entry-content, .editor-styles-wrapper) .terrain-facts p.stat-value { max-width: none; line-height: 1.47; color: inherit; }
:is(.entry-content, .editor-styles-wrapper) .terrain-facts p.stat-label { max-width: none; line-height: 1.47; color: #70736c; }
:is(.entry-content, .editor-styles-wrapper) .pillar-grid p.step-number { line-height: calc(1.0625rem * 1.47); color: #6e6e73; }
:is(.entry-content, .editor-styles-wrapper) .wp-block-group p.card-number, :is(.entry-content, .editor-styles-wrapper) .wp-block-group p.retreat-tag { line-height: 1.47; max-width: none; }
.voice-card cite br { display: none; } /* strong + text stack as flex items; the
would become a third */
.fee-panel .stat-note { font-size: .8em; line-height: calc(1.0625rem * 1.47); color: inherit; } /* was , which inherited the panel colour */
.brand .wp-block-site-logo { line-height: inherit; }
.wp-block-image > figcaption { margin-bottom: 0; text-align: inherit; }
/* -- header: Site Logo + Site Title + Navigation + CTA --------------------
The Navigation block plays two parts: the centred link row on wide
screens (the design's .nav-links) and, under 1000px, the toggle button
plus the dropdown panel (the design's .menu-toggle + open .nav-links).
It therefore carries its own class, .site-nav, and not .nav-links. --- */
.brand .wp-block-site-title { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; }
.brand a { text-decoration: none; color: inherit; }
.header-cta { margin: 0; justify-self: end; }
.site-nav { font-size: .8125rem; position: static; } /* the dropdown panel positions against the header, not the nav */
.site-nav .wp-block-navigation__container { gap: 1.45rem; }
.site-nav .wp-block-navigation-item__content { position: relative; text-decoration: none; }
.site-nav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -.35rem; height: 1px; background: currentColor; transition: right .25s; }
.site-nav .wp-block-navigation-item__content:hover::after, .site-nav .wp-block-navigation-item__content:focus-visible::after,
.site-nav .wp-block-navigation-item__content[aria-current="page"]::after, .site-nav .current-menu-item > .wp-block-navigation-item__content::after { right: 0; }
/* wide screens: the toggle never shows, the row is always open */
.site-nav .wp-block-navigation__responsive-container-open { display: none; }
@media (min-width: 1000.02px) {
.site-nav .wp-block-navigation__responsive-container { display: block; position: static; }
}
/* up to 1000px: toggle button in the bar, links in a panel under it */
@media (max-width: 1000px) {
.site-nav .wp-block-navigation__responsive-container-open { display: flex; }
.site-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
}
.site-nav .wp-block-navigation__responsive-container-open {
color: inherit; background: transparent; border: 0; padding: 0; width: 2rem; height: 2rem;
align-items: center; justify-content: center; cursor: pointer;
}
.site-nav .wp-block-navigation__responsive-container-open svg { width: 22px; height: 22px; fill: currentColor; }
.site-nav .wp-block-navigation__responsive-container.is-menu-open {
display: block; position: absolute; top: 100%; left: 0; right: 0; bottom: auto; inset: auto 0 auto 0; top: 100%;
width: auto; height: auto; padding: 1.5rem var(--gutter) 1.75rem; overflow: visible;
color: var(--ink); background: rgba(255,255,255,.98); border-bottom: 1px solid var(--line);
-webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
}
.site-header .site-nav .is-menu-open .wp-block-navigation__responsive-close { position: static; width: auto; }
.site-header .site-nav .is-menu-open .wp-block-navigation__responsive-dialog { position: static; margin: 0; }
.site-header .site-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { display: block; padding: 0; }
.site-header .site-nav .is-menu-open .wp-block-navigation__container { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2rem; }
.site-header .site-nav .is-menu-open .wp-block-navigation-item__content { font-size: 1rem; }
/* one button toggles the panel (see site.js); it shows a cross while the panel is open */
.site-nav .wp-block-navigation__responsive-container-close { display: none; }
.site-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open svg { display: none; }
.site-nav:has(.is-menu-open) .wp-block-navigation__responsive-container-open::before {
content: ""; width: 22px; height: 22px; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* -- footer --------------------------------------------------------------- */
.site-footer > p.copyright { display: block; }
.site-footer .footer-links { font-size: .8125rem; }
.site-footer .footer-links .wp-block-navigation__container { gap: 1.4rem; }
.site-footer .footer-links .wp-block-navigation__responsive-container-open { display: none; }
.site-footer .footer-links .wp-block-navigation__responsive-container { display: block; position: static; background: transparent; padding: 0; }
.copyright { margin: 0; }
/* =====================================================================
3. Responsive corrections.
The design's "scale" pass above re-declares grid columns after the
original media queries, so on phones and tablets those columns
never collapsed (text in a 40%-wide column, headings orphaned in
the wrong column, hero controls overlapping). These rules come last
and win on equal specificity.
===================================================================== */
@media (max-width: 1000px) {
.about-story, .detail-intro { grid-template-columns: .6fr 1.4fr; }
.about-story-copy, .detail-intro-copy, .detail-aside { grid-column: 2; }
.about-story > h2, .about-story > .section-index { grid-column: 1 / -1; }
.retreat-overview, .retreat-who, .process-section, .contact-section, .about-belief,
.community-story, .vision-section, .terrain-section, .visualization, .two-column { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
/* Every grid becomes a single column; every placed item goes to column 1. */
.section-heading, .section-heading.compact, .listing-intro,
.about-story, .detail-intro, .two-column, .retreat-who, .retreat-overview,
.process-section, .contact-section, .about-belief, .community-story, .vision-section,
.terrain-section, .visualization, .experience-grid, .listing-card, .logistics-grid,
.inclusion-grid, .pillar-grid, .community-facts, .work-images, .terrain-facts { grid-template-columns: 1fr; }
.about-story-copy, .detail-intro-copy, .detail-aside, .about-story > h2, .about-story > .section-index,
.section-heading > p, .listing-intro > p, .community-facts, .logistics-grid .wide { grid-column: 1; }
.detail-aside { margin-top: 1.5rem; }
.section-index { margin-bottom: 1.5rem; }
.detail-intro-copy p, .about-story-copy p { max-width: none; }
/* Hero: stop positioning the content absolutely and let it stack.
Photos and wash stay behind as backgrounds; copy, slider controls
and the departure card flow bottom-up with real gaps between them. */
.hero {
height: auto; min-height: 100svh;
display: flex; flex-direction: column; justify-content: flex-end;
padding: 7.5rem 1.25rem 1.25rem; gap: 1.25rem;
}
.hero-location { top: 4.5rem; left: 1.25rem; }
/* relative, not static: the slides and wash are absolutely positioned
and would otherwise paint over in-flow content. */
.hero-copy, .hero-slider-ui, .departure-card {
position: relative; inset: auto; z-index: 2; width: auto; max-width: none;
}
.hero-copy { order: 1; }
.hero-slider-ui { order: 2; display: flex; align-items: center; gap: 1rem; }
.hero-slider-ui p { display: none; }
.departure-card { order: 3; margin-top: .25rem; }
.hero-actions { margin-top: 1.25rem; }
.hero h1 { font-size: 2.6rem; }
.hero-intro { font-size: 1rem; line-height: 1.5; }
.retreat-card::before { background: linear-gradient(0deg, rgba(9,12,11,.88), rgba(9,12,11,.2)); }
}
/* =====================================================================
5. Native-block mapping layer, phone and tablet.
Same purpose as section 4, for the rules above that only apply on
small screens: the block WordPress emits must land exactly where
the design's element landed.
===================================================================== */
@media (max-width: 1000px) {
/* ".section-heading > p { grid-column: 2 }" now also matches the index, which is a
*/
.section-heading > p.section-index, .listing-intro > p.section-index { grid-column: 1; }
/* the widened bouldering intro keeps its three columns on tablets, as the inline style did */
.detail-intro.detail-intro--wide { grid-template-columns: .9fr 1.35fr .8fr; }
}
@media (max-width: 720px) {
:is(.entry-content, .editor-styles-wrapper) .wp-block-group p.section-index { margin-bottom: 1.5rem; }
.detail-intro.detail-intro--wide { grid-template-columns: 1fr; }
.detail-intro--wide .detail-intro-copy, .detail-intro--wide .detail-aside { grid-column: 1; }
/* .detail-cta becomes a column with align-items:stretch, so its button filled the width */
.detail-cta .wp-block-buttons, .detail-cta .wp-block-button, .detail-cta .wp-block-button .wp-block-button__link { width: 100%; }
.detail-cta .wp-block-button .wp-block-button__link { display: flex; }
/* ".session-flow li" collapsed to one column; the step is a Group now */
.session-flow .flow-step { grid-template-columns: 1fr; gap: .5rem; }
.wp-block-buttons.hero-actions { align-items: flex-start; }
/* body text drops to 1rem on phones, so the inherited line-heights follow */
:is(.entry-content, .editor-styles-wrapper) .pillar-grid p.step-number { line-height: calc(1rem * 1.47); }
.fee-panel .stat-note { line-height: calc(1rem * 1.47); }
}