/* A centered, continuous photographic story, scoped to the homepage. */
.homepage { --home-gutter: clamp(24px, 5vw, 96px); }
.homepage .site-header { position: absolute; inset: 0 0 auto; color: #fff; background: transparent; border-bottom-color: rgb(255 255 255 / 25%); }
.homepage .header-inner { width: auto; margin-inline: var(--home-gutter); }
.homepage .site-header .brand-mark { filter: brightness(0) invert(1); }
.homepage .site-nav > a:hover { color: #fff; text-decoration: underline; }
.homepage .site-nav > a[aria-current="page"]:not(.nav-shop)::after { background: #fff; }
.homepage .site-nav .nav-shop { border-color: rgb(255 255 255 / 70%); }
.homepage .nav-shop:hover { color: var(--green) !important; background: var(--paper); }
.homepage .site-header :focus-visible, .home-hero :focus-visible, .home-ritual :focus-visible { outline-color: #fff; }
.home-hero, .home-ritual { position: relative; isolation: isolate; display: grid; place-items: center; color: #fff; background: #433d32; text-align: center; }
.home-hero { min-height: max(640px, 100svh); padding: 144px var(--home-gutter) 112px; }
.home-hero-image, .home-ritual-image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.home-hero-image { object-position: 50% 52%; }
.home-hero::after, .home-ritual::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(18 29 22 / 60%); }
.home-hero-copy, .home-ritual-copy { width: 100%; max-width: 800px; margin-inline: auto; }
.home-hero h1 { font-size: clamp(3rem, 5vw, 4.75rem); line-height: 1.45; letter-spacing: .035em; }
.home-hero-copy p { margin-top: 24px; font-size: 1.125rem; letter-spacing: .08em; }
.home-hero-copy .home-button { margin-top: 32px; }
.home-button { min-width: 180px; border-color: var(--paper); border-radius: 0; color: var(--green); background: var(--paper); }
.home-button:hover { background: #e2e9dc; border-color: #e2e9dc; }
.home-intro, .home-guide { padding: clamp(80px, 9vw, 144px) var(--home-gutter); text-align: center; }
.home-intro h2, .home-guide h2 { font-size: clamp(1.875rem, 2.8vw, 2.625rem); line-height: 1.6; }
.home-intro h2 span, .home-guide h2 span { display: inline-block; }
.home-intro p, .home-guide p { max-width: 36em; margin: 24px auto 0; color: var(--muted); font-size: 1.125rem; line-height: 2; text-wrap: pretty; }
.home-intro .text-link, .home-guide .text-link { margin-top: 28px; gap: 28px; }
.home-ritual { min-height: clamp(580px, 58vw, 820px); padding: 96px var(--home-gutter); }
.home-ritual-image { object-position: 50% 55%; }
.home-ritual h2 { font-size: clamp(2.5rem, 4vw, 3.75rem); line-height: 1.5; letter-spacing: .025em; }
.home-ritual-copy p { margin-top: 24px; font-size: 1.125rem; }
.home-light-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 48px; margin-top: 28px; padding-block: 10px; border-bottom: 1px solid rgb(255 255 255 / 75%); font-size: 1rem; }
.home-light-link:hover { border-color: #fff; text-decoration: underline; }
@media (max-width: 900px) {
    .homepage .menu-toggle { border-color: rgb(255 255 255 / 70%); }
    .homepage .menu-toggle span { background: #fff; }
    .homepage .site-header:has(.site-nav.is-open) { background: var(--green); }
    .homepage .site-nav > a:not(.nav-shop) { border-bottom-color: rgb(255 255 255 / 25%); }
    html:not(.js) .homepage .site-header { position: relative; background: var(--green); }
    .home-hero { padding-block: 120px 96px; }
    .home-hero h1 { font-size: 3.5rem; }
    .home-ritual { min-height: 640px; }
}
@media (max-width: 600px) {
    .home-hero { min-height: max(620px, 100svh); padding-block: 112px 88px; }
    .home-hero-image { object-position: 47% 50%; }
    .home-hero h1 { font-size: clamp(2.5rem, 10.5vw, 3.25rem); line-height: 1.55; letter-spacing: .025em; }
    .home-hero-copy p { margin-top: 20px; font-size: 1rem; letter-spacing: .04em; }
    .home-hero-copy .home-button { margin-top: 28px; }
    .home-intro, .home-guide { padding-block: 72px; }
    .home-intro h2, .home-guide h2 { max-width: 9em; margin-inline: auto; font-size: 1.875rem; text-wrap: balance; }
    .home-intro p, .home-guide p { margin-top: 20px; font-size: 1.0625rem; }
    .home-intro p br { display: none; }
    .home-ritual { min-height: 600px; padding-block: 80px; }
    .home-ritual-image { object-position: 58% 50%; }
    .home-ritual h2 { font-size: clamp(2rem, 10vw, 2.375rem); }
    .home-ritual-copy p { font-size: 1.0625rem; text-wrap: balance; }
}
@media (prefers-contrast: more) {
    .home-hero::after, .home-ritual::after { background: rgb(18 29 22 / 72%); }
}