/* ============================================================
   NAILED BY VANE — theme
   ------------------------------------------------------------
   Ported from the standalone nailedxvane-cloudflare site, which
   was the original core. Every value below was lifted out of
   that file's <style> block, not eyeballed and not taken from
   another client.

   What her design actually is, in order of how much it carries:

   1. A tilted, flickering neon wordmark in Alex Brush, sitting
      in its own breathing pool of violet light. This is the
      page. Everything else supports it.
   2. Emitted light instead of reflected light. Nothing casts a
      shadow downward onto paper; every edge glows outward.
      Frames are 1.5px lilac hairlines with a bloom inside and
      out, never a border on a card.
   3. Oswald caps, tracked wide, for every functional label —
      and Alex Brush for anything that is her voice.
   4. A living background: purple flame blobs rising and
      dissolving, embers drifting up through them, and a hard
      vignette pulling the edges back to near-black.
   5. Square-ish corners. Her radii were 2-3px, not rounded.

   THE PARTS THAT COULD NOT COME ACROSS, and why:
   · The three-tile info strip (Hours / Deposit / Where) under
     the header. Core has no such element, and inventing one
     from theme.css alone would mean generated content faking a
     layout — it belongs in core or not at all.
   · Her h2 was two elements, tracked caps beside a script word
     ("PREPARE FOR YOUR" + "Appointment"). Core's h2 is one
     node, so the caps half is kept and the script half is not.
     Her script face still carries the wordmark, the intro, the
     deal titles and the footer, which is where it did the work.
   · The "Prepare for your Appointment" section, which core has
     no home for. Those three lines are policies now.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Alex+Brush&family=Oswald:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root{
  /* Alex Brush for her voice, Oswald for every label and number,
     Cormorant Garamond for reading. Exactly her three roles. */
  --font-script:  'Alex Brush', cursive;
  --font-display: 'Oswald', sans-serif;
  --font-body:    'Cormorant Garamond', Georgia, serif;

  /* ---- COLOURS — her :root, mapped onto core's roles ---------
     Her page is dark, so the names read backwards: --cream is
     her near-black ground and --white is her card. Core only
     uses them positionally so this is fine, but do not copy a
     value out of here into a light client — it will invert. */
  --cream:     #05030a;   /* --bg   */
  --blush:     #12091f;   /* --card2, calendar cells */
  --blush-2:   #3a1f63;   /* --line, hairlines */
  --pink:      #4a2a7a;   /* leaders, quiet borders */
  --pink-deep: #7209b7;   /* --neon-dk */
  --ribbon:    #b026ff;   /* --neon — THE colour */
  --pink-dark: #d9a5ff;   /* --neon-lt */
  --plum:      #ffffff;   /* headings are white and lit, never violet */

  --ink:       #f4ecff;   /* --text  */
  --ink-soft:  #a68fc4;   /* --muted */
  --white:     #0c0715;   /* --card  */

  /* Availability dots. Her old page separated taken slots by
     line-through and opacity alone, so there is nothing to copy
     here — these two are the only invented values in the file.
     They separate by LIGHTNESS, not hue: open is lit like
     everything else she wants you to press, taken is the dead
     violet of the hairlines and does not glow. A green pip
     would be the only non-violet pixel on the page. */
  --pip-open:  #e9c6ff;
  --pip-taken: #4a3a63;

  --glow:      176,38,255;
  --glow-deep: 114,9,183;

  /* ---- core tokens ------------------------------------------ */
  --on-accent:   #ffffff;   /* ink on a solid violet fill */
  --sel-bg:      linear-gradient(160deg,#b026ff,#7209b7);
  --announce-bg: linear-gradient(90deg,#7209b7,#b026ff,#7209b7);
  --deal-bg:     none;      /* her deals sat between two rails, not in a box */
  --igbox-bg:    linear-gradient(180deg,rgba(18,9,31,.92),rgba(9,5,17,.92));

  /* ---- BACKGROUND -------------------------------------------
     Her depth was four fixed layers, not a repeating tile, so
     the tile is off and the layers are rebuilt further down. */
  --page-bg:   #05030a;
  --bg-tile:   none;
  --bg-opacity: 1;
  --bg-opacity-admin: 1;

  --motif: url(motif.svg);
}

/* ============================================================
   SHAPE — hairline tubes, near-square corners
   ------------------------------------------------------------
   Her radii were 2px on buttons and pills, 3px on panels and
   tiles. Rounding these off is the single fastest way to make
   the page stop looking like hers.
   ============================================================ */
:root{
  --r-btn:      2px;
  --r-card:     3px;
  --r-svc-shot: 2px;
  --r-tile:     3px;
  --r-input:    3px;
  --r-msg:      3px;
  --r-img:      2px;
  --r-nav:      3px;
  --r-deal:     2px;

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

  /* The tube. Her frames were a lilac hairline with a violet
     bloom on both sides — outside as a halo, inside as a wash.
     That is --tube in her file, and it is on every panel. */
  --rim-on: none;          /* she used real borders, not a masked gradient */
  --fx-glow:      drop-shadow(0 0 6px rgba(176,38,255,.45));
  --fx-glow-card: drop-shadow(0 0 14px rgba(176,38,255,.18));

  /* Light is emitted here, never dropped. Downward grey shadows
     are invisible on her ground anyway. */
  --sh-card:  0 0 7px rgba(217,165,255,.40), 0 0 22px rgba(176,38,255,.30), 0 14px 40px rgba(0,0,0,.60);
  --sh-btn:   0 0 22px rgba(176,38,255,.75), 0 0 54px rgba(176,38,255,.35);
  --sh-btn-h: 0 0 30px rgba(176,38,255,.95), 0 0 70px rgba(176,38,255,.45);
  --sh-soft:  0 0 8px rgba(176,38,255,.35);
  --sh-lift:  0 0 18px rgba(176,38,255,.55);
  --sh-deal:  0 0 14px rgba(176,38,255,.30);

  --motif-rot:      0deg;
  --motif-bullet-w: 18px;
  --motif-bullet-h: 18px;
  --motif-badge-w:  28px;
  --motif-badge-h:  28px;

  --font-btn:      'Oswald', sans-serif;
  --btn-weight:    400;
  --btn-transform: uppercase;
  --btn-tracking:  .22em;   /* 3.2px at 12px — her .heroCta */

  --pin-size: 13px;
  --logo-max: 420px;

  /* The intro block: her "Hi girls" mark and the round photo. */
  --intro-mark-size: clamp(42px, 11vw, 62px);
  --intro-mark-glow: 0 0 2px #fff, 0 0 5px #fff, 0 0 11px var(--ribbon),
                     0 0 22px var(--ribbon), 0 0 44px rgba(176,38,255,.7),
                     0 0 82px rgba(176,38,255,.35);
  --intro-pic-size:  132px;
  --intro-pic-size-mobile: 104px;
  --intro-text-size: 18px;

  /* The wordmark's own bloom — tight white core, hard inner
     violet, wide soft haze. Copied glow-for-glow. */
  --h1-glow: 0 0 2px #fff, 0 0 5px #fff, 0 0 11px var(--ribbon),
             0 0 22px var(--ribbon), 0 0 46px rgba(176,38,255,.85),
             0 0 90px rgba(176,38,255,.45);

  /* Her page carried NO ornament anywhere — no crown over the mark, no
     divider under a subhead, no badge perched on a button. The mark was
     the ornament. --crown-on only applies when there is a portrait, so
     the crown is also hidden outright in the fixes section below. */
  --crown-on:   none;
  --bow-badge:  none;

  /* Instagram frames in "See My Work": her igCard was literal
     Instagram chrome, black on #262626, not her violet. */
  --ty-card:  #000000;
  --ty-line:  #262626;
  --ty-icon:  #fafafa;
  --ty-heart: #ed4956;
}

/* ============================================================
   THE WORDMARK
   ------------------------------------------------------------
   Tilted, skewed, flickering, and floating in a pool of light.
   This is the one element that has to be right.
   ============================================================ */

/* .header-top is display:contents by default and generates no
   box. Core exposes it exactly so a theme can paint behind the
   mark and nothing else — which is what the glow pool is. */
.header-top{display:block;position:relative;isolation:isolate}
.header-top::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:44%;transform:translate(-50%,-50%);
  width:min(430px,92%);height:230px;border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(206,104,255,.60) 0%, rgba(176,38,255,.30) 28%,
    rgba(126,14,200,.12) 48%, transparent 66%);
  filter:blur(26px);
  animation:vane-pool 4.6s infinite ease-in-out;
}
@keyframes vane-pool{
  0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}
  50%    {opacity:1;  transform:translate(-50%,-50%) scale(1.08)}
}

h1{
  font-size:clamp(58px,17vw,104px);line-height:1;color:#fff;
  transform:rotate(-10deg) skewX(-4deg);display:inline-block;
  padding:8px 6px;margin-bottom:1.2rem;position:relative;z-index:1;
  animation:vane-flick 7s infinite;
}
/* A real neon tube stutters, it does not pulse. Long steady
   stretch, two short dropouts, back to full. */
@keyframes vane-flick{
  0%,88%,100%{opacity:1}
  89%{opacity:.62} 90%{opacity:1}
  93%{opacity:.75} 94%{opacity:1}
}

/* header{overflow:hidden} in core would slice the tilted mark's
   corners and the top of the pool. */
header{overflow:visible;padding-top:4.4rem}

/* Her location was a hard-edged bordered pill in tracked caps,
   not a line of muted body text. */
.loc{
  display:inline-block;padding:10px 22px;border-radius:2px;
  background:transparent;color:#fff;
  border:1.5px solid rgba(217,165,255,.75);
  font-family:var(--font-display);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;
  box-shadow:0 0 8px rgba(176,38,255,.5), inset 0 0 10px rgba(176,38,255,.18);
  text-shadow:0 0 8px rgba(176,38,255,.6);
}
.tagline{
  font-family:var(--font-display);font-size:13px;letter-spacing:.20em;
  color:var(--pink-dark);text-shadow:0 0 12px rgba(176,38,255,.7);
}

/* ============================================================
   TYPE
   ============================================================ */
/* Her headings were tracked-out Oswald caps in white with the
   full tube glow, left-aligned. Core centres them; hers sat
   left, which is most of why the page read as designed rather
   than as a template. */
/* Every heading on her site is two voices: tracked Oswald caps beside
   her script, sitting on the same baseline, hard left. build.mjs
   splits them on the pipe in brand.js; these size them. h2 is the
   row, so both halves are ems of one number. */
h2{
  font-size:25px;text-align:left;color:#fff;
  text-shadow:0 0 2px #fff, 0 0 5px #fff, 0 0 12px var(--ribbon),
              0 0 26px var(--ribbon), 0 0 54px rgba(176,38,255,.5);
}
:root{
  --h2-justify: flex-start;
  --h2-gap:     .44em;
  --hc-size:    1em;      /* 25px — her .hc */
  --hc-tracking:.135em;   /* 3.4px at 25px */
  --hc-weight:  600;
  --hs-size:    1.84em;   /* 46px — her .hs */
  --hs-leading: .82;
}
.sub{
  text-align:left;color:var(--ink-soft);font-family:var(--font-body);
  font-style:italic;font-size:15px;letter-spacing:0;margin:8px 0 22px;
}
.sub .bow{margin-left:0}
@media(max-width:400px){ h2{font-size:21px} }

footer .script{
  font-size:2.4rem;color:#fff;
  text-shadow:0 0 2px #fff, 0 0 8px var(--ribbon), 0 0 20px rgba(176,38,255,.6);
}
footer{color:#6b5590;font-style:italic}

/* ============================================================
   THE INTRO — "Hi girls"
   ------------------------------------------------------------
   Her mark was tilted like the wordmark, and the portrait wore
   a conic gradient ring rather than a flat border. The ring is
   drawn as padding over a conic background, because a gradient
   cannot be a border-color.
   ============================================================ */
.intro-mark{
  transform:rotate(-7deg) skewX(-3deg);transform-origin:left center;
  display:inline-block;padding:2px 6px 0;color:#fff;
}
.intro .portrait{
  border:none;padding:2px;box-sizing:border-box;
  background:conic-gradient(from 210deg,
    var(--pink-dark),var(--ribbon),var(--pink-deep),var(--ribbon),var(--pink-dark));
  box-shadow:0 0 16px rgba(176,38,255,.7), 0 0 44px rgba(176,38,255,.35);
}
.intro-text{color:#e8dcf7;line-height:1.75}

/* ============================================================
   PANELS
   ------------------------------------------------------------
   Her one framed surface: a near-black gradient behind a lilac
   hairline, glowing on both sides of the line.
   ============================================================ */
.card,.ig-box,#bkMsg{
  background:linear-gradient(180deg,rgba(18,9,31,.92),rgba(9,5,17,.92));
  border:1.5px solid rgba(217,165,255,.62);
  box-shadow:0 0 7px rgba(217,165,255,.40), 0 0 22px rgba(176,38,255,.30),
             inset 0 0 18px rgba(176,38,255,.10), 0 14px 40px rgba(0,0,0,.60);
}

/* ============================================================
   BUTTONS
   ------------------------------------------------------------
   Solid violet gradient, white hairline, hard bloom. The ghost
   variant is the same shape with the fill taken out.
   ============================================================ */
.cta{
  background:linear-gradient(135deg,var(--pink-deep),var(--ribbon));
  color:#fff;border:1.5px solid rgba(255,255,255,.40);
  font-size:12px;letter-spacing:.24em;
  box-shadow:0 0 22px rgba(176,38,255,.75), 0 0 54px rgba(176,38,255,.35);
}
.cta:hover{
  background:linear-gradient(135deg,#8a12d6,#c44dff);
  box-shadow:0 0 30px rgba(176,38,255,.95), 0 0 70px rgba(176,38,255,.45);
}
.cta.ghost{
  background:transparent;border-color:var(--pink-dark);color:#fff;
  box-shadow:0 0 12px rgba(176,38,255,.45), inset 0 0 12px rgba(176,38,255,.14);
}
.cta.ghost:hover{background:rgba(176,38,255,.12);border-color:#fff}
.nav-btn{
  background:transparent;border:1.5px solid rgba(217,165,255,.45);color:var(--ink);
  box-shadow:0 0 8px rgba(176,38,255,.35), inset 0 0 8px rgba(176,38,255,.15);
}
.nav-btn:hover{border-color:#fff;box-shadow:0 0 14px rgba(176,38,255,.6)}
.nav-btn:disabled{opacity:.22;box-shadow:none}

/* ============================================================
   PRICE LIST
   ------------------------------------------------------------
   Names in light tracked caps, prices in lit Oswald, notes in
   the body italic, and a violet hairline under each row.
   ============================================================ */
.cat h3{
  font-family:var(--font-display);font-weight:400;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--pink-dark);
  text-shadow:0 0 10px rgba(176,38,255,.6);
  border-bottom:1px solid rgba(176,38,255,.25);
}
.svc{border-bottom:1px solid rgba(176,38,255,.18)}
.svc:last-child{border-bottom:none}
.svc .name{
  font-family:var(--font-display);font-size:13px;font-weight:300;
  letter-spacing:.17em;text-transform:uppercase;color:var(--ink);
}
.svc .note{
  font-family:var(--font-body);font-size:14.5px;font-style:italic;
  letter-spacing:0;text-transform:none;color:var(--ink-soft);line-height:1.45;
}
.svc .price{
  font-family:var(--font-display);font-size:16px;font-weight:500;color:#fff;
  text-shadow:0 0 8px var(--ribbon), 0 0 18px rgba(176,38,255,.7);
}
/* Her leaders were not dotted — the row was ruled underneath
   instead, so the dot leader is taken out rather than recoloured. */
.svc .dots{opacity:0}

/* ============================================================
   CALENDAR AND TIMES
   ============================================================ */
.dow div{
  font-family:var(--font-display);font-size:10px;letter-spacing:.14em;
  color:var(--pink-dark);
}
.day{
  font-family:var(--font-display);font-weight:300;
  background:transparent;border:1px solid transparent;color:var(--ink);
}
.day:hover:not(.off):not(.full){border-color:var(--pink-dark)}
/* a day with times on it is lit; an empty one is not */
.day:not(.off):not(.full){
  background:rgba(176,38,255,.08);border-color:rgba(217,165,255,.35);
  box-shadow:0 0 8px rgba(176,38,255,.25), inset 0 0 8px rgba(176,38,255,.10);
}
.day.off,.day.full{background:transparent;border-color:transparent;color:#4a3866;box-shadow:none}
.day.sel{
  background:linear-gradient(160deg,var(--ribbon),var(--pink-deep));
  border-color:#fff;font-weight:500;color:#fff;
  box-shadow:0 0 16px rgba(176,38,255,.95), 0 0 34px rgba(176,38,255,.6);
}
.pip{box-shadow:0 0 5px var(--ribbon)}
.pip.taken{box-shadow:none}
.day.sel .pip{background:#fff;box-shadow:0 0 6px #fff}

.slot{
  background:rgba(176,38,255,.07);color:var(--ink);
  border:1.5px solid rgba(217,165,255,.42);
  box-shadow:0 0 8px rgba(176,38,255,.28), inset 0 0 10px rgba(176,38,255,.10);
}
.slot.sel{
  background:linear-gradient(160deg,var(--ribbon),var(--pink-deep));border-color:#fff;color:#fff;
  box-shadow:0 0 18px rgba(176,38,255,.95), 0 0 40px rgba(176,38,255,.55);
}
.slot:disabled{opacity:.26;text-decoration:line-through;box-shadow:none}

/* ============================================================
   FORM
   ------------------------------------------------------------
   Labels are the small lilac tracked caps she used everywhere;
   fields are near-black with an inner violet wash that turns
   into a hard ring on focus.
   ============================================================ */
#bkForm label,.legend,.tt-label{
  font-family:var(--font-display);font-weight:400;letter-spacing:.20em;
  text-transform:uppercase;font-size:11px;color:var(--pink-dark);
  text-shadow:0 0 10px rgba(176,38,255,.55);
}
#bkForm input,#bkForm select,#bkForm textarea{
  background:rgba(8,4,17,.85);color:var(--ink);
  border:1.5px solid rgba(217,165,255,.32);
  font-family:var(--font-body);font-size:18px;
  box-shadow:inset 0 0 12px rgba(176,38,255,.12);
}
#bkForm input:focus,#bkForm select:focus,#bkForm textarea:focus{
  border-color:#fff;
  box-shadow:0 0 14px rgba(176,38,255,.75), inset 0 0 14px rgba(176,38,255,.2);
}
#bkForm input::placeholder,#bkForm textarea::placeholder{color:#6b5590}
#bkForm select option{background:#0c0715;color:var(--ink)}
#bkForm .opt{background:rgba(8,4,17,.85);border-color:rgba(217,165,255,.32)}
#bkForm .opt.on{box-shadow:0 0 12px rgba(176,38,255,.45);border-color:#fff}

#bkMsg b{
  font-family:var(--font-display);font-size:11px;letter-spacing:.20em;
  text-transform:uppercase;color:var(--pink-dark);font-weight:400;
}
.dep-title,.dep-btn{font-family:var(--font-display);letter-spacing:.20em;text-transform:uppercase}
.dep-title{font-size:11px;color:var(--pink-dark)}
.dep-btn{
  background:linear-gradient(135deg,var(--pink-deep),var(--ribbon));color:#fff;
  border:1.5px solid rgba(255,255,255,.34);
  box-shadow:0 0 18px rgba(176,38,255,.6);
}
.hint,.caption{color:var(--ink-soft);font-style:italic}

/* ============================================================
   DEALS
   ------------------------------------------------------------
   Hers were not cards. Two vertical rails, a tiny lilac label
   floating between them, and the title in big script.
   ============================================================ */
.deal-card{
  background:none;border:none;box-shadow:none;
  border-left:1px solid rgba(217,165,255,.45);
  border-right:1px solid rgba(217,165,255,.45);
  border-radius:0;padding:30px 26px 32px;text-align:center;
}
.deal-card .dtitle{
  font-family:var(--font-script);font-size:52px;line-height:1;color:#fff;
  text-transform:none;letter-spacing:0;
  text-shadow:0 0 2px #fff, 0 0 5px #fff, 0 0 12px var(--ribbon), 0 0 26px var(--ribbon);
}
.deal-card .dsub{
  font-family:var(--font-display);font-size:10px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--pink-dark);
}
.deal-card .dline{border-bottom:none;color:#e6dbf7;font-size:17px}

/* ============================================================
   BACKGROUND LAYERS
   ------------------------------------------------------------
   Four of them, rebuilt on elements core already provides:

     #bgBows          the three fixed violet washes
     #bgBows::before  purple flame blobs, rising and dissolving
     #bgBows::after   embers drifting up through the flames
     body::after      the vignette that pulls the edges to black

   body::after rather than ::before on purpose: a ::before is
   the first child and would paint UNDER #bgBows, putting the
   vignette beneath the flames it is supposed to darken.
   ============================================================ */
#bgBows{
  background-image:
    radial-gradient(circle at 18% 8%,  rgba(176,38,255,.22), transparent 42%),
    radial-gradient(circle at 84% 26%, rgba(114,9,183,.20), transparent 46%),
    radial-gradient(circle at 50% 88%, rgba(176,38,255,.14), transparent 52%),
    linear-gradient(180deg,#0a0514,#05030a 55%,#0a0514);
  background-repeat:no-repeat;background-size:cover;opacity:1;
}

/* The flames. Hers were five separately animated blobs; one
   pseudo-element cannot hold five independent animations, so
   this is three gradient layers on one element whose sizes and
   positions drift on different keyframe fractions — the same
   slow, unsynchronised rise, at a fraction of the cost. */
#bgBows::before{
  content:"";position:absolute;inset:-20% -10%;
  background:
    radial-gradient(circle at 50% 62%, rgba(240,180,255,.62), rgba(186,44,255,.44) 24%, rgba(120,12,200,.24) 44%, transparent 68%) 6% 100%/60vw 60vw no-repeat,
    radial-gradient(circle at 50% 62%, rgba(240,180,255,.55), rgba(186,44,255,.40) 24%, rgba(120,12,200,.22) 44%, transparent 68%) 52% 100%/46vw 52vw no-repeat,
    radial-gradient(circle at 50% 62%, rgba(240,180,255,.50), rgba(186,44,255,.36) 24%, rgba(120,12,200,.20) 44%, transparent 68%) 92% 100%/64vw 58vw no-repeat;
  filter:blur(26px) saturate(155%) contrast(118%);
  /* .42 rather than her .55: her blobs were sized in vw against a
     620px column, and on a 1280px desktop the same vw sizes bloom
     wide enough to lift the whole price list off the black. */
  opacity:.42;
  animation:vane-fire 21s linear infinite;
}
@keyframes vane-fire{
  0%  {background-position:6% 130%, 52% 150%, 92% 120%}
  100%{background-position:6% -60%, 52% -80%, 92% -50%}
}

/* Embers. Five dots carried as box-shadows on one 4px element,
   so they rise together as a group rather than independently —
   the only visible compromise in the background. */
#bgBows::after{
  content:"";position:absolute;left:14%;bottom:-4%;
  width:4px;height:4px;border-radius:50%;background:#f0d0ff;
  box-shadow:
    0 0 6px #fff, 0 0 14px #d9a5ff, 0 0 26px var(--ribbon),
    22vw 12vh 0 -1px #f0d0ff, 39vw -8vh 0 0 #f0d0ff,
    58vw 18vh 0 -1px #f0d0ff, 74vw 4vh 0 0 #f0d0ff;
  animation:vane-ember 12s linear infinite;
}
@keyframes vane-ember{
  0%  {transform:translateY(0) translateX(0) scale(1);opacity:0}
  12% {opacity:1}
  80% {opacity:.6}
  100%{transform:translateY(-104vh) translateX(28px) scale(.3);opacity:0}
}

/* The vignette. Without this the flames wash the corners out
   and the page stops reading as black. */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 72% 58% at 50% 40%,
    transparent 26%, rgba(5,3,10,.80) 72%, #05030a 96%);
}

::selection{background:rgba(176,38,255,.35);color:#fff}

/* Her file cut every animation for anyone who asks for less
   motion, and so does this one. */
@media(prefers-reduced-motion:reduce){
  h1,.header-top::before,#bgBows::before,#bgBows::after{animation:none}
}


/* ============================================================
   FIXES FROM LOOKING AT THE BUILT PAGE
   ------------------------------------------------------------
   Rendered at 390 and 1280 and read back. Everything here is a
   thing that was wrong on screen, not a thing that looked wrong
   in the file.
   ============================================================ */

/* THE ORNAMENT HAD TO GO. Core sprinkles the motif in five
   places — over the mark, under every subhead, on the button,
   in the deal card, beside the policies. Her page has none of
   that: the wordmark is the only decorated thing on it, and a
   placeholder star sitting above it was reading as the logo.
   (motif.svg is still the shipped placeholder, so this is
   correct twice over — but it stays hidden even once she has
   artwork of her own, because her design never had it.) */
.bow{display:none}
.crown.bow{display:none}

/* The policy bullet was that same star. Hers were not bulleted
   at all — each policy was a lit caps title over body text —
   so this is the nearest honest thing: a small lit diamond,
   drawn rather than an image. */
.card li::before{
  background:none;background-color:var(--pink-dark);
  width:7px;height:7px;left:3px;top:1.15rem;
  transform:rotate(45deg);
  box-shadow:0 0 6px var(--ribbon), 0 0 14px rgba(176,38,255,.55);
}
.card li:first-child::before{top:.62rem}
/* and her policy text was the reading face, not the label face */
.card li{
  font-family:var(--font-body);font-weight:400;font-size:15.5px;
  color:#ddd0f0;padding-left:1.9rem;border-bottom-color:rgba(176,38,255,.18);
}

/* THE WORDMARK WRAPPED. "Nailed by Vane" is 14 characters where
   her old mark was the single word "nailedxvane", so at her 17vw
   it broke across two lines and the tilt turned into a stagger.
   One line, always — it is the whole header. */
h1{
  white-space:nowrap;
  font-size:clamp(38px, 11.5vw, 84px);
  max-width:100%;
}

/* The wordmark is rotated -10deg, so its right end climbs above
   its own box and the pool bleeds further still. Core's 3.5rem
   of header padding left both touching the top of the screen. */
header{padding-top:5.6rem}

/* One more inline motif core sets with a style attribute rather
   than a class, so `.bow{display:none}` above does not reach it:
   the little mark after "send me a message". */
#dmLink + span{display:none}


/* ============================================================
   THE PIECES CORE GAINED FOR HER
   ------------------------------------------------------------
   Sizes and colours straight off her old stylesheet.
   ============================================================ */

/* --- the info strip: three tiles, hairline rules between --- */
:root{
  --tile-gap:        .5rem;
  --tile-margin:     .5rem 0 2.9rem;
  --tile-rule:       rgba(217,165,255,.25);
  --tile-k-size:     9px;
  --tile-k-tracking: .24em;
  --tile-k-color:    var(--pink-dark);
  --tile-v-size:     12px;
  --tile-v-tracking: .09em;
  --tile-v-color:    #ffffff;
}
.it-v{font-weight:400}

/* --- policies and prepare, written TITLE | body --- */
:root{
  --li-t-size:     10.5px;
  --li-t-tracking: .21em;
  --li-t-color:    #ffffff;
  --li-t-weight:   400;
  --li-b-size:     14.5px;
  --li-b-color:    #ddd0f0;
}
/* the title is lit like every other label of hers */
.li-t{text-shadow:0 0 6px var(--ribbon), 0 0 16px rgba(176,38,255,.7)}
/* With a title carrying each line, the bullet is one mark too many —
   hers had none. The rule that draws it is in the fixes block above,
   so this turns that off again rather than fighting it. */
.card li:has(.li-t)::before{display:none}
.card li:has(.li-t){padding-left:0;border-bottom:none;padding-top:.55rem;padding-bottom:.55rem}

/* --- the sparkle field --- */
:root{
  --sparkle-opacity: .4;
  --sparkle-color:   var(--pink-dark);
  --sparkle-glow:    0 0 8px var(--ribbon), 0 0 18px var(--ribbon);
  --sparkle-speed:   3.4s;
}

/* Her policies and prepare lines sit straight on the page, not in a
   panel — on her old site the calendar was the ONLY framed thing, and
   putting a lit border around a wall of text made the page read as a
   stack of boxes instead of one long scroll. */
#policy-sec .card,#prepare-sec .card{
  background:none;border:none;box-shadow:none;padding:0;
}