/* Ciao Bella Glow Lounge: production stylesheet (Sage Renewal direction).
   Revision 3, 2026-07-30. Replaces the Lavender Bloom palette.

   Changes in this revision:
     1. Palette moved to sage green / warm cream / antique gold (client's IG).
     2. Type scale raised across the board. Body is now 18px at weight 400.
        Jost 300 (light) is no longer used anywhere: it was the main
        readability complaint and light weights render thinner still on Apple.
     3. Pinyon Script replaced by Cormorant Garamond italic. Same elegance,
        far more legible at small sizes.
     4. Services became an accordion. New .svc-acc block below.
     5. New .specials block, replacing the old .promo banner.

   Revision 5, 2026-07-31:
     - Header wordmark is now a two-line lockup, "Ciao Bella" over
       "GLOW LOUNGE". The client was being mistaken for another Sacramento
       business trading as "Ciao Bella".
     - Service detail pages: the photo is no longer a sticky half-viewport
       panel. It is a banner at the top of a single reading column and the
       page scrolls normally. Rules for .svc-page* were previously only in
       the live stylesheet and absent from this file; they are here now, so
       this file is safe to ship as a full replacement.

   Revision 4, 2026-07-31: heading face changed, hero photo removed.
     - Italiana is GONE. It is a single-weight hairline display face, so no
       size increase could ever make it read. That, not a platform rendering
       quirk, was the real cause of the "headings are too thin" complaint on
       both iOS and Android. Replaced with Playfair Display 500/600: real
       weights, even stroke coverage on every letter.
     - Hero photo and the "$40 services from" badge removed. The page now runs
       hero copy, stats, then straight into the specials card.
     - jost-300.woff2 AND italiana-400.woff2 are both unused after this
       revision and can be deleted from /fonts/.

   Revision 3a, after reconciling against design guide v5:
     - --gold darkened from #8A6A3B (4.43:1, FAILED AA) to #7E6034 (5.16:1).
     - Smallest text raised to 14px; kickers and UI labels to 15px.
     - (Superseded by revision 4: Italiana removed entirely.)
     - Image paths assume /pics/, the fleet-standard folder. The live site
       still serves /images/. See SAGE-RENEWAL-CHANGES.md section 6.

   Fonts self-hosted in /fonts/. NEW FILE NEEDED this revision:
     cormorant-garamond-400-italic.woff2  and  cormorant-garamond-500-italic.woff2
   jost-300.woff2 is now unused and can be deleted after this ships. */

@font-face { font-family: 'Jost'; font-weight: 400; font-display: swap; src: url('/fonts/jost-400.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 500; font-display: swap; src: url('/fonts/jost-500.woff2') format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 600; font-display: swap; src: url('/fonts/jost-600.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-weight: 500; font-display: swap; src: url('/fonts/playfair-display-500.woff2') format('woff2'); }
@font-face { font-family: 'Playfair Display'; font-weight: 600; font-display: swap; src: url('/fonts/playfair-display-600.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/cormorant-garamond-400-italic.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('/fonts/cormorant-garamond-500-italic.woff2') format('woff2'); }

:root {
  --bg: #F5F1E8;          /* warm cream */
  --bg-alt: #EBE5D7;
  --card: #FBFAF6;
  --line: #DDD5C4;
  --line-soft: #E2DBCB;
  --ink: #22322A;         /* deep forest. 13:1 on --bg */
  --ink-soft: #4C5B50;    /* 6.38:1 on --bg */
  --accent: #37533F;      /* forest green. 8.5:1 on white */
  --accent-deep: #24382B;
  --gold: #7E6034;        /* small label text. 5.16:1 on --bg, passes AA */
  --gold-bright: #C4A870; /* large text and dark backgrounds only. 5.48:1 on --accent-deep */
  --contact-grad: linear-gradient(160deg, #37533F, #22322A);
  --shadow: 0 12px 30px rgba(36, 56, 43, .10);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* Body is 18px / 400. Nothing on this site goes below 16px. */
body {
  font-family: 'Jost', 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: var(--accent); }
a:hover { color: var(--accent-deep); }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; }

.script { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; color: var(--accent); }
.kicker { font-size: 15px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }
.wrap { max-width: 1100px; margin: 0 auto; }
section { padding: 84px 6vw; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.section-head h2 { font-size: clamp(34px, 4.4vw, 48px); line-height: 1.1; }
.section-head p { margin-top: 18px; font-size: 19px; line-height: 1.7; color: var(--ink-soft); text-wrap: pretty; }

.btn { display: inline-block; font-size: 16px; letter-spacing: .08em; text-transform: uppercase; padding: 17px 34px; border-radius: 40px; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 10px 26px rgba(36, 56, 43, .26); }
.btn-primary:hover { background: var(--accent-deep); color: #fff; }
.btn-ghost { background: #fff; color: var(--accent); border: 1px solid #C9BFA8; }
.btn-gold { background: var(--gold-bright); color: var(--accent-deep); font-weight: 500; }
.btn-gold:hover { background: #B3945B; color: var(--accent-deep); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Standalone text links collapse to their line box (26-30px) without this.
   Buttons and service option chips carry their own min-height already. */
.contact-lines a, .svc-more, .footer a { display: inline-flex; align-items: center; min-height: 44px; }

/* Nav */
.nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 18px 6vw; background: rgba(245, 241, 232, .9); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
/* Wordmark is a two-line lockup, not the words "Ciao Bella" alone: another
   Sacramento business trades under that name and the client was being
   confused with it. Same lockup on the booking host. */
.nav-logo { display: flex; flex-direction: column; gap: 3px; line-height: 1; text-decoration: none; }
.wm-script { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; font-size: 30px; line-height: 1.05; color: var(--accent); }
.wm-sub { font-family: 'Jost', sans-serif; font-weight: 400; font-size: 14px; letter-spacing: .26em; color: var(--gold); }
.nav-links { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }
.nav-links a { font-size: 18px; letter-spacing: .02em; color: var(--ink-soft); }
.nav-links .btn { font-size: 16px; padding: 14px 26px; color: #fff; }
@media (max-width: 860px) { .nav-links a:not(.btn) { display: none; } }

/* Hero */
/* Hero is text only. The photo and the "$40 services from" badge were removed
   2026-07-31 at the client's request: the page now runs hero copy, stats, then
   straight into the specials card, which carries the first image. */
.hero { padding: 88px 6vw 84px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero h1 { font-size: clamp(44px, 6vw, 68px); line-height: 1.1; max-width: 15ch; }
.hero h1 .script { font-size: 1.08em; }
.hero-sub { margin-top: 28px; max-width: 52ch; font-size: 21px; line-height: 1.7; color: var(--ink-soft); text-wrap: pretty; }
.hero-ctas { display: flex; gap: 16px; margin-top: 38px; flex-wrap: wrap; justify-content: center; }
.hero-stats { display: flex; gap: 56px; margin-top: 56px; flex-wrap: wrap; justify-content: center; }
.hero-stats .num { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 38px; color: var(--accent); }
.hero-stats .lbl { font-size: 15px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
@media (max-width: 900px) {
  .hero { padding-top: 56px; }
  .hero-stats { gap: 32px; margin-top: 44px; }
}
@media (max-width: 860px) {
  /* Logo plus button intrinsically totalled 326px against 316.8px of content
     box at 360px, so the sticky nav wrapped to 145px, 22% of the viewport.
     Trimmed to roughly 273px so there is real headroom. */
  .nav { gap: 12px; }
  .wm-script { font-size: 26px; }
  .wm-sub { font-size: 13px; letter-spacing: .20em; }
  .nav-links .btn { font-size: 15px; padding: 12px 20px; }
}

/* Specials: Directus-managed, sits immediately before Services.
   Renders nothing when the collection has no active entry. */
.specials { padding: 0 6vw 76px; }
.specials:not(:has(.specials-card)) { display: none; }
.specials-card { max-width: 1100px; margin: 0 auto; background: var(--accent-deep); border-radius: 26px; overflow: hidden; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); box-shadow: 0 24px 50px rgba(36, 56, 43, .22); }
.specials-photo { min-height: 320px; background: #3F5A47; }
.specials-photo img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.specials-body { padding: 44px; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.specials-kicker { font-size: 15px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-bright); }
.specials-body h2 { font-size: clamp(32px, 3.6vw, 42px); line-height: 1.12; color: var(--bg); }
.specials-price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.specials-price .now { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 42px; color: var(--gold-bright); }
.specials-price .was { font-size: 17px; color: #A8B7AC; text-decoration: line-through; }
.specials-body p { font-size: 18px; line-height: 1.7; color: #D3DCD5; text-wrap: pretty; }
.specials-body .btn { margin-top: 8px; }

/* Services: accordion. Same interaction model as the FAQ. */
.services { background: #fff; }
.svc-acc { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.svc-acc details { background: var(--card); border: 1px solid var(--line-soft); border-radius: 18px; overflow: hidden; }
.svc-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; cursor: pointer; list-style: none; padding: 24px 28px; }
.svc-acc summary::-webkit-details-marker { display: none; }
.svc-acc summary:hover { background: #F7F4EC; }
.svc-name { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 28px; line-height: 1.25; color: var(--ink); }
.svc-meta { display: flex; align-items: center; gap: 18px; }
.svc-from { font-size: 18px; color: var(--ink-soft); white-space: nowrap; }
.svc-sign { font-size: 26px; line-height: 1; color: var(--gold); }
.svc-acc details[open] .svc-sign { transform: rotate(45deg); }
.svc-panel { padding: 0 28px 30px; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; align-items: start; }
.svc-photo { border-radius: 14px; overflow: hidden; background: var(--bg-alt); aspect-ratio: 4 / 3; }
.svc-photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-copy { display: flex; flex-direction: column; gap: 20px; }
.svc-copy p { font-size: 18px; line-height: 1.7; color: var(--ink-soft); text-wrap: pretty; }
.svc-opt-label { font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.svc-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.svc-opts a { display: inline-flex; align-items: baseline; gap: 10px; padding: 13px 22px; min-height: 48px; border-radius: 40px; border: 1px solid #C9BFA8; background: #fff; color: var(--ink); font-size: 17px; }
.svc-opts a:hover { border-color: var(--accent); background: var(--bg); color: var(--ink); }
.svc-opts a .p { color: var(--accent); font-weight: 500; }
.svc-more { align-self: flex-start; font-size: 17px; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 640px) {
  /* Service names come from Directus, so the row wraps rather than assuming
     they are short. "Facial Microdermabrasion" is one unbreakable 17-character
     word and clips against the rigid price/sign group otherwise. */
  .svc-acc summary { padding: 20px; flex-wrap: wrap; row-gap: 6px; }
  .svc-name { font-size: 24px; flex: 1 1 100%; min-width: 0; }
  .svc-panel { padding: 0 20px 26px; }
  .svc-opts a { flex: 1 1 100%; justify-content: space-between; }
  .specials-body { padding: 32px 24px 34px; }
}

/* Results: before & after */
.results { background: var(--bg); }
.ba-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; max-width: 1100px; margin: 0 auto; }
.ba-card { border-radius: 20px; overflow: hidden; border: 1px solid var(--line-soft); background: #fff; }
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; height: 240px; }
.ba-half { position: relative; }
.ba-half img, .ba-single img { width: 100%; height: 100%; object-fit: cover; }
.ba-single { height: 240px; }
.ba-tag { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 11px; border-radius: 20px; }
.ba-tag.before { background: rgba(34, 50, 42, .78); color: #fff; }
.ba-tag.after { background: rgba(255, 255, 255, .92); color: var(--accent); }
.ba-card figcaption { padding: 16px 20px; font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-size: 21px; }

/* Gallery */
.gal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; max-width: 1100px; margin: 0 auto; }
.gal-grid figure { border-radius: 16px; overflow: hidden; aspect-ratio: 1; }
.gal-grid img { width: 100%; height: 100%; object-fit: cover; }

/* About */
.about { background: var(--bg); }
.about-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 56px; align-items: center; }
.about-photo { border-radius: 24px; overflow: hidden; box-shadow: 0 24px 50px rgba(36, 56, 43, .24); aspect-ratio: 4 / 5; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; }
.about h2 { font-size: clamp(34px, 4.2vw, 44px); line-height: 1.12; }
.about h2 .script { font-size: 1.1em; }
.about-bio { margin-top: 22px; font-size: 19px; line-height: 1.8; color: var(--ink-soft); text-wrap: pretty; }
.chips { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.chips span { font-size: 16px; padding: 11px 20px; border-radius: 40px; background: var(--bg-alt); color: var(--accent); }

/* Reviews */
.reviews { background: var(--bg-alt); }
.rev-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 26px; max-width: 1100px; margin: 0 auto; }
.rev { background: #fff; border-radius: 20px; padding: 30px; box-shadow: var(--shadow); }
.rev .stars { color: var(--gold-bright); font-size: 20px; letter-spacing: 3px; }
.rev p { margin-top: 16px; font-size: 18px; line-height: 1.7; }
.rev .who { margin-top: 20px; font-size: 16px; font-weight: 500; color: var(--accent); }

/* Instagram banner */
.insta { background: #fff; padding-top: 0; }
.insta-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; border-top: 1px solid var(--line-soft); padding-top: 56px; }
.insta h2 { font-size: clamp(28px, 3vw, 40px); }

.insta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; max-width: 1100px; margin: 32px auto 0; }
.insta-grid a { border-radius: 16px; overflow: hidden; aspect-ratio: 1; display: block; }
.insta-grid img { width: 100%; height: 100%; object-fit: cover; }

/* FAQ */
.faq-wrap { max-width: 800px; margin: 0 auto; }
.faq-wrap details { background: var(--card); border: 1px solid var(--line-soft); border-radius: 16px; padding: 22px 28px; margin-bottom: 14px; }
.faq-wrap summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; cursor: pointer; font-size: 20px; list-style: none; }
.faq-wrap summary::-webkit-details-marker { display: none; }
.faq-wrap summary span { color: var(--gold); font-size: 24px; line-height: 1; }
.faq-wrap details[open] summary span { transform: rotate(45deg); }
.faq-wrap details p { margin-top: 16px; font-size: 18px; line-height: 1.7; color: var(--ink-soft); text-wrap: pretty; }

/* Contact */
.contact { background: var(--contact-grad); color: #fff; }
.contact a { color: #fff; }
.contact-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 52px; align-items: center; }
.contact .script { color: var(--gold-bright); font-size: 44px; line-height: 1.1; }
.contact h2 { font-size: clamp(34px, 4vw, 44px); margin-top: 10px; line-height: 1.12; }
.contact-sub { margin-top: 18px; font-size: 19px; color: #D3DCD5; max-width: 440px; text-wrap: pretty; }
.contact-lines { margin-top: 30px; display: flex; flex-direction: column; gap: 10px; font-size: 18px; }
.contact .btn { margin-top: 30px; background: var(--gold-bright); color: var(--accent-deep); font-weight: 500; }
.map-card { border-radius: 24px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .2); }
.map-card img { width: 100%; height: 300px; object-fit: cover; }
.map-fallback { height: 300px; background: linear-gradient(135deg, #3F5A47, #22322A); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #D3DCD5; font-size: 17px; text-align: center; padding: 20px; }
.contact-meta { margin-top: 22px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; font-size: 17px; color: #D3DCD5; }
.contact-meta strong { display: block; color: #fff; font-weight: 500; margin-bottom: 6px; }
.contact-meta .hours-note { color: #B6C4B9; }

/* Footer */
.footer { padding: 34px 6vw; background: #1B2A21; color: #A9B8AD; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; font-size: 16px; }
.wm-lockup { display: flex; flex-direction: column; gap: 3px; line-height: 1; }
.footer .wm-script { font-size: 26px; color: var(--gold-bright); }
.footer-meta { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.footer .wm-sub { font-size: 14px; color: #8B9A8F; }
.contact .wm-script { font-size: 44px; color: var(--gold-bright); }
.contact .wm-sub { font-size: 15px; letter-spacing: .28em; color: #AEBDB2; }
.footer a { color: var(--gold-bright); }

/* Service detail pages (/services/<slug>/), generated by build.mjs.
   The photo was previously a sticky two-column panel that held half the
   viewport while the copy scrolled past it. It is now a normal banner at the
   top of a single reading column: nothing is pinned, nothing is position:
   sticky, and the whole page scrolls as one. Do not reintroduce sticky here. */
.svc-page { max-width: 820px; margin: 0 auto; padding: 48px 6vw 96px; }
.svc-page-photo { border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--bg-alt); box-shadow: 0 18px 40px rgba(36, 56, 43, .16); }
.svc-page-photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-page .kicker { margin: 34px 0 12px; }
.svc-page .kicker a { color: var(--gold); }
.svc-page h1 { font-size: clamp(36px, 5vw, 52px); line-height: 1.1; }
.svc-page-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.svc-page-meta span { font-size: 17px; padding: 10px 20px; border-radius: 40px; background: var(--bg-alt); color: var(--accent); }
.svc-page-body { margin-top: 30px; }
.svc-page-body p, .svc-page-body li { font-size: 19px; line-height: 1.8; color: var(--ink-soft); margin-top: 20px; text-wrap: pretty; }
.svc-page-body ul, .svc-page-body ol { margin-top: 8px; padding-left: 24px; }
.svc-page-body h2 { font-size: 30px; margin-top: 40px; }
.svc-page-body h3 { font-size: 24px; margin-top: 32px; }
.svc-page-body strong { color: var(--ink); font-weight: 500; }
.svc-page-opts { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--line); }
.svc-page-opts .svc-opt-label { margin-bottom: 14px; }
.svc-page .btn { margin-top: 32px; }
@media (max-width: 640px) {
  .svc-page { padding: 32px 6vw 72px; }
  .svc-page-photo { aspect-ratio: 4 / 3; border-radius: 18px; }
}

/* Utility pages (404, privacy) */
.page { max-width: 760px; margin: 0 auto; padding: 90px 6vw; }
.page h1 { font-size: clamp(38px, 5vw, 54px); line-height: 1.1; }
.page p, .page li { margin-top: 18px; font-size: 18px; line-height: 1.8; color: var(--ink-soft); text-wrap: pretty; }
.page ul { margin-top: 6px; padding-left: 22px; }

/* Booking page (book.html) */
.book-head { max-width: 760px; margin: 0 auto; text-align: center; padding: 56px 6vw 34px; }
.book-head h1 { font-size: clamp(38px, 5vw, 54px); line-height: 1.08; }
.book-head p { margin-top: 18px; font-size: 19px; line-height: 1.7; color: var(--ink-soft); text-wrap: pretty; }
.book-frame-wrap { max-width: 1000px; margin: 0 auto 26px; padding: 0 4vw; }
/* height, NOT min-height: book.html sets an inline height from the postMessage
   the booking app sends, and a min-height would stop the frame shrinking back
   on short wizard steps. These values are the pre-script fallback and what a
   JS-disabled visitor gets, so keep them generous. */
.book-frame { width: 100%; height: 1180px; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: var(--shadow); display: block; transition: height .18s ease; }
@media (max-width: 640px) { .book-frame { height: 1500px; border-radius: 18px; } }
@media (prefers-reduced-motion: reduce) { .book-frame { transition: none; } }
.book-alt { max-width: 760px; margin: 0 auto; text-align: center; padding: 0 6vw 84px; font-size: 18px; color: var(--ink-soft); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }