/* Rose Moon Acupuncture website stylesheet (site-v9).
   Look: Belle's watercolor sky + midnight navy sections, gold accents.
   Fonts: Fraunces Bold (headings), Inter (body, Belle's choice Oct 24, 2026; was Atkinson Hyperlegible).
   Everything that sets the look lives in :root below. See CLAUDE.md in the main folder. */

:root {
  --night: #121b4f;      /* page background: midnight navy, clearly darker than her cobalt painting */
  --night-2: #182363;    /* alternate sections, a shade lighter */
  --deep: #0b1239;       /* footer, menu */
  --cream: #f6f0de;      /* main text */
  --mist: #c9d2ec;       /* secondary text */
  --gold: #e0bf68;       /* accent: her gold, a touch brighter for buttons */
  --gold-2: #b8954a;     /* darker gold for frames */
  --line: rgba(201, 210, 236, .22);
  --art: url(../assets/art/sky.jpg);   /* fallback for old browsers; WebP versions below */
  --art-ratio: 1.3686;   /* her painting: 6000 x 4384 original; sky.jpg is 2400 wide */
  --display: 'Fraunces', Georgia, serif;
  --body: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: dark;
}

@supports (background-image: image-set(url(x.webp) type("image/webp"))) {
  :root { --art: image-set(url(../assets/art/sky-2400.webp) type("image/webp"), url(../assets/art/sky.jpg) type("image/jpeg")); }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body { background: var(--night); color: var(--cream); font: 200 1.125rem/1.7 var(--body); /* Extra Light: Belle's choice, Oct 24 */ overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--gold); color: var(--deep); padding: .5rem 1rem; z-index: 50; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1200px, 100% - 3rem); margin-inline: auto; }
.narrow { max-width: 820px; }

.btn {
  display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap; text-decoration: none; border: 0; cursor: pointer;
  background: var(--gold); color: var(--deep);
  font: 700 1rem/1 var(--body); padding: 1.05rem 1.7rem; border-radius: 999px; min-height: 48px;
  transition: background-color .2s ease;
}
.btn:hover { background: var(--cream); }
/* Quieter outline button, so booking stays the main gold button */
.btn-outline { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 2px var(--gold); }
.btn-outline:hover { background: var(--gold); color: var(--deep); }
.btn:active { transform: translateY(1px); }
.btn .ext { width: .8em; height: .8em; flex: none; }
.text-link { display: inline-block; font-weight: 700; color: var(--gold); text-underline-offset: 6px; }
p a, dd a, li a, address a { color: var(--cream); text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 4px; }
p a:hover, dd a:hover, li a:hover, address a:hover { color: var(--gold); }

.section-title { font: 700 clamp(1.9rem, 3vw, 2.6rem)/1.15 var(--display); margin-bottom: 1.2rem; text-wrap: balance; }
.sub-title { font: 700 clamp(1.45rem, 2.1vw, 1.8rem)/1.25 var(--display); margin-bottom: .9rem; }
.lead { max-width: 60ch; font-size: clamp(1.2rem, 1.6vw, 1.35rem); line-height: 1.6; color: var(--cream); }

/* ---------- Header and menu ---------- */
.site-header { position: relative; z-index: 30; }
.site-header .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 2rem; min-height: 80px; padding-block: .5rem; }
.site-nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .6rem 1.6rem; margin-left: auto; font-weight: 700; font-size: 1.15rem; }
/* Menu words: Inter Light, 1.5x bigger (Belle, Oct 24). The Book now button keeps its own style. */
.site-nav a:not(.btn) { font-weight: 300; font-size: 1.725rem; }
.site-nav a { text-decoration: none; color: var(--cream); opacity: .9; text-shadow: 0 1px 10px rgba(10,16,60,.7); }
.site-nav a:hover, .site-nav a[aria-current] { opacity: 1; }
.site-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.site-nav .btn { opacity: 1; color: var(--deep); padding: .8rem 1.25rem; text-shadow: none; }
.btn-head { display: none; }
.menu-btn { display: none; align-items: center; gap: .6rem; background: rgba(17,27,90,.35); border: 1px solid rgba(246,240,222,.5); color: var(--cream);
  font: 700 1rem/1 var(--body); padding: .7rem 1rem; min-height: 44px; border-radius: 999px; cursor: pointer; }
.menu-btn .bars, .menu-btn .bars::before, .menu-btn .bars::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
.menu-btn .bars::before, .menu-btn .bars::after { content: ""; position: absolute; left: 0; }
.menu-btn .bars::before { top: -6px; } .menu-btn .bars::after { top: 6px; }

/* ---------- Heroes: her painted sky ---------- */
.hero, .page-hero { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--night); isolation: isolate; }
.hero { min-height: min(92svh, 940px); }
.page-hero { min-height: clamp(280px, 38svh, 400px); }
.hero::after, .page-hero::after { /* keeps the text readable over the painting */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(12,18,70,.5), transparent 20%),
    radial-gradient(120% 85% at 0% 100%, rgba(12,18,70,.9) 0%, rgba(12,18,70,.62) 40%, transparent 68%);
}
.hero-copy, .page-hero-copy { align-self: end; padding-bottom: clamp(3rem, 8vh, 5.5rem); }
.page-hero-copy { padding-bottom: clamp(2.4rem, 6vh, 4rem); }
.hero-copy .wrap > div { max-width: 660px; }
.hero-meta { margin-top: 2.4rem; padding-top: 1.1rem; border-top: 1px solid rgba(246,240,222,.28); max-width: 58ch; font-size: 1rem; color: var(--cream); opacity: .92; }
.hero h1 { font: 700 clamp(3rem, 6vw, 5.4rem)/1.02 var(--display); letter-spacing: -.015em; text-wrap: balance; }
.page-hero h1 { font: 700 clamp(2.5rem, 5vw, 4.2rem)/1.04 var(--display); letter-spacing: -.01em; max-width: 14ch; text-wrap: balance; }
.hero-lead { font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.5; max-width: 34ch; margin: 1.4rem 0 2.2rem; }
.page-hero .hero-lead { margin: 1.1rem 0 0; max-width: 46ch; }

/* Home hero: the painting is sized like "cover", inside a box that keeps its
   proportions, so the twinkling stars sit exactly on her painted stars. */
.sky { position: absolute; inset: 0; z-index: -2; overflow: hidden; container-type: size; }
.sky-box {
  --bw: max(100cqw, 100cqh * var(--art-ratio));
  --bh: max(100cqh, 100cqw / var(--art-ratio));
  position: absolute; width: var(--bw); height: var(--bh);
  left: calc((100cqw - var(--bw)) * var(--px, .5)); top: calc((100cqh - var(--bh)) * var(--py, .5));
}
.sky-box > img, .sky-box > picture > img { width: 100%; height: 100%; object-fit: cover; }
.sky-box > picture { display: contents; }
@supports not (width: 1cqw) { .sky-box { inset: 0; width: auto; height: auto; } .glint { display: none; } }
.sky-box > .twilight, .sky-box > .nightfall { position: absolute; inset: 0; pointer-events: none; }
.sky-box > .twilight { /* dusk colors, faded out as night falls */
  background: linear-gradient(to top, #f3b9a2 0%, #d9b0cf 26%, #a9b4ea 55%, #8ea6ee 100%);
  mix-blend-mode: screen; opacity: 0;
}
.sky-box > .nightfall { background: #0c1450; opacity: .22; }
.glint { position: absolute; left: var(--x); top: var(--y); width: var(--s, 4.5%); aspect-ratio: 1; transform: translate(-50%, -50%) scale(.3); opacity: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255,251,236,1) 0 6%, rgba(255,236,176,.55) 14%, rgba(255,236,176,0) 46%); }
.glint::before, .glint::after { content: ""; position: absolute; left: 50%; top: 50%; width: 100%; height: 2px; transform: translate(-50%, -50%);
  background: linear-gradient(90deg, transparent, rgba(255,249,228,.95) 50%, transparent); }
.glint::after { transform: translate(-50%, -50%) rotate(90deg); }

/* Arrival: twilight to night over 4 s, stars twinkle three times, all done within 5 s.
   The class "dusk" is only set when the visitor has not asked for reduced motion
   (and only on the first visit to the home page per browser session). */
.dusk .sky-box > .twilight { opacity: .62; }
.dusk .sky-box > .nightfall { opacity: 0; }
.dusk .sky.fall .twilight { opacity: 0; transition: opacity 4s cubic-bezier(.45,.05,.4,1); }
.dusk .sky.fall .nightfall { opacity: .22; transition: opacity 4s cubic-bezier(.45,.05,.4,1); }
.dusk .sky.fall .glint { animation: twinkle 1.4s ease-in-out var(--d, .5s) 3 both; }   /* slow; last one ends by ~4.95 s */
/* Safety net: if js/site.js never runs, still end at night (no fade, just settles after 6 s). */
.dusk .sky:not(.fall) .twilight { animation: settle-tw 0s 6s forwards; }
.dusk .sky:not(.fall) .nightfall { animation: settle-nf 0s 6s forwards; }
@keyframes settle-tw { to { opacity: 0; } }
@keyframes settle-nf { to { opacity: .22; } }
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .sky-box > *, .glint { transition: none !important; animation: none !important; }
  .dusk .sky-box > .twilight { opacity: 0; }
  .dusk .sky-box > .nightfall { opacity: .22; }
}

/* Inner page tops (Oct 24): her starry strip from topsection.psd. --tpos on each page picks which part
   shows on narrow screens (phones see about 40% of its width). */
.banner-art { position: absolute; inset: 0; z-index: -2; background: url(../assets/art/top-sky-2400.jpg) var(--tpos, 50% 50%) / cover no-repeat; }
/* Bands: a strip of her painting, zoomed in on one motif. On each band, --f = how far down
   the painting the strip runs through and --x = how far across (0 to 1, only matters when zoomed); centred at
   every screen width. data-motif names it: sun, moon, stars, circles, mandala. */
.band { --hb: clamp(72px, 7.5vw, 104px); --zoom: 1; --wi: calc(100vw * var(--zoom)); --hi: calc(var(--wi) / var(--art-ratio));
  height: var(--hb); background-image: var(--art); background-repeat: no-repeat; background-size: var(--wi) auto;
  background-position:
    clamp(calc(100vw - var(--wi)), calc(50vw - var(--x, .5) * var(--wi)), 0px)
    clamp(calc(var(--hb) - var(--hi)), calc(var(--hb) / 2 - var(--f, .5) * var(--hi)), 0px);
  box-shadow: inset 0 12px 18px -10px rgba(10,16,50,.6), inset 0 -12px 18px -10px rgba(10,16,50,.6); }   /* soft edges, as in v2 */

/* ---------- Sections ---------- */
.section { padding: clamp(4rem, 7vw, 6rem) 0; }
.section.alt { background: var(--night-2); }
.section.tight { padding: clamp(3rem, 5vw, 4rem) 0; }
.centered { text-align: center; }
.stacked > .section-title { margin-bottom: 1.4rem; }
.stacked > p { color: var(--mist); max-width: 64ch; }
.stacked > p + p { margin-top: 1.2rem; }
.stacked > .first { color: var(--cream); font-size: 1.2rem; }
.stacked .places-title { margin-top: 2.6rem; font-size: clamp(2rem, 3.4vw, 2.9rem); }
.split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.split-head .section-title { margin-bottom: 1rem; }
.split-head p { color: var(--mist); max-width: 40ch; }
.split-head p + p { margin-top: 1rem; }
.split-head .first { color: var(--cream); font-size: 1.15rem; }
.split-body > p { color: var(--mist); max-width: 62ch; }
.split-body > p + p { margin-top: 1.2rem; }
.split-body > .first { color: var(--cream); font-size: 1.2rem; }
/* Stacked: heading and paragraph on top, then the dropdowns underneath (home "Conditions", Belle Oct 24) */
.split.stacked { grid-template-columns: minmax(0, 52rem); gap: 2rem; }
.split.stacked .split-head p { max-width: 62ch; }
.intro { margin-bottom: clamp(3rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 6vw, 4.5rem); border-bottom: 1px solid var(--line); }
.centered .lead { margin-inline: auto; }

/* Pale section: the light cloud wash in her painting, once per page to break up the blue.
   It just swaps the color tokens, so everything inside follows. Remove class "light" to undo. */
.section.light { background: #e6eaf6; color: #16226b;
  --cream: #16226b; --mist: #3a4888; --gold: #7a5c17; --line: rgba(22,34,107,.18); color-scheme: light; }
.section.light .frame { border-color: rgba(122,92,23,.55); box-shadow: 0 18px 40px rgba(22,34,107,.18); }

/* Home: her numbers inside her drawn gold ring (her sun for "many ways"), like v1 */
.numbers .figures { max-width: 900px; margin: 2.8rem auto 0; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 2rem 1rem; }
.badge { position: relative; display: grid; place-items: center; width: 132px; height: 132px; margin: 0 auto; }
.badge img { position: absolute; inset: 0; width: 100%; height: 100%; }
.badge .num { position: relative; height: auto; display: block; font: 700 2rem/1 var(--display); color: var(--cream); }
.numbers .figures .label { max-width: 16ch; margin: .9rem auto 0; }
.numbers .lead { margin: 3.2rem auto 0; }
.badge .num-long { font-size: 1.45rem; letter-spacing: -.01em; }
.figures { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: 1.5rem; margin-top: 2.2rem; }
.figures li { display: grid; justify-items: center; align-content: start; }
.figures .label { display: block; margin-top: .6rem; font: 700 1.2rem/1.3 var(--display); max-width: 13ch; }

/* Home: reasons */
.reasons-row { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; margin-top: 3rem; }
.reasons-row img { width: 128px; height: 128px; margin: 0 auto 1rem; }
.reasons-row span { display: block; max-width: 18ch; margin-inline: auto; font: 700 clamp(1.3rem, 1.8vw, 1.5rem)/1.35 var(--display); }
.reasons { list-style: none; border-top: 1px solid var(--line); }
.reasons li { position: relative; padding: 1.15rem 0 1.15rem 1.6rem; border-bottom: 1px solid var(--line); font-size: 1.2rem; line-height: 1.5; }
.reasons li::before { content: ""; position: absolute; left: 0; top: 1.75rem; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); }

/* Dropdowns (conditions, FAQ) */
.accordion { border-top: 1px solid var(--line); }
details { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.2rem 0; min-height: 48px; font: 700 1.3rem/1.3 var(--display); }
summary::-webkit-details-marker { display: none; }
/* Dropdown marker: Belle's hand-drawn gold plus sign (assets/art/plus.png); turns a quarter to close. */
summary::after { content: ""; flex: none; width: 30px; height: 30px; background: url(../assets/art/plus.png) center / contain no-repeat;
  transition: transform .25s ease; }
details[open] summary::after { transform: rotate(45deg); }
summary:hover { color: var(--gold); }
details > div { padding: 0 0 1.8rem; }
details p { color: var(--mist); max-width: 62ch; }
details p + p { margin-top: 1rem; }
.faq summary { font-size: clamp(1.3rem, 1.9vw, 1.55rem); padding: 1.4rem 0; }
.cond-intro { color: var(--cream) !important; margin-bottom: .9rem; }
.cond-list { list-style: none; columns: 3 11rem; column-gap: 2rem; color: var(--mist); font-size: 1.05rem; }
.cond-list li { break-inside: avoid; position: relative; padding-left: 1.3rem; margin-bottom: .45rem; line-height: 1.45; }
.cond-list li::before, .towns li::before { content: ""; position: absolute; left: 0; top: .5em; width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); }
@media (prefers-reduced-motion: reduce) { summary::after { transition: none; } }

/* Meet Belle / portrait in the gold arch (Belle likes the arch, Oct 22 call) */
.meet { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.meet p { color: var(--mist); max-width: 50ch; font-size: 1.2rem; }
.meet .text-link { margin-top: 1.6rem; }
.portrait { max-width: 360px; justify-self: end; }
.portrait img { width: 100%; border-radius: 999px 999px 0 0; border: 6px solid var(--gold); }
.portrait figcaption, .frame-caption { margin-top: 1rem; font-size: .95rem; color: var(--mist); }

/* Framed pictures (gold frame; her hand-drawn gilded frames can replace this later) */
.with-art { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.with-art figure { max-width: 400px; }
.pic img { width: 100%; }
.quote { font: 700 clamp(1.4rem, 2.1vw, 1.8rem)/1.38 var(--display); max-width: 30ch; color: var(--cream); }
.with-art .rest { color: var(--mist); max-width: 56ch; margin-top: 1.6rem; }
.with-art .rest + .rest { margin-top: 1rem; }
.with-art .section-title + .quote { margin-top: .4rem; }

/* Services: prices */
.price-groups { display: grid; grid-template-columns: minmax(0, 46rem); gap: clamp(2rem, 5vw, 5rem); }
.price-group h2 { font: 700 clamp(1.6rem, 2.4vw, 2rem)/1.2 var(--display); margin-bottom: .4rem; }
.price-group .sub { color: var(--mist); margin-bottom: 1rem; }
.prices { list-style: none; border-top: 1px solid var(--line); margin-top: 1.2rem; }
.prices li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: .2rem 1.5rem; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.prices .name { font-size: 1.2rem; font-weight: 700; }
.prices .price { font: 700 clamp(1.9rem, 2.8vw, 2.4rem)/1 var(--display); color: var(--gold); }
.prices .detail { grid-column: 1 / -1; color: var(--mist); }
.note { position: relative; margin-top: 1.6rem; padding-left: 1.4rem; color: var(--mist); max-width: 64ch; }
.note::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; background: var(--gold); transform: rotate(45deg); }
.note + .note { margin-top: 1rem; }
.more { margin-top: 2rem; }

/* Services: service range, payment, cancellation */
.towns { list-style: none; columns: 3; column-gap: 2rem; font-size: 1.1rem; }
.towns li { break-inside: avoid; position: relative; padding-left: 1.3rem; margin-bottom: .55rem; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 3rem; margin-top: 3rem; padding-top: 2.4rem; border-top: 1px solid var(--line); }
.facts dt { font: 700 1.3rem/1.25 var(--display); margin-bottom: .5rem; }
.facts dd { color: var(--mist); }
address { font-style: normal; }

/* About: types of acupuncture */
.types { list-style: none; border-top: 1px solid var(--line); }
.types li { padding: 1.3rem 0; border-bottom: 1px solid var(--line); }
.types h3 { font: 700 1.3rem/1.25 var(--display); margin-bottom: .3rem; }
.types + .lead { margin-top: 2rem; font-size: 1.15rem; }
.types p { color: var(--mist); }

/* Groups */
.venues { list-style: none; display: grid; max-width: 860px; margin-top: 2.6rem; }
.venues li { display: grid; grid-template-columns: 76px 1fr; gap: 1.4rem; align-items: center; padding: 1.5rem 0; border-top: 1px solid var(--line); }
.venues img { width: 76px; height: 76px; }
.venues li:last-child { border-bottom: 1px solid var(--line); }
.venues h3 { font: 700 clamp(1.3rem, 2vw, 1.6rem)/1.3 var(--display); }
.venues h3 a { text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.venues h3 a:hover { color: var(--gold); }
.venues p { color: var(--mist); margin-top: .4rem; }

/* Scheduling (home, services, contact): centered, no box, like v1 */
.contact-block { text-align: center; }
.contact-block .moon-art { width: 180px; height: 180px; margin: 0 auto 1rem; }
.contact-block > p { color: var(--mist); max-width: 44ch; margin: 0 auto; font-size: 1.2rem; }
.contact-block .btn { margin-top: 2rem; }
.contact-block .or { margin-top: 2.2rem; font-size: 1.05rem; }
.contact-block .or + .contact-lines { margin-top: 1.2rem; }
.contact-lines { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem 3.5rem; margin-top: 2.4rem; }
.contact-lines a { font: 700 clamp(1.4rem, 2.6vw, 2rem)/1.2 var(--display); text-decoration: none; border-bottom: 2px solid var(--gold); padding-bottom: .35rem; overflow-wrap: anywhere; }
.contact-lines a:hover { color: var(--gold); }
.contact-block address { margin-top: 2.6rem; color: var(--mist); }
.contact-block address strong { display: block; font: 700 1.25rem/1.3 var(--display); color: var(--cream); margin-bottom: .3rem; }

/* Footer */
footer { background: var(--deep); padding: 3.5rem 0; font-size: .95rem; color: var(--mist); }
footer .wrap { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 2rem 3rem; }
footer .f-name { font: 700 1.4rem/1.2 var(--display); color: var(--cream); margin-bottom: .4rem; }
footer .f-about p + p, footer address { margin-top: .5rem; }
footer nav, footer .f-contact { display: grid; gap: .5rem; align-content: start; }
footer a { text-decoration: none; }
footer a:hover { color: var(--cream); text-decoration: underline; }
.credits { grid-column: 1 / -1; font-size: .85rem; opacity: .9; border-top: 1px solid var(--line); padding-top: 1.6rem; }

/* 404 */
.page-hero.lost { min-height: 72svh; }

/* ---------- Smaller screens ---------- */
@media (max-width: 1020px) {
  .menu-btn { display: inline-flex; }
  .btn-head { display: inline-flex; margin-left: auto; padding: .7rem 1.1rem; font-size: .95rem; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--deep); padding: .6rem 1.5rem 1.6rem; box-shadow: 0 20px 40px rgba(5,10,40,.5); }
  .site-nav.open { display: flex; }
  .site-nav a { padding: .9rem 0; font-size: 1.35rem; border-bottom: 1px solid var(--line); text-shadow: none; }
  .site-nav a[aria-current] { text-underline-offset: 6px; }
  .site-nav a:not(.btn) { font-size: 2.025rem; }
  .site-nav .btn { margin-top: 1.2rem; justify-content: center; border: 0; padding: 1rem; }
  .figures { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); row-gap: 2rem; }
  .numbers .figures { grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); row-gap: 2.4rem; max-width: 520px; }
  .with-art, .meet, .split, .booking, .price-groups { grid-template-columns: 1fr; gap: 2rem; }
  .split-head p { max-width: 60ch; }
  .portrait { justify-self: start; max-width: 340px; }
  .with-art figure { max-width: 380px; }
  .cond-list { columns: 3 11rem; }
  .towns { columns: 2; }
  .facts { grid-template-columns: 1fr 1fr; }
  footer .wrap { grid-template-columns: 1fr 1fr; }
  footer .f-about { grid-column: 1 / -1; }
  .sky-box { --px: .36; }   /* keep her moon in view on narrow screens */
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 2rem); }
  .site-header .wrap { min-height: 68px; }
  .badge { width: 112px; height: 112px; }
  .badge .num { font-size: 1.75rem; }
  .badge .num-long { font-size: 1.25rem; }
  .cond-list { columns: 1; }
  .venues li { grid-template-columns: 56px 1fr; gap: 1rem; }
  .venues img { width: 56px; height: 56px; }
  .reasons-row { grid-template-columns: 1fr; gap: 2.4rem; }
  .reasons-row img { width: 104px; height: 104px; margin-bottom: .6rem; }
  .towns { columns: 2; }
  .facts { grid-template-columns: 1fr; }
  .glint { --s: 7%; }
  .hero::after, .page-hero::after { background: linear-gradient(to bottom, rgba(12,18,70,.5), rgba(12,18,70,.2) 28%, rgba(12,18,70,.55) 55%, rgba(12,18,70,.9)); }
  footer .wrap { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .menu-btn .menu-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-btn { padding: .7rem .8rem; }
  .site-header .wrap { gap: .6rem; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 2.6rem; }
  .btn-head { padding: .6rem .85rem; font-size: .9rem; }
  .site-header .wrap { gap: .4rem; }
}


/* Home "About acupuncture": Belle's full-moon circle behind each number (her idea, Oct 24, 2026).
   Dark numbers sit on the white moon in the middle. The moon is small, so these circles are bigger. (A zoomed-in version was tried Oct 24; she preferred this.) */
.numbers .badge { width: 200px; height: 200px; }
.numbers .badge:not(.badge-moon) img { inset: 30px; width: 140px; height: 140px; }
.badge-moon .num { color: var(--night); font-size: 1.45rem; letter-spacing: -.02em; }
.badge-moon .num-3 { font-size: 1.15rem; }
@media (max-width: 760px) {
  .numbers .badge { width: 164px; height: 164px; }
  .numbers .badge:not(.badge-moon) img { inset: 26px; width: 112px; height: 112px; }
  .badge-moon .num { font-size: 1.2rem; }
  .badge-moon .num-3 { font-size: .95rem; }
}

/* ---------- Home page top (site-v9, Oct 24, 2026) ----------
   Belle's layout from rosemoonsample.psd: her sky, "Rose Moon Acupuncture" top left,
   a dark bar across the page with a lighter box (tagline) and her arch portrait on it.
   Sizes in vw follow the painting. Oct 25: her wider version (rosemoonsamplebase-rings.psd,
   8250 x 5031 px) fills the page width, so layout sizes are 7048/8250 of the first ones (text
   sizes kept), and the arch is centered between the box and the right edge. The arch keeps its place along the
   bar as a share of the width, so it slides left as the window narrows; the box gets
   narrower, so its text wraps and the box grows taller. */
.home { --art: image-set(url(../assets/art/home-sky-2400.webp) type("image/webp"), url(../assets/art/home-sky.jpg) type("image/jpeg")); --art-ratio: 1.4009; }
.home-hero { display: block; min-height: 0; padding-bottom: clamp(2.5rem, 6.4vw, 6rem); }
.home-hero::after { background: linear-gradient(to bottom, rgba(12,18,70,.45), transparent 22%); }
.home-hero .site-header .wrap { width: auto; padding-inline: max(1.5rem, 3.75vw); }   /* menu lines up with the title edges */
.home-sky { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.home-sky img { width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }

.hero .home-title { margin: clamp(.4rem, 1.2vw, 1rem) 0 0; padding-inline: max(1.5rem, 3.75vw);
  font: 700 clamp(1.6rem, 3.7vw, 4.4rem)/1.1 var(--display); text-transform: uppercase; letter-spacing: .01em;
  text-shadow: 0 2px 16px rgba(10,16,60,.55); position: relative; z-index: 2; }   /* above the arch shading */
.hero .home-title span { white-space: nowrap; }

.stage {
  --aw: min(253px, calc(54.85vw - 2rem));            /* width of the photo inside the arch: one size (Belle, Oct 25: 380px, then "a third smaller"); shrinks only if the window is too narrow */
  --bar: #140346;                                     /* the dark bar (her Rectangle 1) */
  --box: #222c8c;                                     /* the lighter box (her Rectangle 3) */
  display: grid; margin-top: clamp(2.5rem, 11.1vw, 12.8rem);
  grid-template-columns: max(1.5rem, 3.75%) minmax(0, 41.4%) minmax(1rem, 1fr) var(--aw) minmax(1rem, 1fr);   /* equal space each side of the arch */
  grid-template-rows: auto minmax(clamp(7.5rem, 14.1vw, 16.2rem), auto);
}
.stage::before { content: ""; grid-column: 1 / -1; grid-row: 2; background: var(--bar); }
.tagline-box { grid-column: 2; grid-row: 1 / 3; align-self: end; position: relative; z-index: 2;   /* above the arch shading */
  display: flex; align-items: center; min-height: clamp(8rem, 15.4vw, 18rem); margin-bottom: clamp(1.25rem, 3.9vw, 3.85rem);
  padding: clamp(1.1rem, 2.56vw, 2.56rem) clamp(1.1rem, 2.05vw, 2.2rem); background: var(--box);
  font: 300 clamp(1.3rem, 3.6vw, 3.5rem)/1.22 var(--body); color: var(--gold); text-wrap: balance; }
.arch { grid-column: 4; grid-row: 1 / 3; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); position: relative; z-index: 1; margin: 0; }
.arch-pic { align-self: end; position: relative; aspect-ratio: 1526 / 1895; }
/* The picture includes her soft shading, which reaches past the arch on every side. */
.arch-pic picture { position: absolute; left: -25.62%; top: calc(var(--aw) * -.232); width: 144.43%; pointer-events: none; }
.arch-pic img { width: 100%; height: auto; }
.arch figcaption { align-self: start; justify-self: center; width: max-content; max-width: 46vw; text-align: center;
  padding: clamp(.8rem, 2.2vw, 2.2rem) 0 1.2rem; color: var(--cream); position: relative; z-index: 2; }
/* Her name links to the About me page and turns gold on hover (Belle, Oct 24). About 2x the first size. */
.arch-link { display: grid; justify-items: center; gap: .15em; text-decoration: none; color: var(--cream); transition: color .2s ease; }
.arch-link:hover, .arch-link:focus-visible { color: var(--gold); }
.arch-name { font: 700 clamp(1.6rem, 4.4vw, 4.2rem)/1.05 var(--display); font-variant-caps: small-caps; text-wrap: balance; }
.arch-cred { font: 400 clamp(1.15rem, 3vw, 2.9rem)/1.2 var(--display); font-variant-caps: small-caps; }

@media (max-width: 700px) {
  .stage { --aw: 42vw; margin-top: clamp(2.5rem, 16vw, 5rem);
    grid-template-columns: 1rem minmax(0, 1fr) .75rem var(--aw) 1rem; }
  .tagline-box { font-size: 1.25rem; min-height: 0; padding: .9rem; margin-bottom: 1rem; }
  .hero .home-title { font-size: min(8.6vw, 2.6rem); }
}


/* Home: gold arrows at the bottom center of the screen, showing the page scrolls (Belle, Oct 24).
   They bob gently three times (under 5 s) and fade out once the visitor scrolls (site.js adds .gone). */
.scroll-cue { position: fixed; left: 50%; bottom: clamp(.75rem, 2.5vh, 1.6rem); z-index: 20; translate: -50% 0;
  display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; color: var(--gold);
  filter: drop-shadow(0 2px 6px rgba(10,16,60,.85)); transition: opacity .4s ease, visibility .4s; }
.scroll-cue svg { width: clamp(2.6rem, 3.6vw, 3.4rem); height: auto; animation: cue-bob 1.5s ease-in-out .6s 3; }
.scroll-cue:hover { color: var(--cream); }
.scroll-cue.gone { opacity: 0; visibility: hidden; }
@keyframes cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .scroll-cue svg { animation: none; } .scroll-cue { transition: none; } }

/* ---------- Home: shorter, wider sections (Belle, Oct 25, 2026) ----------
   "About acupuncture": the four circles spread across the full width and get a little bigger,
   the paragraph runs out toward the edges, less empty space above and below. The section is about
   two-thirds as tall as before. "Reasons to seek treatment": less space above the heading, between
   the heading and the three stars, and below the words. */
.numbers { padding: clamp(2.25rem, 3vw, 2.25rem) 0; }
.numbers .section-title { margin-bottom: 0; }
.numbers .figures { max-width: none; margin-top: 1.3rem; gap: 1.6rem .5rem; grid-template-columns: repeat(4, 1fr); }
.numbers .badge { width: 216px; height: 216px; }
.numbers .badge:not(.badge-moon) img { inset: 33px; width: 150px; height: 150px; }
.numbers .figures .label { max-width: 22ch; margin-top: .6rem; }
.numbers .lead { max-width: 1120px; margin-top: 1.4rem; text-align: left; text-wrap: pretty; }  /* block in the middle, lines start at the left, like Conditions (Belle, Oct 25) */
/* Labels under the circles: same size as the "Reasons to seek treatment" words (Belle, Oct 25). */
.numbers .figures .label { font-size: clamp(1.3rem, 1.8vw, 1.5rem); line-height: 1.35; text-wrap: balance; }
.reasons-sec { padding: clamp(2.5rem, 4vw, 3rem) 0; }
.reasons-sec .reasons-row { margin-top: 1.2rem; }
.reasons-sec .reasons-row img { margin-bottom: .6rem; }
@media (max-width: 1020px) {
  .numbers .figures { grid-template-columns: repeat(2, 1fr); max-width: 560px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .numbers .badge { width: 164px; height: 164px; }
  .numbers .badge:not(.badge-moon) img { inset: 26px; width: 112px; height: 112px; }
  .numbers .figures { gap: 1.4rem .6rem; }
  .reasons-sec .reasons-row { gap: 1.8rem; }
}

/* ---------- Home: "Conditions" and "My philosophy" tighter and wider (Belle, Oct 25, 2026) ----------
   Conditions: centered like the sections above; the two paragraphs run across the page so they
   take only a few lines; the dropdowns sit in the middle with their titles centered.
   My philosophy: the text runs wider so it takes fewer lines; less space above and below. */
.cond-sec, .philo-sec { padding: clamp(2.5rem, 4vw, 3rem) 0; }
.cond-sec .split.stacked { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; text-align: center; }
.cond-sec .split-head .section-title { margin-bottom: .8rem; }
.cond-sec .split.stacked .split-head p { max-width: 1120px; margin-inline: auto; text-align: left; text-wrap: pretty; }  /* block in the middle, lines start at the left (Belle, Oct 25) */
.cond-sec .split-head p + p { margin-top: .6rem; }
.cond-sec .accordion { width: 100%; max-width: 900px; margin-inline: auto; }
.cond-sec summary { justify-content: center; }
.cond-sec details > div { padding-bottom: 1.4rem; }
.cond-sec .cond-intro { max-width: none; }
.cond-sec .cond-list { text-align: left; }
.philo-sec .with-art { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
.philo-sec .quote, .philo-sec .rest { max-width: none; }
.philo-sec .rest { margin-top: 1.1rem; }
@media (max-width: 1020px) {
  .philo-sec .with-art { grid-template-columns: 1fr; gap: 1.6rem; }
}

/* ---------- Home: "Scheduling" shorter and wider (Belle, Oct 25, 2026) ----------
   Smaller moon, less space above and below. The booking button sits on its own line
   above the phone and email, like the Contact page (Belle, Oct 25, 2026). Also used on Services. */
.sched-sec { padding: clamp(2.5rem, 4vw, 3rem) 0; }
.sched-sec .moon-art { width: 120px; height: 120px; margin-bottom: .6rem; }
.sched-sec .section-title { margin-bottom: .6rem; }
.sched-sec .contact-block > p { max-width: none; }
.sched-sec .sched-row { display: flex; flex-direction: column; align-items: center; gap: 1.6rem; margin-top: 1.4rem; }
.sched-sec .sched-row .btn { margin-top: 0; }
.sched-sec .sched-row .contact-lines { margin-top: 0; }

/* ---------- Other pages: shorter and wider, like the home page (Belle, Oct 25, 2026) ----------
   Less space above and below each section. Headings centered; paragraphs sit as a block in the
   middle of the page with each line starting at the left. Pictures beside text get a little
   smaller so the text can run wider. */
.page-about .section, .page-services .section, .page-groups .section,
.page-faq .section, .page-contact .section { padding: clamp(2.5rem, 4vw, 3rem) 0; }
.page-about .stacked, .page-about .split-head, .page-services .price-group > h2,
.page-groups .stacked { text-align: center; }
.page-about .stacked > p, .page-about .types + .lead, .page-groups .stacked > .first {
  max-width: 1120px; margin-inline: auto; text-align: left; text-wrap: pretty; }
.page-about .stacked > .section-title { margin-bottom: 1rem; }
.page-about .stacked > p + p { margin-top: .9rem; }

/* About me: "Hi" text runs wider next to her photo */
.page-about .meet { grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: clamp(2rem, 4vw, 3.5rem); }
.page-about .meet p { max-width: none; }
.page-about .portrait { max-width: 320px; }
/* About me: "Why Rose Moon" like "My philosophy" on the home page */
.page-about .with-art { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
.page-about .with-art .rest { max-width: none; }
/* About me: "Types of acupuncture" heading on top, the four types side by side */
.page-about .split { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
.page-about .split-head .section-title { margin-bottom: 0; }
.page-about .types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 2rem; border-top: 0; }
.page-about .types li { padding: 1.1rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.page-about .types + .lead { margin-top: 1.4rem; }

/* Services: prices block in the middle, the two prices side by side */
.page-services .price-groups { grid-template-columns: minmax(0, 1120px); justify-content: center; }
.page-services .prices { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; margin-top: .8rem; }
.page-services .note { max-width: none; margin-top: 1.1rem; }
.page-services .note + .note { margin-top: .7rem; }
.page-services .more { margin-top: 1.4rem; text-align: center; }
.page-services .facts { margin-top: 1.8rem; padding-top: 1.6rem; }

/* Groups: intro and heading centered, the list in the middle */
.page-groups .stacked .places-title { margin-top: 1.6rem; margin-bottom: 0; }
.page-groups .venues { max-width: 1120px; margin: 1.4rem auto 0; text-align: left; }
.page-groups .venues li { padding: 1.1rem 0; }
.page-groups .stacked > .note { max-width: 1120px; margin-inline: auto; text-align: left; }

/* FAQ: a little wider, booking button centered */
.page-faq .narrow { max-width: 1000px; }
.page-faq .faq-book { margin-top: 2rem; text-align: center; }

/* Contact: smaller moon, less space */
.page-contact .moon-art { width: 120px; height: 120px; margin-bottom: .6rem; }
.page-contact .contact-block .section-title { margin-bottom: .4rem; }
.page-contact .contact-block .btn { margin-top: 1.2rem; }
.page-contact .contact-block .or { margin-top: 1.4rem; }
.page-contact .contact-block .or + .contact-lines { margin-top: .8rem; }
.page-contact .contact-block address { margin-top: 1.6rem; }

@media (max-width: 1020px) {
  .page-about .meet, .page-about .with-art { grid-template-columns: 1fr; gap: 1.6rem; }
  .page-about .types { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .page-about .types { grid-template-columns: 1fr; }
  .page-about .types li + li { border-top: 0; }
  .page-services .prices { grid-template-columns: 1fr; }
}

/* ---------- Adjustments after her review (Belle, Oct 25, 2026) ----------
   Services: more space around "Acupuncture appointments", prices one above the other again,
   in a narrower block in the middle so they stand out.
   About me: "My clinical experience" a little taller, paragraphs in a narrower block in the
   middle (lines start at the left). She may add designs at the sides later.
   Groups: back to its original height, everything centered. */
.page-services .section[aria-label="Prices"] { padding: clamp(3.5rem, 6vw, 5rem) 0; }
.page-services .price-groups { grid-template-columns: minmax(0, 820px); }
.page-services .prices { display: block; margin-top: 1.4rem; }
.page-services .price-group > h2 { margin-bottom: .6rem; }
.page-services .note { margin-top: 1.4rem; }
.page-services .note + .note { margin-top: .9rem; }
.page-services .more { margin-top: 2rem; }

.page-about .section[aria-labelledby="clinical"] { padding: clamp(3.5rem, 6vw, 5rem) 0; }
.page-about .section[aria-labelledby="clinical"] .stacked > p { max-width: 820px; }
.page-about .section[aria-labelledby="clinical"] .stacked > .section-title { margin-bottom: 1.4rem; }
.page-about .section[aria-labelledby="clinical"] .stacked > p + p { margin-top: 1.2rem; }

.page-groups .section { padding: clamp(4rem, 7vw, 6rem) 0; }
.page-groups .stacked > .first { max-width: 900px; text-align: center; text-wrap: balance; }
.page-groups .stacked .places-title { margin-top: 2.6rem; }
.page-groups .venues { max-width: 900px; margin-top: 2.6rem; }
.page-groups .venues li { padding: 1.5rem 0; }
.page-groups .stacked > .note { max-width: 900px; margin-top: 1.6rem; }

/* ---------- Starry strips: her parallax sky (Belle, Oct 25, 2026) ----------
   Every thin strip (.band) on every page now shows her starry sky from stars/parallaxscroling1.psd
   (exported with the placeholder boxes hidden, no color change). Same strip heights as before.
   --f still picks how far down the picture each strip looks; site.js adds --py while scrolling so
   the sky slides slower than the page. With reduced motion (or no JavaScript) it stays still.
   Page tops (.banner-art, .home-sky) are unchanged. */
.band { --art: url(../assets/art/strip-sky-2000.jpg); --art-ratio: 0.9516;   /* 6680 x 7020 */
  background-position:
    center
    clamp(calc(var(--hb) - var(--hi)), calc(var(--hb) / 2 - var(--f, .5) * var(--hi) + var(--py, 0px)), 0px); }
@media (max-width: 700px) { .band { --art: url(../assets/art/strip-sky-1200.jpg); } }
@media (min-width: 2001px) { .band { --art: url(../assets/art/strip-sky-3000.jpg); } }

/* ---------- Page tops: parallax too (Belle, Oct 25, 2026) ----------
   The big painting at the top of every page (home: .home-sky, other pages: .banner-art) slides
   down slower than the page as you scroll. site.js sets --hy on <html>; the picture moves inside its
   own frame (overflow hidden), so it never covers the content or the menu. Still with reduced motion. */
.home-sky img { transform: translate3d(0, var(--hy, 0px), 0); will-change: transform; }
.banner-art { overflow: hidden; background: none; }
.banner-art::before { content: ""; position: absolute; inset: 0;
  background: url(../assets/art/top-sky-2400.jpg) var(--tpos, 50% 50%) / cover no-repeat;
  transform: translate3d(0, var(--hy, 0px), 0); will-change: transform; }

/* ---------- Services: home-visits sentence moved into the first section (Belle, Oct 25, 2026) ---------- */
.page-services .price-group > .visits { color: var(--mist); font-size: clamp(1.1rem, 1.5vw, 1.25rem); line-height: 1.6;
  text-align: left; margin: 0 0 clamp(1.8rem, 3vw, 2.4rem); }

/* ---------- Page titles: gold line under the whole title (Belle, Oct 25, 2026) ----------
   Anchors the title on the inner pages' painted tops (most no longer have a line of text under them). */
.page-hero h1 { width: fit-content; }   /* so the line below is exactly as wide as the words (Oct 25, her request) */
.page-hero h1::after { content: ""; display: block; width: 100%; height: 2px;
  margin-top: clamp(.7rem, 1.2vw, 1rem); background: var(--gold); border-radius: 1px; }