html.is-watercolor-story { --lock: 1; --boost: 1; zoom: 1 !important; }
/* Homepage watercolor story: a scroll-pinned paper stage with readable flow fallback. */
.home-story {
  --chapter-static-bg: var(--indigo);
  --chapter-glow: var(--mist);
  --chapter-glow-x: 76%;
  --chapter-glow-y: 38%;
  --bg-current: var(--indigo);
  --glow-color: var(--mist);
  --glow-x: 76%;
  --glow-y: 38%;
  position: relative;
  isolation: isolate;
  color: var(--white);
  background: var(--bg-current);
}
.home-story[data-scene="intro"] { --bg-current: var(--indigo); --glow-color: var(--mist); --glow-x: 76%; --glow-y: 38%; }
.home-story[data-scene="tarot"] { --bg-current: #0F1226; --glow-color: var(--lavender); --glow-x: 72%; --glow-y: 38%; }
.home-story[data-scene="workshops"] { --bg-current: #4A6E94; --glow-color: var(--mist-soft); --glow-x: 76%; --glow-y: 54%; }
.home-story[data-scene="crystals"] { --bg-current: #0A1B2B; --glow-color: var(--water); --glow-x: 50%; --glow-y: 32%; }
.home-story[data-scene="about"] { --bg-current: var(--rose); --glow-color: #E8B4B2; --glow-x: 74%; --glow-y: 42%; }
.home-story[data-scene="footer"] { --bg-current: #0D1830; --glow-color: var(--mist-soft); --glow-x: 58%; --glow-y: 36%; }
body.is-entrance::before { display: none; }
body.is-entrance::after { display: none; }
html.js-threshold .home-story .home-chapter,
html.js-threshold .home-story .home-chapter-visual,
html.js-threshold .home-story .home-chapter-copy,
html.js-threshold .home-story .home-progress { animation: none !important; }

.home-chapter {
  --chapter-static-bg: var(--indigo);
  --chapter-glow: var(--mist);
  --chapter-glow-x: 76%;
  --chapter-glow-y: 38%;
  position: relative;
  min-height: calc(100svh - var(--header-h));
  scroll-margin-top: var(--header-h);
  overflow: hidden;
  color: var(--white);
  background-color: var(--chapter-static-bg);
  background-image: radial-gradient(ellipse 68% 78% at var(--chapter-glow-x) var(--chapter-glow-y), color-mix(in srgb, var(--chapter-glow) 15%, transparent), transparent 72%);
}
.home-chapter--intro { --chapter-static-bg: var(--indigo); --chapter-glow: var(--mist); --chapter-glow-x: 72%; --chapter-glow-y: 44%; }
.home-chapter--tarot { --chapter-static-bg: #0F1226; --chapter-glow: var(--lavender); --chapter-glow-x: 72%; --chapter-glow-y: 42%; }
.home-chapter--workshops { --chapter-static-bg: #4A6E94; --chapter-glow: var(--mist-soft); --chapter-glow-x: 78%; --chapter-glow-y: 48%; }
.home-chapter--crystals { --chapter-static-bg: #0A1B2B; --chapter-glow: var(--water); --chapter-glow-x: 48%; --chapter-glow-y: 32%; }
.home-chapter--about { --chapter-static-bg: var(--rose); --chapter-glow: #E8B4B2; --chapter-glow-x: 74%; --chapter-glow-y: 42%; color: var(--indigo-deep); }
.home-chapter--close { --chapter-static-bg: #0D1830; --chapter-glow: var(--mist-soft); --chapter-glow-x: 58%; --chapter-glow-y: 36%; }

/* Static and reduced-motion view: every real section remains in document flow. */
.home-water-stage { display: contents; }
.home-atmosphere,
.home-water-effects { display: none; }
.home-chapter-viewport {
  position: relative;
  display: grid;
  align-items: center;
  min-height: inherit;
  padding-block: clamp(44px, 8vh, 88px);
}
.home-chapter-copy {
  position: relative;
  z-index: 4;
  width: min(calc(100% - 2 * var(--gutter)), 1320px);
  margin-inline: auto;
  padding-block: var(--space-6);
}
.home-chapter-copy > * { pointer-events: auto; }
.home-kicker { margin: 0 0 18px; color: var(--water); font: 500 11px/1.5 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; }
.home-title { max-width: min(43vw, 660px); margin: 0; color: inherit; font: 500 clamp(38px, 5vw, 72px)/1.24 var(--font-display); letter-spacing: .01em; text-wrap: balance; }
.home-title span { display: block; }
.home-title--intro { max-width: min(56vw, 820px); font-size: clamp(38px, 4.8vw, 76px); line-height: 1.22; letter-spacing: -.02em; }
.home-title-en { margin: 18px 0 0; color: rgba(239,245,248,.85); font: 400 clamp(13px, 1.1vw, 16px)/1.5 var(--font-mono); letter-spacing: .06em; }
body.is-entrance .home-title-en { color: rgba(20,42,72,.72); }
.home-title .home-title-line { display: block; white-space: nowrap; }
.home-title .home-char { display: inline-block; }
.home-description { max-width: min(40vw, 560px); margin: 20px 0 0; color: rgba(239,245,248,.92); font: 400 clamp(15px, 1.25vw, 18px)/1.85 var(--font-sans, sans-serif); text-wrap: pretty; }
.home-enter {
  --press-scale: 1;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  min-width: 172px;
  min-height: 48px;
  margin-top: var(--space-7);
  padding: 9px 2px;
  border: 0;
  border-bottom: 1px solid rgba(239,245,248,.62);
  border-radius: 0;
  color: var(--white);
  background: transparent;
  font: 500 14px/1.5 var(--font-sans, sans-serif);
  text-decoration: none;
  touch-action: manipulation;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 160ms cubic-bezier(.23, 1, .32, 1);
}
.home-enter:focus-visible { border-color: var(--white); color: var(--white); background: rgba(255,255,255,.055); }
.home-enter:active { background: rgba(255,255,255,.09); --press-scale: .97; transform: translateY(1px) scale(var(--press-scale)); }
.home-enter.is-pressed { background: rgba(255,255,255,.09); --press-scale: .97; transform: translateY(1px) scale(var(--press-scale)); }
.home-enter svg { transition: transform 160ms cubic-bezier(.23, 1, .32, 1); }
.home-enter:focus-visible svg { transform: translate(2px, -2px); }
.home-enter:active svg { transform: translate(1px, -1px); }
.home-enter:focus-visible,
.home-progress a:focus-visible { outline: 2px solid var(--water); outline-offset: 4px; }
.home-enter > span:last-child[aria-hidden="true"] { font: 18px/1 Arial, "Noto Sans", sans-serif; font-variant-emoji: text; }
.home-enter.is-pending { color: rgba(239,245,248,.72); cursor: default; }

.home-chapter-visual { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; margin: 0; overflow: visible; pointer-events: none; }
.home-chapter-visual img {
  position: absolute;
  display: block;
  top: var(--photo-top, 0);
  right: var(--photo-right, auto);
  bottom: var(--photo-bottom, auto);
  left: var(--photo-left, 0);
  width: var(--photo-width, 100%);
  height: var(--photo-height, 100%);
  max-width: none;
  object-fit: var(--photo-fit, cover);
  object-position: var(--photo-position, center);
  filter: url(#uniqorn-watercolor-photo);
  -webkit-mask-image: url("img/ink-bleed-mask.png");
  mask-image: url("img/ink-bleed-mask.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.home-chapter-visual::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, var(--bg-current, var(--chapter-static-bg)) 0%, color-mix(in srgb, var(--bg-current, var(--chapter-static-bg)) 72%, transparent) 22%, transparent 72%), linear-gradient(0deg, color-mix(in srgb, var(--bg-current, var(--chapter-static-bg)) 28%, transparent), transparent 38%, color-mix(in srgb, var(--bg-current, var(--chapter-static-bg)) 18%, transparent));
}
.home-ink-haze { display: none; }

/* Cover: type owns the left; the room image dissolves toward the blue field. */
.home-chapter--intro .home-chapter-visual--room { --photo-top: -8%; --photo-right: -5%; --photo-left: auto; --photo-width: min(76vw, 1120px); --photo-height: 116%; --photo-fit: cover; --photo-position: center 54%; }
.home-chapter--intro .home-chapter-visual img { opacity: .54; }
.home-chapter--intro .home-chapter-visual::after { background: linear-gradient(90deg, var(--bg-current, var(--indigo)) 0%, color-mix(in srgb, var(--bg-current, var(--indigo)) 92%, transparent) 20%, color-mix(in srgb, var(--bg-current, var(--indigo)) 48%, transparent) 48%, transparent 82%), linear-gradient(0deg, var(--bg-current, var(--indigo)), transparent 32%, transparent 78%, color-mix(in srgb, var(--bg-current, var(--indigo)) 34%, transparent)); }
.home-chapter--intro .home-chapter-copy { max-width: 1320px; padding-top: clamp(34px, 7vh, 84px); }
.home-chapter--intro .home-kicker { margin-bottom: 28px; color: rgba(215,227,231,.82); }
.home-sign { position: absolute; z-index: 5; right: max(var(--gutter), calc((100vw - 1320px) / 2)); bottom: clamp(22px, 4vh, 48px); margin: 0; color: rgba(239,245,248,.58); font: 10px/1.4 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; }
.home-scroll-cue { display: inline-flex; align-items: center; gap: 14px; margin: 34px 0 0; color: rgba(239,245,248,.72); font: 11px/1.5 var(--font-sans, sans-serif); letter-spacing: .14em; }
.home-scroll-cue span { color: var(--anchor-red); font-size: var(--text-lg); }
a.home-scroll-cue { text-decoration: none; }
a.home-scroll-cue:focus-visible { outline: 2px solid #245F91; outline-offset: 6px; }
body.is-entrance .home-subtitle { color: rgba(20, 42, 72, .78); }
.home-subtitle { max-width: 32em; margin: 22px 0 0; color: rgba(239, 245, 248, .82); font: 400 clamp(15px, 1.2vw, 17px)/1.9 var(--font-display); letter-spacing: .02em; text-wrap: pretty; }
/* Founder line: who is here with you, before the three spaces. */
.home-founder { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; max-width: 34em; margin: 18px 0 0; color: rgba(239, 245, 248, .9); font: 400 clamp(15px, 1.15vw, 17px)/1.8 var(--font-display); letter-spacing: .02em; }
.home-founder-line { text-wrap: pretty; }
.home-founder-link { color: inherit; font: 400 var(--text-sm, 14px)/1.6 var(--font-display); text-decoration: underline; text-decoration-color: color-mix(in srgb, #C58B8E 70%, transparent); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.home-founder-link:hover, .home-founder-link:focus-visible { text-decoration-color: currentColor; }
body.is-entrance .home-founder { color: rgba(20, 42, 72, .86); }
.home-space-index { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 26px 0 0; color: rgba(239, 245, 248, .78); font: 400 12.5px/1.6 var(--font-sans, sans-serif); letter-spacing: .06em; }
.home-title .home-title-keep { display: inline; white-space: nowrap; }
.home-space-index a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color 180ms ease, border-color 180ms ease; }
.home-space-index a:hover,
.home-space-index a:focus-visible { color: var(--white); border-bottom-color: rgba(255, 255, 255, .6); }
.home-space-index a:focus-visible { outline: 2px solid var(--water); outline-offset: 4px; }
.home-space-index span { opacity: .5; }
html body.is-entrance .home-story .home-chapter--intro .home-space-index { color: rgba(30, 58, 95, .74); }
html body.is-entrance .home-story .home-chapter--intro .home-space-index a:hover,
html body.is-entrance .home-story .home-chapter--intro .home-space-index a:focus-visible { color: var(--indigo); border-bottom-color: rgba(30, 58, 95, .5); }
html.is-watercolor-story .home-chapter--intro .home-space-index { position: absolute; z-index: 5; left: max(28px, calc((100vw - 1320px) / 2)); bottom: max(64px, calc(env(safe-area-inset-bottom) + 58px)); margin: 0; transform: translateY(var(--chapter-shift-y, 0px)); }

/* Tarot: one quiet tall crop at left, copy and destination at right. */
.home-chapter--tarot .home-chapter-visual { --photo-top: 5%; --photo-left: 2%; --photo-right: auto; --photo-width: min(42vw, 610px); --photo-height: 91%; --photo-fit: cover; --photo-position: center 52%; }
.home-chapter--tarot .home-chapter-visual::after { background: linear-gradient(90deg, transparent 15%, color-mix(in srgb, var(--bg-current, #0F1226) 18%, transparent) 52%, var(--bg-current, #0F1226) 100%), linear-gradient(0deg, var(--bg-current, #0F1226), transparent 30%, transparent 78%, color-mix(in srgb, var(--bg-current, #0F1226) 35%, transparent)); }
.home-chapter--tarot .home-chapter-copy { width: min(37vw, 560px); margin-left: 57%; margin-right: 6%; }
.home-chapter--tarot .home-title { max-width: 8em; font-size: clamp(42px, 4.3vw, 62px); line-height: 1.28; }

/* Workshops: expansive cool photograph on the right; title above and action below at left. */
.home-chapter--workshops .home-chapter-visual { --photo-top: 7%; --photo-left: 39%; --photo-right: -4%; --photo-width: 65%; --photo-height: 86%; --photo-fit: cover; --photo-position: center 48%; }
.home-chapter--workshops .home-chapter-visual::after { background: linear-gradient(90deg, var(--bg-current, #4A6E94) 0%, color-mix(in srgb, var(--bg-current, #4A6E94) 70%, transparent) 30%, transparent 70%), linear-gradient(0deg, color-mix(in srgb, var(--bg-current, #4A6E94) 36%, transparent), transparent 28%, transparent 80%, color-mix(in srgb, var(--bg-current, #4A6E94) 28%, transparent)); }
.home-chapter--workshops .home-chapter-copy { box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; width: min(36vw, 510px); height: 100%; margin-left: max(5vw, 32px); margin-right: auto; padding-block: clamp(54px, 8vh, 94px); }
.home-chapter--workshops .home-title { max-width: 7em; font-size: clamp(38px, 4.5vw, 64px); }
.home-chapter--workshops .home-description { max-width: 27em; }
.home-chapter--workshops .home-enter { margin-top: auto; }
.home-chapter--workshops .home-kicker,
.home-chapter--workshops .home-description { color: var(--white); }

/* Crystals: clear photographic presentation with intact bracelet loop. */
.home-chapter--crystals .home-chapter-visual { --photo-top: 4%; --photo-right: -1%; --photo-left: auto; --photo-width: min(44vw, 620px); --photo-height: 90%; --photo-fit: contain; --photo-position: center bottom; }
.home-chapter--crystals .home-chapter-visual::after { background: linear-gradient(90deg, var(--bg-current, #0A1B2B), transparent 25%, transparent 72%, var(--bg-current, #0A1B2B)), linear-gradient(0deg, var(--bg-current, #0A1B2B), transparent 30%, transparent 78%, color-mix(in srgb, var(--bg-current, #0A1B2B) 26%, transparent)); }
.home-chapter--crystals .home-chapter-copy { width: min(40vw, 590px); text-align: center; }
.home-chapter--crystals .home-chapter-copy > * { margin-inline: auto; }
.home-chapter--crystals .home-title { max-width: 9em; font-size: clamp(34px, 4.2vw, 60px); }

/* About: rose paper, ink-dark copy, and a portrait fading into the right edge. */
.home-chapter--about .home-chapter-visual--founder { --photo-top: 0; --photo-right: 1%; --photo-left: auto; --photo-height: 100%; --photo-width: calc(var(--water-stage-height, 100vh) * .6667); --photo-fit: contain; --photo-position: right center; }
.home-chapter--about .home-chapter-visual::after { background: linear-gradient(90deg, var(--rose) 0%, color-mix(in srgb, var(--rose) 90%, transparent) 37%, color-mix(in srgb, var(--rose) 32%, transparent) 72%, transparent 100%), linear-gradient(0deg, color-mix(in srgb, var(--rose) 28%, transparent), transparent 28%, transparent 78%, color-mix(in srgb, var(--rose) 18%, transparent)); }
.home-chapter--about .home-chapter-copy { width: min(46vw, 650px); margin-left: max(6vw, 32px); margin-right: auto; }
.home-chapter--about .home-kicker,
.home-chapter--about .home-title,
.home-chapter--about .home-description { color: var(--indigo-deep); }
.home-chapter--about .home-enter { color: var(--indigo-deep); border-color: rgba(20,42,72,.65); }
.home-chapter--about .home-enter:focus-visible { color: var(--indigo-deep); border-color: var(--indigo-deep); background: rgba(20,42,72,.055); }
.home-chapter--about .home-enter:active { color: var(--indigo-deep); border-color: var(--indigo-deep); background: rgba(20,42,72,.08); }
.home-chapter--about .home-enter.is-pressed { color: var(--indigo-deep); border-color: var(--indigo-deep); background: rgba(20,42,72,.08); }
.home-chapter--about .home-enter:focus-visible { outline-color: var(--indigo-deep); }
.home-about-copy .home-description { max-width: min(40vw, 560px); }

/* Close: keep the original square seat while the invitation opens into a horizontal link. */
.home-chapter--close .home-chapter-viewport { background: radial-gradient(ellipse 62% 82% at 65% 45%, color-mix(in srgb, var(--chapter-glow) 11%, transparent), transparent 72%); }
.home-close-copy { width: min(calc(100% - 2 * var(--gutter)), 1320px); text-align: center; }
.home-close-copy .home-title { max-width: min(76vw, 1160px); margin-inline: auto; font-size: clamp(48px, 7vw, 104px); line-height: 1.2; }
.home-close-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 44px; margin: 44px auto 0; max-width: 100%; }
.home-close-actions .home-enter { justify-content: flex-start; gap: 12px; min-width: 0; min-height: 48px; margin: 0; padding: 9px 2px; border-bottom-color: rgba(215,227,231,.66); }
.home-close-actions .home-enter:hover { border-bottom-color: var(--white); }
.home-water-cta-mark { position: relative; top: auto; left: auto; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 5px rgba(197,139,142,.14), 0 0 25px rgba(197,139,142,.42); transform: none; }
.home-close-label { display: inline-block; white-space: nowrap; opacity: 1; transform: none; clip-path: none; transition: none !important; }
.home-close-arrow { display: inline-flex; opacity: 1; transform: none; transition: none !important; }
html.is-watercolor-story .home-water-cta-mark { opacity: 0; }
html.is-watercolor-story .home-close-label { opacity: var(--close-label-show, 1); transform: translateX(var(--close-label-shift, 0px)); clip-path: inset(0 var(--close-label-clip, 0%) 0 0); }
html.is-watercolor-story .home-close-arrow { opacity: var(--close-arrow-show, 1); transform: translateX(var(--close-arrow-shift, 0px)); }
html.is-watercolor-story .home-close-actions .home-enter:focus-visible .home-close-label,
html.is-watercolor-story .home-close-actions .home-enter:focus-visible .home-close-arrow { opacity: 1 !important; transform: none !important; }
html.is-watercolor-story .home-close-actions .home-enter:focus-visible .home-close-label { clip-path: inset(0 0 0 0) !important; }
html.is-watercolor-story .home-chapter--close .home-close-actions .home-enter:active,
html.is-watercolor-story .home-chapter--close .home-close-actions .home-enter.is-pressed { transform: none; background: rgba(255,255,255,.09); }

/* The nav stays usable in both static and enhanced reading modes with living water thread & dewdrop. */
.home-progress {
  --progress-dot: rgba(36, 95, 145, .75);
  --progress-thread: rgba(36, 95, 145, .38);
  --progress-ring: rgba(36, 95, 145, .5);
  --progress-focus: var(--indigo-deep);
  --progress-focus-edge: var(--white);
  position: fixed;
  z-index: 25;
  top: 50%;
  right: max(5px, calc(1.8vw - 11px));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transform: translateY(-50%);
}
.home-progress::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(
    180deg,
    transparent 0%,
    var(--progress-thread) 15%,
    var(--progress-thread) 50%,
    var(--progress-thread) 85%,
    transparent 100%
  );
  pointer-events: none;
}
.home-progress a {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  text-decoration: none;
}
.home-progress a::before {
  content: "";
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--progress-dot);
  transition: width .35s ease, height .35s ease, background-color .35s ease, transform .35s ease, box-shadow .35s ease;
}
.home-progress a.is-current::before,
.home-progress a[aria-current="location"]::before {
  width: 7px;
  height: 7px;
  background: #245F91;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 2.5px rgba(36, 95, 145, 0.15), 0 3px 10px rgba(36, 95, 145, 0.28);
  transform: scale(1.1);
}
body.is-entrance .home-progress a:focus-visible {
  outline: 2px solid var(--progress-focus);
  outline-offset: 0;
  box-shadow: 0 0 0 4px var(--progress-focus-edge);
}
.home-progress a::after {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px solid var(--progress-ring);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}
.home-progress a.is-current::after { opacity: 1; transform: scale(1); }
.home-progress-label {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  padding: var(--space-1) 10px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .94);
  color: var(--indigo-deep);
  font: 500 11px/1.4 var(--font-sans, sans-serif);
  letter-spacing: .06em;
  white-space: nowrap;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transform: translate(6px, -50%);
  transition: opacity 180ms ease, transform 180ms ease;
}
.home-progress a:hover .home-progress-label,
.home-progress a:focus-visible .home-progress-label { opacity: 1; transform: translate(0, -50%); }

@media (prefers-reduced-motion: reduce) {
  .home-progress a,
  .home-progress a::before,
  .home-progress a::after { transition: none; }
}

/* Layered field and water marks are only present in the enhanced stage. */
.home-atmosphere { position: absolute; z-index: 0; inset: 0; overflow: hidden; isolation: isolate; background-color: var(--bg-current, var(--indigo)); pointer-events: none; }
.home-atmosphere::before { content: ""; position: absolute; inset: -4%; background: radial-gradient(ellipse 72% 62% at var(--glow-x, 76%) var(--glow-y, 38%), color-mix(in srgb, var(--glow-color, var(--mist)) 23%, transparent), transparent 74%), radial-gradient(ellipse 48% 66% at 15% 84%, color-mix(in srgb, var(--bg-current, var(--indigo)) 74%, #547896), transparent 76%), radial-gradient(ellipse 56% 42% at 88% 8%, color-mix(in srgb, var(--bg-current, var(--indigo)) 72%, #A9BAC6), transparent 78%), linear-gradient(148deg, color-mix(in srgb, var(--bg-current, var(--indigo)) 86%, var(--navy)) 0%, var(--bg-current, var(--indigo)) 52%, color-mix(in srgb, var(--bg-current, var(--indigo)) 82%, var(--indigo-deep)) 100%); transition: none; }
.home-atmosphere::after { content: ""; position: absolute; inset: -12%; opacity: .13; background: repeating-radial-gradient(ellipse 54% 43% at var(--glow-x, 76%) var(--glow-y, 38%), transparent 0 25px, rgba(218,232,238,.16) 27px, transparent 31px 57px); filter: blur(7px); mix-blend-mode: soft-light; }
.home-atmosphere-glow { position: absolute; inset: 0; background: radial-gradient(ellipse 48% 42% at var(--glow-x, 76%) var(--glow-y, 38%), color-mix(in srgb, var(--glow-color, var(--mist)) 15%, transparent), transparent 76%); opacity: .76; }
.home-atmosphere-grain,
.home-water-grain { position: absolute; inset: -1%; background: url("img/pigment.png") center / 360px 360px repeat; mix-blend-mode: soft-light; opacity: .085; pointer-events: none; }
.home-water-effects { position: absolute; z-index: auto; inset: 0; overflow: visible; pointer-events: none; }
.home-water-window {
  position: absolute;
  z-index: 1;
  left: var(--window-left, 50%);
  top: var(--window-top, 50%);
  width: var(--window-width, 0px);
  height: var(--window-height, 0px);
  border-radius: var(--window-radius, 50%);
  opacity: var(--window-show, 0);
  overflow: visible;
  filter: url(#uniqorn-watercolor-edge);
  background: radial-gradient(ellipse 76% 68% at 47% 50%, var(--window-color, #0F1226) 0 28%, color-mix(in srgb, var(--window-color, #0F1226) 80%, transparent) 55%, transparent 92%), radial-gradient(ellipse 56% 75% at 72% 38%, color-mix(in srgb, var(--window-color, #0F1226) 76%, var(--mist)) 0%, transparent 76%), radial-gradient(ellipse 68% 51% at 22% 67%, color-mix(in srgb, var(--window-color, #0F1226) 76%, #090F22) 0%, transparent 79%), radial-gradient(ellipse 34% 42% at 53% 6%, color-mix(in srgb, var(--window-color, #0F1226) 78%, #E0D7D1) 0%, transparent 82%), radial-gradient(ellipse 43% 36% at 90% 89%, color-mix(in srgb, var(--window-color, #0F1226) 78%, #6D5267) 0%, transparent 84%);
  box-shadow: inset 0 0 28px color-mix(in srgb, var(--window-color, #0F1226) 14%, transparent), 0 0 100px color-mix(in srgb, var(--window-color, #0F1226) 28%, transparent);
}
.home-water-window::before { content: ""; position: absolute; z-index: 0; inset: -13%; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse 60% 58% at calc(24% + var(--water-flow-x, 0px)) calc(26% + var(--water-flow-y, 0px)), color-mix(in srgb, var(--window-color, #0F1226) 48%, #D5E0E4) 0%, transparent 78%), radial-gradient(ellipse 45% 66% at calc(81% - var(--water-flow-x, 0px)) calc(68% + var(--water-flow-y, 0px)), color-mix(in srgb, var(--window-color, #0F1226) 56%, #121C39) 0%, transparent 79%), radial-gradient(ellipse 34% 38% at 53% 48%, color-mix(in srgb, var(--window-color, #0F1226) 70%, #F0DFD2) 0%, transparent 81%); filter: blur(24px); opacity: .66; mix-blend-mode: screen; transform: rotate(var(--water-flow-angle, 0deg)) scale(var(--water-flow-scale, 1.03)); }
.home-water-window::after { content: ""; position: absolute; inset: -2%; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse 72% 60% at 50% 2%, rgba(221,234,240,.16), transparent 70%), radial-gradient(ellipse 68% 56% at 3% 62%, color-mix(in srgb, var(--window-color, #0F1226) 60%, #75879D) 0%, transparent 76%), radial-gradient(ellipse 74% 64% at 97% 45%, color-mix(in srgb, var(--window-color, #0F1226) 58%, #0B1329) 0%, transparent 78%); mix-blend-mode: soft-light; opacity: .84; transform: rotate(var(--water-flow-angle, 0deg)); }
.home-water-flood {
  position: absolute;
  z-index: 5;
  left: var(--flood-left, 50%);
  top: var(--flood-top, 50%);
  width: var(--flood-diameter, 0px);
  height: var(--flood-diameter, 0px);
  border-radius: 0;
  opacity: var(--flood-show, 0);
  filter: none;
  -webkit-mask: url("img/wash-mask-b.png") center / 100% 100% no-repeat;
  mask: url("img/wash-mask-b.png") center / 100% 100% no-repeat;
  background: radial-gradient(ellipse 55% 48% at 39% 32%, rgba(246,208,196,.68), transparent 72%), radial-gradient(ellipse 72% 68% at 63% 56%, #D29A9B 0%, var(--rose) 53%, #B7787E 100%);
  box-shadow: inset 0 0 95px rgba(111,48,67,.2), 0 0 115px rgba(197,139,142,.27);
}
.home-water-flood::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .46;
  mix-blend-mode: multiply;
  background:
    radial-gradient(ellipse 13% 10% at 18% 32%, rgba(93,47,66,.46) 0%, rgba(118,62,78,.2) 48%, transparent 78%),
    radial-gradient(ellipse 9% 16% at 83% 48%, rgba(108,52,70,.38) 0%, rgba(132,67,81,.16) 50%, transparent 79%),
    radial-gradient(ellipse 17% 8% at 62% 82%, rgba(105,52,68,.32) 0%, rgba(137,71,83,.12) 45%, transparent 76%);
}
.home-water-drop,
.home-water-tail { position: absolute; pointer-events: none; }
.home-water-drop {
  z-index: 7;
  left: var(--drop-x, 50%);
  top: var(--drop-y, 50%);
  width: var(--drop-size, 12px);
  height: var(--drop-size, 12px);
  border-radius: var(--drop-radius, 54% 46% 58% 42%);
  opacity: var(--drop-show, 0);
  transform: translate(-50%, -50%) scaleY(var(--drop-stretch, 1)) rotate(var(--drop-rotate, 45deg));
  background: var(--rose);
  box-shadow: 0 0 0 5px rgba(197,139,142,.14), 0 0 25px rgba(197,139,142,.42);
}
.home-water-tail {
  z-index: 6;
  left: var(--tail-x, 50%);
  top: var(--tail-y, 50%);
  width: 2px;
  height: var(--tail-height, 0px);
  opacity: var(--tail-show, 0);
  transform: translate(-50%, -100%);
  background: linear-gradient(0deg, rgba(197,139,142,.55), rgba(197,139,142,.12) 74%, transparent);
  filter: blur(.5px);
}
.home-water-grain { z-index: 8; opacity: .035; background-size: 520px 520px; background-position: 37% 61%; }

/* Enhanced layout follows the JS contract; without this class the page stays in flow. */
html.is-watercolor-story .home-story {
  height: var(--water-track-height);
  min-height: 0;
  overflow: visible;
  background: var(--bg-current, var(--indigo));
}
html.is-watercolor-story .home-water-stage {
  position: sticky;
  z-index: 1;
  top: var(--header-h);
  display: block;
  height: var(--water-stage-height, calc(100svh - var(--header-h)));
  overflow: hidden;
  isolation: isolate;
  background: var(--bg-current, var(--indigo));
}
html.is-watercolor-story .home-atmosphere,
html.is-watercolor-story .home-water-effects { display: block; }
html.is-watercolor-story .home-chapter {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  opacity: var(--chapter-show, 0);
  transform: none;
  transition: none;
  pointer-events: none;
  background: transparent;
  background-image: none;
  scroll-margin-top: 0;
}
html.is-watercolor-story .home-chapter.is-current { pointer-events: auto; }
html.is-watercolor-story .home-chapter-viewport { width: 100%; height: 100%; min-height: 0; padding: 0; overflow: hidden; }
html.is-watercolor-story .home-chapter-copy {
  opacity: 1;
  transform: translateY(var(--chapter-shift-y, 0px));
  transition: none;
}
html.is-watercolor-story .home-chapter-copy > * { pointer-events: none; }
html.is-watercolor-story .home-chapter.is-current .home-chapter-copy > * { pointer-events: auto; }
html.is-watercolor-story .home-chapter-copy [data-story-reveal] { opacity: 1; }
html.is-watercolor-story .home-chapter-copy [data-story-reveal]:not(.home-enter) { transform: none; }
html.is-watercolor-story .home-progress { z-index: 12; }
html.is-watercolor-story .home-chapter--about,
html.is-watercolor-story .home-chapter--close { z-index: 6; }
html.is-watercolor-story .home-chapter--intro .home-scroll-cue { position: absolute; left: max(28px, calc((100vw - 1320px) / 2)); bottom: max(28px, env(safe-area-inset-bottom)); z-index: 5; }
html.is-watercolor-story .home-chapter--intro .home-sign { bottom: max(28px, env(safe-area-inset-bottom)); }
html.is-watercolor-story .home-chapter--intro .home-scroll-cue,
html.is-watercolor-story .home-chapter--intro .home-sign { transform: translateY(var(--chapter-shift-y, 0px)); }
/* The five per-chapter photo drifts were replaced by one shared surface rise (see .home-chapter-visual below). */
body.is-watercolor-home .site-header::before {
  content: none;
}
body.is-watercolor-home .site-header::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0 0 -24px;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(16,43,73,.58) 0%, rgba(16,43,73,.58) calc(100% - 24px), rgba(16,43,73,0) 100%);
}
body.is-watercolor-home.is-entrance .site-header {
  background: linear-gradient(to bottom, rgba(16,43,73,.92), rgba(16,43,73,.54) 64%, rgba(16,43,73,0));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 0;
}
body.is-watercolor-home .site-header-inner { position: relative; z-index: 2; }
body.is-watercolor-home .site-header .wordmark,
body.is-watercolor-home .site-header .wordmark span,
body.is-watercolor-home .site-header .menu a,
body.is-watercolor-home .site-header .header-cta,
body.is-watercolor-home .site-header .menu a:hover,
body.is-watercolor-home .site-header .menu .current-menu-item > a,
body.is-watercolor-home .site-header .menu .current_page_item > a {
  color: var(--white);
}
body.is-watercolor-home .site-header .header-cta { border-color: rgba(255,255,255,.82); }
body.is-watercolor-home .site-header .menu .support-link a { color: var(--white); }

/* Mobile compositions keep the same order: image, then copy in About. */
@media (max-width: 900px) {
  .home-chapter { min-height: calc(100svh - var(--header-h)); }
  .home-chapter-viewport { align-items: end; padding-block: 0; }
  .home-chapter-copy { box-sizing: border-box; width: calc(100% - 48px); margin-inline: 24px; padding: 0 0 max(32px, env(safe-area-inset-bottom)); }
  .home-title { max-width: 92vw; font-size: clamp(34px, 7vw, 52px); }
  .home-title--intro { max-width: 92vw; font-size: clamp(30px, 7vw, 48px); line-height: 1.25; }
  .home-title-en { margin-top: 12px; font-size: var(--text-sm); }
  .home-founder { margin-top: 14px; font-size: var(--text-base, 15px); }
  .home-description { max-width: 36em; margin-top: 14px; font-size: var(--text-base); line-height: 1.7; }
  .home-kicker { margin-bottom: 12px; }
  .home-enter { min-height: 48px; margin-top: 18px; }
  .home-chapter--intro .home-chapter-visual--room { --photo-top: -2%; --photo-right: -22%; --photo-width: 115vw; --photo-height: 70%; --photo-position: 57% center; }
  .home-chapter--intro .home-chapter-visual img { opacity: .42; }
  .home-chapter--intro .home-chapter-visual::after { background: linear-gradient(180deg, color-mix(in srgb, var(--indigo) 24%, transparent), transparent 34%, var(--indigo) 100%); }
  .home-chapter--intro .home-chapter-viewport { align-items: center; }
  .home-chapter--intro .home-chapter-copy { padding-top: 32vh; }
  .home-chapter--tarot .home-chapter-visual { --photo-top: 3%; --photo-left: -10%; --photo-width: 76vw; --photo-height: 58%; }
  .home-chapter--tarot .home-chapter-copy { width: calc(100% - 48px); margin-inline: 24px; padding-bottom: max(34px, env(safe-area-inset-bottom)); }
  .home-chapter--tarot .home-title { max-width: 12em; }
  .home-chapter--workshops .home-chapter-visual { --photo-top: 0; --photo-left: 18%; --photo-right: -12%; --photo-width: 94%; --photo-height: 55%; --photo-position: 62% 46%; }
  .home-chapter--workshops .home-chapter-copy { width: calc(100% - 48px); height: 100%; margin-inline: 24px; padding-block: 28px max(28px, env(safe-area-inset-bottom)); }
  .home-chapter--workshops .home-title { max-width: 11em; font-size: clamp(34px, 7vw, 50px); }
  .home-chapter--workshops .home-description { max-width: 30em; }
  .home-chapter--workshops .home-enter { margin-top: auto; }
  .home-chapter--crystals .home-chapter-visual { --photo-top: -2%; --photo-right: -12%; --photo-width: 56vw; --photo-height: 62%; }
  .home-chapter--crystals .home-chapter-copy { width: calc(100% - 48px); margin-inline: 24px; padding-bottom: max(34px, env(safe-area-inset-bottom)); text-align: left; }
  .home-chapter--crystals .home-chapter-copy > * { margin-inline: 0; }
  .home-chapter--crystals .home-title { max-width: 13em; font-size: clamp(33px, 7vw, 48px); }
  .home-chapter--about .home-chapter-viewport { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; }
  .home-chapter--about .home-chapter-visual--founder { --photo-top: 3%; --photo-right: -5%; --photo-height: 43%; --photo-width: calc(var(--water-stage-height, 100vh) * .32); }
  .home-chapter--about .home-chapter-visual::after { background: linear-gradient(180deg, transparent 20%, var(--rose) 48%, var(--rose) 100%); }
  .home-chapter--about .home-chapter-copy { width: calc(100% - 48px); margin: auto 24px 0; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .home-chapter--about .home-title { max-width: 12em; font-size: clamp(32px, 7vw, 46px); }
  .home-about-copy .home-description { max-width: 34em; }
  .home-chapter--close .home-title { max-width: 14em; font-size: clamp(36px, 8vw, 60px); }
  .home-close-actions { flex-direction: column; gap: 12px; margin-top: 32px; }
  .home-close-actions .home-enter { width: min(260px, 100%); font-size: 14px; }
  .home-water-cta-mark { flex-basis: 8px; width: 8px; height: 8px; }
  .home-close-arrow svg { width: 18px; height: 18px; }
  .home-progress { right: 4px; gap: 0; }
  .home-progress a { width: 44px; height: 44px; }
  .home-sign { display: none; }
  html.is-watercolor-story .home-chapter--intro .home-scroll-cue { left: 24px; bottom: 20px; }
  html.is-watercolor-story .home-chapter--intro .home-space-index { left: 24px; bottom: 52px; }
  .home-space-index { font-size: var(--text-sm); gap: 4px 10px; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .home-chapter--intro .home-title--intro { font-size: clamp(28px, 7.8vw, 42px); line-height: 1.25; }
  .home-chapter--crystals .home-title { font-size: clamp(31px, 8vw, 42px); }
  .home-description { max-width: 30em; }
}
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .home-chapter--intro .home-chapter-copy { padding-top: 16vh; }
  .home-title--intro { font-size: clamp(26px, 6.2vh, 42px); }
  .home-chapter--about .home-chapter-visual--founder { --photo-height: 72%; --photo-width: calc(var(--water-stage-height, 100vh) * .44); }
  .home-chapter--about .home-chapter-copy { width: 54%; margin-left: 24px; }
  .home-chapter--about .home-title { font-size: clamp(28px, 5.3vh, 40px); }
}

/* Keep the business footer and all its WordPress-managed links untouched. */
.site-footer--home { position: relative; z-index: 1; padding: 72px 0 24px; color: var(--indigo-deep); background-color: var(--white); }
.site-footer--home .home-footer-inner { max-width: 1320px; margin-inline: auto; }
.site-footer--home .home-footer-bottom { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); padding-bottom: 44px; }
.site-footer--home .home-footer-brand-link { display: inline-block; text-decoration: none; }
.site-footer--home .home-footer-logo { display: block; width: clamp(138px, 12vw, 154px); height: auto; }
.site-footer--home .home-footer-tagline { margin-top: 16px; }
.site-footer--home .home-footer-tagline-zh { margin: 0; color: var(--indigo-deep); font: 500 13.5px/1.6 var(--font-sans, sans-serif); letter-spacing: .02em; }
.site-footer--home .home-footer-tagline-en { margin: 4px 0 0; color: rgba(20, 42, 72, 0.62); font: 400 11.5px/1.5 var(--font-mono); letter-spacing: .04em; }
.site-footer--home .home-footer-bottom nav,
.site-footer--home .home-footer-connect { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.site-footer--home .home-footer-label { margin: 0 0 10px; color: rgba(20, 42, 72, 0.72); font: 600 12px/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.site-footer--home .home-footer-bottom a:not(.home-footer-brand-link) { min-height: 28px; display: inline-flex; align-items: center; color: var(--indigo-deep); font-size: 13.5px; text-decoration: none; }
.site-footer--home .home-footer-bottom a:hover,
.site-footer--home .home-footer-bottom a:focus-visible,
.site-footer--home .home-footer-meta a:hover,
.site-footer--home .home-footer-meta a:focus-visible { color: var(--indigo); }
.site-footer--home .home-footer-social-link { display: inline-flex; align-items: center; gap: 8px; }
.site-footer--home .home-footer-social-icon { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; opacity: 0.85; transition: opacity 0.2s ease, transform 0.2s ease, color 0.2s ease; }
.site-footer--home .home-footer-social-link:hover .home-footer-social-icon,
.site-footer--home .home-footer-social-link:focus-visible .home-footer-social-icon { opacity: 1; color: var(--indigo); transform: translateY(-1px); }
.site-footer--home .home-footer-legal .menu { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-footer--home .home-footer-meta { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 20px; border-top: 1px solid rgba(20, 42, 72, 0.12); color: rgba(20, 42, 72, 0.6); font-size: var(--text-sm); }
.site-footer--home .home-footer-meta p { margin: 0; }
.site-footer--home .home-footer-meta a { min-height: 36px; display: inline-flex; align-items: center; color: rgba(20, 42, 72, 0.72); text-decoration: none; }
@media (max-width: 900px) {
  .site-footer--home { padding: 56px 0 20px; }
  .site-footer--home .home-footer-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .site-footer--home .home-footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) and (orientation: portrait) {
  .site-footer--home .home-footer-bottom { gap: 30px 20px; }
  .site-footer--home .home-footer-meta { align-items: flex-start; flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html.is-watercolor-story .home-story { height: auto; min-height: 0; overflow: visible; }
  html.is-watercolor-story .home-water-stage { position: static; display: contents; height: auto; overflow: visible; }
  html.is-watercolor-story .home-atmosphere,
  html.is-watercolor-story .home-water-effects { display: none; }
  html.is-watercolor-story .home-chapter { position: relative; inset: auto; height: auto; min-height: calc(100svh - var(--header-h)); opacity: 1; transform: none; pointer-events: auto; background: var(--chapter-static-bg); background-image: radial-gradient(ellipse 68% 78% at var(--chapter-glow-x) var(--chapter-glow-y), color-mix(in srgb, var(--chapter-glow) 15%, transparent), transparent 72%); }
  html.is-watercolor-story .home-chapter-viewport { height: auto; min-height: inherit; padding: clamp(44px, 8vh, 88px) 0; }
  html.is-watercolor-story .home-chapter-copy > * { pointer-events: auto; }
  html.is-watercolor-story .home-chapter-visual img { transform: none !important; }
  .home-story *,
  .site-footer--home * { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
@supports not (height: 100svh) {
  .home-chapter { min-height: calc(100vh - var(--header-h)); }
}

body.is-home-rose .home-progress a::before { border-color: transparent; }
body.is-home-rose .home-progress a.is-current::before { background: var(--indigo-deep); }
.home-enter svg { display: block; width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .home-enter:hover { border-color: var(--white); color: var(--white); background: rgba(255,255,255,.055); }
  .home-enter:hover svg { transform: translate(2px, -2px); }
  .home-chapter--about .home-enter:hover { color: var(--indigo-deep); border-color: var(--indigo-deep); background: rgba(20,42,72,.055); }
  .home-chapter--close .home-enter:hover { transform: none; background: rgba(255,255,255,.1); }
  .home-enter:active { --press-scale: .97; transform: translateY(1px) scale(var(--press-scale)); background: rgba(255,255,255,.09); }
  .home-chapter--about .home-enter:active { background: rgba(20,42,72,.08); }
  .home-chapter--close .home-enter:active { --press-scale: .97; transform: scale(var(--press-scale)); background: rgba(255,255,255,.09); }
}

html.is-watercolor-story .home-chapter { will-change: opacity, transform; }
html.is-watercolor-story .home-chapter-visual img { will-change: transform; }

@media (max-width: 900px) {
  .home-chapter--workshops .home-chapter-visual { --photo-top: 1%; --photo-height: 49%; }
  .home-chapter--workshops .home-chapter-copy { height: auto; padding-top: 0; }
  .home-chapter--workshops .home-enter { margin-top: 18px; }
  .home-chapter--workshops .home-chapter-visual::after { background: linear-gradient(180deg, transparent 20%, transparent 36%, var(--bg-current, var(--indigo)) 54%, var(--bg-current, var(--indigo))); }
}
@media (min-width: 901px) {
  html.is-watercolor-story .home-chapter--workshops .home-chapter-copy { height: auto; padding-block: 24px; top: -6%; }
  html.is-watercolor-story .home-chapter--workshops .home-enter { margin-top: 28px; }
}
/* The marker remains a stable landing target while label transforms reveal without reflow. */
/* Explicit paint layers keep filtered pigment below the photographic chapters. */
html.is-watercolor-story .home-chapter { z-index: 10; }
html.is-watercolor-story .home-water-flood { z-index: 15; }
html.is-watercolor-story .home-chapter--about,
html.is-watercolor-story .home-chapter--close { z-index: 16; }
html.is-watercolor-story .home-water-drop { z-index: 17; }
html.is-watercolor-story .home-water-tail { z-index: 17; }
html.is-watercolor-story .home-water-grain { z-index: 18; }
html.is-watercolor-story .home-progress { z-index: 20; }
.home-water-window { border-radius: 42% 58% 44% 56% / 47% 42% 58% 53%; box-shadow: none; }
/* Feather the pigment field itself; the alpha wash removes any cut-out silhouette. */
.home-water-window {
  border-radius: 0;
  -webkit-mask: url("img/wash-mask-a.png") center / 100% 100% no-repeat;
  mask: url("img/wash-mask-a.png") center / 100% 100% no-repeat;
}
/* The photo's existing watercolor alpha mask supplies its edge without a second filter pass. */
.home-chapter-visual img { filter: none; }

.home-water-window { filter: none; }

/* Let each photo keep the same watercolor edge language while easing the aperture to its settled crop. */
.home-chapter--tarot .home-chapter-visual img,
.home-chapter--workshops .home-chapter-visual img,
.home-chapter--crystals .home-chapter-visual img,
.home-chapter--about .home-chapter-visual img {
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.home-chapter--tarot .home-chapter-visual img {
  -webkit-mask-image: url("img/ink-bleed-mask.png"), linear-gradient(90deg, #fff 0%, #fff 69%, rgba(255,255,255,.82) 83%, rgba(255,255,255,.22) 96%, transparent 100%), radial-gradient(ellipse 56% 64% at 50% 50%, #fff 57%, rgba(255,255,255,.96) 68%, rgba(255,255,255,.55) 79%, transparent 87%);
  mask-image: url("img/ink-bleed-mask.png"), linear-gradient(90deg, #fff 0%, #fff 69%, rgba(255,255,255,.82) 83%, rgba(255,255,255,.22) 96%, transparent 100%), radial-gradient(ellipse 56% 64% at 50% 50%, #fff 57%, rgba(255,255,255,.96) 68%, rgba(255,255,255,.55) 79%, transparent 87%);
  -webkit-mask-size: calc(76% + 34% * var(--photo-reveal, 1)) calc(76% + 32% * var(--photo-reveal, 1)), 100% 100%, 100% 100%;
  mask-size: calc(76% + 34% * var(--photo-reveal, 1)) calc(76% + 32% * var(--photo-reveal, 1)), 100% 100%, 100% 100%;
  -webkit-mask-position: center, center, center;
  mask-position: center, center, center;
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat, no-repeat;
}
.home-chapter--workshops .home-chapter-visual img {
  -webkit-mask-image: url("img/ink-bleed-mask.png"), linear-gradient(90deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.52) 9%, #fff 23%, #fff 100%), radial-gradient(ellipse 58% 62% at 50% 50%, #fff 60%, rgba(255,255,255,.95) 71%, rgba(255,255,255,.56) 81%, transparent 88%);
  mask-image: url("img/ink-bleed-mask.png"), linear-gradient(90deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.52) 9%, #fff 23%, #fff 100%), radial-gradient(ellipse 58% 62% at 50% 50%, #fff 60%, rgba(255,255,255,.95) 71%, rgba(255,255,255,.56) 81%, transparent 88%);
  -webkit-mask-size: calc(76% + 36% * var(--photo-reveal, 1)) calc(76% + 34% * var(--photo-reveal, 1)), 100% 100%, 100% 100%;
  mask-size: calc(76% + 36% * var(--photo-reveal, 1)) calc(76% + 34% * var(--photo-reveal, 1)), 100% 100%, 100% 100%;
  -webkit-mask-position: center, center, center;
  mask-position: center, center, center;
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat, no-repeat;
}
.home-chapter--crystals .home-chapter-visual img {
  -webkit-mask-image: url("img/ink-bleed-mask.png"), linear-gradient(90deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.68) 12%, #fff 28%, #fff 100%), radial-gradient(ellipse 58% 60% at 50% 50%, #fff 60%, rgba(255,255,255,.95) 71%, rgba(255,255,255,.56) 81%, transparent 88%);
  mask-image: url("img/ink-bleed-mask.png"), linear-gradient(90deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.68) 12%, #fff 28%, #fff 100%), radial-gradient(ellipse 58% 60% at 50% 50%, #fff 60%, rgba(255,255,255,.95) 71%, rgba(255,255,255,.56) 81%, transparent 88%);
  -webkit-mask-size: calc(77% + 34% * var(--photo-reveal, 1)) calc(77% + 32% * var(--photo-reveal, 1)), 100% 100%, 100% 100%;
  mask-size: calc(77% + 34% * var(--photo-reveal, 1)) calc(77% + 32% * var(--photo-reveal, 1)), 100% 100%, 100% 100%;
  -webkit-mask-position: center, center, center;
  mask-position: center, center, center;
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat, no-repeat;
}
.home-chapter--about .home-chapter-visual img {
  -webkit-mask-image: url("img/ink-bleed-mask.png"), linear-gradient(90deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.7) 16%, #fff 36%, #fff 100%), radial-gradient(ellipse 56% 56% at 50% 58%, #fff 61%, rgba(255,255,255,.95) 70%, rgba(255,255,255,.54) 79%, transparent 87%);
  mask-image: url("img/ink-bleed-mask.png"), linear-gradient(90deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.7) 16%, #fff 36%, #fff 100%), radial-gradient(ellipse 56% 56% at 50% 58%, #fff 61%, rgba(255,255,255,.95) 70%, rgba(255,255,255,.54) 79%, transparent 87%);
  -webkit-mask-size: calc(82% + 56% * var(--photo-reveal, 1)) calc(82% + 72% * var(--photo-reveal, 1)), 100% 100%, 100% 100%;
  mask-size: calc(82% + 56% * var(--photo-reveal, 1)) calc(82% + 72% * var(--photo-reveal, 1)), 100% 100%, 100% 100%;
  -webkit-mask-position: center, center, center;
  mask-position: center, center, center;
  -webkit-mask-repeat: no-repeat, no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat, no-repeat;
}

/* Scroll-driven photo, copy and action timing; ordinary-flow fallback stays readable. */
html.is-watercolor-story .home-chapter:not(.home-chapter--intro):not(.home-chapter--close) {
  opacity: 1;
}

html.is-watercolor-story .home-chapter-visual {
  opacity: var(--photo-show, 1);
  transform: translate3d(0, var(--photo-shift-y, 0px), 0);
  transition: none;
}
/* Shared photo surface: every chapter photo rises from the water (--surface-rise 0 to 1, set in home-story.js) and settles crisp.
   Start: faded, lowered 24px, slightly enlarged, blurred and misted. Only photos move; copy keeps its in-place reveal. */
html.is-watercolor-story .home-chapter-visual {
  opacity: var(--bloom-opacity, 1);
  transform: translate3d(calc(var(--chapter-drift, 0) * -3px), calc(var(--photo-shift-y, 0px) + var(--chapter-drift, 0) * -3px + (1 - var(--surface-rise, 1)) * 24px), 0);
  filter: none;
}
/* Filter and scale exist only while a photo is mid-rise (JS sets .is-surfacing for 0 < rise < 1). */
html.is-watercolor-story .home-chapter.is-surfacing .home-chapter-visual {
  transform: translate3d(calc(var(--chapter-drift, 0) * -3px), calc(var(--photo-shift-y, 0px) + var(--chapter-drift, 0) * -3px + (1 - var(--surface-rise, 1)) * 24px), 0) scale(calc(1 + (1 - var(--surface-rise, 1)) * .04));
  filter: blur(calc((1 - var(--surface-rise, 1)) * 4px)) grayscale(calc((1 - var(--surface-rise, 1)) * .45)) brightness(calc(1 + (1 - var(--surface-rise, 1)) * .08));
}
/* Per-glyph reveal (CLAUDE.md section 7 benchmark): characters fade from blur(3.8px) in place, no Y movement.
   Time-based, not scroll-based: home-story.js adds .is-glyphs-in when a chapter becomes the active one and removes it
   only when another chapter does (hysteresis, so nothing flickers while scrolling back and forth). Each glyph gets a
   random --gd delay on every change: 0 to .45s arriving, 0 to .30s leaving. Arriving takes .6s, leaving .42s, sine-out. */
html.is-watercolor-story .home-title .glyph,
html.is-watercolor-story .home-kicker .glyph,
html.is-watercolor-story .home-description .glyph { display: inline-block; }
html.is-watercolor-story .glyph {
  transition: opacity .42s cubic-bezier(.61, 1, .88, 1) var(--gd, 0s), filter .42s cubic-bezier(.61, 1, .88, 1) var(--gd, 0s);
}
html.is-watercolor-story .home-chapter.is-glyphs-in .glyph {
  transition: opacity .6s cubic-bezier(.61, 1, .88, 1) var(--gd, 0s), filter .6s cubic-bezier(.61, 1, .88, 1) var(--gd, 0s);
}
html.is-watercolor-story .home-chapter.is-glyph-live .glyph { will-change: opacity, filter; }
html.is-watercolor-story .home-chapter:not(.is-glyphs-in) .glyph { opacity: 0; filter: blur(3.8px); }
html.is-watercolor-story .home-chapter.is-glyphs-in .glyph { opacity: 1; filter: none; }
/* The intro's English line and paragraph are not split into glyphs; they arrive with the title as one soft fade. */
html.is-watercolor-story .home-chapter--intro .home-title-en[data-story-reveal],
html.is-watercolor-story .home-chapter--intro .home-subtitle[data-story-reveal] {
  opacity: 1;
  transition: opacity .6s cubic-bezier(.61, 1, .88, 1) .3s;
}
html.is-watercolor-story .home-chapter--intro .home-founder[data-story-reveal] { opacity: 1; transition: opacity .6s cubic-bezier(.61, 1, .88, 1) .5s; }
html.is-watercolor-story .home-chapter--intro:not(.is-glyphs-in) .home-founder[data-story-reveal] { opacity: 0; transition-duration: .42s; transition-delay: 0s; }
html.is-watercolor-story .home-chapter--intro:not(.is-glyphs-in) .home-title-en[data-story-reveal],
html.is-watercolor-story .home-chapter--intro:not(.is-glyphs-in) .home-subtitle[data-story-reveal] {
  opacity: 0;
  transition-duration: .42s;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .glyph { opacity: 1 !important; filter: none !important; transition: none !important; }
}
/* Phones: opacity only. Blurring hundreds of one-character layers is the costly part of the reveal on small GPUs. */
@media (max-width: 768px) {
  html.is-watercolor-story .home-chapter:not(.is-glyphs-in) .glyph { filter: none; }
  html.is-watercolor-story .glyph,
  html.is-watercolor-story .home-chapter.is-glyphs-in .glyph { transition-property: opacity; }
  html.is-watercolor-story .home-chapter.is-glyph-live .glyph { will-change: opacity; }
  html.is-watercolor-story .home-chapter.is-surfacing .home-chapter-visual { filter: none; }
}
/* Desktop only: the active chapter ripples through the water surface while it is still rising. */
html.is-watercolor-story .home-chapter.is-surfacing.is-surface-ripple .home-chapter-visual {
  filter: url(#uniqorn-surface-ripple) blur(calc((1 - var(--surface-rise, 1)) * 4px)) grayscale(calc((1 - var(--surface-rise, 1)) * .45)) brightness(calc(1 + (1 - var(--surface-rise, 1)) * .08));
}

html.is-watercolor-story .home-chapter-copy {
  opacity: var(--copy-show, 1);
  transform: translate3d(0, var(--copy-shift-y, 0px), 0);
  transition: none;
}

html.is-watercolor-story .home-chapter-copy .home-kicker[data-story-reveal] {
  opacity: var(--reveal-kicker, 1);
  translate: 0 var(--reveal-kicker-shift-y, 0px);
}

html.is-watercolor-story .home-chapter-copy .home-title[data-story-reveal] {
  opacity: var(--reveal-title, 1);
  translate: 0 var(--reveal-title-shift-y, 0px);
}

html.is-watercolor-story .home-chapter-copy .home-description[data-story-reveal] {
  opacity: var(--reveal-body, 1);
  translate: 0 var(--reveal-body-shift-y, 0px);
}

html.is-watercolor-story .home-chapter-copy .home-enter {
  opacity: var(--reveal-cta, 1);
  translate: 0 var(--reveal-cta-shift-y, 0px);
}

html.is-watercolor-story .home-chapter:not(.is-interactive) .home-chapter-copy .home-enter {
  pointer-events: none;
}

html.is-watercolor-story .home-chapter-copy [data-story-reveal]:focus-visible,
html.is-watercolor-story .home-chapter-copy .home-enter:focus-visible {
  opacity: 1 !important;
  translate: 0 0 !important;
}

/* Native line layout stays underneath; visual ink gathers one real line at a time. */
.home-title.has-ink-text { position: relative; }
.home-title > .home-title-ink-source { display: block; }
.home-title > .home-title-ink-layer { display: none; }
html.is-watercolor-story .home-title.has-ink-text[data-story-reveal] {
  opacity: 1;
  translate: none;
}
html.is-watercolor-story .home-title.has-ink-text > .home-title-ink-source { opacity: 0; }
html.is-watercolor-story .home-title.has-ink-text > .home-title-ink-layer {
  display: block;
  position: absolute;
  inset: 0;
  pointer-events: none;
  user-select: none;
}
.home-title .home-title-ink-row {
  --ink-line-progress: clamp(0, calc((var(--reveal-title, 1) - var(--ink-line-delay, 0)) * var(--ink-line-gain, 1)), 1);
  display: block;
  position: absolute;
  inset: 0;
  opacity: var(--ink-line-progress);
  transform: translate3d(0, calc((1 - var(--ink-line-progress)) * 8px), 0);
  filter: blur(calc((1 - var(--ink-line-progress)) * 1px));
  -webkit-mask-image: linear-gradient(105deg, #000 calc(var(--ink-line-progress) * 124% - 12%), transparent calc(var(--ink-line-progress) * 124% + 12%));
  mask-image: linear-gradient(105deg, #000 calc(var(--ink-line-progress) * 124% - 12%), transparent calc(var(--ink-line-progress) * 124% + 12%));
}
.home-title .home-title-ink-copy { display: block; opacity: 1; }
html.is-watercolor-story .home-title.has-ink-text:focus-visible > .home-title-ink-source { opacity: 1; }
html.is-watercolor-story .home-title.has-ink-text:focus-visible > .home-title-ink-layer { display: none; }
html.is-watercolor-story .home-chapter-copy .home-enter:not(.is-pending) { border-bottom-color: transparent; }
html.is-watercolor-story .home-chapter-copy .home-enter:not(.is-pending)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: .45;
  transform: scaleX(var(--reveal-cta, 1));
  transform-origin: 0 50%;
  pointer-events: none;
}
html.is-watercolor-story .home-chapter-copy .home-enter:focus-visible::after { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) {
  .home-title > .home-title-ink-source { opacity: 1 !important; }
  .home-title > .home-title-ink-layer { display: none !important; }
}
@media (forced-colors: active) {
  html.is-watercolor-story .home-title.has-ink-text > .home-title-ink-source { opacity: 1; }
  html.is-watercolor-story .home-title.has-ink-text > .home-title-ink-layer { display: none; }
}

html.is-watercolor-story .home-chapter--intro .home-scroll-cue,
html.is-watercolor-story .home-chapter--intro .home-sign {
  transform: translateY(var(--copy-shift-y, 0px));
}

/* The first blue wash replaces the normal pigment stack only during its short scroll beat. */
html.is-watercolor-story .home-story.is-blue-bloom-beat .home-water-window {
  filter: none;
  -webkit-mask: url("img/blue-bloom-mask.png") center / 100% 100% no-repeat;
  mask: url("img/blue-bloom-mask.png") center / 100% 100% no-repeat;
  background:
    radial-gradient(ellipse 42% 53% at 39% 42%, color-mix(in srgb, #286da0 calc(var(--blue-bloom-progress, 0) * 68%), transparent) 0 18%, transparent 100%),
    radial-gradient(ellipse 37% 48% at 72% 62%, color-mix(in srgb, #91b9d0 calc(var(--blue-bloom-progress, 0) * 58%), transparent) 0 8%, transparent 100%),
    radial-gradient(ellipse 76% 68% at 47% 50%, color-mix(in srgb, var(--window-color, #0F1226) calc((1 - var(--blue-bloom-progress, 0)) * 100%), transparent) 0 28%, color-mix(in srgb, var(--window-color, #0F1226) calc((1 - var(--blue-bloom-progress, 0)) * 80%), transparent) 55%, transparent 92%);
}
html.is-watercolor-story .home-story.is-blue-bloom-beat .home-water-window::before {
  inset: 35% 40.5%;
  border-radius: 0;
  filter: none;
  opacity: var(--blue-core-presence, 1);
  mix-blend-mode: normal;
  transform: none;
  -webkit-mask: url("img/blue-bloom-core.png") center / 100% 100% no-repeat;
  mask: url("img/blue-bloom-core.png") center / 100% 100% no-repeat;
  background: radial-gradient(ellipse 84% 88% at 40% 42%, color-mix(in srgb, #12345c calc(var(--blue-bloom-progress, 0) * 92%), transparent) 0 28%, color-mix(in srgb, #205b8d calc(var(--blue-bloom-progress, 0) * 76%), transparent) 66%, transparent 100%);
}
html.is-watercolor-story .home-story.is-blue-bloom-beat .home-water-window::after {
  -webkit-mask: none;
  mask: none;
  background: radial-gradient(ellipse 68% 101% at 32% 48%, color-mix(in srgb, #d7e8ef calc(var(--blue-bloom-progress, 0) * 44%), transparent), transparent 71%);
}
@media (max-width: 700px) {
  html.is-watercolor-story .home-story.is-blue-bloom-beat .home-water-window {
    -webkit-mask-image: url("img/blue-bloom-mask-mobile.png");
    mask-image: url("img/blue-bloom-mask-mobile.png");
    -webkit-mask-size: 130% 100%;
    mask-size: 130% 100%;
    -webkit-mask-position: 100% center;
    mask-position: 100% center;
    transform: translate3d(calc(-27vw * var(--blue-bloom-progress, 0)), 0, 0);
    background:
      radial-gradient(ellipse 64% 40% at 39% 43%, color-mix(in srgb, #286da0 calc(var(--blue-bloom-progress, 0) * 68%), transparent) 0 18%, transparent 100%),
      radial-gradient(ellipse 56% 37% at 72% 63%, color-mix(in srgb, #91b9d0 calc(var(--blue-bloom-progress, 0) * 58%), transparent) 0 8%, transparent 100%),
      radial-gradient(ellipse 76% 68% at 47% 50%, color-mix(in srgb, var(--window-color, #0F1226) calc((1 - var(--blue-bloom-progress, 0)) * 100%), transparent) 0 28%, color-mix(in srgb, var(--window-color, #0F1226) calc((1 - var(--blue-bloom-progress, 0)) * 80%), transparent) 55%, transparent 92%);
  }
  html.is-watercolor-story .home-story.is-blue-bloom-beat .home-water-window::before {
    inset: 42% 32%;
    transform: translate3d(calc(27vw * var(--blue-bloom-progress, 0)), 0, 0);
  }
}
html.is-watercolor-story .home-water-drop::before {
  content: ""; position: absolute; inset: -9px; border: 1.5px solid color-mix(in srgb, #245f91 calc(var(--blue-contact, 0) * 64%), transparent);
  border-radius: 50%; opacity: var(--blue-contact, 0); transform: scaleX(1.35) scaleY(.52); pointer-events: none;
}
html.is-watercolor-story .home-water-drop {
  background: color-mix(in srgb, #173b63 calc(var(--blue-drop-ink, 0) * 100%), var(--rose));
  box-shadow: 0 0 0 5px color-mix(in srgb, #245f91 calc(var(--blue-drop-ink, 0) * 14%), rgba(197,139,142,.14)), 0 0 25px color-mix(in srgb, #245f91 calc(var(--blue-drop-ink, 0) * 42%), rgba(197,139,142,.42));
}
body.is-watercolor-home.is-home-blue-paper .home-chapter--intro,
body.is-watercolor-home.is-home-blue-paper .home-chapter--tarot { color: var(--indigo-deep); }
body.is-watercolor-home.is-home-blue-paper .home-chapter--intro .home-kicker,
body.is-watercolor-home.is-home-blue-paper .home-chapter--intro .home-description,
body.is-watercolor-home.is-home-blue-paper .home-chapter--intro .home-sign,
body.is-watercolor-home.is-home-blue-paper .home-chapter--intro .home-scroll-cue,
body.is-watercolor-home.is-home-blue-paper .home-chapter--tarot .home-kicker,
body.is-watercolor-home.is-home-blue-paper .home-chapter--tarot .home-description { color: var(--indigo-deep); }
body.is-watercolor-home.is-home-blue-paper .home-chapter--intro .home-scroll-cue span { color: #245F91; }
body.is-watercolor-home.is-home-blue-paper .home-chapter--tarot .home-enter { color: var(--indigo-deep); border-color: rgba(20,42,72,.62); }
body.is-watercolor-home.is-home-blue-paper .home-chapter--tarot .home-enter:focus-visible { outline-color: var(--indigo-deep); color: var(--indigo-deep); background: rgba(20,42,72,.06); }
body.is-watercolor-home {
  --header-paper-progress: var(--blue-header-ink, 0);
  --header-text-progress: var(--blue-header-text-ink, 0);
}
body.is-watercolor-home .site-header::after {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--paper) calc(var(--header-paper-progress, 0) * 100%), rgba(16,43,73,.58)) 0%,
    color-mix(in srgb, var(--paper) calc(var(--header-paper-progress, 0) * 100%), rgba(16,43,73,.58)) calc(100% - 24px),
    color-mix(in srgb, var(--paper) calc(var(--header-paper-progress, 0) * 100%), rgba(16,43,73,0)) 100%);
}
body.is-watercolor-home .site-header .support-nav { position: relative; isolation: isolate; }
body.is-watercolor-home .site-header .support-nav::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -20px -34px;
  opacity: clamp(0, min(calc(var(--header-paper-progress, 0) * 3.5), calc((1 - var(--header-paper-progress, 0)) * 2)), 1);
  background: radial-gradient(ellipse 112% 110% at center,
    color-mix(in srgb, rgba(244,243,239,.94) calc(var(--header-text-progress, 0) * 100%), rgba(7,17,32,.58)) 0 40%,
    color-mix(in srgb, rgba(244,243,239,.64) calc(var(--header-text-progress, 0) * 100%), rgba(7,17,32,.34)) 72%,
    transparent 100%);
  filter: blur(5px);
  pointer-events: none;
}
@media (max-width: 700px) {
  body.is-watercolor-home .site-header .support-nav::before { inset: -14px -6px; }
}
body.is-watercolor-home .site-header .wordmark,
body.is-watercolor-home .site-header .wordmark span,
body.is-watercolor-home .site-header .desktop-nav a,
body.is-watercolor-home .site-header .support-nav a,
body.is-watercolor-home .site-header .header-cta {
  color: color-mix(in srgb, #071120 calc(var(--header-text-progress, 0) * 100%), var(--white));
  transition: none;
}
body.is-watercolor-home .site-header .support-nav a { text-decoration-color: transparent; text-underline-offset: .32em; transition: text-decoration-color 140ms cubic-bezier(.23, 1, .32, 1); }
body.is-watercolor-home .site-header .support-nav a:hover,
body.is-watercolor-home .site-header .support-nav a:focus-visible,
body.is-watercolor-home .site-header .support-nav .current-menu-item > a,
body.is-watercolor-home .site-header .support-nav .current_page_item > a {
  color: color-mix(in srgb, #071120 calc(var(--header-text-progress, 0) * 100%), var(--white));
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  transition: text-decoration-color 140ms cubic-bezier(.23, 1, .32, 1);
}
body.is-watercolor-home .site-header .header-cta {
  border-color: color-mix(in srgb, rgba(7,17,32,.76) calc(var(--header-text-progress, 0) * 100%), rgba(255,255,255,.82));
}
body.is-watercolor-home.is-home-blue-paper .home-progress a::before { border-color: transparent; }
body.is-watercolor-home.is-home-blue-paper .home-progress a.is-current::before { background: #245F91; }
body.is-watercolor-home.is-home-blue-paper .home-progress a::after {
  border-color: var(--progress-ring);
}
body.is-watercolor-home.is-home-blue-paper .home-chapter--tarot .home-chapter-visual { --photo-width: min(46vw, 660px); --photo-height: 94%; }
body.is-watercolor-home.is-home-blue-paper .home-chapter--tarot .home-chapter-visual::after {
  background: linear-gradient(90deg, transparent 8%, color-mix(in srgb, var(--paper) 12%, transparent) 57%, var(--paper) 100%), linear-gradient(0deg, var(--paper), transparent 25%, transparent 80%, color-mix(in srgb, var(--paper) 32%, transparent));
}
body.is-watercolor-home.is-home-blue-paper .home-chapter--tarot .home-chapter-visual img {
  -webkit-mask-image: url("img/ink-bleed-mask.png"), radial-gradient(ellipse 55% 64% at 51% 45%, #fff 62%, rgba(255,255,255,.94) 75%, rgba(255,255,255,.48) 87%, transparent 96%), linear-gradient(to bottom, #fff 0 76%, rgba(255,255,255,.96) 86%, rgba(255,255,255,.78) 94%, rgba(255,255,255,.22) 100%), radial-gradient(ellipse 54% 38% at 0% 100%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.62) 42%, #fff 88%);
  mask-image: url("img/ink-bleed-mask.png"), radial-gradient(ellipse 55% 64% at 51% 45%, #fff 62%, rgba(255,255,255,.94) 75%, rgba(255,255,255,.48) 87%, transparent 96%), linear-gradient(to bottom, #fff 0 76%, rgba(255,255,255,.96) 86%, rgba(255,255,255,.78) 94%, rgba(255,255,255,.22) 100%), radial-gradient(ellipse 54% 38% at 0% 100%, rgba(255,255,255,.34) 0%, rgba(255,255,255,.62) 42%, #fff 88%);
  -webkit-mask-size: 112% 108%, 100% 100%, 100% 100%, 100% 100%; mask-size: 112% 108%, 100% 100%, 100% 100%, 100% 100%;
  object-position: center 48%;
}
@media (max-width: 900px) {
  body.is-watercolor-home.is-home-blue-paper .home-chapter--tarot .home-chapter-visual { --photo-width: 84vw; --photo-height: 60%; }
  body.is-watercolor-home.is-home-blue-paper .home-chapter--tarot .home-chapter-visual img { -webkit-mask-size: 112% 108%, 100% 100%, 100% 100%, 100% 100%; mask-size: 112% 108%, 100% 100%, 100% 100%, 100% 100%; object-position: center 48%; }
}

/* Photo hierarchy: keep narrative subjects crisp while fading their environments into pigment. */
html.is-watercolor-story .home-chapter--tarot .home-chapter-visual img {
  opacity: calc(1 - var(--photo-retire, 0) * .14);
}
html.is-watercolor-story .home-chapter--workshops .home-chapter-visual img {
  --photo-position: 50% 58%;
  -webkit-mask-image: url("img/ink-bleed-mask.png"), linear-gradient(90deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.52) 9%, #fff 23%, #fff 100%), radial-gradient(ellipse 58% 62% at 50% 50%, #fff 60%, rgba(255,255,255,.95) 71%, rgba(255,255,255,.56) 81%, transparent 88%), linear-gradient(to bottom, rgba(255,255,255,.12) 0%, rgba(255,255,255,.22) 20%, rgba(255,255,255,.64) 38%, #fff 53%, #fff 100%), linear-gradient(to bottom, rgba(255,255,255,.12) 0%, rgba(255,255,255,.24) 20%, rgba(255,255,255,.72) 33%, #fff 43%, #fff 100%);
  mask-image: url("img/ink-bleed-mask.png"), linear-gradient(90deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.52) 9%, #fff 23%, #fff 100%), radial-gradient(ellipse 58% 62% at 50% 50%, #fff 60%, rgba(255,255,255,.95) 71%, rgba(255,255,255,.56) 81%, transparent 88%), linear-gradient(to bottom, rgba(255,255,255,.12) 0%, rgba(255,255,255,.22) 20%, rgba(255,255,255,.64) 38%, #fff 53%, #fff 100%), linear-gradient(to bottom, rgba(255,255,255,.12) 0%, rgba(255,255,255,.24) 20%, rgba(255,255,255,.72) 33%, #fff 43%, #fff 100%);
  -webkit-mask-size: calc(76% + 36% * var(--photo-reveal, 1)) calc(76% + 34% * var(--photo-reveal, 1)), 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  mask-size: calc(76% + 36% * var(--photo-reveal, 1)) calc(76% + 34% * var(--photo-reveal, 1)), 100% 100%, 100% 100%, 100% 100%, 100% 100%;
}
html.is-watercolor-story .home-chapter--crystals .home-chapter-visual { --photo-width: min(38vw, 560px); }
html.is-watercolor-story .home-chapter--about .home-chapter-visual img {
  -webkit-mask-image: url("img/founder-photo-mask.png");
  mask-image: url("img/founder-photo-mask.png");
  -webkit-mask-size: calc(82% + 18% * var(--photo-reveal, 1)) calc(82% + 18% * var(--photo-reveal, 1));
  mask-size: calc(82% + 18% * var(--photo-reveal, 1)) calc(82% + 18% * var(--photo-reveal, 1));
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@media (max-width: 900px) {
  html.is-watercolor-story .home-chapter--workshops .home-chapter-visual img { --photo-position: 62% 54%; }
  html.is-watercolor-story .home-chapter--crystals .home-chapter-visual { --photo-top: 1%; --photo-right: 1%; --photo-width: 78vw; --photo-height: 62%; --photo-position: 50% 48%; }
  html.is-watercolor-story .home-chapter--about .home-chapter-visual--founder { --photo-width: calc(var(--water-stage-height, 100vh) * .2867); }
  html.is-watercolor-story .home-chapter--about .home-chapter-visual::after {
    background: linear-gradient(90deg, var(--rose) 0%, rgba(197,139,142,.58) 14%, rgba(197,139,142,.12) 42%, transparent 69%), linear-gradient(180deg, rgba(197,139,142,.08) 0%, transparent 9%, transparent 93%, rgba(197,139,142,.10) 98%, rgba(197,139,142,.16) 100%);
  }
}
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  html.is-watercolor-story .home-chapter--about .home-chapter-visual--founder { --photo-width: calc(var(--water-stage-height, 100vh) * .48); }
}

/* Three white service entrances: compact photographs emerge through an irregular water edge. */
body .home-chapter:is(.home-chapter--tarot, .home-chapter--workshops, .home-chapter--crystals) {
  --chapter-static-bg: var(--white);
  color: var(--indigo-deep);
  background-image: none;
}
body .home-chapter:is(.home-chapter--tarot, .home-chapter--workshops, .home-chapter--crystals) :is(.home-kicker, .home-title, .home-description, .home-enter) {
  color: var(--indigo-deep);
}
body .home-chapter:is(.home-chapter--tarot, .home-chapter--workshops, .home-chapter--crystals) .home-enter {
  border-color: rgba(20,42,72,.55);
}
body .home-chapter:is(.home-chapter--tarot, .home-chapter--workshops, .home-chapter--crystals) .home-enter:focus-visible {
  outline-color: var(--indigo-deep);
  background: rgba(20,42,72,.055);
}
body .home-chapter:is(.home-chapter--tarot, .home-chapter--workshops, .home-chapter--crystals) .home-enter:is(:active, .is-pressed) {
  background: rgba(20,42,72,.08);
}
html body.is-entrance .home-story .home-chapter:is(.home-chapter--tarot, .home-chapter--workshops, .home-chapter--crystals) .home-chapter-visual::after {
  content: none;
}
html body.is-entrance .home-story .home-chapter:is(.home-chapter--tarot, .home-chapter--workshops, .home-chapter--crystals) .home-chapter-visual img {
  filter: blur(calc((1 - var(--photo-reveal, 1)) * 4px));
  -webkit-mask: url("img/wash-mask-a.svg") center / 100% 100% no-repeat;
  mask: url("img/wash-mask-a.svg") center / 100% 100% no-repeat;
  opacity: 1;
  transform: none;
  border-radius: 0;
}
html body.is-entrance .home-story .home-chapter--tarot .home-chapter-visual {
  --photo-top: 22%; --photo-left: max(10vw, 40px); --photo-right: auto;
  --photo-width: min(34vw, 520px); --photo-height: 56%;
}
html body.is-entrance .home-story .home-chapter--workshops .home-chapter-visual {
  --photo-top: 24%; --photo-left: auto; --photo-right: max(8vw, 40px);
  --photo-width: min(42vw, 620px); --photo-height: 52%;
}
html body.is-entrance .home-story .home-chapter--crystals .home-chapter-visual {
  --photo-top: 23%; --photo-left: auto; --photo-right: max(5vw, 32px);
  --photo-width: min(25vw, 370px); --photo-height: 54%;
}
body.is-watercolor-home.is-home-blue-paper .home-atmosphere::before,
body.is-watercolor-home.is-home-blue-paper .home-atmosphere::after {
  opacity: 0;
}
body.is-watercolor-home.is-home-blue-paper .site-header::after {
  background: linear-gradient(var(--white) 0 calc(100% - 24px), rgba(255,255,255,0));
}
body.is-watercolor-home.is-home-blue-paper .site-header .support-nav::before { content: none; }
@media (max-width: 900px) {
  html body.is-entrance .home-story .home-chapter:is(.home-chapter--tarot, .home-chapter--workshops, .home-chapter--crystals) .home-chapter-visual {
    --photo-top: 3%; --photo-left: 24px; --photo-right: auto;
    --photo-width: calc(100% - 64px); --photo-height: 40%;
  }
  html body.is-entrance .home-story .home-chapter--crystals .home-chapter-visual { --photo-fit: contain; }
  html body.is-entrance .home-story .home-chapter--workshops .home-chapter-copy {
    height: auto; margin-top: auto; padding-block: 20px max(28px, env(safe-area-inset-bottom));
  }
  html body.is-entrance .home-story .home-chapter--workshops .home-enter { margin-top: 18px; }
}

/* The later wash keeps layered pigment and tide edges beside the white reading area. */
html.is-watercolor-story .home-story.is-service-water .home-water-window {
  border-radius: 0;
  box-shadow: none;
  transform: none;
  /* The baked ink bloom carries the wet, uneven pigment density; the gradient
     underneath keeps the deep-to-light blue the wash was already built from. */
  background:
    url("img/ink-bloom.webp") center / 130% 118% no-repeat,
    linear-gradient(117deg, #86b2cb 0%, #357ba7 25%, #7eaec9 47%, #225f8f 65%, #9ac3d7 83%, #538eaf 100%);
  background-size: 100% 100%, 135% 120%;
  background-position: center, var(--window-glow-x, 50%) var(--window-glow-y, 50%);
  background-blend-mode: multiply, normal;
}
html.is-watercolor-story .home-story.is-service-water .home-water-window::before {
  inset: 8% 5% 18% 12%;
  opacity: .62;
  transform: rotate(var(--water-flow-angle, 0deg));
  background: linear-gradient(142deg, #143f69 5%, #327ca7 42%, #143f69 68%, #65a1be 100%);
  -webkit-mask: url("img/blue-bloom-core.png") center / 100% 100% no-repeat;
  mask: url("img/blue-bloom-core.png") center / 100% 100% no-repeat;
}
html.is-watercolor-story .home-story.is-service-water .home-water-window::after {
  inset: -3%;
  opacity: .54;
  mix-blend-mode: multiply;
  background: url("img/pigment.png") center / 100% 100% no-repeat;
  -webkit-mask: url("img/blue-bloom-mask.png") center / 100% 100% no-repeat;
  mask: url("img/blue-bloom-mask.png") center / 100% 100% no-repeat;
  transform: rotate(calc(var(--water-flow-angle, 0deg) * -1));
}
@media (min-width: 901px) {
  html body.is-entrance .home-story .home-chapter--workshops .home-chapter-copy { margin-left: max(12vw, 40px); }
  html body.is-entrance .home-story .home-chapter--workshops .home-chapter-visual { --photo-right: max(14vw, 40px); --photo-width: min(42vw, 620px); }
}

/* ── Guiding thread: three edge grammars — waterline / mist / bead ── */
.home-tarot-mirror { display: none; }
.home-chapter--tarot { --waterline: 62%; }
.home-chapter--crystals { --bead-d: min(36vw, 64vh, 520px); }
html.is-watercolor-story .home-water-drop { filter: blur(var(--drop-blur, 0px)); }
html.is-watercolor-story .home-water-tail.is-waterline {
  width: var(--tail-height, 0px); height: 1px; transform: translate(-50%, -50%); filter: none;
  background: linear-gradient(90deg, transparent, rgba(36,95,145,.5) 18% 82%, transparent);
}

/* Shared: free the copy into two independently placed groups with pointer-events protection */
html.is-watercolor-story body.is-entrance .home-story .home-chapter:is(.home-chapter--tarot, .home-chapter--workshops, .home-chapter--crystals) .home-chapter-copy {
  position: absolute; inset: 0; display: block; width: auto; max-width: none; height: auto; margin: 0; padding: 0; text-align: left;
  pointer-events: none;
}
html.is-watercolor-story body.is-entrance .home-story .home-chapter :is(.home-copy-above, .home-copy-below) {
  position: absolute; margin: 0;
  pointer-events: auto;
}
html.is-watercolor-story body.is-entrance .home-story .home-chapter :is(.home-copy-above, .home-copy-below) > * { margin-inline: 0; }

/* ① Tarot — refined, lightweight card rise with gentle whisper reflection */
html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--tarot .home-chapter-visual {
  --photo-top: calc(var(--waterline) - 52%); --photo-left: calc(50% - min(35vw, 490px) - 36px); --photo-right: auto;
  --photo-width: min(35vw, 490px); --photo-height: 52%; --photo-position: center 40%;
}
html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--tarot .home-chapter-visual img {
  -webkit-mask: none; mask: none; filter: none;
  transform: translateY(calc((1 - var(--mirror-rise, 1)) * 100%));
  clip-path: inset(0 0 calc((1 - var(--mirror-rise, 1)) * 100%) 0);
  box-shadow: var(--shadow-lg);
}
html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--tarot .home-chapter-visual img.home-tarot-mirror {
  display: block; opacity: .14; filter: blur(1.5px) saturate(.7); transform-origin: 50% 100%;
  transform: translateY(calc((var(--mirror-rise, 1) - 1) * 100%)) scaleY(-1) skewX(calc(var(--ripple, 0) * 1.2deg));
  -webkit-mask: linear-gradient(to top, transparent 72%, #000 100%);
  mask: linear-gradient(to top, transparent 72%, #000 100%);
}
html.is-watercolor-story body.is-entrance .home-story .home-chapter--tarot .home-copy-above { left: calc(50% + 36px); bottom: calc(100% - var(--waterline) + 24px); width: min(34vw, 480px); }
html.is-watercolor-story body.is-entrance .home-story .home-chapter--tarot .home-copy-below { left: calc(50% + 36px); top: calc(var(--waterline) + 24px); width: min(30vw, 440px); }

/* ② Workshops — pure, ethereal scene with soft outer feathering into white paper */
html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--workshops .home-chapter-visual {
  --photo-top: 6%; --photo-left: auto; --photo-right: calc(50% - min(46vw, 680px));
  --photo-width: min(56vw, 840px); --photo-height: 88%; --photo-position: 50% 54%;
}
html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--workshops .home-chapter-visual img {
  --m: var(--mist);
  filter: contrast(.98) brightness(1.02);
  opacity: calc(.8 + var(--m) * .2);
  transform: scale(calc(1.02 - var(--m) * .02 + var(--breath, 0) * .008));
  -webkit-mask: radial-gradient(ellipse 76% 72% at 50% 50%, #000 55%, rgba(0,0,0,.82) 72%, transparent 98%);
  mask: radial-gradient(ellipse 76% 72% at 50% 50%, #000 55%, rgba(0,0,0,.82) 72%, transparent 98%);
}
html.is-watercolor-story body.is-entrance .home-story .home-chapter--workshops .home-ink-haze {
  display: none;
}
html.is-watercolor-story body.is-entrance .home-story .home-chapter--workshops .home-copy-above { top: 12%; left: calc(50% - min(44vw, 620px)); width: min(34vw, 480px); }
html.is-watercolor-story body.is-entrance .home-story .home-chapter--workshops .home-copy-below { bottom: 12%; left: calc(50% - min(36vw, 500px)); width: min(28vw, 400px); }
html.is-watercolor-story body.is-entrance .home-story .home-chapter--workshops .home-title { transform-origin: 0 50%; scale: calc(1 + var(--breath, 0) * .01); }
html.is-watercolor-story body.is-entrance .home-story .home-chapter--workshops .home-chapter-copy .home-description[data-story-reveal] {
  opacity: var(--reveal-body, 1);
}

/* ③ Crystals — jewel-like circular lens floating cleanly on pure white */
html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--crystals .home-chapter-visual {
  --photo-top: calc(50% - var(--bead-d) / 2); --photo-left: auto; --photo-right: calc(50% - min(38vw, 500px));
  --photo-width: var(--bead-d); --photo-height: var(--bead-d); --photo-position: 50% 46%;
}
html.is-watercolor-story body.is-entrance .home-story .home-chapter--crystals :is(.home-ink-haze) {
  display: block; position: absolute; top: var(--photo-top); right: var(--photo-right); width: var(--photo-width); height: var(--photo-height); border-radius: 50%; pointer-events: none;
}
html.is-watercolor-story body.is-entrance .home-story .home-chapter--crystals .home-ink-haze {
  display: none;
}
html.is-watercolor-story body.is-entrance .home-story .home-chapter--crystals .home-copy-above { left: calc(50% - min(44vw, 580px)); bottom: 31%; width: min(34vw, 480px); }
html.is-watercolor-story body.is-entrance .home-story .home-chapter--crystals .home-copy-below { left: calc(50% - min(44vw, 580px)); top: 72%; width: min(30vw, 420px); }

@media (max-width: 900px) {
  .home-chapter--tarot { --waterline: 38%; }
  .home-chapter--crystals { --bead-d: min(56vw, 34vh); }
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--tarot .home-chapter-visual { --photo-top: calc(var(--waterline) - 34%); --photo-left: 24px; --photo-width: calc(100% - 64px); --photo-height: 34%; }
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--tarot .home-chapter-visual img.home-tarot-mirror { opacity: .16; }
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--workshops .home-chapter-visual { --photo-top: 2%; --photo-width: 100%; --photo-height: 50%; }
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--crystals .home-chapter-visual { --photo-top: 6%; --photo-right: calc(50% - var(--bead-d) / 2); }
  html.is-watercolor-story body.is-entrance .home-story .home-chapter:is(.home-chapter--tarot, .home-chapter--workshops, .home-chapter--crystals) .home-chapter-copy {
    display: flex; flex-direction: column; justify-content: flex-end; padding: 0 24px max(28px, env(safe-area-inset-bottom)); pointer-events: auto;
  }
  html.is-watercolor-story body.is-entrance .home-story .home-chapter :is(.home-copy-above, .home-copy-below) { position: static; width: auto; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html.is-watercolor-story body.is-entrance .home-story .home-chapter:is(.home-chapter--tarot, .home-chapter--workshops, .home-chapter--crystals) .home-chapter-visual img { transform: none; transition: none; }
}

/* Opening prototype: white paper carries through the first two chapters. */
body.is-entrance .home-chapter:is(.home-chapter--intro, .home-chapter--tarot) {
  --chapter-static-bg: var(--white);
  color: var(--indigo-deep);
  background: var(--white);
  background-image: none;
}
body.is-entrance .home-chapter--intro :is(.home-kicker, .home-title, .home-sign, .home-scroll-cue) { color: var(--indigo-deep); }
body.is-entrance .home-chapter--intro .home-kicker { opacity: .68; }
body.is-entrance .home-chapter--intro .home-sign { opacity: .48; }
body.is-entrance .home-chapter--intro .home-scroll-cue { opacity: .68; }
body.is-entrance .home-chapter--intro .home-scroll-cue span { color: var(--anchor-red); }
html body.is-entrance .home-story .home-chapter--intro .home-chapter-visual img {
  opacity: .78;
  -webkit-mask-image: radial-gradient(ellipse 78% 86% at 64% 49%, #000 40%, rgba(0,0,0,.92) 55%, rgba(0,0,0,.5) 77%, transparent 98%), linear-gradient(90deg, transparent 0%, #000 20%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, transparent 12%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.72) 31%, #000 42%, #000 68%, rgba(0,0,0,.78) 79%, rgba(0,0,0,.24) 91%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 86% at 64% 49%, #000 40%, rgba(0,0,0,.92) 55%, rgba(0,0,0,.5) 77%, transparent 98%), linear-gradient(90deg, transparent 0%, #000 20%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, transparent 12%, rgba(0,0,0,.18) 20%, rgba(0,0,0,.72) 31%, #000 42%, #000 68%, rgba(0,0,0,.78) 79%, rgba(0,0,0,.24) 91%, transparent 100%);
  -webkit-mask-composite: source-in, source-in;
  mask-composite: intersect, intersect;
}
body.is-entrance .home-chapter--intro .home-chapter-visual::after,
body.is-entrance .home-chapter--tarot .home-chapter-visual::after { content: none; }
html body.is-entrance .home-story .home-chapter.home-chapter--tarot .home-chapter-visual img:not(.home-tarot-mirror) {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-size: 100% 100%, 100% 100%;
  mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
html.is-watercolor-story body.is-entrance .home-story .home-chapter--tarot .home-chapter-visual img.home-tarot-mirror {
  opacity: .09;
  filter: blur(1px) saturate(.68);
  clip-path: inset(84% 0 0 0);
  -webkit-mask: linear-gradient(to bottom, transparent 78%, rgba(0,0,0,.08) 84%, #000 91%, transparent 100%);
  mask: linear-gradient(to bottom, transparent 78%, rgba(0,0,0,.08) 84%, #000 91%, transparent 100%);
}
.home-chapter--tarot { --waterline: 62%; }
@media (max-width: 900px) {
  .home-chapter--tarot { --waterline: 38%; }
  html.is-watercolor-story body.is-entrance .home-story .home-chapter--tarot .home-chapter-visual img.home-tarot-mirror { opacity: .075; }
}

html.is-watercolor-story .home-ink-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.home-ink-canvas { display: none; }
html.is-red-guide-active,
html.is-red-guide-active body,
html.is-red-guide-active body * { cursor: auto !important; }
html.is-red-guide-active .cursor-dot { opacity: 0 !important; visibility: hidden !important; }

body.is-home-opening .home-story,
body.is-home-opening .home-water-stage,
body.is-home-opening .home-atmosphere,
body.is-home-opening .home-chapter:is(.home-chapter--intro, .home-chapter--tarot) {
  color: var(--indigo-deep);
  background: var(--white) !important;
  background-image: none !important;
}
body.is-home-opening .home-water-effects,
body.is-home-opening .home-atmosphere::before,
body.is-home-opening .home-atmosphere::after,
body.is-home-opening .home-atmosphere-glow,
body.is-home-opening .home-atmosphere-grain { display: none !important; }
html.is-watercolor-story body.is-home-opening .home-chapter:is(.home-chapter--intro, .home-chapter--tarot) {
  background: transparent !important;
  background-image: none !important;
}
body.is-home-opening .home-chapter--intro :is(.home-kicker, .home-title, .home-sign, .home-scroll-cue),
body.is-home-opening .home-chapter--tarot :is(.home-kicker, .home-title, .home-description, .home-enter) { color: var(--indigo-deep); }
body.is-home-opening .site-header { color: var(--indigo-deep); background: transparent !important; }
body.is-home-opening .site-header::after { background: transparent !important; display: none !important; }
body.is-home-opening .site-header .wordmark,
body.is-home-opening .site-header .wordmark span,
body.is-home-opening .site-header .support-nav a { color: var(--indigo-deep) !important; }
body.is-home-opening { --cursor-color: var(--anchor-red); --cursor-color-hover: var(--anchor-red); }

@media (prefers-reduced-motion: reduce) {
  html.is-red-guide-active .cursor-dot { display: none; }
}

/* One uninterrupted paper surface across the homepage story. */
html body.is-entrance .home-story {
  --chapter-static-bg: var(--white);
  --bg-current: var(--white);
  --glow-color: transparent;
  color: var(--indigo-deep);
  background: var(--white);
}
html body.is-entrance .home-story .home-chapter,
html body.is-entrance .home-story .home-chapter--intro,
html body.is-entrance .home-story .home-chapter--tarot,
html body.is-entrance .home-story .home-chapter--workshops,
html body.is-entrance .home-story .home-chapter--crystals,
html body.is-entrance .home-story .home-chapter--about,
html body.is-entrance .home-story .home-chapter--close {
  --chapter-static-bg: var(--white);
  --chapter-glow: transparent;
  color: var(--indigo-deep);
  background: var(--white);
  background-image: none;
}
html.is-watercolor-story body.is-entrance .home-story,
html.is-watercolor-story body.is-entrance .home-story .home-water-stage {
  background: var(--white) !important;
  background-image: none !important;
}
html.is-watercolor-story body.is-entrance .home-story .home-chapter {
  background: transparent !important;
  background-image: none !important;
}
html body.is-entrance .home-story .home-atmosphere,
html body.is-entrance .home-story .home-water-effects,
html body.is-entrance .home-story .home-atmosphere::before,
html body.is-entrance .home-story .home-atmosphere::after,
html body.is-entrance .home-story .home-atmosphere-glow,
html body.is-entrance .home-story .home-atmosphere-grain { display: none !important; }
html body.is-entrance .home-story .home-chapter :is(.home-kicker, .home-title, .home-description, .home-sign, .home-scroll-cue, .home-enter) {
  color: var(--indigo-deep);
}
html body.is-entrance .home-story .home-kicker { color: #52677D; }
html body.is-entrance .home-story .home-enter { border-color: rgba(20,42,72,.52); }
html body.is-entrance .home-story .home-enter:hover,
html body.is-entrance .home-story .home-enter:focus-visible { color: var(--indigo-deep); border-color: var(--indigo-deep); background: rgba(20,42,72,.045); }
html body.is-entrance .home-story .home-chapter-visual::after { content: none; }
html body.is-entrance .home-story .home-chapter-visual img {
  filter: none !important;
}

/* Photographs keep their own detail while their edges dissolve into paper. */
html body.is-entrance .home-story .home-chapter--intro .home-chapter-visual img {
  opacity: .84;
}
html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--tarot .home-chapter-visual img:not(.home-tarot-mirror) {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 7%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 94%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 7%, #000 91%, transparent 100%);
  -webkit-mask-size: 100% 100%, 100% 100%;
  mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
html body.is-entrance .home-story .home-tarot-mirror { display: none; }
html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--workshops .home-chapter-visual img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 89%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 91%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 10%, #000 89%, transparent 100%);
  -webkit-mask-size: 100% 100%, 100% 100%;
  mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
html body.is-entrance .home-story .home-chapter--crystals .home-chapter-visual img {
  -webkit-mask-image: radial-gradient(ellipse 76% 79% at 55% 48%, #000 61%, rgba(0,0,0,.88) 75%, transparent 100%);
  mask-image: radial-gradient(ellipse 76% 79% at 55% 48%, #000 61%, rgba(0,0,0,.88) 75%, transparent 100%);
}
html body.is-entrance .home-story .home-chapter--about .home-chapter-visual img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 78%, rgba(0,0,0,.8) 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 11%, #000 91%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 78%, rgba(0,0,0,.8) 90%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 11%, #000 91%, transparent 100%);
  -webkit-mask-size: 100% 100%, 100% 100%;
  mask-size: 100% 100%, 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
html body.is-entrance .home-story .home-title .home-title-keep { display: inline; white-space: nowrap; }

/* Keep the sticky homepage header legible and visually part of the paper. */
body.is-entrance .site-header,
body.is-watercolor-home .site-header,
body.is-watercolor-home.is-entrance .site-header,
body.is-home-opening .site-header {
  color: var(--indigo-deep);
  background: transparent !important;
  border: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.is-entrance .site-header::before,
body.is-entrance .site-header::after,
body.is-watercolor-home .site-header::before,
body.is-watercolor-home .site-header::after,
body.is-home-opening .site-header::before,
body.is-home-opening .site-header::after { display: none !important; }
body.is-entrance .site-header .wordmark,
body.is-entrance .site-header .wordmark span,
body.is-entrance .site-header .menu a,
body.is-entrance .site-header .header-cta,
body.is-entrance .site-header .menu a:hover,
body.is-entrance .site-header .menu .current-menu-item > a,
body.is-entrance .site-header .menu .current_page_item > a,
body.is-entrance .site-header .menu .support-link a,
body.is-watercolor-home .site-header .wordmark,
body.is-watercolor-home .site-header .wordmark span,
body.is-watercolor-home .site-header .menu a,
body.is-watercolor-home .site-header .header-cta,
body.is-watercolor-home .site-header .menu a:hover,
body.is-watercolor-home .site-header .menu .current-menu-item > a,
body.is-watercolor-home .site-header .menu .current_page_item > a,
body.is-watercolor-home .site-header .menu .support-link a,
body.is-home-opening .site-header .wordmark,
body.is-home-opening .site-header .wordmark span,
body.is-home-opening .site-header .menu a,
body.is-home-opening .site-header .header-cta { color: var(--indigo-deep) !important; }
body.is-watercolor-home .site-header .header-cta { border-color: rgba(20,42,72,.55); }
body.is-watercolor-home .site-header .primary-nav__link,
body.is-watercolor-home .site-header .mobile-navigation summary { color: var(--indigo); }
body.is-watercolor-home .site-header :focus-visible { outline-color: var(--indigo); }

@media (max-width: 900px) {
  html body.is-entrance .home-story .home-chapter--tarot .home-chapter-visual {
    --photo-top: 2%;
    --photo-left: 0;
    --photo-width: 68vw;
    --photo-height: 43%;
    --photo-position: center 52%;
  }
  html body.is-entrance .home-story .home-chapter--tarot .home-chapter-copy { padding-bottom: max(30px, env(safe-area-inset-bottom)); }
  html body.is-entrance .home-story .home-chapter--tarot .home-title { font-size: clamp(30px, 7vw, 40px); line-height: 1.2; }
  html body.is-entrance .home-story .home-chapter--tarot .home-description { margin-top: 10px; }
  html body.is-entrance .home-story .home-chapter--tarot .home-enter { margin-top: 12px; }
}

@media (max-width: 600px) and (orientation: portrait) {
  html body.is-entrance .home-story .home-chapter--intro .home-chapter-visual img { opacity: .9; }
}

/* The text column owns clear paper; keep the live workshop group beyond it. */
html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--workshops .home-chapter-visual {
  --photo-top: 10%;
  --photo-left: 45%;
  --photo-right: -4%;
  --photo-width: 59%;
  --photo-height: 80%;
}
html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--workshops .home-chapter-visual img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 11%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 14%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 11%, #000 88%, transparent 100%);
  -webkit-mask-size: 100% 100%, 100% 100%;
  mask-size: 100% 100%, 100% 100%;
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Place the small crystal detail above the copy and keep its edge clean. */
html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--crystals .home-chapter-visual::after {
  content: "";
  inset: auto;
  top: var(--photo-top);
  right: var(--photo-right);
  width: var(--photo-width);
  height: var(--photo-height);
  border-radius: 50%;
  background: radial-gradient(circle, transparent 94%, rgba(255,255,255,.08) 97%, rgba(255,255,255,.24) 99%, transparent 100%);
  pointer-events: none;
}
html.is-watercolor-story body.is-entrance .home-story .home-chapter--crystals .home-ink-haze { display: none !important; }

body.is-entrance { --cursor-color: var(--anchor-red); }

@media (max-width: 900px) {
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--tarot .home-chapter-visual {
    --photo-top: 9%;
    --photo-left: 7%;
    --photo-width: min(70vw, 270px);
    --photo-height: 36%;
  }
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--tarot .home-chapter-copy {
    justify-content: flex-start;
    padding: calc(var(--water-stage-height, 760px) * .45 + 38px) 24px max(28px, env(safe-area-inset-bottom));
  }
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--tarot .home-title { font-size: 42px; line-height: 1.28; }
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--workshops .home-chapter-visual {
    --photo-top: 0;
    --photo-left: 18%;
    --photo-right: -12%;
    --photo-width: 94%;
    --photo-height: 49%;
  }
}

@media (max-width: 900px) and (max-height: 700px) {
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--tarot .home-chapter-visual { --photo-height: 30%; }
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--tarot .home-chapter-copy {
    padding-top: calc(var(--water-stage-height, 566px) * .39 + 30px);
  }
}

/* Let the founder portrait dissolve at its photo edges while protecting the skater. */
html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--about .home-chapter-visual img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 25%, #000 80%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 11%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 25%, #000 80%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 11%, #000 88%, transparent 100%);
  -webkit-mask-size: calc(84% + 16% * var(--photo-reveal, 1)) calc(84% + 16% * var(--photo-reveal, 1)), 100% 100%;
  mask-size: calc(84% + 16% * var(--photo-reveal, 1)) calc(84% + 16% * var(--photo-reveal, 1)), 100% 100%;
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Keep the same content edges in the ordinary and reduced-motion homepage. */
html body.is-entrance .home-story .home-chapter.home-chapter--tarot .home-chapter-visual img:not(.home-tarot-mirror),
html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--tarot .home-chapter-visual img:not(.home-tarot-mirror) {
  transform: none !important;
  clip-path: none !important;
  box-shadow: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 2%, rgba(0,0,0,.85) 5%, #000 8%, #000 90%, rgba(0,0,0,.85) 95%, rgba(0,0,0,.35) 98%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 2%, rgba(0,0,0,.85) 5%, #000 8%, #000 90%, rgba(0,0,0,.85) 95%, rgba(0,0,0,.35) 98%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-size: calc(90% + 10% * var(--photo-reveal, 1)) calc(90% + 10% * var(--photo-reveal, 1)), 100% 100%;
  mask-size: calc(90% + 10% * var(--photo-reveal, 1)) calc(90% + 10% * var(--photo-reveal, 1)), 100% 100%;
}
html body.is-entrance .home-story .home-chapter.home-chapter--workshops .home-chapter-visual img:not(.home-tarot-mirror),
html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--workshops .home-chapter-visual img:not(.home-tarot-mirror) {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 15%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 15%, #000 82%, transparent 100%);
  -webkit-mask-size: calc(90% + 10% * var(--photo-reveal, 1)) calc(90% + 10% * var(--photo-reveal, 1)), 100% 100%;
  mask-size: calc(90% + 10% * var(--photo-reveal, 1)) calc(90% + 10% * var(--photo-reveal, 1)), 100% 100%;
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
html body.is-entrance .home-story .home-chapter.home-chapter--about .home-chapter-visual img,
html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--about .home-chapter-visual img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 25%, #000 80%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 11%, #000 88%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 25%, #000 80%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 11%, #000 88%, transparent 100%);
  -webkit-mask-size: calc(84% + 16% * var(--photo-reveal, 1)) calc(84% + 16% * var(--photo-reveal, 1)), 100% 100%;
  mask-size: calc(84% + 16% * var(--photo-reveal, 1)) calc(84% + 16% * var(--photo-reveal, 1)), 100% 100%;
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* Continue the paper surface into the real WordPress footer. */
html:has(body.is-entrance) { background: var(--white); }
html body.is-entrance { background: var(--white); color: var(--indigo-deep); }
html body.is-entrance :focus-visible { outline-color: #245F91 !important; }
html body.is-entrance .site-footer--home {
  color: var(--indigo-deep);
  background: var(--white);
  background-image: none;
  border-top: 0;
}
html body.is-entrance .site-footer--home .home-footer-brand > a,
html body.is-entrance .site-footer--home .home-footer-brand > a span,
html body.is-entrance .site-footer--home .home-footer-bottom a,
html body.is-entrance .site-footer--home .home-footer-meta a,
html body.is-entrance .site-footer--home .home-footer-label,
html body.is-entrance .site-footer--home .home-footer-meta { color: var(--indigo-deep); }
html body.is-entrance .site-footer--home .home-footer-meta { border-color: rgba(20,42,72,.16); }

html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--crystals .home-chapter-visual::after { content: none; }

/* The four service portraits settle in color and reveal through their alpha edge. */
html body.is-entrance .home-story .home-chapter:is(.home-chapter--tarot, .home-chapter--workshops, .home-chapter--crystals, .home-chapter--about) .home-chapter-visual img:not(.home-tarot-mirror) {
  filter: saturate(calc(.28 + .57 * var(--photo-settle, 1))) contrast(calc(.82 + .15 * var(--photo-settle, 1))) brightness(calc(1.12 - .1 * var(--photo-settle, 1))) !important;
  transition: none;
}
html body.is-entrance .home-story .home-chapter.home-chapter--workshops .home-chapter-visual img:not(.home-tarot-mirror),
html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--workshops .home-chapter-visual img:not(.home-tarot-mirror) {
  filter: saturate(calc(.28 + .62 * var(--photo-settle, 1))) contrast(calc(.82 + .15 * var(--photo-settle, 1))) brightness(calc(1.12 - .1 * var(--photo-settle, 1))) !important;
}

html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--tarot .home-chapter-visual img:not(.home-tarot-mirror) {
  transform: none !important;
  clip-path: none !important;
  box-shadow: none !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 2%, rgba(0,0,0,.85) 5%, #000 8%, #000 90%, rgba(0,0,0,.85) 95%, rgba(0,0,0,.35) 98%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 2%, rgba(0,0,0,.85) 5%, #000 8%, #000 90%, rgba(0,0,0,.85) 95%, rgba(0,0,0,.35) 98%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
  -webkit-mask-size: calc(90% + 10% * var(--photo-reveal, 1)) calc(90% + 10% * var(--photo-reveal, 1)), 100% 100%;
  mask-size: calc(90% + 10% * var(--photo-reveal, 1)) calc(90% + 10% * var(--photo-reveal, 1)), 100% 100%;
}

html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--workshops .home-chapter-visual {
  --photo-left: auto;
  --photo-right: clamp(20px, 2.5vw, 42px);
  --photo-width: min(54vw, 780px);
  --photo-height: 80%;
  --photo-position: 50% 56%;
}
html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--workshops .home-chapter-visual img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 15%, #000 82%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 15%, #000 82%, transparent 100%);
  -webkit-mask-size: calc(90% + 10% * var(--photo-reveal, 1)) calc(90% + 10% * var(--photo-reveal, 1)), 100% 100%;
  mask-size: calc(90% + 10% * var(--photo-reveal, 1)) calc(90% + 10% * var(--photo-reveal, 1)), 100% 100%;
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
html.is-watercolor-story body.is-entrance .home-story .home-chapter--workshops .home-copy-below {
  top: calc(12% + 273px);
  left: calc(50% - min(44vw, 620px));
  bottom: auto;
  width: min(34vw, 480px);
}

html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--crystals .home-chapter-visual img {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 20%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 20%, #000 95%, transparent 100%);
  -webkit-mask-size: calc(90% + 10% * var(--photo-reveal, 1)) calc(90% + 10% * var(--photo-reveal, 1)), 100% 100%;
  mask-size: calc(90% + 10% * var(--photo-reveal, 1)) calc(90% + 10% * var(--photo-reveal, 1)), 100% 100%;
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

@media (min-width: 901px) and (max-width: 1100px) {
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--workshops .home-chapter-visual {
    --photo-right: clamp(20px, 2.5vw, 30px);
    --photo-width: 54vw;
    --photo-height: 80%;
  }
  html.is-watercolor-story body.is-entrance .home-story .home-chapter--workshops .home-copy-below {
    top: calc(12% + 229px);
    width: min(34vw, 348px);
  }
}

@media (max-width: 900px) {
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--workshops .home-chapter-visual {
    --photo-top: 0;
    --photo-left: 24px;
    --photo-right: 24px;
    --photo-width: calc(100% - 48px);
    --photo-height: 49%;
    --photo-position: 62% 46%;
  }
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--workshops .home-copy-above {
    top: calc(60% - 40px);
    left: 24px;
    width: calc(100% - 48px);
  }
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--workshops .home-copy-below {
    left: 24px;
    bottom: auto;
    right: 0;
    width: auto;
    margin-top: 36px;
  }
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--workshops .home-enter { margin-top: 20px; }
}

@media (max-width: 900px) and (max-height: 700px) {
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--workshops .home-copy-below {
    margin-top: 27px;
  }
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--workshops .home-chapter-visual {
    --photo-height: 40%;
  }
}

@media (min-width: 901px) {
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--crystals .home-chapter-visual {
    --photo-top: clamp(16px, 4.5vh, 48px);
    --photo-left: auto;
    --photo-right: clamp(20px, 3.5vw, 56px);
    --photo-width: min(48vw, 680px);
    --photo-height: 88%;
    --photo-position: center bottom;
    --photo-fit: contain;
  }
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--tarot .home-copy-below {
    top: calc(var(--waterline) + 4px);
  }
  html body.is-entrance .home-story .home-chapter.home-chapter--about .home-title + .home-description { margin-top: 30px; }
}

/* Retire the old reflected card plane in both scroll and ordinary flow. */
html body.is-entrance .home-story .home-chapter.home-chapter--tarot .home-chapter-visual img.home-tarot-mirror,
html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--tarot .home-chapter-visual img.home-tarot-mirror { display: none; }
/* The navigation stays on the same white canvas during every handoff. */
body.is-entrance .site-header .support-nav::before { content: none !important; display: none !important; }
@media (max-width: 900px) {
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--crystals .home-chapter-visual {
    --photo-top: 0;
    --photo-left: 24px;
    --photo-right: 24px;
    --photo-width: calc(100% - 48px);
    --photo-height: 54%;
    --photo-position: center bottom;
    --photo-fit: contain;
  }
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--crystals .home-copy-above {
    top: calc(60% - 40px);
    left: 24px;
    bottom: auto;
    width: calc(100% - 48px);
  }
  html.is-watercolor-story body.is-entrance .home-story .home-chapter.home-chapter--crystals .home-copy-below {
    left: 24px;
    top: auto;
    bottom: auto;
    right: 0;
    width: auto;
    margin-top: 36px;
  }
}

/* Pre-boot frame. front-page.php arms html.is-watercolor-story in <head> so the very first paint already has the
   enhanced geometry; home-story.js adds html.is-story-booted after its first render. Until then only the intro stage
   is shown, with its copy withheld (the glyph split has not run yet, so showing it would flash plain text). */
html.is-watercolor-story:not(.is-story-booted) .home-chapter:not(.home-chapter--intro),
html.is-watercolor-story:not(.is-story-booted) .home-progress { visibility: hidden; }
html.is-watercolor-story:not(.is-story-booted) .home-chapter--intro :is(.home-chapter-copy, .home-sign, .home-scroll-cue, .home-space-index) { opacity: 0; }

/* ---- Flowing-water progress rail -------------------------------------------------------------------------------
   Track (deep indigo hairline, feathered ends) + water fill that follows the hold-mapped story progress + a rose drop
   that glides to the active station + hollow ring stations the water passes through. Per-frame values are CSS vars on
   the nav written by home-story.js renderScroll (--rail-fill 0..1, --rail-drop = active station index) and consumed by
   transforms only. Geometry: six 44px stations, track from y=10px to y=254px (station centres at 22px + 44px * n).
   The ":not(#uq-rail)" adds id weight so these rules win over the older blue-paper / rose theme overrides. */
.home-story .home-progress:not(#uq-rail) {
  --rail-fill: 0;
  --rail-drop: 0;
  --rail-ring: rgba(30, 58, 95, .5);
  --rail-wash: var(--wash);
  --rail-mist: var(--mist);
  --rail-rose: var(--rose);
  --rail-track-w: 1.5px;
  --rail-drop-size: 11px;
  --rail-ring-size: 8px;
  gap: 0;
}
.home-story .home-progress:not(#uq-rail)::before { content: none; }
.home-story .home-progress:not(#uq-rail) .home-progress-track {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: calc(50% - var(--rail-track-w) / 2);
  width: var(--rail-track-w);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: rgba(30, 58, 95, .18);
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  pointer-events: none;
}
/* The fill is a full-length element slid up out of the track; only translateY changes per frame, so the tip (always
   the wash-blue end of the gradient) stays undistorted. */
.home-story .home-progress:not(#uq-rail) .home-progress-fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, var(--rail-mist) 0%, var(--rail-wash) 100%);
  transform: translate3d(0, calc((var(--rail-fill) - 1) * 100%), 0);
  will-change: transform;
}
.home-story .home-progress:not(#uq-rail) .home-progress-fill::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 200%;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,0) 0, rgba(255,255,255,.75) 34px, rgba(255,255,255,0) 68px);
  animation: uq-rail-shimmer 3.6s linear infinite;
}
@keyframes uq-rail-shimmer { from { transform: translate3d(0, -68px, 0); } to { transform: translate3d(0, 0, 0); } }
/* One-time gentle flow when the story first mounts, so the rail is noticed. */
.home-story .home-progress:not(#uq-rail) .home-progress-track::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 56px;
  opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(120,154,203,.95) 55%, rgba(175,196,211,.0));
  transform: translate3d(0, -60px, 0);
}
.home-story .home-progress.is-flowing:not(#uq-rail) .home-progress-track::after { animation: uq-rail-intro 1.2s cubic-bezier(.45, 0, .25, 1) 1 forwards; }
@keyframes uq-rail-intro {
  0% { opacity: 0; transform: translate3d(0, -60px, 0); }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(0, 250px, 0); }
}
html.is-rail-paused .home-progress-fill::after,
html.is-rail-paused .home-progress.is-flowing .home-progress-track::after { animation-play-state: paused; }

/* Stations: hollow hairline rings; tinted wash blue once the water has reached them. */
.home-story .home-progress:not(#uq-rail) a {
  width: 44px;
  height: 44px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.home-story .home-progress:not(#uq-rail) a::before {
  width: var(--rail-ring-size);
  height: var(--rail-ring-size);
  box-sizing: border-box;
  border: 1px solid var(--rail-ring);
  border-radius: 50%;
  background: rgba(255, 255, 255, .0);
  box-shadow: none;
  transform: scale(1);
  transition: transform .45s cubic-bezier(.165, .84, .44, 1), border-color .4s ease, background-color .4s ease;
}
.home-story .home-progress:not(#uq-rail) a.is-reached::before { border-color: var(--rail-wash); background: rgba(120, 154, 203, .28); }
.home-story .home-progress:not(#uq-rail) a:hover::before,
.home-story .home-progress:not(#uq-rail) a:focus-visible::before { transform: scale(1.7); border-color: var(--rail-wash); }
.home-story .home-progress:not(#uq-rail) a.is-current::before,
.home-story .home-progress:not(#uq-rail) a[aria-current="location"]::before { width: var(--rail-ring-size); height: var(--rail-ring-size); transform: scale(1); box-shadow: none; }
.home-story .home-progress:not(#uq-rail) a.is-current:hover::before { transform: scale(1.7); }
/* Ripple ring: replayed by home-story.js on hover-in, focus and click (class .is-ripple). */
.home-story .home-progress:not(#uq-rail) a::after {
  inset: auto;
  width: var(--rail-ring-size);
  height: var(--rail-ring-size);
  box-sizing: border-box;
  border: 1px solid var(--rail-wash);
  opacity: 0;
  transform: scale(1);
  transition: none;
}
.home-story .home-progress:not(#uq-rail) a.is-current::after { opacity: 0; transform: scale(1); }
.home-story .home-progress:not(#uq-rail) a.is-ripple::after { animation: uq-rail-ripple .75s cubic-bezier(.165, .84, .44, 1) 1; }
@keyframes uq-rail-ripple { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(3.6); } }
.home-story .home-progress:not(#uq-rail) a:focus-visible { outline: 2px solid var(--indigo); outline-offset: -6px; box-shadow: none; }

/* The drop: weighted glide (power4-out), stretches along the travel direction while moving, wobbles on arrival. */
.home-story .home-progress:not(#uq-rail) .home-progress-drop {
  position: absolute;
  top: calc(22px - var(--rail-drop-size) / 2);
  left: calc(50% - var(--rail-drop-size) / 2);
  width: var(--rail-drop-size);
  height: var(--rail-drop-size);
  z-index: 2;
  pointer-events: none;
  transform: translate3d(0, calc(var(--rail-drop) * 44px), 0);
  transition: transform .78s cubic-bezier(.165, .84, .44, 1);
}
.home-story .home-progress:not(#uq-rail) .home-progress-drop::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-drop);
  background: radial-gradient(circle at 36% 30%, #EBC3C4 0%, var(--rail-rose) 62%, #B77A7F 100%);
  box-shadow: 0 0 12px 3px rgba(197, 139, 142, .42);
  transform: scale(1);
  transition: transform .2s ease-out;
}
.home-story .home-progress.is-gliding:not(#uq-rail) .home-progress-drop::before { transform: scale(.85, 1.25); }
.home-story .home-progress.is-settling:not(#uq-rail) .home-progress-drop::before { animation: uq-drop-wobble .6s cubic-bezier(.34, 1.4, .64, 1) 1; }
@keyframes uq-drop-wobble {
  0% { transform: scale(.85, 1.25); }
  28% { transform: scale(1.14, .86); }
  55% { transform: scale(.95, 1.05); }
  80% { transform: scale(1.03, .98); }
  100% { transform: scale(1); }
}
/* Ordinary flow reading (story not enhanced): no fill or drop; the current station is a rose ring. */
html:not(.is-watercolor-story) .home-progress-drop,
html:not(.is-watercolor-story) .home-progress-fill { display: none; }
html:not(.is-watercolor-story) .home-story .home-progress:not(#uq-rail) a.is-current::before { border-color: var(--rose); background: var(--rose); }
@media (hover: none), (pointer: coarse) {
  .home-story .home-progress:not(#uq-rail) a { width: 48px; height: 44px; }
}
@media (max-width: 768px) {
  .home-story .home-progress:not(#uq-rail) {
    --rail-track-w: 1px;
    --rail-drop-size: 9px;
    --rail-ring-size: 7px;
  }
  .home-story .home-progress:not(#uq-rail) .home-progress-drop::before { box-shadow: 0 0 5px 1px rgba(197, 139, 142, .38); }
  .home-story .home-progress:not(#uq-rail) a:hover::before,
  .home-story .home-progress:not(#uq-rail) a:focus-visible::before { transform: scale(1.5); }
}
@media (prefers-reduced-motion: reduce) {
  .home-progress-fill::after,
  .home-progress.is-flowing .home-progress-track::after,
  .home-progress a.is-ripple::after,
  .home-progress.is-settling .home-progress-drop::before { animation: none !important; }
  .home-progress-drop { transition: none !important; }
}

/* Desktop: rail labels stay visible so the stations read as links; the bottom space index is then redundant.
   Each label sits on a feathered white glow (a radial gradient that fades to nothing, no hard or frayed edge); the
   current / hovered station picks up a faint mist tint. */
@media (min-width: 901px) {
  .home-story .home-progress .home-progress-label {
    padding: 5px 16px;
    background: transparent;
    color: rgba(30, 58, 95, .8);
    font-weight: 400;
    font-size: 12px;
    box-shadow: none;
    isolation: isolate;
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, -50%);
    transition: color 180ms ease;
  }
  .home-story .home-progress .home-progress-label::before {
    content: "";
    position: absolute;
    inset: -14px -26px;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .78) 38%, rgba(240, 245, 249, .42) 66%, rgba(230, 238, 244, 0) 100%);
    transition: transform 300ms ease;
  }
  .home-story .home-progress a:hover .home-progress-label,
  .home-story .home-progress a:focus-visible .home-progress-label,
  .home-story .home-progress a.is-current .home-progress-label { color: var(--indigo-deep); }
  .home-story .home-progress a.is-current .home-progress-label { font-weight: 500; }
  .home-story .home-progress a:hover .home-progress-label::before,
  .home-story .home-progress a:focus-visible .home-progress-label::before,
  .home-story .home-progress a.is-current .home-progress-label::before {
    background: radial-gradient(closest-side, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .88) 40%, rgba(175, 196, 211, .28) 70%, rgba(175, 196, 211, 0) 100%);
    transform: scale(1.08);
  }
  html.is-watercolor-story .home-chapter--intro .home-space-index { display: none; }
}