:root{--cream:#f4eee3;--paper:#fbf7ef;--terra:#854729;--terra-dark:#6b3521;--ink:#3f3027;--muted:#736052;--line:#d7c7b6}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--cream);color:var(--ink);font-family:Lato,system-ui,sans-serif;font-size:16px;line-height:1.8}
a{color:inherit;-webkit-tap-highlight-color:transparent}
a:focus-visible{outline:3px solid var(--terra);outline-offset:5px}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
h1,h2,p{margin-top:0}
h1,h2,.brand,.footer-brand,.mini-heading{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500}
h1{font-size:clamp(38px,10.5vw,52px);line-height:1.08;letter-spacing:-.035em;color:var(--terra-dark);margin-bottom:24px}
h2{font-size:34px;line-height:1.18;letter-spacing:-.015em}
/* A single reading column at every screen width. Wider screens add margins,
   never columns or a different content order. */
.wrap{width:100%;max-width:640px;margin-inline:auto;padding-inline:24px}
.eyebrow{display:block;font-size:10px;letter-spacing:.17em;line-height:1.6;color:var(--terra);margin-bottom:20px}
.preview-note{text-align:center;background:#e7dccd;color:#655444;padding:5px 12px;font-size:10px;letter-spacing:.12em}
.preview-note span{padding-inline:8px}
.site-header{width:100%;max-width:640px;margin:auto;padding:22px 24px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 14px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap;font-size:27px;line-height:1;color:var(--terra-dark)}
.brand small{display:block;font-family:Lato,sans-serif;font-size:7px;letter-spacing:.15em;margin-top:8px;color:var(--muted)}
.lotus-mark{width:45px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;color:var(--terra)}
.brand .lotus-mark{width:36px;flex-shrink:0}
nav{grid-column:1/-1;display:flex;justify-content:center;gap:32px;margin:0}
nav a{font-size:13px;text-decoration:none;padding-block:8px;min-height:44px;white-space:nowrap}
nav a[aria-current]{box-shadow:0 1px var(--terra);color:var(--terra)}
nav a:hover,.text-link:hover,footer>a:hover{color:var(--terra)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:23px;background:var(--terra);color:var(--paper);text-decoration:none;font-size:13px;padding:16px 24px;border-radius:3px;line-height:1.4;white-space:nowrap;min-height:48px;transition:background .2s}
.button:hover{background:var(--terra-dark)}
.button span{font-size:17px;line-height:1}
.header-button{align-self:center;font-size:11px;padding:13px 16px;gap:12px;min-height:44px}
.text-link{display:inline-block;font-size:13px;text-decoration:none;border-bottom:1px solid var(--line);padding-block:8px;min-height:44px}
.text-link span{margin-left:10px}
.home-hero{display:flex;flex-direction:column;gap:36px;padding-top:40px;padding-bottom:36px}
.hero-copy{width:100%}
.hero-copy .eyebrow{margin-bottom:22px}
.intro{max-width:100%;font-size:16px;line-height:1.85}
.intro p{margin-bottom:25px}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px}
.hero-photo{width:100%;max-width:480px;margin-inline:auto}
.hero-photo img{width:100%;aspect-ratio:0.9;object-fit:cover;object-position:52% 50%;border-radius:240px 240px 4px 4px}
.hero-photo figcaption{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;text-align:center;font-size:23px;color:var(--muted);margin-top:15px}
.home-bottom{display:flex;flex-direction:column;gap:28px;padding-top:28px;padding-bottom:45px;position:relative}
.home-bottom:before{content:'';position:absolute;left:24px;right:24px;top:0;height:1px;background:var(--line)}
.meet-link{display:flex;gap:26px;align-items:center;text-decoration:none}
.meet-link img{width:100px;height:125px;object-fit:contain;flex-shrink:0}
.meet-link .eyebrow{margin-bottom:8px}
.mini-heading{display:block;font-size:34px;line-height:1.2;margin-bottom:10px}
.session-summary{width:100%;padding-top:28px;border-top:1px solid var(--line)}
.session-summary .eyebrow{margin-bottom:10px}
.session-summary h2{margin-bottom:9px}
.session-summary>p:not(.eyebrow){font-size:15px;margin-bottom:10px}
.about-layout{display:flex;flex-direction:column;gap:35px;padding-top:40px;padding-bottom:48px}
.about-layout .prose{order:0}
.about-photo{order:1;max-width:300px;width:100%;align-self:center}
.about-photo .eyebrow{display:none}
.about-photo img{width:100%;height:auto}
.photo-signature{font-family:'Cormorant Garamond',Georgia,serif;font-style:italic;text-align:center;font-size:27px;color:var(--terra);margin-top:20px}
.prose{font-size:16px;line-height:1.9}
.prose p{margin-bottom:23px}
.prose .actions{margin-top:30px}
.expect-heading{text-align:center;padding-top:40px;padding-bottom:26px}
.expect-heading h1{margin-bottom:20px}
.standfirst{font-family:'Cormorant Garamond',Georgia,serif;font-size:27px;line-height:1.4;margin:0 auto 24px;color:var(--muted)}
.expect-heading .lotus-mark{width:34px}
.expect-layout{display:flex;flex-direction:column;gap:22px;padding-bottom:35px}
.closing{font-family:'Cormorant Garamond',Georgia,serif;font-size:27px;line-height:1.4;color:var(--terra);padding-top:14px}
.session-card{width:100%;max-width:480px;align-self:center;background:#e8ddcd;border:1px solid #d9c6b0;padding:38px 28px;border-radius:100px 100px 4px 4px;text-align:center;scroll-margin-top:24px}
.session-card .eyebrow{margin-bottom:18px}
.session-card h2{font-size:34px;margin-bottom:15px}
.price{font-family:'Cormorant Garamond',Georgia,serif;font-size:42px;color:var(--terra);line-height:1.2;margin-bottom:22px}
.card-rule{width:38px;height:1px;background:#bb9980;margin:0 auto 23px}
.session-card p:not(.price):not(.eyebrow){font-size:15px;line-height:1.85;margin-bottom:22px}
.session-card .sms-note{font-size:12px!important;max-width:260px;margin:15px auto 0!important;color:#675444}
.room-band{padding-bottom:45px}
.room-band img{width:100%;aspect-ratio:1.2;object-fit:cover;object-position:50% 47%;border-radius:4px}
footer{max-width:640px;margin-inline:auto;background:#e8ddcd;border-top:1px solid var(--line);padding:30px 24px;display:flex;flex-direction:column;align-items:flex-start;gap:20px;font-size:12px;line-height:1.8}
footer p{margin:0}
.footer-brand{display:flex;align-items:center;gap:14px;font-size:27px;color:var(--terra-dark)}
.footer-brand .lotus-mark{width:35px}
footer>a{display:inline-block;padding-block:8px;text-decoration:none;min-height:44px}
.skip{position:absolute;left:-10000px;top:0}
.skip:focus{left:10px;top:10px;background:var(--paper);padding:10px;z-index:10}
@media(max-width:410px){.site-header{gap:16px 10px}.brand{font-size:25px}.header-button{padding-inline:12px;font-size:10px;gap:10px}}
@media(max-width:370px){.site-header{padding-inline:16px;gap:16px 8px}.brand{font-size:21px;gap:6px}.brand .lotus-mark{width:27px}.brand small{font-size:6px}.header-button{font-size:9px;gap:7px;padding-inline:10px}.header-button span{font-size:14px}.wrap{padding-inline:20px}nav{gap:23px}.actions{gap:14px}.button{padding-inline:19px}.header-button{padding-inline:10px}.home-bottom:before{left:20px;right:20px}.session-card{padding-inline:22px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
/* Centered masthead, shared by every page and screen size. */
.site-header{display:flex;flex-direction:column;align-items:center;gap:17px;padding-top:26px}
.brand{justify-content:center;text-align:center;font-size:clamp(40px,10.8vw,57px);gap:0;line-height:1.08}
.brand>.lotus-mark{display:none}
.brand small{font-size:9px;letter-spacing:.2em;margin-top:11px}
nav{width:100%;gap:30px}
.header-button{align-self:center;width:100%;max-width:360px;font-size:12px;padding:14px 20px;gap:16px}
@media(max-width:370px){.brand{font-size:36px}.brand small{font-size:8px}nav{gap:23px}}
.brand{flex-direction:column;gap:8px}
.brand>.lotus-mark{display:block;width:42px}
/* Stronger masthead while retaining the same centered, vertical layout. */
.brand{font-size:clamp(42px,12.5vw,72px);font-weight:600;letter-spacing:-.025em}
.brand small{font-weight:400;letter-spacing:.2em}
@media(max-width:370px){.brand{font-size:40px}}
/* The studio and welcome share one curved composition, inspired by the
   original poster; the full description remains readable below the curve. */
.home-hero{gap:0;padding-top:24px}
.hero-composition{position:relative;width:100%;min-height:360px;aspect-ratio:1.3;isolation:isolate}
.integrated-photo{position:absolute;inset:0 0 0 23%;z-index:-2;overflow:hidden;border-radius:3px}
.integrated-photo img{width:100%;height:100%;object-fit:cover;object-position:56% 50%}
.hero-sweep{position:absolute;inset:0;width:100%;height:100%;z-index:-1;fill:var(--cream);pointer-events:none}
.hero-headline{width:53%;padding:28px 0 0 0}
.hero-headline h1{font-size:clamp(28px,7.45vw,43px);line-height:1.12;font-weight:500;letter-spacing:-.025em;margin-bottom:18px}
.hero-ornament{display:block;text-align:center;width:80%;font-size:24px;color:var(--terra)}
.integrated-description{width:100%;padding-top:22px}
.integrated-description .intro{font-size:16px}
@media(max-width:370px){.hero-composition{min-height:340px}.hero-headline{width:55%;padding-top:20px}.hero-headline h1{font-size:27px}.hero-ornament{font-size:20px}}
.hero-composition{min-height:400px;aspect-ratio:1.12}
.integrated-photo{left:0}
.integrated-photo img{object-position:12% 50%}
.hero-ornament .lotus-mark{width:30px}
@media(max-width:370px){.hero-composition{min-height:390px}.hero-headline{width:53%}.hero-headline h1{font-size:26px}}
/* Original poster's two tangential arcs and original 2:3 proportions. */
.hero-composition{aspect-ratio:2/3;min-height:0;max-width:480px;align-self:center;container-type:inline-size}
.integrated-photo img{object-position:43% 50%}
.hero-headline{position:absolute;top:13%;left:3%;width:58%;padding:0}
.hero-headline h1{font-size:9cqw;line-height:1.12;margin-bottom:5cqw;letter-spacing:-.02em}
.hero-ornament{width:80%;font-size:inherit;line-height:1}
.hero-ornament .lotus-mark{width:8cqw}
@media(max-width:370px){.hero-composition{min-height:0}.hero-headline{width:58%;padding:0}.hero-headline h1{font-size:9cqw}}
/* Set the room's mandala in the visible right-hand opening of the curve. */
.integrated-photo img{object-position:18% 50%;transform:translateY(12%) scale(1.02);transform-origin:center top}
/* Alternative: complete studio photograph with welcome words inside it. */
.photo-overlay{aspect-ratio:3/4;border-radius:5px;overflow:hidden}
.photo-overlay .hero-sweep{display:none}
.photo-overlay .integrated-photo{inset:0;border-radius:0}
.photo-overlay .integrated-photo img{object-position:18% 50%;transform:none}
.photo-overlay:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(to top,rgba(30,20,13,.9) 0%,rgba(30,20,13,.72) 30%,rgba(30,20,13,.1) 67%,rgba(30,20,13,0) 100%)}
.photo-overlay .hero-headline{top:auto;bottom:8%;left:8%;width:84%;padding:0}
.photo-overlay .hero-headline h1{font-size:9.5cqw;line-height:1.12;letter-spacing:-.015em;color:#fff7e9;text-shadow:0 1px 5px rgba(0,0,0,.15);margin-bottom:0}
.photo-overlay .hero-ornament{display:none}
/* Soft arched photograph, with the welcome text kept inside the image. */
.photo-overlay{border-radius:240px 240px 5px 5px}
/* Balance the room's lotus on the arch's centerline, with centered copy below. */
.photo-overlay .integrated-photo img{object-position:54% 50%}
.photo-overlay .hero-headline{left:8%;width:84%;bottom:8%;text-align:center}
.photo-overlay .hero-headline h1{font-size:9cqw;line-height:1.16;text-wrap:balance}
.photo-overlay:after{background:linear-gradient(to top,rgba(30,20,13,.88) 0%,rgba(30,20,13,.66) 29%,rgba(30,20,13,.05) 64%,rgba(30,20,13,0) 100%)}
.photo-overlay .integrated-photo img{object-position:51% 50%}
/* Home opens on the complete arched photograph, even with phone browser chrome. */
.homepage .site-header{gap:10px;padding-top:14px;padding-bottom:7px}
.homepage .brand{gap:5px}
.homepage .brand>.lotus-mark{width:30px}
.homepage .brand small{margin-top:7px}
.homepage .home-hero{padding-top:12px}
.homepage .photo-overlay{width:min(100%,480px,max(180px,calc(75svh - 195px)))}
/* A soft linen beige brings the page closer to the studio's warm palette. */
:root{--cream:#dfcbb1;--paper:#f8f2e8;--line:#d4c3ae}
/* About opens with Jennie's portrait in place of its former upper booking bar. */
.aboutpage .site-header{gap:10px;padding-top:14px;padding-bottom:7px}
.aboutpage .brand{gap:5px}
.aboutpage .brand>.lotus-mark{width:30px}
.aboutpage .brand small{margin-top:7px}
.aboutpage .about-layout{padding-top:20px;gap:28px}
.aboutpage .about-photo{order:0;max-width:280px}
.aboutpage .about-layout .prose{order:1}
.aboutpage .prose .photo-signature{text-align:left;margin-top:12px}
.aboutpage .prose .about-heading{font-family:Lato,system-ui,sans-serif;font-size:10px;font-weight:400;line-height:1.6;letter-spacing:.17em;text-transform:uppercase;margin-bottom:18px;color:var(--terra)}
/* The original receiving-bodywork photograph introduces What to Expect. */
.expectpage .site-header{gap:10px;padding-top:14px;padding-bottom:7px}
.expectpage .brand{gap:5px}
.expectpage .brand>.lotus-mark{width:30px}
.expectpage .brand small{margin-top:7px}
.receiving-photo{padding-top:20px}
.receiving-photo img{width:100%;max-width:480px;height:auto;margin-inline:auto;border-radius:5px}
.expectpage .expect-heading{padding-top:28px}

/* Quiet warm background lets the framed name lead. */
body{background-image:url("flower-background-faint.svg");background-repeat:no-repeat;background-size:clamp(240px,42vw,380px) auto;background-position:calc(50% - 260px) 1200px}
/* Light cream reading panels and restrained clay accents. */
.integrated-description,.about-layout .prose,.expect-layout>.prose{
 background:rgba(250,244,232,.91);
 border:1px solid rgba(133,71,41,.16);
 border-top:3px solid rgba(133,71,41,.50);
 border-radius:24px 24px 7px 7px;
 padding:clamp(22px,5vw,32px);
 box-shadow:0 8px 26px rgba(91,58,33,.045);
}
.integrated-description{margin-top:24px}
.session-summary{
 background:rgba(250,244,232,.82);
 border:1px solid rgba(133,71,41,.17);
 border-left:3px solid rgba(133,71,41,.5);
 border-radius:6px 24px 24px 6px;
 padding:24px;
}
.session-card{background:#f5e9d8;border-color:#c6a88c;border-top:3px solid #b77c5b}
.eyebrow,.text-link{color:#854729}
footer{background:#edddc7;border-top:2px solid rgba(133,71,41,.28)}

/* An open ornamental border frames the page, leaving the masthead free. */
body{position:relative;isolation:isolate}
body::before{
 content:"";position:absolute;z-index:-1;pointer-events:none;
 top:12px;bottom:12px;left:max(7px,calc(50% - 332px));right:max(7px,calc(50% - 332px));
 border:1px solid rgba(133,71,41,.38);border-radius:65px 65px 14px 14px;
 box-shadow:inset 0 0 0 5px #dfcbb1,inset 0 0 0 6px rgba(133,71,41,.13);
 background-image:none;
 background-repeat:no-repeat;background-size:76px auto,76px auto;
 background-position:12px 24px,calc(100% - 12px) calc(100% - 20px);
}
.site-header .brand>span{font-weight:600}
@media(max-width:370px){body::before{left:4px;right:4px;background-size:50px auto,50px auto;background-position:7px 32px,calc(100% - 7px) calc(100% - 16px)}}

/* A simple underline gives the name a little more emphasis. */
.brand-name{display:inline-block;padding-bottom:6px;border-bottom:2px solid var(--terra);}

/* Warm sand fades into cream, with a soft clay glow at the edges. */
body{
 background-color:#e5d2b9;
 background-image:url("flower-background-faint.svg"),radial-gradient(ellipse at 100% 12%,rgba(166,105,67,.14),transparent 52%),linear-gradient(180deg,#d6b894 0%,#e7d3b8 24%,#f2e7d6 56%,#e0c5a4 100%);
 background-repeat:no-repeat;
 background-size:clamp(240px,42vw,380px) auto,100% 100%,100% 100%;
 background-position:calc(50% - 260px) 1200px,center,center;
}

/* Curved hand-drawn divider with a centered lotus. */
.brand-name{padding-bottom:0;border-bottom:0}
.brand-flourish{display:block;width:clamp(220px,65vw,340px);height:auto;margin:3px auto 0;color:var(--terra)}
.site-header .brand small{margin-top:2px}

/* A quieter, deeper beige for a restful studio atmosphere. */
:root{--cream:#ceb89b;--paper:#f1e5d3}
body{
 background-color:#ceb89b;
 background-image:url("flower-background-faint.svg"),radial-gradient(ellipse at 100% 12%,rgba(133,84,53,.12),transparent 52%),linear-gradient(180deg,#c1a17e 0%,#d2b99a 28%,#e1d0b8 60%,#c9ac89 100%);
}
body::before{box-shadow:inset 0 0 0 5px #ceb89b,inset 0 0 0 6px rgba(133,71,41,.13)}
.integrated-description,.about-layout .prose,.expect-layout>.prose{background:rgba(241,229,211,.94)}
.session-summary{background:rgba(241,229,211,.88)}
.session-card{background:#e9d8bf}
footer{background:#ddc6a8}

/* Natural cream linen layered under the warm beige fade. */
body{
 background-color:#ceb89b;
 background-image:linear-gradient(180deg,rgba(193,161,126,.64) 0%,rgba(210,185,154,.48) 28%,rgba(225,208,184,.40) 60%,rgba(201,172,137,.60) 100%),url("cream-sheet-soft-folds.png");
 background-repeat:no-repeat,repeat;
 background-size:100% 100%,480px 480px;
 background-position:center,0 0;
}