/* EmCat Does Hair: shared tokens + faces. One loud light theme by brand decision. */
@font-face{font-family:"Dela Gothic One";src:url("../fonts/DelaGothicOne-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("../fonts/BricolageGrotesque-var.woff2") format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Covered By Your Grace";src:url("../fonts/CoveredByYourGrace-400.woff2") format("woff2");font-weight:400;font-display:swap}

:root{
  color-scheme:light;
  /* the dyes */
  --orchid:#F486E8; --sky:#8FD8F8; --yellow:#FFE61F; --magenta:#C80F92; --blue:#2238E0; --purple:#7A2BD6; --black:#0E0E12; --white:#fff;
  --ink:#0E0E12; --pen:#2238E0; --quiet:#5B5461; --hov:var(--yellow);
  --shout:"Dela Gothic One","Bricolage Grotesque",sans-serif;
  --talk:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --hand:"Covered By Your Grace","Bradley Hand",cursive;
  --ease:cubic-bezier(.16,1,.3,1);
  --lift:0 2px 5px rgba(14,14,18,.16),0 22px 38px -20px rgba(14,14,18,.55);
  /* the names the /admin and /visit pages were written against */
  --cream:#fff; --linen:#F6EFF7; --blush:#FBDDF7; --taupe:#5B5461; --taupe-soft:#6E6675; --brass:#C80F92;
  --ink-deep:#000; --surface:#fff; --line:#E2D9E5; --rule:#E2D9E5; --page:#fff;
  --ok:#17703A; --bad:#C01F2A; --bad-tint:#FBE4E6;
  --serif:var(--talk); --sans:var(--talk); --script:var(--hand);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--black) var(--orchid)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;transition-duration:.01ms !important}}
body{background:var(--white);color:var(--ink);font-family:var(--talk);font-weight:400;font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
::selection{background:var(--yellow);color:var(--black)}
input,textarea,select,button{font:inherit;color:inherit;caret-color:var(--magenta)}
a{color:inherit;text-decoration-color:currentColor;text-underline-offset:.2em;text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--black);outline-offset:3px}
img{max-width:100%;display:block}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
