/* ============================================================
   shapedbyymariee — Fort Worth nail tech
   ------------------------------------------------------------
   Her own stone photo is the page. Everything on top of it is
   either warm cream panels or near-black type; her pink is the
   one colour left, and it is kept for the things that need
   pointing at.

   Sampled from her logo:
     brandkit.py -> paper #fde4f5, accent #fcb1d3 (CHROMATIC)
     typekit.py  -> SBM: serifs 1.03, spacing 2.15, wide Didone
                    script: weight 0.030, slant 9.9, thin monoline
   Sampled from the stone she sent:
     mean #baac9d, relative luminance 0.425
     -> black on it clears 9.5:1, so the type stays dark. White
        would have been 2.2:1 and unreadable at body size, which
        is why only her wordmark and the dividers are white.
   ============================================================ */

@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=Karla:wght@300;400;500;600;700&family=Sacramento&display=swap');

:root{
  /* Deal titles. The fallbacks matter: with only `cursive` behind it, a
     failed webfont load drops to a SERIF on most desktops, which is what
     made the deal header look wrong in preview screenshots. Snell and
     Brush Script ship on Mac and Windows, so a bad network still shows a
     script rather than something out of the wrong family. */
  --font-script:  'Sacramento', 'Snell Roundhand', 'Brush Script MT', cursive;
  --font-display: 'Bodoni Moda', serif;                /* headings, prices */
  --font-body:    'Karla', sans-serif;                 /* everything else */

  /* ---- COLOURS --------------------------------------------- */
  --cream:     #baac9d;   /* the stone's own mean — what shows before the
                             photo paints, and behind it at every edge */
  --white:     #faf6ef;   /* cards and panels — warm cream on the stone */
  --blush:     #ece2d2;   /* calendar day cells, inner fills */
  --blush-2:   #dbceba;   /* hairlines, borders, month arrows */
  --pink:      #ecd7e1;   /* dotted leaders */
  --pink-deep: #17130f;   /* button rims — she asked for black lines */
  --ribbon:    #6b3245;   /* accent TEXT: deal titles, links */
  --pink-dark: #6f4351;   /* prices, category headings */
  --plum:      #221c17;   /* section headings, straight on the stone */

  --ink:       #2f2822;   /* body text */
  --ink-soft:  #4a423a;   /* captions, taglines, hints — deep enough to
                             clear 4.5:1 on the stone, which a soft taupe
                             did not */

  /* The announcement bar. Not black, and not the stone either — a light
     cream band across the top, a shade off the cards so it reads as its
     own surface rather than a floating card edge. */
  --announce-bg: #f3ece1;

  /* Selected day and slot keep HER pink with her ink on top. */
  --sel-bg:    #f3b7d2;
  --on-accent: #2b2320;

  /* Availability dots — semantic, not decorative. They sit on cream tiles
     inside the card, so they are toned against cream, not stone. Clay
     rather than her pink now that the pink has left the branding: warm
     enough to belong to the stone family, saturated enough to read as
     "open" beside a flat beige "taken". */
  --pip-open:  #b0714f;
  --pip-taken: #cbbba3;

  /* Shadows fall as neutral shade now, not a pink glow. */
  --glow:      34,28,23;
  --glow-deep: 23,19,15;

  /* ---- BACKGROUND ------------------------------------------
     Her stone, one image covering the viewport rather than a tile.
     #bgBows is position:fixed, so cover = exactly the screen and it
     stays put while the page scrolls. */
  --bg-tile:    url(bg-paper.jpg);
  --bg-opacity: 1;
  --bg-opacity-admin: 1;

  --motif: url(motif.svg);
  --sparkle-opacity: 0;
}

/* ============================================================
   SHAPE LANGUAGE — editorial, not glossy
   ============================================================ */
:root{
  --r-btn:      6px;
  --r-card:     10px;
  --r-svc-shot: 2px;
  --r-tile:     5px;
  --r-input:    5px;
  --r-msg:      8px;
  --r-img:      6px;
  --r-nav:      4px;
  --r-deal:     10px;

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

  --sh-card:  0 2px 6px rgba(var(--glow),.10), 0 16px 40px rgba(var(--glow),.14);
  --sh-btn:   0 1px 3px rgba(var(--glow),.14);
  --sh-btn-h: 0 4px 14px rgba(var(--glow),.22);
  --sh-soft:  0 1px 4px rgba(var(--glow),.12);
  --sh-lift:  0 3px 12px rgba(var(--glow),.18);
  --sh-deal:  0 12px 34px rgba(var(--glow),.14);

  --motif-rot:      -6deg;
  --motif-bullet-w: 15px;
  --motif-bullet-h: 15px;
  --motif-badge-w:  20px;
  --motif-badge-h:  20px;

  --font-btn:      'Karla', sans-serif;
  --btn-weight:    500;
  --btn-transform: uppercase;
  --btn-tracking:  .18em;

  /* No motif perched on the Book Now button for now — the mark does its
     work in the dividers instead. One switch, every .cta.bowed. */
  --bow-badge: none;

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

  --ty-card:  #faf6ef;
  --ty-line:  #dbceba;
  --ty-icon:  #4a423a;
  --ty-heart: #17130f;
}

/* ============================================================
   THE STONE
   ------------------------------------------------------------
   core tiles --bg-tile at --bg-size. A photograph is not a tile:
   repeating it would print a visible seam every 460px. So the
   layer is switched to cover. `body #bgBows` rather than the bare
   id so this also beats core's own mobile media query, which
   would otherwise re-set the size below 600px.
   ============================================================ */
body #bgBows{
  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}

/* Her logo file is transparent — the pale pink field it shipped on was
   keyed out — so her original white script sits straight on the stone
   with no band and no box behind it. */

/* ============================================================
   ON THE STONE vs IN A PANEL
   ============================================================ */

/* The price list gets its own cream panel. A column of small rows read
   straight off a photograph is the one place this design would fail,
   and it is the thing she asked for by name. */
#services{
  background:var(--white);
  border:var(--bw-card) solid var(--blush-2);
  border-radius:var(--r-card);
  box-shadow:var(--sh-card);
  padding:2rem 1.5rem .8rem;
}
#services .cat:last-child{ margin-bottom:1.2rem }

/* Black lines on the buttons, as she asked. Set here rather than by
   repointing --pink, which also draws the dotted price leaders and the
   calendar hover rim — those should stay soft. */
body .cta,
body .cta.ghost,
body .cta.bowed{ border-color:#17130f }
body .cta.ghost:hover,
body .cta:hover{ border-color:#17130f }

/* Black type on the cream announcement bar. --on-accent cannot do this:
   it is shared with the selected day and slot, which wear her pink. */
body #announce{ color:#17130f }

/* ---- SECTION DIVIDERS -------------------------------------------------
   Her continuous-line hearts, under each section heading. core prints the
   motif as an <img> inside .sub, so that is hidden and the new rule is
   drawn on the .sub itself — a wide mark cannot be swapped in through an
   img src from CSS.

   Scoped by section id on purpose: .sub is also the "Admin Dashboard"
   line in the shared dashboard, which must not grow a divider.

   The plain heart stays as --motif for the policy list bullets and the
   location pin, where a wide rule does not fit. */
#deals-sec    .sub .bow[data-divider],
#services-sec .sub .bow[data-divider],
#booking      .sub .bow[data-divider],
#policy-sec   .sub .bow[data-divider]{ display:none }

#deals-sec    .sub::after,
#services-sec .sub::after,
#booking      .sub::after,
#policy-sec   .sub::after{
  content:'';
  display:block;
  width:min(232px, 56%);
  aspect-ratio:1400 / 486;
  margin:.9rem auto 0;
  background:url(divider.png) no-repeat center/contain;
}

/* Core fills the deposit panel with --cream. That used to be the paper;
   here it is the stone, so the panel is given the light inset explicitly
   or her deposit title vanishes into it. */
.dep{ background:var(--blush); border-color:var(--blush-2) }

/* Her photo pair sits between the price list and the calendar. The
   sections are plain siblings in #below, so ordering them is a column
   flex and nothing else — no markup moved, no core touched. Everything
   unnamed keeps the middle order value and its original sequence. */
#below{ display:flex; flex-direction:column }
/* width:100% is load-bearing, not tidiness. core gives every section
   `margin:0 auto`, and a flex item with auto side margins SHRINKS TO FIT
   instead of stretching — so ordering the sections silently narrowed all
   of them, and the thank-you section, whose content is two small frames,
   collapsed to 211px on a 390px phone and read as a tiny Instagram post.
   The max-width:960px and the auto margins still do their job on top. */
#below > *          { order:5; width:100% }
#below > #intro-sec { order:1 }
#below > #deals-sec { order:2 }
#below > #services-sec{ order:3 }
#below > #thanks-sec{ order:4 }   /* after the prices, before the calendar */

/* ============================================================
   THE DEAL CARD
   ------------------------------------------------------------
   core sizes a deal at 380px because most clients run two or
   three side by side. She runs one, and one 380px card floating
   in a 960px section reads as an afterthought — she wants it
   edge to edge like the reference she sent.

   The offer line only grows; it keeps her display serif. A heavy
   sans made it read like an app interface rather than her brand.
   ============================================================ */
#deals-sec .deal{ width:100%; max-width:720px }

.deal-card{ padding:2.4rem 1.6rem 2rem }

.deal-card .dtitle{
  font-size:clamp(2.4rem, 9vw, 3.2rem);
  line-height:1.05;
}

.deal-card .dsub{ margin:.7rem 0 .2rem }

/* The offer line keeps her display serif — a heavy sans read as an app
   UI, not as her brand. Only the size grows, so the price still carries
   across the card. */
.deal-card .dline{
  font-size:clamp(1.5rem, 6vw, 2rem);
  line-height:1.3;
  color:var(--plum);
  border-bottom:none;
  padding:.9rem .2rem .2rem;
}


/* ============================================================
   ADMIN: LOCATION HIDDEN FOR NOW
   ------------------------------------------------------------
   Hidden in her dashboard only, not deleted — the field and
   everything that reads it are untouched in core, so this is one
   line to undo. :has() gets the label, since CSS cannot select a
   previous sibling any other way.

   The public page still prints whatever the saved value is; if
   that should go too, blanking it in admin (or in brand.js while
   this is still a demo) removes the header line, its pin and the
   footer line together.
   ============================================================ */
/* input#location, NOT #location. The public page carries the same id on a
   <div class="loc"> — a bare #location hid her location line and its pin
   on the site as well, which is not what "hide it in admin" meant. The
   element type is what separates the two pages. */
input#location,
label:has(+ input#location){ display:none }


/* The location marker. build.mjs prints the pin as an inline SVG with
   style="color:var(--ribbon)" on the element itself, and an inline style
   cannot be beaten from a stylesheet without this — hence !important,
   which is doing real work here rather than papering over specificity. */
#location svg{ color:#ede2ce !important }