/* ============================================================
   ADRILUXENAILS NAIL STUDIO — Burleson, TX
   ------------------------------------------------------------
   Everything here is sampled or measured from HER logo.
     brandkit.py  -> CHROMATIC, ramp built from #f195ad
     typekit.py   -> script slant 32.8 deg  (flowing script)
                     "NAIL STUDIO" serifs 1.29, spacing 0.38
                     (wide-set Didone -> Bodoni Moda)
   ============================================================ */

/* ---- 1. FONTS ----------------------------------------------
   Her logo is an image, so --font-script only carries deal
   titles. --font-display does the real work: Bodoni Moda is
   the wide-set Didone of her "NAIL STUDIO" lockup and of the
   "POLICY" heading on her story slides.
   Jost matches the geometric sans of her tagline.
   All three are Google Fonts — safe to sell.
------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,600;6..96,700&family=Great+Vibes&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --font-script:  'Great Vibes', cursive;
  --font-display: 'Bodoni Moda', serif;
  --font-body:    'Jost', sans-serif;

  /* ---- 2. COLOURS ------------------------------------------
     brandkit read her brand as CHROMATIC and built the ramp
     from her rose #f195ad, so the pink survives instead of
     draining to grey.

     --cream is NOT brandkit's #fbe2ea: her logo's flat field
     measures #fde2ea to the byte, and the logo has to float on
     it with no visible rectangle. Do not "correct" this.
  --------------------------------------------------------- */
  --cream:     #fde2ea;   /* page background — her logo's own field */
  --blush:     #fadae4;   /* calendar day cells, hover fills */
  --blush-2:   #f9d1dc;   /* hairlines, borders */
  --pink:      #f8c5d3;   /* dotted leaders, light borders */
  --pink-deep: #f5b2c4;   /* announcement bar, button rims */
  --ribbon:    #f195ad;   /* selected day/slot, admin buttons */
  --pink-dark: #9d6171;   /* prices, category headings */
  --plum:      #0a0708;   /* section headings — her near-black */

  --ink:       #1f1c1d;   /* body text */
  --ink-soft:  #796d71;   /* captions, taglines, hints */
  --white:     #fdf2f5;   /* cards */

  /* Availability dots. Checked by eye on HER paper: a sage green
     read as a foreign colour on a page this pink, so open is her
     own rose pushed deep, and taken drops all chroma. They differ
     in chroma AND lightness, which is what the dots need. */
  --pip-open:  #d81e5b;
  --pip-taken: #c9b3bb;

  --glow:      241,149,173;
  --glow-deep: 10,7,8;

  /* ---- 3. BACKGROUND ARTWORK -------------------------------
     bg-tile.svg is drawn to the proportions of the four-point
     sparkles and the heart in her own logo. Nothing here came
     from another client's folder. */
  --bg-tile:        url(bg-tile.svg);
  --bg-size:        430px;
  --bg-size-mobile: 290px;
  --bg-opacity:     .32;
  --bg-opacity-admin: .16;

  --motif: url(motif.png);   /* her bow, keyed out of her logo */
}

/* ============================================================
   SHAPE LANGUAGE — glossy, bezel-set
   ------------------------------------------------------------
   Her bow and her heart are both rendered with a wet highlight
   and a soft outer glow. That is the brand: generous radii,
   pill buttons, deep soft shadow. The Didone display type
   keeps it from going soft-focus.
   ============================================================ */
:root{
  --r-btn:    999px;                    /* pill — matches the bow's roundness */
  --r-card:   22px;
  --r-tile:   14px;
  --r-input:  14px;
  --r-msg:    20px;
  --r-img:    18px;
  --r-nav:    50%;
  --r-deal:   22px;

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

  --sh-card:  0 14px 38px rgba(var(--glow),.20);
  --sh-btn:   0 6px 18px rgba(var(--glow),.34);
  --sh-btn-h: 0 10px 26px rgba(var(--glow),.46);
  --sh-soft:  0 4px 14px rgba(var(--glow),.18);
  --sh-lift:  0 8px 22px rgba(var(--glow),.32);
  --sh-deal:  0 14px 38px rgba(var(--glow),.24);

  /* her bow is symmetrical and sits level — a big rotation makes
     it look dropped rather than tied on */
  --motif-rot:      -5deg;
  --motif-bullet-w: 26px;
  --motif-bullet-h: 20px;
  --motif-badge-w:  40px;
  --motif-badge-h:  31px;

  /* Buttons in Jost, not the Didone: Bodoni's hairlines vanish at
     button size and go fussy. */
  --font-btn:      'Jost', sans-serif;
  --btn-weight:    500;
  --btn-transform: uppercase;
  --btn-tracking:  .16em;

  --pin-size: 15px;    /* her heart, used as the location marker */
  --logo-max: 460px;

  /* ---- "See My Work" gallery ---- */
  --ty-card:  #fdf2f5;
  --ty-line:  #f8c5d3;
  --ty-icon:  #9d6171;
  --ty-heart: #f195ad;
}

/* ============================================================
   OPTIONAL PIECES
   ============================================================ */

/* No bow under "Services & Prices" or "Book Your Appointment" —
   Edgar's call. Deals and policy keep theirs. */
.bow[data-divider="services"],
.bow[data-divider="booking"]{display:none}

/* ============================================================
   CALENDAR MARKS  +  BOW ON "BOOK NOW"
   ------------------------------------------------------------
   Placement is computed, not eyeballed. The rule: aim the mark's
   OWN anchor point at the corner, never the middle of its image
   file. A coquette bow hangs its tails below the knot, so the
   file's centre sits well under the knot; centre the file on a
   corner and the knot lands ~20% of the bow's height too high and
   it reads as floating. That was the bug behind three rounds of
   nudging.

   ANCHORS, measured off a 10% grid laid over each PNG:
     mark-bow.png    knot      fx 0.505  fy 0.360
     mark-heart.png  centroid  fx 0.611  fy 0.501   (largest alpha
       blob only — the two sparkles would drag a naive centre off)

   BOTH calendar corners are the heart. The top-left one is the very
   same PNG mirrored, so the two are identical in size, tilt and
   overhang — a true mirror pair, not two hand-placed marks.
   No vertical flip: a heart has to keep pointing down.

   Mirroring and the anchor maths: S.R(t) == R(-t).S, so
   `scaleX(-1) rotate(16deg)` is exactly "mirrored image, tilted
   -16deg". Feed the formula the mirrored anchor fx' = 1 - fx =
   0.389 with theta = -16 and it lands on the corner. Both corners
   come out with the same 59.6px overhang, which is the check that
   they really are a pair.

   THE CORNER IS NOT THE BOX CORNER. A rounded corner's outline
   pulls diagonally inward by  inset = r - r/sqrt(2).
   Card r=22px -> inset 6.44px.

   ROTATION MOVES THE ANCHOR. CSS rotates about the box centre, so
   a tilt swings the anchor; it has to be in the maths, not applied
   afterwards. With S the box size and t the rotation:
     dx = (fx-0.5)*Sx          kx = dx*cos t - dy*sin t
     dy = (fy-0.5)*Sy          ky = dx*sin t + dy*cos t
   top-left:      left  = inset - (Sx/2 + kx)
                  top   = inset - (Sy/2 + ky)
   bottom-right:  right  = inset - Sx/2 + kx
                  bottom = inset - Sy/2 + ky
   Tilt mirrors by side: left corner leans left, right corner leans
   right.

   The numbers below come out of scripts/knot.py — change a size or
   an angle and re-run it rather than nudging by hand.

   They hang off .cal-head and .legend rather than .card, because
   core already spends .card::before/::after on the optional neon
   rim. Those two sit at the card's top and bottom and are not
   positioned themselves, so their pseudo-elements anchor to .card
   and land on its corners.

   z-index:2 puts them on top of the card. pointer-events:none is
   what makes that safe: the top-left mark overlaps the month-back
   arrow, and without it that arrow would stop taking taps.

   Scoped to #booking so her admin calendar stays plain.
   ============================================================ */

/* The shrink that makes room for them. Knot-on-corner means roughly
   0.62 x the bow's width hangs outside the card, so the gap beside
   the card has to be at least that or the page gets a sideways
   scroll. 126px bow -> 66px of hang -> 760px card inside the 912px
   section leaves 76px each side. Below 1100px the card fills the
   section instead, so #booking grows its own side padding to make
   the same room. */
#booking{padding-left:2.4rem;padding-right:2.4rem}
#booking .card{max-width:760px;margin-left:auto;margin-right:auto}
@media (min-width:1101px){#booking{padding-left:1.5rem;padding-right:1.5rem}}
@media (max-width:640px){#booking{padding-left:2rem;padding-right:2rem}}

#booking .cal-head::before,
#booking .legend::after{
  content:'';
  position:absolute;
  z-index:2;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  /* Two shadows, and the tight one is not decoration. Her bow's
     loops are only 6-9 steps of luminance darker than her paper but
     19-22 darker than a white card or button, so a mark straddling
     that edge reads crisply on one side and almost vanishes on the
     other — which looks exactly like the mark has been sliced along
     the edge. The 0 0 1px rose shadow hugs the silhouette and gives
     it the same definition on both grounds. Measured, not guessed:
     sample the artwork against both backgrounds before changing it. */
  filter:drop-shadow(0 0 1px rgba(157,97,113,.55))
         drop-shadow(0 5px 10px rgba(var(--glow),.45));
}

/* top-left — the same heart as the bottom-right, mirrored */
#booking .cal-head::before{
  width:142px;height:94px;
  left:-49px;top:-45px;          /* d=0: centroid exactly on the corner outline */
  background-image:url(mark-heart.png);
  transform:scaleX(-1) rotate(16deg);
}

/* bottom-right — heart's centroid on the corner, tilted right */
#booking .legend::after{
  width:142px;height:94px;
  right:-49px;bottom:-36px;      /* d=0 */
  background-image:url(mark-heart.png);
  transform:rotate(16deg);
}

/* Narrow screens cannot afford the full hang without either a
   sideways scroll or day cells too small to tap, so the target
   point slides inward along the diagonal by d. The maths is
   unchanged — only the point it aims at moves, and the mark still
   reads as sitting on the corner.
     <=1100  bow d=17  heart d=12
     <=640   bow d=14  heart d=9   */
@media (max-width:1100px){
  #booking .cal-head::before{width:112px;height:74px;left:-26px;top:-22px}
  #booking .legend::after{width:112px;height:74px;right:-26px;bottom:-15px}
}
@media (max-width:640px){
  #booking .cal-head::before{width:92px;height:61px;left:-21px;top:-18px}
  #booking .legend::after{width:92px;height:61px;right:-21px;bottom:-12px}
}

@media (prefers-reduced-motion:reduce){
  #booking .cal-head::before{transform:scaleX(-1)}   /* keep the mirror, drop the tilt */
  #booking .legend::after{transform:none}
}

/* ------------------------------------------------------------
   BOOK NOW
   ------------------------------------------------------------
   Core already perches a motif badge on .cta.bowed::after, but the
   optional-rim rule .cta.cta::after claims the same pseudo-element
   and does two things to it: sets display:none, so the badge has
   never rendered on any client; and sets `inset` and
   `clip-path:var(--corner-poly-in)`. That polygon is defined
   unconditionally, not only when the chamfer is on, and it was
   slicing the bow to the button's corner shape. All four are
   re-declared here; none of it touches core.

   The button is a FULL PILL (r:999px), so it has no corner to
   perch on — the whole end is one arc. The knot goes on the
   straight top edge, 8px inside where it meets the cap
   (cap radius = height/2 = 28.8px, so 36.8px in from the right —
   measure the button live, with her fonts loaded; a headless render
   without Jost gave 51.19px tall instead of 57.69px and the anchor
   came out 3px off),
   and the top offset anchors the knot to the edge itself:
   top = -(Sy/2 + ky).

   Header only — the submit and "Add to My Calendar" buttons stay
   plain.
   ------------------------------------------------------------ */
header .cta.bowed::after{
  display:block;
  left:auto;bottom:auto;
  clip-path:none;
  right:5px;top:-20px;   /* cap = 57.69/2 = 28.8px; anchor 8px inside it */
  width:70px;height:53px;
  background-image:url(mark-bow.png);
  transform:rotate(26deg);
  filter:drop-shadow(0 0 1px rgba(157,97,113,.55))
         drop-shadow(0 4px 8px rgba(var(--glow),.45));
}
header .cta.bowed:hover::after{transform:rotate(21deg) scale(1.06)}

@media (max-width:640px){
  header .cta.bowed::after{left:auto;bottom:auto;right:11px;top:-17px;width:58px;height:44px}
}