/* ============================================================
   NAILS x BY JACKI — theme
   ------------------------------------------------------------
   Everything here was measured off HER OWN LOGO (the square
   polka-dot mark with the watercolour bow) and her Canva flyers
   — the price list and the policies slide.

     paper  #fcf1f0     ground behind her dots
     dots   #f8d4da     52.5px staggered lattice, r 12.8
     ink    #363736     the charcoal of NAILS / JACKI
     rose   #e48293     the script "x by", her accent

   brandkit.py read the mark as CHROMATIC (accent sat 0.43), so
   the mid-tones are mixed paper -> rose, not paper -> ink. Her
   pink survives all the way down the ramp, which is the point.
   ============================================================ */

/* ---- 1. FONTS ----------------------------------------------
   Her mark is a Didone (typekit: contrast 5.8, wide-tracked
   caps at spacing 0.83) with a flowing script at 34 deg slant.

   Libre Bodoni over Bodoni Moda or Playfair for two reasons:
   it is the fourth display face on the roster rather than the
   one the last three clients got, and its hairlines are a shade
   sturdier — which matters because --font-display also carries
   her prices and the 10-11px tracked labels, where a true
   Bodoni hairline just vanishes.

   Parisienne for the script: her "x by" is monoline-ish modern
   calligraphy with big open loops, not a copperplate.

   Jost for body and buttons — its tracked-out caps echo the
   N A I L S spacing on her own mark.
------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Jost:wght@300;400;500;600&family=Parisienne&display=swap');

:root{
  --font-script:  'Parisienne', cursive;            /* deal titles, footer, gallery */
  --font-display: 'Libre Bodoni', Georgia, serif;   /* headings, prices */
  --font-body:    'Jost', system-ui, sans-serif;    /* everything else */

  /* ---- 2. COLOURS ---------------------------------------- */
  --cream:     #fcf2f1;   /* her paper */
  --blush:     #fae7e8;   /* calendar day cells, hover fills */
  --blush-2:   #f3d5d9;   /* hairlines, borders */
  --pink:      #eebfc7;   /* dotted leaders, light borders */
  --pink-deep: #e8a1ae;   /* button rims */
  --ribbon:    #d4677f;   /* selected day/slot, deal titles, links */
  --pink-dark: #a04a5e;   /* prices, category headings */
  --plum:      #363736;   /* section headings — her exact charcoal */

  --ink:       #3f3b3a;   /* body text */
  --ink-soft:  #8a807f;   /* captions, taglines, hints */
  --white:     #fffbfa;   /* cards */

  /* Checked by eye on her actual paper, not taken from the sampler.
     The sampler's sage-green "open" was legible but wrong — five green
     pips per day across a whole month turned her page into someone
     else's booking app. Open is her own rose and taken is a warm
     neutral, which keeps them far apart in hue AND in lightness (a
     dark chromatic dot against a pale grey one), so the pattern still
     reads for a colour-blind eye and the legend is right underneath. */
  --pip-open:  #d4677f;
  --pip-taken: #e2dbd8;

  --glow:      212,103,127;
  --glow-deep: 54,55,54;

  /* Dark charcoal on a PALE pink band, exactly like the headers on her
     price list and policies slides. White on her pink was 2.3:1 and
     unreadable; this is 9:1. --on-announce keeps the selected calendar
     tiles white-on-rose, which is the right answer there. */
  --announce-bg:  linear-gradient(90deg,#fadfe4,#f5c7d0);
  --on-announce:  #3a3335;

  /* ---- 3. BACKGROUND ARTWORK ----------------------------- */
  --bg-tile:        url(bg-tile.svg);
  /* Her logo runs 24 dots across its width; on a phone that is a dot
     every ~16px. At 96px the tile was polka-dot WALLPAPER competing
     with her mark instead of the fine printed ground it is on her
     flyers, so both sizes came down. */
  --bg-size:        64px;      /* dots every 32px */
  --bg-size-mobile: 46px;      /* dots every 23px */
  --bg-opacity:     1;         /* the pink is already exactly hers */
  --bg-opacity-admin: .5;

  --motif: url(motif.png);     /* her bow, keyed off the logo ground */
}

/* ============================================================
   SHAPE LANGUAGE
   Her flyers are soft-cornered filled panels with no visible
   borders — rounded rectangles, not capsules, not editorial
   squares. Everything below is one family of soft radii.
   ============================================================ */
:root{
  --r-btn:      16px;
  --r-card:     24px;
  --r-svc-shot: 10px;
  --r-tile:     12px;
  --r-input:    12px;
  --r-msg:      18px;
  --r-img:      14px;
  --r-nav:      50%;
  --r-deal:     22px;

  --bw:      1.5px;
  --bw-card: 1px;

  /* Low and rose-tinted. Her flyers sit flat on the paper; a deep
     bezel-set glow would be someone else's brand. */
  --sh-card:  0 12px 32px rgba(var(--glow),.13);
  --sh-btn:   0 6px 16px  rgba(var(--glow),.26);
  --sh-btn-h: 0 10px 24px rgba(var(--glow),.34);
  --sh-soft:  0 3px 12px  rgba(var(--glow),.12);
  --sh-lift:  0 8px 20px  rgba(var(--glow),.22);
  --sh-deal:  0 12px 32px rgba(var(--glow),.16);

  /* Her bow is 1.78:1 and sits LEVEL on every flyer she has made,
     so the default 13deg perch is turned off rather than inherited. */
  --motif-rot:      0deg;
  --motif-bullet-w: 30px;
  --motif-bullet-h: 17px;
  --motif-badge-w:  48px;
  --motif-badge-h:  27px;

  --font-btn:      'Jost', system-ui, sans-serif;
  --btn-weight:    500;
  --btn-transform: uppercase;
  --btn-tracking:  .22em;      /* the N A I L S tracking off her mark */
  /* Tracking that wide needs the type a step smaller, or a long label
     ("REQUEST APPOINTMENT") runs to both edges of a 390px phone. Core
     never wraps a button, so the label has to fit. */
  --btn-size:      clamp(.84rem, 3.7vw, 1.05rem);

  /* ---- FINISH -------------------------------------------
     Her lettering is FLAT charcoal Didone — no extrude, no rim,
     no glow — but it casts a soft shadow on every flyer she has
     made. That is --wm-drop.

     --wm-face is deliberately left unset: with it set, h1, h2,
     the footer script, the gallery script AND the deal titles all
     collapse to one colour. Unset, each keeps its own — headings
     stay her charcoal, deal titles stay her rose, which is exactly
     how the Friday Sale flyer reads (mauve script over charcoal caps).
  --------------------------------------------------------- */
  --wm-rim:  rgba(94,58,70,.26);   /* the shadow colour, not an outline */
  --wm-text: var(--wm-drop);
  --wm-pad:  .05em;
  --wm-lh:   1.14;

  /* The button agrees with the headings: same soft lift, her rose,
     and it presses down instead of just changing colour. */
  --wm-btn:       0 .20em .45em rgba(var(--glow),.30);
  --wm-btn-h:     0 .30em .62em rgba(var(--glow),.40);
  --wm-btn-press: translateY(.06em);

  /* Her pin is the bow again, and a bow is WIDE where core expects a
     tall marker — at 26px its transparent box crowded the "J" of Joshua.
     19px sits the bow beside the line with air on both sides. */
  --pin-size: 19px;

  /* ---- "See My Work" gallery ---------------------------- */
  --ty-card:  #fffbfa;
  --ty-line:  #f3d5d9;
  --ty-icon:  #6a5a5e;
  --ty-heart: #d4677f;
}

/* Her mark already says NAILS x BY JACKI in her own Didone, so the
   header does not repeat the name underneath it in type. */

/* ------------------------------------------------------------
   The primary button.
   Core styles .cta and .cta.ghost almost identically — white
   with a pink rim — which is right for a client whose header
   carries one button. Jacki's carries three (book, Instagram,
   call), and the one that matters was indistinguishable from
   the two that do not. Book Now takes her rose; the ghosts stay
   white, so the hierarchy is obvious at a glance on a phone.

   .cta.bowed is 0,2,0 and this sheet loads after core, so this
   beats core's .cta without touching core.
------------------------------------------------------------ */
.cta.bowed{background:var(--ribbon);color:#fff;border-color:var(--ribbon)}
.cta.bowed:hover{background:var(--pink-dark);color:#fff;border-color:var(--pink-dark)}

/* ------------------------------------------------------------
   The price list gets a card.

   Core leaves #services uncarded on purpose — leader dots on bare
   paper read like a printed menu, and on a client with a faint
   tile that is the better answer. Jacki's ground is a full-strength
   polka lattice, so her dots ran straight through every price row
   and the whole list turned to noise. Her deals, calendar, policies
   and prepare sections all sit on cards already; this makes the
   price list agree with them.

   The max-width also stops a 1440px desktop stretching one leader
   line the entire width of the screen.
------------------------------------------------------------ */
/* #servicesPane, not #services, so the "price goes up $5-$15" line
   comes inside the card with the list instead of being left alone
   out on the dots underneath it. */
#servicesPane{
  background:var(--white);
  border:var(--bw-card,1px) solid var(--blush-2);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
  padding:1.9rem 1.8rem 1.7rem;
  max-width:660px;
  margin:0 auto;
}
@media(max-width:600px){ #servicesPane{padding:1.4rem 1.2rem 1.3rem} }