/* Faces By Em brand tokens. Source of truth for the booking app; Squarespace's Custom CSS mirrors these. */
@font-face {
  font-family: "Bogart";
  src: url("/fonts/bogart-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("/fonts/work-sans-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --fbe-pink: #f9dae1;
  --fbe-black: #000000;
  --fbe-pink-soft: rgba(249, 218, 225, 0.78);
  --fbe-gradient: url("/brand/gradient.jpg");
  --font-display: "Bogart", Georgia, "Times New Roman", serif;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  background: var(--fbe-pink);
  color: var(--fbe-black);
  font: 400 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

main { width: 100%; max-width: 34rem; text-align: center; }

.card {
  background: var(--fbe-black);
  color: var(--fbe-pink);
  border-radius: 28px;
  padding: clamp(36px, 8vw, 56px) clamp(22px, 6vw, 48px);
}

/* The wordmark: the brand gradient clipped into the letters. Falls back to solid pink. */
.wordmark {
  margin: 0 0 28px;
  font: 600 clamp(2.4rem, 11vw, 3.6rem)/1.05 var(--font-display);
  letter-spacing: -0.01em;
  color: var(--fbe-pink);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .wordmark {
    background: var(--fbe-gradient) center / cover no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}

h1 {
  margin: 0 0 14px;
  font: 600 clamp(1.5rem, 5.5vw, 2rem)/1.2 var(--font-display);
}

p { margin: 0 0 12px; color: var(--fbe-pink-soft); }
p:last-child { margin-bottom: 0; }

.card a {
  color: var(--fbe-pink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.back {
  display: inline-block;
  margin-top: 22px;
  color: var(--fbe-black);
  font-weight: 500;
  text-underline-offset: 3px;
}

a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }