/*
Theme Name: Body Afterglow
Description: Single-purpose brand theme; the original warm design, structured mobile-first.
Version: 1.10.0
*/

:root { --ink:#2b2622; --soft:#8a7f74; --line:#d8cfc4; --accent:#b45c4d; --bg:#faf6f1; --card:#ffffff; }
* { box-sizing: border-box; }
html { font-size: 18px; }
/* iOS Safari colours its toolbars by sampling the page's top edge, and the
   washed hero samples as a flat cream band under the photo. The sampler
   skips elements that carry a background-image, so an empty gradient on
   html opts out and the bars stay translucent. No colour on html/body. */
html { background: linear-gradient(transparent, transparent); }
body { background: transparent; }
body { font-family: Georgia, "Times New Roman", serif; color: var(--ink);
       margin: 0; line-height: 1.65; font-size: 1rem; }
/* Fixed viewport layer instead of background-attachment:fixed — iOS Safari
   sizes fixed body backgrounds against the document, not the viewport
   (giant blurry crop). This renders like Chrome everywhere.
   Blur ramps continuously with narrowing viewport (no breakpoint jump):
   0 at >=820px, ~2.75px at phone width. Negative inset hides blur fringe.
   Height follows the LARGE viewport (100lvh) so the layer still covers the
   page when iOS collapses its toolbars on scroll. */
body::before { content: ""; position: fixed; inset: -20px; z-index: -1;
       height: calc(100lvh + 40px);
       /* --hero = versioned image URL, inlined from functions.php. */
       background: linear-gradient(rgba(250,246,241,.80), rgba(250,246,241,.80)),
                   var(--bg) var(--hero) 50% 40% / cover no-repeat;
       filter: contrast(.88) saturate(1.22) blur(clamp(0px, (820px - 100vw) * 0.0037, 1.6px)); }
/* Desktop: the original morning rendering — unfiltered, definition intact.
   All softening (wash bump, contrast/saturation shaping, blur ramp) is
   mobile-only, where the near-native image scale made edges distracting. */
@media (min-width: 820px) {
  body::before { background: linear-gradient(rgba(250,246,241,.78), rgba(250,246,241,.78)),
                 var(--bg) var(--hero) 50% 40% / cover no-repeat;
                 filter: none; }
}
/* Under 820px IN PORTRAIT, cover == "auto 100%" and we can overgrow the
   height fluidly: the 40% focal point then crops the top of the carving
   (heads) progressively, matching the desktop framing where the backs and
   legs carry the image. Percent positioning can never open gaps. The
   orientation guard matters: a landscape phone is <820px wide but
   height-sizing there leaves the near-square image covering only a centre
   strip — landscape falls through to the base cover rule instead. */
@media (max-width: 819px) and (orientation: portrait) {
  body::before { background-size: auto calc(100% + clamp(0px, (820px - 100vw) * 0.8, 344px));
                 /* 52% parks the central figure's shoulder/arm line just under
                    the nav — the "shelf". Continuous at 820px: slack is 0 there,
                    so the position change cannot jump. */
                 background-position: 50% 75%; }
}
a { color: var(--accent); }

.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem;
               max-width: 940px; margin: 0 auto; padding: 1rem 1.1rem; }
.wordmark { font-size: 1.08rem; letter-spacing: .04em; color: var(--ink); text-decoration: none;
            white-space: nowrap; }
/* The home hero already says it; keep the slot so the menu stays put.
   It comes back while the phone menu is open. */
body.home .wordmark { visibility: hidden; }
.nav-toggle:checked ~ .site-header .wordmark { visibility: visible; }
.btn { display: inline-block; background: var(--accent); color: #fff !important; text-decoration: none;
       padding: .8rem 1.4rem; border-radius: 10px; }
.btn:active { opacity: .85; }

main { max-width: 940px; margin: 0 auto; padding: 0 1.1rem 3rem; }
main.narrow { max-width: 760px; }

main h1 { font-weight: normal; font-size: 1.7rem; margin: 1.6rem 0 .2rem; }
main h2 { font-weight: normal; font-size: 1.35rem; margin: 2.6rem 0 1.1rem;
          border-bottom: 1px solid var(--line); padding-bottom: .5rem; }

.cards { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem 1.3rem;
        display: block; text-decoration: none; color: inherit; }
a.card:hover, a.card:focus-visible { border-color: var(--accent); }
.card svg, .card img { display: block; width: 100%; height: auto; border-radius: 8px; margin: 0 0 .9rem; }
.card h3 { font-weight: normal; font-size: 1.2rem; margin: 0 0 .45rem; }
.card p { color: var(--soft); font-size: .97rem; margin: 0; }

.offer-hero { display: block; width: 100%; height: auto; border-radius: 12px; margin: 1.2rem 0 1.6rem; }
main p.lede { font-size: 1.18rem; }
main ul { padding-left: 1.2rem; }
main ul li { margin-bottom: .5rem; }
ol.steps { padding-left: 1.2rem; margin: 0; }
ol.steps li { margin-bottom: .8rem; }
.note { color: var(--soft); font-size: .95rem; }

.mini-cards { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin-top: 1.1rem; }
.meet-mark { display: flex; align-items: center; gap: 1.2rem; }
.meet-mark img, .meet-mark svg { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; flex: none; margin: 0; }
.meet-mark p { color: var(--soft); font-size: .97rem; margin: 0; }

.about-intro { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; margin: 1.6rem 0 .4rem; }
.about-portrait { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; flex: none; }
.about-intro .lede { flex: 1; min-width: 240px; margin: 0; }
/* Models page: photo beside its caption. `flip` puts the photo on the right and,
   when the row wraps, stacks it ABOVE the text (wrap-reverse reverses the line
   order, not the side-by-side one). Under ~568px the row can't hold
   260 photo + 1.6rem gap + 240 text, so the photo takes the full column
   rather than sitting at 260px with dead space beside it. */
.model-row { display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; margin: 2.2rem 0; }
.model-row.flip { flex-wrap: wrap-reverse; }
.model-row p { flex: 1; min-width: 240px; margin: 0; }
.model-row img { width: 260px; height: auto; border-radius: 12px; flex: none; }
@media (max-width: 568px) { .model-row img { width: 100%; } }
.photo-row { display: grid; grid-template-columns: 1fr; gap: 1.1rem; margin: 1.6rem 0; }
.photo-row figure { margin: 0; }
.photo-row img { display: block; width: 100%; height: auto; border-radius: 12px; }
.photo-row video.clip { display: block; width: 100%; height: auto; border-radius: 12px; }
.photo-row figcaption { color: var(--soft); font-size: .9rem; margin-top: .45rem; }
.photo-solo { margin: 1.6rem 0; }
.photo-solo img { display: block; width: 100%; height: auto; border-radius: 12px; }
.photo-solo figcaption { color: var(--soft); font-size: .9rem; margin-top: .45rem; text-align: center; }
.site-nav { display: flex; gap: .55rem 1.1rem; align-items: center; flex-wrap: wrap;
            justify-content: flex-end; min-width: 0; }
.site-nav a { color: var(--soft); text-decoration: none; font-size: .95rem; }
.site-nav a:hover, .site-nav a:focus-visible, .site-nav a.active { color: var(--accent); }
@media (min-width: 641px) { .site-nav { margin-right: 2.2rem; } }
/* Phones: the nav collapses behind a round menu button (same pattern as the
   studio portal); the checkbox before the header is the open/closed state. */
.nav-toggle { display: none; }
.burger { display: none; }
@media (max-width: 640px) {
  main h1 { margin-top: .5rem; line-height: 1.3; }
  .burger { display: flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem;
            border-radius: 50%; background: rgba(43,38,34,.07); color: var(--ink); cursor: pointer; }
  .burger .bars { display: block; width: 1.1rem; height: 2px; background: currentColor; border-radius: 1px;
                  position: relative; }
  .burger .bars::before, .burger .bars::after { content: ""; position: absolute; left: 0; width: 100%; height: 2px;
                                                background: currentColor; border-radius: 1px; }
  .burger .bars::before { top: -5px; }
  .burger .bars::after { top: 5px; }
  .nav-toggle:checked ~ .site-header .burger { background: var(--accent); color: #fff; }
  .site-nav { display: none; flex-direction: column; align-items: stretch; gap: 0; flex-basis: 100%; }
  .site-nav a { font-size: 1.08rem; padding: .9rem .6rem; border-bottom: 1px solid var(--line); }
  .site-nav a:last-child { border-bottom: 0; }
  .site-nav a.active { border-left: 4px solid var(--accent); padding-left: .8rem; }
  .nav-toggle:checked ~ .site-header .site-nav { display: flex; }
}

table.rates { width: 100%; border-collapse: collapse; margin: 0 0 .7rem; }
.rates th { font-weight: normal; color: var(--soft); font-size: .92rem; text-align: left;
            border-bottom: 1px solid var(--line); padding: 0 0 .5rem; }
.rates td { border-bottom: 1px solid var(--line); padding: .6rem 0; }
.rates th:last-child, .rates td:last-child { text-align: right; white-space: nowrap; padding-left: 1rem; }

/* Comparison table (tantra bodywork vs licensed massage). One solid card so
   it reads as a single object over the hero texture; section bands are tinted
   and flush to the edges rather than floating white bars. */
table.compare { width: 100%; border-collapse: separate; border-spacing: 0;
                margin: 1.6rem 0 .7rem; background: #fffdf9;
                border: 1px solid var(--line); border-radius: 14px;
                overflow: hidden; box-shadow: 0 1px 4px rgba(43,38,34,.07);
                font-size: .95rem; }
.compare thead th { background: #f6efe6; color: var(--soft); font-weight: 600;
                    font-size: .68rem; letter-spacing: .07em; line-height: 1.3;
                    text-transform: uppercase; text-align: center;
                    padding: .75rem .45rem; border-bottom: 1px solid var(--line); }
.compare thead th:first-child { text-align: left; padding-left: .9rem; }
.compare td { padding: .8rem .45rem; border-bottom: 1px solid #f0e8dd;
              vertical-align: middle; }
.compare td:first-child { padding-left: .9rem; }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td.mark { text-align: center; width: 4.1rem; font-size: 1.05rem;
                   font-weight: 600; }
.compare .yes { color: #6f8259; }
.compare .no  { color: #b45c4d; }
.compare .may { color: #b9ada0; }
/* Section bands: tinted, edge to edge, no rounded gap. */
.compare tr.group td { background: #ece0d1; color: #7d5340; font-weight: 600;
                       font-size: .68rem; letter-spacing: .09em;
                       text-transform: uppercase; padding: .5rem .9rem;
                       border-top: 1px solid var(--line);
                       border-bottom: 1px solid var(--line); }
.compare tbody tr.group:first-child td { border-top: 0; }
.compare-key { color: var(--soft); font-size: .86rem; margin: 0 0 1.7rem;
               line-height: 1.9; }
.compare-key span { white-space: nowrap; margin-right: 1.1rem; }
.pull { border-left: 3px solid var(--accent); margin: 1.9rem 0;
        padding: .25rem 0 .25rem 1.15rem; font-size: 1.14rem; line-height: 1.5; }
@media (min-width: 720px) {
  table.compare { font-size: 1rem; }
  .compare td.mark { width: 7rem; }
  .compare thead th { font-size: .72rem; }
}

.site-footer { border-top: 1px solid var(--line); color: var(--soft); font-size: .85rem;
               max-width: 940px; margin: 2rem auto 0; padding: 1.3rem 1.1rem 2.4rem; text-align: center; }
.footer-qr { display: block; width: 253px; height: 253px; margin: 0 auto .9rem;
             background: var(--bg); padding: 8px; border-radius: 10px; border: 1px solid var(--line); }
@media (min-width: 720px) { .footer-qr { width: 190px; height: 190px; } }
.footer-code { margin: -.4rem 0 .7rem; font-size: 1.05rem; letter-spacing: .08em; color: var(--soft); }
.footer-code:empty { display: none; }
.footer-contact { margin: 0 0 .7rem; font-size: .95rem; color: var(--ink); }
.footer-contact a { color: var(--accent); text-decoration: none; }
.footer-contact .ph { white-space: nowrap; }
.footer-contact a:hover, .footer-contact a:focus-visible { text-decoration: underline; }
.footer-contact button { font: inherit; color: var(--accent); background: none; border: 1px solid var(--accent);
  border-radius: 8px; padding: .3rem .8rem; cursor: pointer; }
.site-footer a { color: var(--soft); }

@media (min-width: 720px) {
  html { font-size: 20px; }
  .site-header { padding: 1.4rem 1.5rem; }
  .wordmark { font-size: 1.15rem; }
  main { padding: 0 1.5rem 3rem; }
  main h2 { font-size: 1.5rem; margin: 3rem 0 1.2rem; }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .photo-row { grid-template-columns: 1fr 1fr; }
}

/* Tantra hub: mutually exclusive sliding accordion. Card-style headers bind
   into one group when closed; the open essay expands between them on the page
   background, pushing the headers below it down. */
.accordion { margin: 1.6rem 0; }
.acc-head { display: flex; align-items: center; gap: 1.1rem; width: 100%; padding: 1.1rem 1.2rem;
            background: var(--card); border: 1px solid var(--line); cursor: pointer; text-align: left;
            font: inherit; color: var(--ink); border-radius: 0; transition: border-radius .45s ease; }
.acc-item:first-child .acc-head { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.acc-item:last-child .acc-head { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.acc-item + .acc-item .acc-head { border-top: 0; }
.acc-item.open .acc-head { border-radius: 12px; border-top: 1px solid var(--line); }
.acc-item.open + .acc-item .acc-head { border-top: 1px solid var(--line);
            border-top-left-radius: 12px; border-top-right-radius: 12px; }
.acc-head:hover .acc-t strong, .acc-head:focus-visible .acc-t strong { color: var(--accent); }
.acc-head .glyph { width: 96px; height: 96px; border-radius: 50%; flex: none; }
.acc-t strong { display: block; font-weight: normal; font-size: 1.2rem; }
.acc-t small { color: var(--soft); font-size: .95rem; }
.acc-chev { margin-left: auto; flex: none; color: var(--soft); transition: transform .45s ease; }
.acc-item.open .acc-chev { transform: rotate(180deg); }
/* Height is driven by JS (measured px) — Safari won't animate 0fr->1fr grid rows. */
.acc-panel { height: 0; overflow: hidden; transition: height .45s ease; }
.acc-body { padding: 1.5rem .2rem 2.2rem; }
.acc-body h2 { font-size: 1.3rem; margin: 1.5rem 0 .7rem; }
@media (prefers-reduced-motion: reduce) { .acc-panel, .acc-chev, .acc-head { transition: none; } }