/* ============================================================
   CRISLY NAILED IT — theme
   ------------------------------------------------------------
   Sampled from her own flyers and wordmark, then re-grounded on
   the warm nude she picked: #e8e1d8 in place of the flyers' white.
   Still no third colour anywhere - the ramp is a straight mix from
   that champagne to a warm near-black, and every neutral in the
   file was re-tuned with it. A cold grey left behind on a warm
   ground is the thing that reads cheap.

   Her shape language, read off the price/policy/calendar cards:
   thin black outlines, generous but not pill corners, and no
   shadows at all. Editorial, not glossy.
   ============================================================ */

/* Display is a Didone — typekit measured contrast 11.7, upright,
   hairline serifs, which is exactly her PRICES / POLICY lettering.
   Her wordmark is an image, so the script role only dresses deal
   titles; Sacramento is the closest free monoline signature to the
   thin 39-degree hand she signs with. All three are Google Fonts,
   so all three are licensed for a site Edgar is selling. */
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;1,6..96,400&family=Inter:wght@300;400;500;600;700&family=Sacramento&display=swap');

:root{
  --font-script:  'Sacramento', cursive;
  --font-display: 'Bodoni Moda', serif;
  --font-body:    'Inter', system-ui, sans-serif;

  /* ---- colours: her paper and her ink, nothing else ---------
     her flyers print on #fdfdfd and her ink runs #040404-#232323,
     but the site now sits on the champagne she chose. Every step
     below is mixed from THAT, so the greys carry its warmth
     instead of fighting it.
  --------------------------------------------------------- */
  --cream:     #e8e1d8;   /* page — warm nude, her new ground */
  --blush:     #ddd4c8;   /* hover fills, the plate behind a photo */
  --blush-2:   #d0c5b6;   /* hairlines, borders */
  --pink:      #a2937e;   /* dotted leaders on every price row */
  --pink-deep: #1a1512;   /* button rims — warm black, not neutral */
  --ribbon:    #14100d;   /* selected slot */
  --pink-dark: #18130f;   /* prices, category headings */
  --plum:      #100c09;   /* section headings */

  --ink:       #241d17;   /* body text — warm near-black */
  --ink-soft:  #8a7c6b;   /* captions, taglines, hints */
  --white:     #f5f1ea;   /* cards lift a shade off the paper */

  /* Availability dots. Her own calendar says a mark means a slot
     and a blank means none, so open is solid ink and taken fades
     almost out — separated by lightness, since a colour here would
     be the only colour on the whole site. */
  --pip-open:  #191410;
  --pip-taken: #cdc2b3;

  --glow:      74,58,42;   /* shadows carry the warmth too */
  --glow-deep: 30,22,15;

  /* ---- BACKGROUND ARTWORK -----------------------------------
     Off. Her scatter of sparkles, hearts and bows sat behind the
     price list on the white paper, and once the leopard arrived
     that was two prints competing on one page. The paper stays
     plain now and the print does all the talking.

     bg-tile.png is still in her assets folder, keyed off her own
     flyers, if the scatter is ever wanted back - set --bg-tile to
     url(bg-tile.png) and --bg-opacity to about .26.
  --------------------------------------------------------- */
  --bg-tile:        none;
  --bg-opacity:     0;
  --bg-opacity-admin: 0;

  --motif: url(motif.png);   /* her satin bow */

  /* The announcement strip is the top of the black masthead, so it
     is flat ink rather than the default gradient. */
  --announce-bg: #100d0b;
  --on-accent:   #f7f2ea;
}

/* ============================================================
   SHAPE LANGUAGE — crisp and editorial
   Her cards are thin ink outlines on white with no shadow at all.
   Corners are rounded but nowhere near a pill.
   ============================================================ */
:root{
  --r-btn:    9px;
  --r-card:   16px;
  --r-tile:   8px;
  --r-input:  8px;
  --r-msg:    14px;
  --r-img:    12px;
  --r-nav:    50%;
  --r-deal:   16px;

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

  /* Flat. The only lift is on hover, so a button still answers a
     finger without the page turning glossy. */
  --sh-card:  0 1px 0 rgba(var(--glow),.05);
  --sh-btn:   none;
  --sh-btn-h: 0 5px 16px rgba(var(--glow),.13);
  --sh-soft:  none;
  --sh-lift:  0 5px 16px rgba(var(--glow),.13);
  --sh-deal:  0 1px 0 rgba(var(--glow),.05);

  /* Her bows sit square on the flyer, never tilted. */
  --motif-rot:      0deg;
  --motif-bullet-w: 21px;
  --motif-bullet-h: 15px;
  --motif-badge-w:  34px;
  --motif-badge-h:  25px;
  --crown-size:     132px;

  --font-btn:      'Inter', system-ui, sans-serif;
  --btn-weight:    600;
  --btn-transform: uppercase;
  --btn-tracking:  .14em;

  --pin-size: 12px;
  --logo-max: 500px;

  --ty-card:  #f5f1ea;
  --ty-line:  #d0c5b6;
  --ty-icon:  #1a1a1a;
  --ty-heart: #121212;
}

/* ============================================================
   THE BLACK MASTHEAD
   ------------------------------------------------------------
   Her wordmark only exists reversed out of black, so the top of
   the page is black and the site turns to paper underneath it.

   core leaves .header-top as display:contents precisely so a
   theme can paint a band behind the mark and nothing else — the
   buttons stay outside it, on the paper. Sized by the mark, so
   adding a TikTok button later cannot move the band.

   The band ends in the same soft wave her flyer cards are cut
   with, which is the detail that makes this read as hers rather
   than as a dark header.
   ============================================================ */
header{padding-top:0}

.header-top{
  display:block;
  /* Her print, with a soft dark pool under the wordmark. A radial rather
     than a flat scrim so there is no visible box edge behind a mark that
     is keyed to transparent — just fur getting darker toward the middle. */
  background:
    radial-gradient(72% 80% at 50% 44%,
      rgba(0,0,0,.90) 0%, rgba(0,0,0,.66) 42%, rgba(0,0,0,.24) 72%, rgba(0,0,0,0) 90%),
    url(leopard.jpg) center/cover no-repeat #0a0a0a;
  padding:2.9rem 1.5rem 4.2rem;
  margin:0 -1.5rem 2.6rem;      /* cancel header's side padding: full bleed */
  position:relative;
}

.header-top::after{
  content:'';
  position:absolute;left:0;right:0;bottom:-1px;height:34px;
  background:url(wave.svg) repeat-x bottom center;
  background-size:300px 34px;
  pointer-events:none;
}

/* Her wordmark is white ink on transparent, so it floats on the
   band with no box around it. */
.header-top .crown.logo{margin-bottom:0}

/* Everything else inside the band has to come up off the ink. */
.header-top h1{color:#fff}
.header-top .tagline{color:#8f8f8f;letter-spacing:.42em}
.header-top .loc{color:#bdbdbd}
.header-top .loc svg,
.header-top .loc path{color:#bdbdbd;fill:currentColor;stroke:currentColor}

/* The announcement strip sits directly above the band, so it reads
   as the top edge of the same block of ink. A hairline keeps the
   two apart without breaking the run of black. */
#announce{
  letter-spacing:.16em;text-transform:uppercase;font-size:.68rem;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.14);
}

@media(max-width:600px){
  .header-top{padding:2.2rem 1.1rem 3.4rem;margin:0 -1.5rem 2rem}
  .header-top::after{height:24px;background-size:220px 24px}
}

/* ============================================================
   HER FLYER DETAILS ON THE PAGE
   ============================================================ */

/* The dashed rule under every heading on her flyers. Applied only
   to the price list and policies — the two sections that ARE her
   flyers — so it stays a quotation rather than wallpaper. */
#services-sec .cat h3,
#policies-sec h2{letter-spacing:.01em}

/* Her price rows are ink dots, not a faded hairline. */
.svc .dots{opacity:.9;border-bottom-style:dotted}

/* Her flyer headings are tracked out, but a Didone at .06em runs the
   full width of a phone. Scale the tracking with the viewport so it
   reads as her spacing on desktop and still breathes at 375px. */
h2{letter-spacing:clamp(.005em,.9vw,.06em)}


/* ============================================================
   HER LEOPARD
   ------------------------------------------------------------
   The print goes on four surfaces and nowhere else: the primary
   buttons, the month grid, the policy card and the two thank-you
   frames. Everything between them stays her white paper, so the
   print reads as panels cut out of her flyers rather than as
   wallpaper.

   Two rules learned the hard way and kept here:

   REPEAT IS WALLPAPER. A button is small enough that a tiled
   pattern shows the same spot two or three times. Every surface
   below takes ONE crop with cover, no repeat — the exception is
   the policy card, which is four times taller than it is wide, so
   cover would zoom a single crop into bare fur with no spot in
   it. That one runs at the card's full WIDTH and repeats down:
   no horizontal seam is possible at 100%, and the vertical joins
   sit under the scrim.

   THE FILE IS NEARLY BLACK. Her print measures a median
   luminance of 3/255, so leopard-tile.jpg carries a midtone lift
   that leopard.jpg does not. The masthead wants the darker file
   under a white wordmark; a 44px button wants the spots to
   actually show.
   ============================================================ */

/* ---- primary buttons -------------------------------------- */
/* .ghost stays an outline so the secondary still reads as secondary. */
.cta:not(.ghost){
  background:
    linear-gradient(rgba(0,0,0,.28), rgba(0,0,0,.46)),
    url(leopard-tile.jpg) center/cover no-repeat #0a0a0a;
  color:#f7f2ea;
  border-color:#332b23;
  text-shadow:0 1px 5px rgba(0,0,0,.85);
}
.cta:not(.ghost):hover{
  background:
    linear-gradient(rgba(0,0,0,.16), rgba(0,0,0,.34)),
    url(leopard-tile.jpg) center/cover no-repeat #0a0a0a;
  color:#fffaf2;
  border-color:#645648;
}
/* The perched bow hung half over the button and half over the page. On a
   flat white button that read as an ornament; over the print the half on
   the print disappears, because both are black. The button is loud enough
   without it, and the bow still does the dividers and the bullets. */
:root{ --bow-badge: none }

/* ---- the month on her print -------------------------------
   The print sits on the GRID, not the whole booking card: the grid is
   roughly square, so one crop lands the spots at their natural size,
   where the card is twice as tall as it is wide and would zoom them out
   of existence. Day cells are a translucent white lift rather than an
   opaque fill, so the print runs under the whole month instead of the
   cells sitting in cut-out squares.
------------------------------------------------------------- */
#calGrid{
  background:
    linear-gradient(rgba(0,0,0,.26), rgba(0,0,0,.40)),
    url(leopard-tile.jpg) center/cover no-repeat #0a0a0a;
  border:var(--bw-card) solid #1c1c1c;
  border-radius:var(--r-card);
  padding:.7rem .6rem .85rem;
}
#calGrid .dow{color:rgba(255,255,255,.72)}
#calGrid .day{background:rgba(255,255,255,.10);color:#f2ede5}
#calGrid .day:hover:not(.off):not(.full){border-color:rgba(255,255,255,.6)}
/* core fades a past day to 30%, which was tuned for dark ink on white
   paper. The same 30% of WHITE over the print is barely there, so a
   month that has mostly gone by reads as an empty black box. */
#calGrid .day.off{background:transparent;color:#fdf8f0;opacity:.5}
#calGrid .day.full{background:rgba(0,0,0,.52);color:rgba(255,255,255,.38)}
/* Selected inverts to her paper. --sel-bg stays ink for the time slots,
   which sit on white below the grid and need the opposite treatment. */
#calGrid .day.sel{background:#f3efe8;color:#100c09}
#calGrid .pip{background:#f6f2eb}
#calGrid .pip.taken{background:rgba(255,255,255,.26)}
#calGrid .day.sel .pip{background:#191410}
#calGrid .day.sel .pip.taken{background:rgba(25,20,16,.28)}

/* The legend sits outside the grid on white paper, so its swatches would
   have disagreed with the dots they explain — black for open beside white
   for open. Each entry gets its own ink chip and the dots match exactly. */
.legend{gap:.7rem}
.legend > span{
  background:#100d0b;color:#e6ddd1;
  padding:.34rem .8rem;border-radius:999px;letter-spacing:.06em;
}
.legend .pip{background:#f6f2eb}
.legend .pip.taken{background:rgba(255,255,255,.28)}

/* ---- the policy card --------------------------------------- */
#policy-sec .card{
  background:
    linear-gradient(rgba(0,0,0,.34), rgba(0,0,0,.46)),
    url(leopard-tile.jpg) center top/100% auto repeat-y #0a0a0a;
  border-color:#202020;
}
#policy-sec .card li{color:#f1ece4;border-bottom-color:rgba(255,255,255,.16)}
/* Her bow is black, so on the print it vanished. Same bow, reversed. */
#policy-sec .card li::before{background:url(motif-white.png) no-repeat center/contain}

/* ---- the thank-you frames ----------------------------------
   The frame wears the print; the photo inside it is untouched.
   The little post icons live inside that frame, so they go light —
   the caption beside the stack stays on white paper and stays dark.
------------------------------------------------------------- */
.ty-card{
  background:
    linear-gradient(rgba(0,0,0,.26), rgba(0,0,0,.40)),
    url(leopard-tile.jpg) center/cover no-repeat #0a0a0a;
  border-color:#262626;
}
:root{
  --ty-line:  #262626;
  --ty-icon:  #f0f0f0;
  --ty-heart: #fdf8f0;
}

/* The bow divider stays under Booking Policy, where it caps a section
   that is otherwise a wall of small print. Under Services & Prices and
   Book Your Appointment it was sitting between a heading and its own
   subtitle and just pushed the content down. Two of four is enough for
   it to still read as a motif rather than a rule. */
.bow[data-divider="services"],
.bow[data-divider="booking"]{display:none}

/* ============================================================
   THE ADMIN MASTHEAD
   ------------------------------------------------------------
   Her wordmark is white ink on transparent - it only exists
   reversed out of black. The public page gives it the leopard
   band to sit on, but admin has no band, so on the champagne it
   was white on near-white and all but invisible. Same print,
   sized as a plaque behind the mark.

   `.wrap` exists ONLY on admin.html, so this cannot reach the
   public page and give her a second band under the first.
   ============================================================ */
.wrap > .crown.logo{
  box-sizing:border-box;
  width:min(var(--logo-max,420px),82vw);
  padding:1.5rem 1.6rem;
  margin-bottom:1.1rem;
  border-radius:var(--r-card);
  background:
    radial-gradient(72% 80% at 50% 50%,
      rgba(0,0,0,.88) 0%, rgba(0,0,0,.60) 46%, rgba(0,0,0,.30) 76%, rgba(0,0,0,.20) 100%),
    url(leopard.jpg) center/cover no-repeat #0a0a0a;
}