/* ═══════════════════════════════════════════════════════════════════════
   Vintage, flat, calm — after the original spa page: dusty mauve ground,
   sage cards, cream paper, thin Poiret One headings. Nothing glows or moves
   much. Loaded after app.css.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  --mauve:      oklch(0.563 0.059 9);          /* #94676e */
  --mauve-deep: oklch(0.43 0.052 8);
  --mauve-lift: oklch(0.66 0.055 9);
  --ground:     oklch(0.31 0.045 355);
  --ground-2:   oklch(0.37 0.05 355);
  --sage:       oklch(0.835 0.022 185);        /* #b6cac7 */
  --cream:      oklch(0.965 0.012 82);
  --cream-2:    oklch(0.93 0.02 80);
  --air:        var(--cream);
  --air-2:      var(--cream-2);
  --ink:        #323335;
  --ink-soft:   #56575b;
  --line:       oklch(0.82 0.025 80);
  --on-dark:    oklch(0.96 0.01 80);
  --on-dark-soft: oklch(0.82 0.02 20);
  --display: "Poiret One", ui-serif, Georgia, serif;
}
body { background: var(--cream); color: var(--ink); }
h1, h2, h3 { font-family: var(--display); font-weight: 400; letter-spacing: 0.02em; line-height: 1.08; }
body::after { content: ""; position: fixed; inset: 0; z-index: 999; pointer-events: none; opacity: 0.18; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

/* buttons: flat pills */
.btn { border-radius: 999px; letter-spacing: 0.08em; font-size: 0.78rem; text-transform: uppercase; font-weight: 500; transition-duration: 0.6s; }
.btn--solid { --btn-bg: var(--ground); --btn-fg: var(--cream); }
.btn--solid:hover { --btn-bg: var(--mauve-deep); }
.btn--line { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: oklch(1 0 0 / 0.7); }
.btn--line:hover { --btn-bg: #fff; --btn-fg: var(--mauve-deep); }
.btn--quiet { text-transform: none; letter-spacing: 0.02em; font-size: var(--t-sm); }
.mark__word, .foot__word { font-family: var(--display); }

/* ═════════ header over mauve ═════════ */
.site::before { background: linear-gradient(to bottom, oklch(0.4 0.05 8 / 0.5), transparent); }
.site.is-solid { background: color-mix(in oklch, var(--cream) 94%, transparent); }

/* ═════════ hero ═════════ */
.hero--dusk { display: block; min-height: 0; position: relative; background: var(--mauve); color: #fff; overflow: clip; }
.hero--dusk .hero__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; min-height: min(100svh, 52rem);
  padding-block: clamp(6.5rem, 12vh, 8rem) clamp(2.5rem, 6vh, 4.5rem); }
@media (min-width: 62rem) { .hero--dusk .hero__grid { grid-template-columns: 1.05fr 0.95fr; } }
.hero--dusk .hero__col { display: grid; gap: clamp(1rem, 2.2vh, 1.5rem); align-content: center; color: #fff; }
.hero--dusk .hero__place { margin: 0; color: oklch(1 0 0 / 0.75); font-size: 0.72rem; letter-spacing: 0.26em; }
.hero--dusk .hero__place .rule { background: oklch(1 0 0 / 0.4); }
.hero--dusk .hero__title { max-width: 11ch; font-size: clamp(2.8rem, 1.6rem + 4.6vw, 5.4rem); line-height: 1; color: #fff; }
.hero--dusk .hero__title em { display: block; font-style: normal; color: var(--sage); }
.hero--dusk .hero__lede { margin: 0; max-width: 30ch; font-size: var(--t-md); line-height: 1.6; color: oklch(1 0 0 / 0.9); }
.hero--dusk .hero__acts { margin: 0.3rem 0 0; }
.hero--dusk .btn--quiet { color: #fff; }
.hero__stage { order: -1; display: grid; justify-items: center; }
@media (min-width: 62rem) { .hero__stage { order: 0; justify-items: end; } }
.hero__stage .hero__arch { margin: 0; width: min(100%, 27rem); aspect-ratio: 4 / 5; max-height: calc(100svh - 9rem); border-radius: 1.25rem; overflow: clip;
  box-shadow: 0 30px 60px -30px oklch(0.2 0.05 355 / 0.55); order: 0; justify-self: center; transform: none; }
@media (min-width: 62rem) { .hero__stage .hero__arch { justify-self: end; } }
.hero__stage .hero__arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: none; filter: saturate(0.82) contrast(0.98) sepia(0.08); }
.hero__stage .hero__arch::after { display: none; }
.print, .motes { display: none; }

/* coming up: a sage card, like the spa cards */
.hero--dusk .wo { color: var(--ink); }
.hero--dusk .wo__label { color: oklch(1 0 0 / 0.8); margin: 0.6rem 0 0.7rem; font-size: 0.72rem; letter-spacing: 0.26em; }
.hero--dusk .wo__dot { background: var(--sage); animation: none; }
.hero--dusk .wo__card { max-width: 32rem; padding: clamp(1.1rem, 2.4vw, 1.6rem); border-radius: 1.25rem; border: 0; background: var(--sage); color: var(--ink);
  backdrop-filter: none; box-shadow: none; animation: none; rotate: none; transform: none; }
.hero--dusk .wo__date { background: none; border: 0; border-right: 1px solid oklch(0.3 0.02 350 / 0.25); border-radius: 0; box-shadow: none; padding: 0 1.1rem 0 0.2rem; color: var(--ink); min-width: 4.2rem; }
.hero--dusk .wo__day { font-family: var(--display); font-style: normal; font-size: clamp(2.8rem, 4.6vw, 3.8rem); }
.hero--dusk .wo__mon { color: var(--ink-soft); letter-spacing: 0.22em; }
.hero--dusk .wo__badge { background: var(--ground); color: var(--cream); box-shadow: none; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.65rem; }
.hero--dusk .wo__title { font-family: var(--display); font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); color: var(--ink); }
.hero--dusk .wo__meta { color: var(--ink-soft); }
.hero--dusk .wo__chips span { background: none; box-shadow: inset 0 0 0 1px oklch(0.3 0.02 350 / 0.3); color: var(--ink); }
.hero--dusk .wo__card .btn--solid { background: var(--ground); color: var(--cream); }

/* ═════════ four ways in (cream, sage cards) ═════════ */
.offerings { background: var(--cream); padding-block: clamp(4rem, 9vw, 7rem); border: 0; }
.lede { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.lede__title { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.8rem); }
.lede__title em { font-style: normal; color: var(--mauve); }
.lede__text { font-size: var(--t-md); color: var(--ink-soft); }
.orn { display: block; width: 2rem; height: 2.4rem; background: var(--mauve); opacity: 0.75;
  -webkit-mask: url(../img/logo.png) center / contain no-repeat; mask: url(../img/logo.png) center / contain no-repeat; }
.vgrid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1rem, 2.5vw, 1.75rem); }
.vcard { flex: 1 1 15rem; max-width: 22rem; border-radius: 1.25rem; overflow: clip; background: var(--sage); }
.vcard__fig img { filter: sepia(0.1) saturate(0.85); }
.vcard__title { font-size: 1.45rem; }

/* ═════════ breath ═════════ */
.breath { background: var(--ground); }
.breath__title { font-size: clamp(2.2rem, 1.5rem + 3vw, 3.8rem); }

/* ═════════ vision: sage block ═════════ */
.vision { background: var(--sage); color: var(--ink); }
.vision::before { display: none; }
.vision__media { padding: clamp(1.5rem, 5vw, 4rem); display: grid; place-items: center; }
.vision__media img { width: min(100%, 30rem); height: auto; min-height: 0; aspect-ratio: 4 / 5; border-radius: 1.25rem; filter: sepia(0.1) saturate(0.85); box-shadow: none; }
.vision__title { color: var(--mauve-deep); font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); font-style: normal; }
.vision__quote { color: var(--ink); font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.25; }
.vision__sign { color: var(--ink-soft); }
.vision--solo .vision__body { max-width: var(--shell); margin-inline: auto; width: 100%; padding-inline: var(--gut); }
.vision--solo .vision__inner { max-width: 40rem; }

/* ═════════ events + booking ═════════ */
.opening { background: var(--mauve); padding-block: clamp(4rem, 9vw, 7rem); }
.invite { background: var(--sage); color: var(--ink); border-radius: 1.25rem; box-shadow: none; }
.invite__title { font-size: clamp(2.4rem, 1.8rem + 3vw, 4.2rem); }
.invite__kicker { color: var(--mauve-deep); }
.invite__facts > div, .invite__facts > div:last-child { border-color: oklch(0.3 0.02 350 / 0.22); }
.invite__text { color: #3e3f43; }
.opening__fig { border-radius: 1.25rem; box-shadow: none; }
.opening__fig img { filter: sepia(0.1) saturate(0.85); }
.book { background: var(--cream); }
.book__title { font-size: clamp(2.4rem, 1.8rem + 3vw, 4.2rem); }
.q__label { font-family: var(--display); font-size: 1.35rem; font-style: normal; }
.opt label, .fld { border-radius: 0.75rem; background: #fff; }
.opt input:checked + label { background: color-mix(in oklch, var(--sage) 55%, #fff); border-color: var(--mauve); }

/* ═════════ inner pages ═════════ */
.phero { background: var(--mauve); min-height: 0; display: block; overflow: clip; color: #fff; isolation: auto; }
.phero::before { display: none; }
.phero__media, .phero__scrim, .phero .orn, .phero__kicker { display: none; }
.phero__in { display: grid; gap: 1.5rem; align-items: center; padding-block: clamp(7.5rem, 14vh, 9rem) clamp(2rem, 5vh, 3.2rem); }
@media (min-width: 46rem) { .phero__in { grid-template-columns: 1fr auto; } }
.phero__body { padding: 0; width: auto; }
.phero--plain .phero__body { padding: clamp(7.5rem, 14vh, 9rem) var(--gut) clamp(2rem, 5vh, 3rem); }
.phero__title { font-size: clamp(2.6rem, 1.8rem + 3.4vw, 4.6rem); line-height: 1; color: #fff; }
.phero__lede { font-size: var(--t-md); color: oklch(1 0 0 / 0.88); margin: 0.8rem 0 0; max-width: 34ch; font-style: normal; font-family: var(--text); }
.phero__arch { margin: 0; width: clamp(7.5rem, 14vw, 10rem); aspect-ratio: 4 / 5; border-radius: 1rem; overflow: clip; justify-self: end; order: -1; box-shadow: none; }
@media (min-width: 46rem) { .phero__arch { order: 0; } }
.phero__arch img { width: 100%; height: 100%; object-fit: cover; filter: sepia(0.1) saturate(0.85); }

.run { gap: clamp(3rem, 7vw, 5.5rem); }
.run__fig { width: min(100%, 26rem); justify-self: center; border-radius: 1.25rem !important; }
.run__fig img, .run__fig--tone img { aspect-ratio: 4 / 3; filter: sepia(0.1) saturate(0.85); }
@media (min-width: 52rem) {
  .run__item, .run__item:nth-child(even) { grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 7vw, 6rem); }
  .run__item:nth-child(odd) .run__fig { justify-self: end; }
  .run__item:nth-child(even) .run__fig { justify-self: start; }
}
.run__body { max-width: 30rem; }
.run__title { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.8rem); }
.offerings--tone { background: var(--cream-2); }
.gal__i { border-radius: 1rem; }
.band { background: var(--ground); }
.band__title { font-style: normal; font-size: clamp(2rem, 1.5rem + 2.4vw, 3.4rem); }
.legal { background: var(--cream); }
.prose--legal h2 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); }
.vintage { background: var(--mauve); }

/* ═════════ footer ═════════ */
.foot { background: var(--ground); padding-block: clamp(3.5rem, 7vw, 5.5rem) var(--s-4); }
.foot__in { gap: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 52rem) { .foot__in { grid-template-columns: 1.5fr 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); } }
.foot__brand::before { content: ""; display: block; width: 2rem; height: 2.4rem; margin-bottom: 1rem; background: var(--sage); opacity: 0.85;
  -webkit-mask: url(../img/logo.png) center / contain no-repeat; mask: url(../img/logo.png) center / contain no-repeat; }
.foot__word { font-size: 1.7rem; }
.foot__where { margin-top: 0.5rem; line-height: 1.6; }
.foot__nav, .foot__legal { flex-direction: column; flex-wrap: nowrap; gap: 0.6rem; font-size: var(--t-sm); }
.foot__nav::before, .foot__legal::before { display: block; margin-bottom: 0.4rem; color: var(--sage); font-size: 0.7rem; letter-spacing: 0.26em; text-transform: uppercase; }
.foot__nav::before { content: "Explore"; }
.foot__legal::before { content: "Good to know"; }
.prose a.btn, .note a.btn { color: var(--btn-fg); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .hero__arch img { transform: none; } }


/* ═════════ living botanical artwork (Kōno Bairei woodblocks, Haeckel plates; all public domain) ═════════ */
.bloom { position: absolute; z-index: 0; pointer-events: none; overflow: clip; }
.bloom img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero--dusk .hero__grid { position: relative; z-index: 1; }
.bloom--cherry { right: -4%; top: -6%; width: min(46vw, 44rem); height: 112%;
  -webkit-mask-image: radial-gradient(70% 70% at 60% 45%, #000 20%, transparent 78%); mask-image: radial-gradient(70% 70% at 60% 45%, #000 20%, transparent 78%);
  animation: bloomsway 38s ease-in-out infinite alternate; transform-origin: 70% 0%; }
.bloom--cherry img { mix-blend-mode: multiply; opacity: 0.55; filter: sepia(0.35) saturate(0.7) hue-rotate(-12deg) contrast(0.95);
  transform: translate3d(calc(var(--px, 0) * -14px), calc(var(--py, 0) * -10px), 0); transition: transform 2s var(--ease-soft); }
@keyframes bloomsway { to { transform: rotate(-1.6deg) translate3d(-0.6%, 0.8%, 0); } }
@media (max-width: 61.99rem) { .bloom--cherry { width: 90vw; right: -30%; opacity: 0.8; } }
@media (prefers-reduced-motion: reduce) { .bloom--cherry { animation: none; } }

/* the same woodblock artwork, quietly, through the rest of the site */
.phero { position: relative; isolation: isolate; }
.phero::after { content: ""; position: absolute; z-index: -1; right: -3%; top: -10%; width: min(48vw, 36rem); height: 125%; pointer-events: none;
  background: url(../img/bairei-cherry.jpg) 50% 30% / cover no-repeat; mix-blend-mode: multiply; opacity: 0.45; filter: sepia(0.35) saturate(0.7) hue-rotate(-12deg);
  -webkit-mask-image: radial-gradient(70% 70% at 55% 45%, #000 20%, transparent 78%); mask-image: radial-gradient(70% 70% at 55% 45%, #000 20%, transparent 78%); }
@media (max-width: 45.99rem) { .phero::after { width: 90vw; opacity: 0.35; } }

.vision { position: relative; isolation: isolate; overflow: clip; }
.vision::before { display: block; content: ""; position: absolute; z-index: -1; right: -4%; top: 0; bottom: 0; width: min(58%, 52rem); pointer-events: none; opacity: 0.4; mix-blend-mode: multiply;
  background: url(../img/bairei-peony.jpg) 50% 40% / cover no-repeat; filter: sepia(0.25) saturate(0.55) hue-rotate(-8deg);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); }

.breath { position: relative; isolation: isolate; overflow: clip; }
.breath::before { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: 0.16; mix-blend-mode: luminosity;
  background: url(../img/botanical-orchid.jpg) 4% 50% / 40rem auto no-repeat; -webkit-mask-image: linear-gradient(90deg, #000, transparent 55%); mask-image: linear-gradient(90deg, #000, transparent 55%); }

.band { position: relative; isolation: isolate; overflow: clip; }
.band::before { content: ""; position: absolute; z-index: -1; right: 0; top: 0; bottom: 0; width: min(55%, 44rem); pointer-events: none; opacity: 0.22; mix-blend-mode: luminosity;
  background: url(../img/bairei-magnolia.jpg) 50% 50% / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent, #000 50%); mask-image: linear-gradient(90deg, transparent, #000 50%); }
.vision::before { right: auto; left: -4%; width: min(56%, 50rem); opacity: 0.34;
  -webkit-mask-image: linear-gradient(270deg, transparent, #000 50%); mask-image: linear-gradient(270deg, transparent, #000 50%); }

/* ═════════ hero photograph: dissolved into the mauve instead of boxed ═════════ */
.hero--dusk .hero__grid { grid-template-columns: 1fr; }
@media (min-width: 62rem) {
  .hero--dusk .hero__col { max-width: 48%; }
  .hero--dusk .hero__stage { position: absolute; z-index: 0; top: 0; right: 0; bottom: 0; width: 58%; display: block; order: 0; }
}
.hero--dusk .hero__stage .hero__arch { position: absolute; inset: 0; width: auto; max-height: none; aspect-ratio: auto; border-radius: 0; box-shadow: none; justify-self: auto; overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(0deg, transparent 0, #000 22%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0, #000 38%), linear-gradient(0deg, transparent 0, #000 22%); mask-composite: intersect; }
.hero--dusk .hero__stage .hero__arch img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; filter: saturate(0.5) sepia(0.28) hue-rotate(-14deg) contrast(0.94) brightness(0.98); }
.hero--dusk .hero__stage .hero__arch::after { display: block; content: ""; position: absolute; inset: 0; pointer-events: none; background: oklch(0.563 0.059 9 / 0.5); mix-blend-mode: soft-light; }
.hero--dusk .bloom--cherry { z-index: 2; right: -2%; top: -8%; width: min(44vw, 42rem); height: 118%; }
.hero--dusk .bloom--cherry img { opacity: 0.6; }
@media (max-width: 61.99rem) {
  .hero--dusk .hero__stage { position: relative; height: min(62vh, 30rem); margin: -1rem calc(-1 * var(--gut)) 0; }
  .hero--dusk .hero__stage .hero__arch { -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 30%); mask-image: linear-gradient(0deg, transparent 0, #000 30%); }
  .hero--dusk .hero__stage .hero__arch img { object-position: 50% 30%; }
}
.hero--dusk .bloom--cherry { right: -8%; top: -14%; width: min(30vw, 28rem); height: 108%; }
@media (min-width: 62rem) { .hero--dusk .hero__stage .hero__arch img { transform: translateX(4%) scale(1.06); } }
/* botanical prints fade out completely before their box edge */
.bloom--cherry, .phero::after {
  -webkit-mask-image: radial-gradient(closest-side at 50% 48%, #000 32%, transparent 100%); mask-image: radial-gradient(closest-side at 50% 48%, #000 32%, transparent 100%); }
.hero--dusk .bloom--cherry { right: -4%; top: -10%; width: min(38vw, 34rem); height: 112%; }
@media (max-width: 61.99rem) { .hero--dusk .bloom--cherry { width: 70vw; right: -20%; top: -4%; height: 60%; opacity: 0.9; } }
.hero--dusk .hero__grid { position: static; z-index: auto; }
.hero--dusk .hero__col { position: relative; z-index: 3; }


/* ═════════ events: three cards side by side, and the full list ═════════ */
.btn--line-dark { --btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: oklch(0.3 0.02 350 / 0.55); }
.btn--line-dark:hover { --btn-bg: var(--ground); --btn-fg: var(--cream); --btn-bd: var(--ground); }
.btn--off { --btn-bg: transparent; --btn-fg: var(--ink-soft); --btn-bd: oklch(0.3 0.02 350 / 0.3); cursor: default; }
.events { padding-block: clamp(3.5rem, 8vw, 6rem); background: var(--cream); }
.events--home { background: var(--mauve); color: #fff; }
.events--home .lede__title { color: #fff; }
.events--home .lede__text { color: oklch(1 0 0 / 0.85); }
.events--plan { background: var(--cream-2); }
.evgrid { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2.5vw, 1.75rem); grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); align-items: stretch; }
@media (min-width: 62rem) { .events--home .evgrid { grid-template-columns: repeat(3, 1fr); } }
.evc { display: flex; flex-direction: column; background: var(--sage); color: var(--ink); border-radius: 1.25rem; overflow: clip; }
.evc__fig { position: relative; margin: 0; background: oklch(0.8 0.025 185); aspect-ratio: 4 / 3; }
.evc__fig img { width: 100%; height: 100%; object-fit: cover; display: block; filter: sepia(0.1) saturate(0.85); }
.evc__date { position: absolute; left: 1rem; top: 1rem; display: grid; justify-items: center; min-width: 3.6rem; padding: 0.5rem 0.7rem; border-radius: 0.9rem; background: var(--cream); color: var(--ink); line-height: 1; }
.evc__date b { font-family: var(--display); font-weight: 400; font-size: 1.9rem; }
.evc__date i { font-style: normal; margin-top: 0.25rem; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mauve-deep); }
.evc__body { display: flex; flex-direction: column; gap: 0.75rem; padding: clamp(1.25rem, 3vw, 1.75rem); flex: 1; }
.evc__kicker { margin: 0; font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mauve-deep); }
.evc__title { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); margin: 0; }
.evc__text { margin: 0; font-size: var(--t-sm); line-height: 1.65; color: #3e3f43; }
.evc__facts { margin: 0.4rem 0 0; display: grid; }
.evc__facts > div { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.75rem; padding: 0.6rem 0; border-top: 1px solid oklch(0.3 0.02 350 / 0.2); font-size: var(--t-sm); }
.evc__facts dt { font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); padding-top: 0.2rem; }
.evc__facts dd { margin: 0; }
.evc__btn { margin-top: auto; align-self: flex-start; }
.evc--more .evc__body { justify-content: center; min-height: 18rem; }
.evc--plan .evc__fig { aspect-ratio: 16 / 9; background: oklch(0.86 0.02 185); }
.events__more { margin: clamp(2rem, 5vw, 3rem) 0 0; text-align: center; }
.evc__fig img { position: absolute; inset: 0; }
.evc__fig { overflow: clip; }
.btn--ghost.btn--dark { --btn-fg: var(--on-dark); --btn-bd: oklch(1 0 0 / 0.5); }
.btn--ghost.btn--dark:hover { --btn-bd: #fff; --btn-bg: oklch(1 0 0 / 0.12); }


/* ═════════ hero photo: true colours, no ghosting ═════════ */
.hero--dusk .hero__stage .hero__arch img { filter: none; }
.hero--dusk .hero__stage .hero__arch::after { display: none; }
@media (min-width: 62rem) {
  .hero--dusk .hero__stage .hero__arch {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(0deg, transparent 0, #000 10%);
    mask-image: linear-gradient(90deg, transparent 0, #000 26%), linear-gradient(0deg, transparent 0, #000 10%); }
}
.hero--dusk .bloom--cherry { right: -3%; top: -9%; width: min(26vw, 24rem); height: 78%; }
.hero--dusk .bloom--cherry img { opacity: 0.5; }
@media (max-width: 61.99rem) {
  .hero--dusk .hero__stage .hero__arch { -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 14%); mask-image: linear-gradient(0deg, transparent 0, #000 14%); }
  .hero--dusk .bloom--cherry { width: 55vw; right: -12%; top: -2%; height: 34%; }
}
.vgrid--five { max-width: 56rem; margin-inline: auto; }
.band .btn--solid { --btn-bg: var(--mauve); --btn-fg: #fff; }
.band .btn--solid:hover { --btn-bg: var(--mauve-lift); }
.vgrid--five { max-width: none; }
@media (min-width: 62rem) { .vgrid--five .vcard { flex: 0 1 calc((100% - 3.5rem) / 3); max-width: none; } }

/* ═════════ hero: one smooth first impression ═════════ */
.hero--dusk .hero__title em { color: oklch(0.935 0.085 98); }            /* soft butter yellow */
@media (min-width: 62rem) {
  .hero--dusk .hero__stage { width: 64%; animation: sideIn 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
  .hero--dusk .hero__stage .hero__arch {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgb(0 0 0 / 0.06) 7%, rgb(0 0 0 / 0.28) 17%, rgb(0 0 0 / 0.62) 29%, rgb(0 0 0 / 0.9) 40%, #000 48%), linear-gradient(0deg, transparent 0, #000 14%);
    mask-image: linear-gradient(90deg, transparent 0, rgb(0 0 0 / 0.06) 7%, rgb(0 0 0 / 0.28) 17%, rgb(0 0 0 / 0.62) 29%, rgb(0 0 0 / 0.9) 40%, #000 48%), linear-gradient(0deg, transparent 0, #000 14%); }
  .hero--dusk .hero__stage .hero__arch img { transform: translateX(12%) scale(1.15); object-position: 50% 26%; }
}
@keyframes sideIn { from { opacity: 0; transform: translateX(3.5rem); } to { opacity: 1; transform: none; } }
.hero--dusk .bloom--cherry { animation: bloomsway 38s ease-in-out infinite alternate, fadeIn 3s ease-out 0.4s both; }
@keyframes fadeIn { from { opacity: 0; } }
.hero--dusk::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: -1px; height: 6rem; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--cream)); }
@media (prefers-reduced-motion: reduce) { .hero--dusk .hero__stage, .hero--dusk .bloom--cherry { animation: none; } }

/* ═════════ event cards: information on the front, a matching picture on the back ═════════ */
.evc { display: block; background: none; border-radius: 1.25rem; overflow: visible; perspective: 1600px; position: relative; min-height: 31rem; }
.evc__in { position: relative; height: 100%; display: grid; transform-style: preserve-3d; transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); border-radius: 1.25rem; }
.evc__front, .evc__back { grid-area: 1 / 1; border-radius: 1.25rem; overflow: clip; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.evc__front { position: relative; display: flex; flex-direction: column; gap: 0.75rem; padding: clamp(1.4rem, 3vw, 1.9rem); background: var(--sage); color: var(--ink); }
.evc__front .evc__kicker, .evc__front .evc__title { padding-right: 4.2rem; }
.evc__date { position: absolute; right: 1.1rem; top: 1.1rem; left: auto; min-width: 3.4rem; padding: 0.45rem 0.6rem; border-radius: 0.9rem; background: var(--cream); }
.evc__back { position: relative; background: var(--ground); transform: rotateY(180deg); }
.evc__back img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: sepia(0.08) saturate(0.92); }
.evc__shade { position: absolute; inset: 0; background: linear-gradient(to top, oklch(0.2 0.045 355 / 0.82), oklch(0.2 0.045 355 / 0.15) 55%, transparent); }
.evc__backtxt { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding: clamp(1.4rem, 3vw, 1.9rem); color: #fff; }
.evc__backtxt .evc__kicker { color: oklch(1 0 0 / 0.85); }
.evc__backtxt .evc__title { color: #fff; }
.evc__btn--light { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: oklch(1 0 0 / 0.75); }
.evc__btn--light:hover { --btn-bg: #fff; --btn-fg: var(--ground); }
.evc__hint { position: absolute; right: 1.4rem; bottom: 1.5rem; font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); }
.evc__hint::before { content: "↻ "; font-size: 0.9rem; letter-spacing: 0; }
.evc--flip.is-flipped .evc__in { transform: rotateY(180deg); }
@media (hover: hover) { .evc--flip:hover .evc__in { transform: rotateY(180deg); } }
.evc--more .evc__front, .evc--plan:not(.evc--flip) .evc__front { justify-content: center; }
.evc__fig { display: none; }
@media (prefers-reduced-motion: reduce) { .evc__in { transition-duration: 0.01s; } }


/* ═════════ first screen, the way it first came together ═════════ */
.hero--dusk .hero__title em { color: oklch(0.965 0.03 100); }            /* barely-there lemon */
@media (min-width: 62rem) {
  .hero--dusk .hero__stage { width: 60%; }
  .hero--dusk .hero__stage .hero__arch {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 2.5%, rgb(0 0 0 / 0.1) 9%, rgb(0 0 0 / 0.4) 18%, rgb(0 0 0 / 0.8) 28%, #000 36%), linear-gradient(0deg, transparent 0, #000 12%);
    mask-image: linear-gradient(90deg, transparent 0, transparent 2.5%, rgb(0 0 0 / 0.1) 9%, rgb(0 0 0 / 0.4) 18%, rgb(0 0 0 / 0.8) 28%, #000 36%), linear-gradient(0deg, transparent 0, #000 12%); }
  .hero--dusk .hero__stage .hero__arch img { transform: translateX(10%) scale(1.1); object-position: 50% 28%; }
}
.hero--dusk .hero__stage .hero__arch img { filter: saturate(0.94) contrast(0.99) sepia(0.04); }
/* the Japanese cherry print: large, in the top-right corner, clear of the two women */
.hero--dusk .bloom--cherry { z-index: 2; right: -3%; top: -6%; width: min(44vw, 42rem); height: 104%;
  -webkit-mask-image: radial-gradient(circle at 78% 16%, #000 16%, transparent 58%); mask-image: radial-gradient(circle at 78% 16%, #000 16%, transparent 58%); }
.hero--dusk .bloom--cherry img { opacity: 0.62; }
@media (max-width: 61.99rem) { .hero--dusk .bloom--cherry { width: 80vw; right: -18%; top: -2%; height: 42%; -webkit-mask-image: radial-gradient(circle at 70% 25%, #000 18%, transparent 62%); mask-image: radial-gradient(circle at 70% 25%, #000 18%, transparent 62%); } }

/* the Peakblossom mark, large, closing the four ways in */
.logo-seal { display: flex; justify-content: center; margin-top: clamp(3rem, 7vw, 5.5rem); }
.logo-seal span { display: block; width: clamp(7rem, 14vw, 11rem); height: clamp(8.5rem, 17vw, 13.5rem); background: var(--mauve); opacity: 0.85;
  -webkit-mask: url(../img/logo.png) center / contain no-repeat; mask: url(../img/logo.png) center / contain no-repeat; }
.hero--dusk .bloom--cherry { top: -8%; height: 96%;
  -webkit-mask-image: radial-gradient(circle at 82% 10%, #000 14%, transparent 50%); mask-image: radial-gradient(circle at 82% 10%, #000 14%, transparent 50%); }


/* ═════════ hero flows straight into "Coming up" ═════════ */
.hero--dusk::after { display: none; }
.hero--dusk .hero__grid { min-height: min(86svh, 46rem); }
.events--home { padding-top: clamp(1rem, 3vw, 2rem); }

/* ═════════ the Peakblossom mark: stardusted platinum, turning slowly ═════════ */
.seal { background: var(--ground); display: grid; place-items: center; padding: clamp(4rem, 9vw, 7rem) 0 0; }
.seal__stage { position: relative; width: clamp(8rem, 16vw, 12.5rem); height: clamp(9.7rem, 19.4vw, 15.2rem); perspective: 900px;
  filter: drop-shadow(0 0 22px oklch(0.9 0.02 280 / 0.28)); }
.seal__logo { position: absolute; inset: 0; transform-origin: 50% 50%; animation: sealspin 22s linear infinite;
  -webkit-mask: url(../img/logo.png) center / contain no-repeat; mask: url(../img/logo.png) center / contain no-repeat;
  background: linear-gradient(125deg, #f7f7f9 0%, #cfd0d6 18%, #fdfdfe 34%, #a9abb4 50%, #eef0f4 66%, #c3c5cd 82%, #fafafc 100%); background-size: 260% 260%;
  animation: sealspin 22s linear infinite, platinum 11s ease-in-out infinite alternate; }
.seal__logo--glint { background:
    radial-gradient(circle at 18% 22%, #fff 0 1.2px, transparent 2.6px), radial-gradient(circle at 74% 16%, #fff 0 1px, transparent 2.4px),
    radial-gradient(circle at 46% 38%, #fff 0 1.4px, transparent 3px), radial-gradient(circle at 82% 52%, #fff 0 1px, transparent 2.4px),
    radial-gradient(circle at 28% 64%, #fff 0 1.2px, transparent 2.8px), radial-gradient(circle at 58% 78%, #fff 0 1.4px, transparent 3px),
    radial-gradient(circle at 36% 90%, #fff 0 1px, transparent 2.4px), radial-gradient(circle at 66% 30%, #fff 0 1px, transparent 2.4px);
  background-size: 100% 100%; animation: sealspin 22s linear infinite, glint 3.6s ease-in-out infinite; mix-blend-mode: screen; }
.seal__logo--b { background-position: 40% 60%; background-size: 130% 130%; animation: sealspin 22s linear infinite, glint 5.1s ease-in-out -1.7s infinite; }
@keyframes sealspin { to { transform: rotateY(360deg); } }
@keyframes platinum { to { background-position: 100% 100%; } }
@keyframes glint { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .seal__logo { animation: none; } }
.breath { padding-top: clamp(2.5rem, 6vw, 4.5rem); }
.breath::before { background-position: 0% 50%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, transparent 62%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, transparent 62%); }

/* the platinum mark now sits above "Four ways in"; the plum breathing page has no picture */
.seal { padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.breath::before { display: none; }
.breath { padding-top: var(--s-7); }


/* ═════════ pages 1 and 2 as one flowing canvas ═════════ */
.flow { position: relative; overflow: clip; isolation: isolate;
  background: linear-gradient(180deg, oklch(0.563 0.059 9) 0%, oklch(0.535 0.06 8) 48%, oklch(0.47 0.058 5) 100%); }
.flow .hero--dusk, .flow .events--home { background: transparent; position: relative; z-index: 1; }
.flow .hero--dusk { overflow: visible; }
.flow .hero__stage { overflow: visible; }
.flow .bloom--cherry { position: absolute; z-index: 0; right: -4%; top: -2%; width: min(50vw, 46rem); height: auto; aspect-ratio: 3 / 4; opacity: 1;
  -webkit-mask-image: radial-gradient(ellipse 62% 78% at 74% 22%, #000 18%, transparent 100%); mask-image: radial-gradient(ellipse 62% 78% at 74% 22%, #000 18%, transparent 100%);
  animation: bloomsway 38s ease-in-out infinite alternate, fadeIn 3s ease-out 0.4s both; }
.flow .bloom--cherry img { opacity: 0.6; }
@media (max-width: 61.99rem) { .flow .bloom--cherry { width: 92vw; right: -28%; top: 18%; } }
/* the hero photo no longer needs its own bottom edge: it dissolves into the canvas */
.flow .hero--dusk .hero__stage .hero__arch { overflow: clip; }

/* the invitation: bigger, brighter, made to be pressed */
.hero--dusk .hero__acts { margin-top: 1.1rem; }
.btn--cta { position: relative; overflow: hidden; gap: 0.9rem; min-height: 4rem; padding: 1.2rem 2.8rem; border: 0; border-radius: 999px;
  font-size: 0.92rem; letter-spacing: 0.12em; color: var(--ground);
  background: linear-gradient(120deg, oklch(0.985 0.03 100), oklch(0.955 0.05 88));
  box-shadow: 0 20px 44px -18px oklch(0.15 0.05 355 / 0.75), 0 0 0 7px oklch(1 0 0 / 0.14);
  transition: transform 0.7s var(--ease-soft), box-shadow 0.7s var(--ease-soft); }
.btn--cta::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 32%, oklch(1 0 0 / 0.75) 50%, transparent 68%); transform: translateX(-130%); animation: shine 7s ease-in-out 2.5s infinite; }
.btn--cta .btn__arrow { font-size: 1.15em; letter-spacing: 0; transition: transform 0.6s var(--ease-soft); }
.btn--cta:hover { transform: translateY(-3px); box-shadow: 0 26px 52px -18px oklch(0.15 0.05 355 / 0.85), 0 0 0 9px oklch(1 0 0 / 0.2); }
.btn--cta:hover .btn__arrow { transform: translateX(0.35rem); }
@keyframes shine { 0%, 62% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@media (prefers-reduced-motion: reduce) { .btn--cta::after { animation: none; } }
.flow .bloom--cherry { z-index: 2; }
.flow .events--home { z-index: 3; }
.flow .bloom--cherry { right: -9%; top: -3%; width: min(46vw, 42rem);
  -webkit-mask-image: radial-gradient(ellipse 34% 62% at 80% 30%, #000 14%, transparent 100%); mask-image: radial-gradient(ellipse 34% 62% at 80% 30%, #000 14%, transparent 100%); }
.flow .bloom--cherry { right: -2%; top: -4%; width: min(48vw, 44rem); }
.flow { background: linear-gradient(180deg, oklch(0.563 0.059 9) 0%, oklch(0.52 0.06 8) 42%, oklch(0.4 0.055 4) 78%, var(--ground) 100%); }
.flow .events--home { padding-bottom: clamp(4rem, 8vw, 6.5rem); }
.flow + .seal { padding-top: clamp(1rem, 3vw, 2rem); }


/* ═══════════════════════════════════════════════════════════════════════
   First screen, composed: a clean split. Text on dusty rose, the photograph
   full-height on the right with one soft arched corner, the blossom branch
   running down the outer edge. No fades over the people.
   ═══════════════════════════════════════════════════════════════════════ */
.flow .hero--dusk .hero__grid { display: grid; max-width: none; width: 100%; margin: 0; padding: 0; gap: 0;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; min-height: min(92svh, 52rem); }
.flow .hero--dusk .hero__col { max-width: none; align-self: center; position: relative; z-index: 3;
  padding: clamp(7rem, 15vh, 9rem) clamp(1.5rem, 4vw, 4rem) clamp(3rem, 8vh, 5rem) max(var(--gut), calc((100vw - var(--shell)) / 2 + var(--gut))); }
.flow .hero--dusk .hero__stage { position: relative; inset: auto; width: auto; display: block; order: 0; z-index: 1; justify-self: stretch; animation: sideIn 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
.flow .hero--dusk .hero__stage .hero__arch { position: absolute; inset: 0; width: auto; max-height: none; aspect-ratio: auto; margin: 0; justify-self: auto; box-shadow: none;
  border-radius: clamp(5rem, 14vw, 12rem) 0 0 0; overflow: clip; -webkit-mask-image: none; mask-image: none; transform: none; }
.flow .hero--dusk .hero__stage .hero__arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; transform: none; filter: saturate(1.02) contrast(1.02); }
.flow .hero--dusk .hero__stage .hero__arch::after { display: none; }
.flow .hero--dusk .hero__title { max-width: 9.5ch; font-size: clamp(2.9rem, 1.4rem + 4.6vw, 5.6rem); }
.flow .hero--dusk .hero__lede { max-width: 25ch; }
@media (max-width: 61.99rem) {
  .flow .hero--dusk .hero__grid { grid-template-columns: 1fr; min-height: 0; }
  .flow .hero--dusk .hero__stage { order: -1; height: min(64vh, 30rem); margin: 0; }
  .flow .hero--dusk .hero__stage .hero__arch { border-radius: 0 0 clamp(3rem, 14vw, 6rem) 0; }
  .flow .hero--dusk .hero__col { padding: 2.2rem var(--gut) 3rem; }
}
.flow .bloom--cherry { z-index: 4; }

/* the invitation: a faceted gem, crisp and clear */
.hero--dusk .hero__acts { filter: drop-shadow(0 16px 20px oklch(0.15 0.05 355 / 0.4)); margin-top: 1.4rem; }
.btn--cta { box-shadow: none; border: 0; border-radius: 0; overflow: visible; min-height: 4.6rem; padding: 0 3.1rem; gap: 1.1rem; position: relative; isolation: isolate;
  font-size: 0.96rem; letter-spacing: 0.16em; font-weight: 600; color: oklch(0.27 0.05 355);
  clip-path: polygon(1.5rem 0, calc(100% - 1.5rem) 0, 100% 50%, calc(100% - 1.5rem) 100%, 1.5rem 100%, 0 50%);
  background: linear-gradient(115deg, oklch(0.99 0.012 95) 0 30%, oklch(0.95 0.045 92) 30% 31.5%, oklch(0.985 0.02 95) 31.5% 56%, oklch(0.93 0.05 88) 56% 57.5%, oklch(0.99 0.015 95) 57.5% 82%, oklch(0.955 0.04 90) 82% 100%);
  background-size: 200% 100%; transition: background-position 0.9s var(--ease-soft), transform 0.6s var(--ease-soft); }
.btn--cta::before { content: ""; position: absolute; inset: 3px; z-index: -1; pointer-events: none;
  clip-path: polygon(1.35rem 0, calc(100% - 1.35rem) 0, 100% 50%, calc(100% - 1.35rem) 100%, 1.35rem 100%, 0 50%);
  box-shadow: inset 0 0 0 1px oklch(0.8 0.08 85 / 0.65); background: none; }
.btn--cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 42%, oklch(1 0 0 / 0.9) 50%, transparent 58%);
  transform: translateX(-130%); animation: shine 6.5s ease-in-out 2.2s infinite; }
.btn--cta:hover { transform: translateY(-2px); background-position: 100% 0; box-shadow: none; }
.btn--cta .gem { flex: none; width: 0.52rem; height: 0.52rem; transform: rotate(45deg); background: oklch(0.72 0.09 80); }
.btn--cta .btn__arrow { display: none; }


/* ═══════════════════════════════════════════════════════════════════════
   First screen, back to its first mould: the photograph bleeding in from
   the right edge, melting into the rose on its left, the blossom branch
   in the top-right corner of the photograph — and never anywhere near a face.
   ═══════════════════════════════════════════════════════════════════════ */
.flow .bloom--cherry { display: none; }
.flow .hero--dusk .hero__grid { position: static; display: grid; grid-template-columns: 1fr; width: 100%; max-width: var(--shell); margin-inline: auto;
  padding: 0 var(--gut); gap: 0; min-height: min(92svh, 52rem); align-items: center; }
.flow .hero--dusk .hero__col { max-width: 46%; padding: clamp(7rem, 15vh, 9rem) 0 clamp(3rem, 8vh, 5rem); }
.flow .hero--dusk .hero__stage { position: absolute; inset: 0 0 0 auto; width: 60%; display: block; z-index: 1; animation: sideIn 2.2s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both; }
.flow .hero--dusk .hero__stage .hero__arch { position: absolute; inset: 0; width: auto; max-height: none; aspect-ratio: auto; border-radius: 0; overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 3%, rgb(0 0 0 / 0.1) 9%, rgb(0 0 0 / 0.38) 18%, rgb(0 0 0 / 0.75) 29%, #000 39%), linear-gradient(0deg, transparent 0, #000 13%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent 0, transparent 3%, rgb(0 0 0 / 0.1) 9%, rgb(0 0 0 / 0.38) 18%, rgb(0 0 0 / 0.75) 29%, #000 39%), linear-gradient(0deg, transparent 0, #000 13%);
  mask-composite: intersect; }
.flow .hero--dusk .hero__stage .hero__arch img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: translateX(13%) scale(1.15); filter: none; }
.flow .hero--dusk .hero__title { max-width: none; font-size: clamp(2.8rem, 1.5rem + 4.2vw, 5.4rem); }
.flow .hero--dusk .hero__lede { max-width: 28ch; }
/* the branch belongs to the photograph: pinned to its top-right corner, in stage proportions */
.stage-bloom { position: absolute; z-index: 3; right: -3%; top: -5%; width: 42%; aspect-ratio: 3 / 4; pointer-events: none;
  -webkit-mask-image: radial-gradient(ellipse 58% 52% at 66% 30%, #000 16%, transparent 100%); mask-image: radial-gradient(ellipse 58% 52% at 66% 30%, #000 16%, transparent 100%);
  animation: bloomsway 38s ease-in-out infinite alternate, fadeIn 3s ease-out 0.5s both; transform-origin: 80% 0%; }
.stage-bloom img { width: 100%; height: 100%; object-fit: cover; display: block; mix-blend-mode: multiply; opacity: 0.62; filter: sepia(0.3) saturate(0.7) hue-rotate(-12deg); }
@media (max-width: 61.99rem) {
  .flow .hero--dusk .hero__grid { display: block; padding: 0; min-height: 0; max-width: none; }
  .flow .hero--dusk .hero__stage { position: relative; inset: auto; width: 100%; height: min(62vh, 30rem); }
  .flow .hero--dusk .hero__stage .hero__arch { -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 16%); mask-image: linear-gradient(0deg, transparent 0, #000 16%); }
  .flow .hero--dusk .hero__stage .hero__arch img { transform: none; object-position: 50% 30%; }
  .flow .hero--dusk .hero__col { max-width: none; padding: 2rem var(--gut) 3rem; }
  .stage-bloom { width: 52%; right: -6%; top: -3%; }
}

/* the invitation: a light-aqua crystal */
.hero--dusk .hero__acts { filter: drop-shadow(0 16px 18px oklch(0.2 0.05 355 / 0.38)); margin-top: 1.5rem; }
.btn--cta { --aq1: oklch(0.955 0.03 190); --aq2: oklch(0.9 0.05 190); --aq3: oklch(0.84 0.07 192); --aq4: oklch(0.98 0.015 190);
  position: relative; isolation: isolate; border: 0; border-radius: 0; box-shadow: none; overflow: visible; gap: 0;
  min-height: 4.9rem; padding: 0 4rem; font-size: 0.96rem; letter-spacing: 0.16em; font-weight: 600; color: oklch(0.3 0.06 215);
  clip-path: polygon(15% 0, 85% 0, 100% 50%, 85% 100%, 15% 100%, 0 50%);
  background: conic-gradient(from 12deg at 50% 50%, var(--aq1) 0 11%, var(--aq3) 11% 22%, var(--aq4) 22% 33%, var(--aq2) 33% 44%, var(--aq1) 44% 56%, var(--aq3) 56% 67%, var(--aq4) 67% 78%, var(--aq2) 78% 89%, var(--aq1) 89% 100%);
  transition: transform 0.6s var(--ease-soft), filter 0.6s var(--ease-soft); }
.btn--cta::before { content: ""; position: absolute; inset: 0.5rem 1.55rem; z-index: -1; pointer-events: none;
  clip-path: polygon(12% 0, 88% 0, 100% 50%, 88% 100%, 12% 100%, 0 50%);
  background: linear-gradient(160deg, oklch(0.99 0.012 190), oklch(0.93 0.04 190) 55%, oklch(0.97 0.02 190)); box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.8); }
.btn--cta::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(105deg, transparent 40%, oklch(1 0 0 / 0.95) 50%, transparent 60%); transform: translateX(-130%); animation: shine 6s ease-in-out 2s infinite; }
.btn--cta:hover { transform: translateY(-2px) scale(1.015); filter: brightness(1.04); box-shadow: none; }
.btn--cta .crystal__text { position: relative; z-index: 2; }
.btn--cta .gem, .btn--cta .btn__arrow { display: none; }
.stage-bloom { width: 44%; top: -4%; }
.stage-bloom img { opacity: 0.8; }


/* ═════════ the invitation: a clean, bright, light-aqua pill ═════════ */
.hero--dusk .hero__acts { filter: none; margin-top: 1.5rem; }
.btn--cta { clip-path: none; border-radius: 999px; overflow: hidden; min-height: 4.5rem; padding: 0 3.4rem; font-size: 0.96rem; letter-spacing: 0.15em; font-weight: 600;
  color: oklch(0.27 0.06 215);
  background: linear-gradient(180deg, oklch(0.965 0.035 192) 0%, oklch(0.915 0.055 192) 100%);
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.95), inset 0 -2px 0 oklch(0.8 0.07 192 / 0.55), 0 0 0 6px oklch(1 0 0 / 0.16), 0 18px 34px -16px oklch(0.15 0.05 355 / 0.7);
  transition: transform 0.6s var(--ease-soft), box-shadow 0.6s var(--ease-soft); }
.btn--cta::before { display: none; }
.btn--cta::after { background: linear-gradient(105deg, transparent 40%, oklch(1 0 0 / 0.85) 50%, transparent 60%); }
.btn--cta:hover { transform: translateY(-2px); filter: none;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / 0.95), inset 0 -2px 0 oklch(0.8 0.07 192 / 0.55), 0 0 0 9px oklch(1 0 0 / 0.22), 0 24px 40px -16px oklch(0.15 0.05 355 / 0.8); }

/* ═════════ a clean ending: the footer always rests at the bottom, with a quiet closing line ═════════ */
body { min-height: 100svh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
.foot { flex: none; }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem; margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem;
  border-top: 1px solid oklch(1 0 0 / 0.14); font-size: var(--t-xs); color: var(--on-dark-soft); }
.foot__base p { margin: 0; }
.foot__top { text-decoration: none; letter-spacing: 0.08em; }
.foot__top:hover { color: #fff; }
.foot__base.shell { padding-inline: 0; width: calc(100% - 2 * var(--gut)); max-width: calc(var(--shell) - 2 * var(--gut)); }


/* the platinum mark now sits between the first screen and "Coming up" */
.seal--between { background: transparent; padding: clamp(1.5rem, 4vw, 3rem) 0 0; position: relative; z-index: 3; }
.seal--between .seal__stage { width: clamp(6.5rem, 11vw, 9rem); height: clamp(7.9rem, 13.4vw, 10.9rem); }
.flow .events--home { padding-top: clamp(1.5rem, 4vw, 3rem); }
/* inner-page headers: title only, no small picture */
.phero__arch { display: none; }
.phero__in { grid-template-columns: 1fr; }
/* extra details on the photo side of event cards are only used by some concepts */
.evc__bdate, .evc__bhint, .evc__bmeta, .evc__bspots { display: none; }

/* language switch */
.i18n-pending body { visibility: hidden; }
.lang { display: inline-flex; align-items: center; gap: 0.45rem; margin-left: 1rem; font-size: 0.7rem; letter-spacing: 0.2em; color: inherit; }
.lang button { appearance: none; background: none; border: 0; padding: 0.3rem 0.15rem; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; opacity: 0.6; border-bottom: 1px solid transparent; transition: opacity 0.4s var(--ease-soft); }
.lang button:hover { opacity: 1; }
.lang button[aria-current] { opacity: 1; border-bottom-color: currentColor; }
.lang span { opacity: 0.4; }
.lang--drawer { margin: 0 0 1.4rem; font-size: 0.8rem; }
@media (max-width: 60rem) { .site__in > .lang { display: none; } }
.lang-note { margin: 0 0 1.6rem; padding: 0.7rem 1rem; border-left: 2px solid var(--mauve); background: rgb(0 0 0 / 0.04); font-size: var(--t-sm); }

/* labels like "Mitbringen" need room; long titles must not squeeze into a narrow column */
.evc__facts > div { grid-template-columns: 6.4rem minmax(0, 1fr); }
.evc__facts dt { overflow-wrap: anywhere; }
.evc__front .evc__title { font-size: clamp(1.45rem, 1.25rem + 0.6vw, 1.85rem); line-height: 1.15; }
.evc__front .evc__kicker { padding-right: 4.2rem; }
.evc__front .evc__title { padding-right: 3.6rem; }
/* booking choices in two columns where there is room */
.opts { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.opt label { height: 100%; }

/* run photos: give the frame a real width (justify-self alone let it collapse to zero), keep photos in true colour */
.run__fig { width: 100%; max-width: 26rem; }
.run__fig img { display: block; width: 100%; height: auto; filter: none; }

/* ═══ About: the photograph as a large, floating landscape, soft at every edge, drifting slowly;
   the words rise out of its lower fade ═══ */
.vis { position: relative; background: var(--cream); padding-bottom: clamp(3rem, 7vw, 5rem); overflow: clip; }
.vis__fig { position: relative; margin: 0; height: clamp(26rem, 82svh, 54rem); overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.005) 1.7%, rgb(0 0 0 / 0.035) 3.3%, rgb(0 0 0 / 0.104) 5.0%, rgb(0 0 0 / 0.210) 6.7%, rgb(0 0 0 / 0.347) 8.3%, rgb(0 0 0 / 0.500) 10.0%, rgb(0 0 0 / 0.653) 11.7%, rgb(0 0 0 / 0.790) 13.3%, rgb(0 0 0 / 0.896) 15.0%, rgb(0 0 0 / 0.965) 16.7%, rgb(0 0 0 / 0.995) 18.3%, #000 20%), linear-gradient(0deg, transparent 0%, rgb(0 0 0 / 0.005) 2.8%, rgb(0 0 0 / 0.035) 5.7%, rgb(0 0 0 / 0.104) 8.5%, rgb(0 0 0 / 0.210) 11.3%, rgb(0 0 0 / 0.347) 14.2%, rgb(0 0 0 / 0.500) 17.0%, rgb(0 0 0 / 0.653) 19.8%, rgb(0 0 0 / 0.790) 22.7%, rgb(0 0 0 / 0.896) 25.5%, rgb(0 0 0 / 0.965) 28.3%, rgb(0 0 0 / 0.995) 31.2%, #000 34%), linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.016) 1.1%, rgb(0 0 0 / 0.104) 2.2%, rgb(0 0 0 / 0.275) 3.4%, rgb(0 0 0 / 0.500) 4.5%, rgb(0 0 0 / 0.725) 5.6%, rgb(0 0 0 / 0.896) 6.8%, rgb(0 0 0 / 0.984) 7.9%, #000 9%), linear-gradient(270deg, transparent 0%, rgb(0 0 0 / 0.016) 1.1%, rgb(0 0 0 / 0.104) 2.2%, rgb(0 0 0 / 0.275) 3.4%, rgb(0 0 0 / 0.500) 4.5%, rgb(0 0 0 / 0.725) 5.6%, rgb(0 0 0 / 0.896) 6.8%, rgb(0 0 0 / 0.984) 7.9%, #000 9%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.005) 1.7%, rgb(0 0 0 / 0.035) 3.3%, rgb(0 0 0 / 0.104) 5.0%, rgb(0 0 0 / 0.210) 6.7%, rgb(0 0 0 / 0.347) 8.3%, rgb(0 0 0 / 0.500) 10.0%, rgb(0 0 0 / 0.653) 11.7%, rgb(0 0 0 / 0.790) 13.3%, rgb(0 0 0 / 0.896) 15.0%, rgb(0 0 0 / 0.965) 16.7%, rgb(0 0 0 / 0.995) 18.3%, #000 20%), linear-gradient(0deg, transparent 0%, rgb(0 0 0 / 0.005) 2.8%, rgb(0 0 0 / 0.035) 5.7%, rgb(0 0 0 / 0.104) 8.5%, rgb(0 0 0 / 0.210) 11.3%, rgb(0 0 0 / 0.347) 14.2%, rgb(0 0 0 / 0.500) 17.0%, rgb(0 0 0 / 0.653) 19.8%, rgb(0 0 0 / 0.790) 22.7%, rgb(0 0 0 / 0.896) 25.5%, rgb(0 0 0 / 0.965) 28.3%, rgb(0 0 0 / 0.995) 31.2%, #000 34%), linear-gradient(90deg, transparent 0%, rgb(0 0 0 / 0.016) 1.1%, rgb(0 0 0 / 0.104) 2.2%, rgb(0 0 0 / 0.275) 3.4%, rgb(0 0 0 / 0.500) 4.5%, rgb(0 0 0 / 0.725) 5.6%, rgb(0 0 0 / 0.896) 6.8%, rgb(0 0 0 / 0.984) 7.9%, #000 9%), linear-gradient(270deg, transparent 0%, rgb(0 0 0 / 0.016) 1.1%, rgb(0 0 0 / 0.104) 2.2%, rgb(0 0 0 / 0.275) 3.4%, rgb(0 0 0 / 0.500) 4.5%, rgb(0 0 0 / 0.725) 5.6%, rgb(0 0 0 / 0.896) 6.8%, rgb(0 0 0 / 0.984) 7.9%, #000 9%); mask-composite: intersect;
  opacity: 0; animation: visIn 2.4s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards; }
.vis__fig img { position: absolute; left: 0; top: -6%; width: 100%; height: 112%; object-fit: cover; object-position: 50% 32%; display: block;
  transform: translate3d(0, var(--drift, 0px), 0) scale(1.06); transform-origin: 50% 40%; animation: visDrift 38s ease-in-out infinite alternate; }
@keyframes visIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes visDrift { from { scale: 1; } to { scale: 1.045; } }
.vis__text { position: relative; z-index: 2; margin-top: clamp(-6rem, -8vw, -3rem); max-width: 42rem; text-align: center; }
.vis__title { margin: 0 0 1.1rem; font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 1.4rem + 2.2vw, 3.2rem); color: var(--ink); }
.vis__text p { margin: 0 auto 1.4rem; max-width: 36rem; color: var(--ink-soft); line-height: 1.75; }
@media (prefers-reduced-motion: reduce) { .vis__fig { animation: none; opacity: 1; } .vis__fig img { animation: none; transform: none; } }