/* Oversized, overlapping colour cutouts. Content remains on a calm foreground. */
body {overflow-x:clip}
[data-parallax-scene] {position:relative;isolation:isolate}
.day-header {position:relative;z-index:20}
.motion-art {position:absolute;inset:0;z-index:0;overflow:clip;pointer-events:none;user-select:none}
.flow-shape {
  position:absolute;
  left:var(--x,50%);
  top:var(--y,50%);
  width:var(--size,50vw);
  aspect-ratio:var(--ratio,1);
  border-radius:var(--round,50%);
  background:var(--fill);
  transform:translate(-50%,-50%) translate3d(var(--motion-x,0px),var(--motion-y,0px),0) rotate(var(--motion-turn,0deg)) scale(var(--motion-scale,1));
  transform-origin:50% 50%;
  backface-visibility:hidden;
}
.flow-shape.outline {background:transparent;border:clamp(2px,.45vw,6px) solid var(--fill)}
[data-parallax-scene].motion-visible .flow-shape {will-change:transform}
[data-parallax-y] {translate:var(--float-x,0px) var(--float-y,0px)}
.day-dawn>.hero,.day-morning>.practice,.daylight-inner,.day-afternoon>.about,
.evening-top>.evening-grid,.twilight-reading>.little-things,.contact-inner {position:relative;z-index:2}
.growth-sticky {isolation:isolate;z-index:2}
.growth-sticky>.growth-art {z-index:1}
.growth-margin-note {z-index:2}

/* Morning: interlocking blue, orange and pink circles behind the breathing lotus. */
.dawn-blue {--x:88%;--y:40%;--size:min(65vw,1020px);--fill:#58b4d8;--ratio:1.05}
.dawn-orange {--x:98%;--y:91%;--size:min(65vw,920px);--fill:#ec5f2a;--ratio:1.65;--round:52% 48% 48% 52%}
.dawn-pink {--x:65%;--y:82%;--size:min(32vw,510px);--fill:#ea3358;--ratio:1.3}
.day-dawn {background:linear-gradient(145deg,#f8d075,#f3c394 70%,#f4b8c1)}
.day-dawn .paper-note {background:#fff2d8}
.day-dawn .breath-guide {width:max-content;max-width:100%;margin-inline:auto;background:#f7dfbb;border-radius:100px;padding:9px 17px}
.day-dawn .breath-footnote {width:max-content;max-width:94%;padding:3px 10px;margin-inline:auto;background:#f7dfbb;border-radius:20px;color:#56254c}
.day-dawn .hero-bottom {background:rgba(248,212,172,.9);padding:13px 15px;border-top:0;border-radius:2px}
.word-ribbon {position:relative;z-index:8;width:calc(100% + 80px);margin-left:-40px;margin-top:-12px;rotate:-1.15deg;padding-left:calc(3vw + 40px)}

/* Broad arcs overlap the chapter boundaries like separate sheets of paper. */
.day-morning::before,.growth-section::before,.day-afternoon::before,
.evening-top::before,.twilight-reading::before,.contact::before {
  content:"";position:absolute;z-index:0;left:-6%;width:112%;height:130px;top:-46px;
  border-radius:49% 51% 0 0 /80% 100% 0 0;background:var(--seam-colour);
  pointer-events:none;
}
.day-morning {--seam-colour:#f4b8c1;background:#f4b8c1}
.day-morning::before {top:-28px;height:90px}
.morning-honey {--x:91%;--y:30%;--size:min(50vw,800px);--fill:#e9a83b;--ratio:1.03;--round:48% 52% 57% 43%}
.morning-peach {--x:2%;--y:93%;--size:min(69vw,1050px);--fill:#f2c58b;--ratio:1.8}
.day-morning .practice-note {background:rgba(248,206,194,.92);padding:26px 30px 25px;rotate:1deg;border-radius:2px}
.day-morning .practice-note>* {rotate:-1deg}
.day-morning .practice-values {background:#f4b8c1;padding-bottom:10px}
.growth-section {--seam-colour:#185495;background:#185495}
.growth-section::before {top:-58px;height:130px;border-radius:61% 39% 0 0 /100% 85% 0 0}
.noon-lagoon {--x:93%;--y:61%;--size:min(60vw,960px);--fill:#58b4d8}
.noon-blue {--x:101%;--y:91%;--size:min(49vw,830px);--fill:#1d5fae;--ratio:1.8}
.noon-ring {--x:96%;--y:67%;--size:min(70vw,1150px);--fill:#8dc8de;--ratio:.95}

/* Different speeds make the original photographs feel like loose pieces of paper. */
.daylight-gallery {overflow:visible;background:#58b4d8}
.gallery-honey {--x:-3%;--y:65%;--size:min(47vw,780px);--fill:#e9a83b;--ratio:1.12}
.gallery-blue {--x:110%;--y:98%;--size:min(65vw,1030px);--fill:#1d5fae;--ratio:1.18}
.daylight-inner {padding-top:94px;padding-bottom:85px}
.daylight-heading .paradise-handwriting {position:relative;z-index:2}
.gallery-postscript {position:relative;z-index:2;width:max-content;max-width:100%;margin-left:auto;background:#58b4d8;padding:4px 9px}
.day-afternoon {--seam-colour:#f6d18c;background:#f6d18c}
.day-afternoon::before {top:-43px;height:110px;border-radius:37% 63% 0 0 /100% 72% 0 0}
.afternoon-orange {--x:15%;--y:36%;--size:min(54vw,840px);--fill:#ec5f2a;--ratio:.98}
.afternoon-honey {--x:82%;--y:102%;--size:min(79vw,1150px);--fill:#e9a83b;--ratio:1.8}
.day-afternoon .collage-label {background:#f6d18c;padding:5px 8px;left:-17px}

.evening-top {--seam-colour:#f1ac69;overflow:visible;background:#f1ac69}
.evening-top::before {top:-60px;height:140px;border-radius:55% 45% 0 0 /70% 100% 0 0}
.evening-rose {--x:93%;--y:53%;--size:min(68vw,1000px);--fill:#ea3358;--ratio:1.06;--round:47% 53% 58% 42%}
.evening-orange {--x:110%;--y:97%;--size:min(62vw,1050px);--fill:#ec5f2a;--ratio:1.7}
.twilight-reading {--seam-colour:#8b385b;background:#8b385b}
.twilight-reading::before {top:-42px;height:95px;border-radius:35% 65% 0 0 /100% 80% 0 0}
.twilight-fig {--x:99%;--y:70%;--size:min(61vw,900px);--fill:#6b2b5e;--ratio:1.9}
.contact {--seam-colour:#3e2c66;overflow:visible;background:linear-gradient(160deg,#3e2c66,#0a2342 82%)}
.contact::before {top:-33px;height:95px}
.night-disc {--x:94%;--y:90%;--size:min(75vw,1080px);--fill:#173b64;--ratio:1.05}
.night-ring {--x:96%;--y:83%;--size:min(90vw,1300px);--fill:#445982;--ratio:1.07}
.contact-lines {z-index:1}

:root[data-theme=night] .day-dawn {background:linear-gradient(145deg,#352035,#583044)}
:root[data-theme=night] .dawn-blue {--fill:#265b78}
:root[data-theme=night] .dawn-orange {--fill:#a85637}
:root[data-theme=night] .dawn-pink {--fill:#973759}
:root[data-theme=night] .day-dawn .breath-guide,
:root[data-theme=night] .day-dawn .breath-footnote {background:#352035;color:#fff0d7}
:root[data-theme=night] .day-dawn .hero-bottom {background:#352035e8}
:root[data-theme=night] .day-morning {--seam-colour:#60344b;background:#60344b}
:root[data-theme=night] .morning-honey {--fill:#8e563c}
:root[data-theme=night] .morning-peach {--fill:#4c2b42}
:root[data-theme=night] .day-morning .practice-note {background:#503044}
:root[data-theme=night] .day-morning .practice-values {background:#60344b}
:root[data-theme=night] .growth-section {--seam-colour:#0a2342;background:#0a2342}
:root[data-theme=night] .noon-lagoon {--fill:#245d78}
:root[data-theme=night] .noon-blue {--fill:#163e6b}
:root[data-theme=night] .noon-ring {--fill:#3e788f}
:root[data-theme=night] .gallery-honey {--fill:#946c3e}
:root[data-theme=night] .gallery-blue {--fill:#0b2e54}
:root[data-theme=night] .gallery-postscript {background:#174866}
:root[data-theme=night] .day-afternoon {--seam-colour:#503348;background:#503348}
:root[data-theme=night] .afternoon-orange {--fill:#9c573f}
:root[data-theme=night] .afternoon-honey {--fill:#583849}
:root[data-theme=night] .day-afternoon .collage-label {background:#503348}
:root[data-theme=night] .evening-top {--seam-colour:#693e47;background:#693e47}
:root[data-theme=night] .evening-rose {--fill:#972f57}
:root[data-theme=night] .evening-orange {--fill:#a24f38}
:root[data-theme=night] .twilight-reading {--seam-colour:#532a44;background:#532a44}
:root[data-theme=night] .twilight-fig {--fill:#35243e}

@media(max-width:1050px) {
  .dawn-blue {--x:98%;--size:77vw}
  .dawn-pink {--x:75%;--size:39vw}
  .morning-honey {--x:97%;--size:57vw}
  .afternoon-orange {--x:6%;--size:58vw}
  .evening-rose {--x:103%;--size:74vw}
}
@media(max-width:760px) {
  .flow-shape {border-width:3px}
  .dawn-blue {--x:104%;--y:68%;--size:112vw;--ratio:1.04}
  .dawn-orange {--x:108%;--y:89%;--size:123vw;--ratio:1.6}
  .dawn-pink {--x:30%;--y:91%;--size:82vw;--ratio:1.28}
  .day-dawn .hero {padding-bottom:117px}
  .day-dawn .hero-bottom {bottom:27px;padding:10px 12px;gap:5px}
  .day-dawn .breath-guide {padding:6px 10px;gap:10px}
  .day-dawn .breath-footnote {font-size:12px;max-width:100%}
  .word-ribbon {margin-top:-8px;rotate:-1.8deg}
  .day-morning::before {top:-17px;height:70px}
  .morning-honey {--x:104%;--y:12%;--size:103vw}
  .morning-peach {--x:-5%;--y:52%;--size:112vw;--ratio:1.7}
  .day-morning .practice-note {padding:22px 20px;margin-inline:-4px;rotate:-1deg}
  .day-morning .practice-note>* {rotate:1deg}
  .day-morning .practice-values {background:transparent}
  .growth-section::before {top:-34px;height:85px}
  .noon-lagoon {--x:94%;--y:84%;--size:115vw}
  .noon-blue {--x:108%;--y:112%;--size:107vw;--ratio:1.8}
  .noon-ring {--x:91%;--y:86%;--size:135vw;--ratio:1}
  .gallery-honey {--x:-17%;--y:58%;--size:114vw}
  .gallery-blue {--x:126%;--y:96%;--size:147vw;--ratio:1.18}
  .daylight-inner {padding-top:57px;padding-bottom:65px}
  .daylight-photos {gap:28px 11px}
  .gallery-postscript {max-width:265px;margin-top:33px}
  .day-afternoon::before {top:-32px;height:90px}
  .afternoon-orange {--x:3%;--y:19%;--size:115vw;--ratio:1}
  .afternoon-honey {--x:96%;--y:107%;--size:150vw;--ratio:1.7}
  .day-afternoon .about {padding-top:83px;padding-bottom:77px}
  .day-afternoon .collage-label {left:-14px;bottom:-6px}
  .evening-top::before {top:-37px;height:95px}
  .evening-rose {--x:99%;--y:70%;--size:137vw;--ratio:1.2}
  .evening-orange {--x:110%;--y:100%;--size:132vw;--ratio:1.6}
  .evening-grid {padding-bottom:110px}
  .twilight-reading::before {top:-30px;height:85px}
  .twilight-fig {--x:101%;--y:80%;--size:138vw;--ratio:1.65}
  .twilight-reading .little-things {padding-top:55px;padding-bottom:57px}
  .contact::before {top:-24px;height:70px}
  .night-disc {--x:127%;--y:80%;--size:155vw}
  .night-ring {--x:130%;--y:81%;--size:188vw}
}
@media(max-height:650px) and (max-width:760px) {
  .noon-lagoon {--y:100%;--size:102vw}
  .noon-ring {--y:106%;--size:120vw}
}
@media(prefers-reduced-motion:reduce) {
  .flow-shape {transform:translate(-50%,-50%);will-change:auto!important}
  [data-parallax-y] {translate:none!important}
}