/* /book: the booking calendar (Cal.com) inside the site. Scoped under .pg-book. */
.pg-book {
  --bk-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --bk-gutter: clamp(20px, 5vw, 48px);
  --bk-rule: rgba(var(--ink-rgb), 0.14);
  background: var(--bg);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(15px, 0.5vw + 13.8px, 17px);
  line-height: 1.6;
  padding-top: 104px;
  padding-bottom: clamp(56px, 8vw, 104px);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
:where(.pg-book) *, :where(.pg-book) *::before, :where(.pg-book) *::after { box-sizing: border-box; }
:where(.pg-book) p, :where(.pg-book) h1, :where(.pg-book) ul { margin: 0; padding: 0; }
:where(.pg-book) ul { list-style: none; }
:where(.pg-book) a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
:where(.pg-book) a:hover { text-decoration-thickness: 2px; }
:where(.pg-book) a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.bk-wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--bk-gutter); }
.bk-mono { font-family: var(--bk-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }

.bk-hero { padding-block: clamp(20px, 3vw, 44px) clamp(28px, 4vw, 48px); background: linear-gradient(180deg, var(--surface), var(--bg)); }
.bk-crumb { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--bk-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 26px; }
.pg-book .bk-crumb a { color: inherit; text-decoration: none; }
.pg-book .bk-crumb a:hover { color: var(--accent); }
.bk-crumb [aria-current] { color: var(--ink); }
.bk-label { display: flex; align-items: center; gap: 12px; font-family: var(--bk-mono); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); margin-bottom: 18px; }
.bk-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.bk-h1 { font-size: clamp(2.3rem, 4.6vw + 0.6rem, 4.4rem); font-weight: 400; letter-spacing: -0.04em; line-height: 1.04; }
.bk-h1 span { color: var(--accent); }
.bk-lede { margin-top: 22px; color: var(--muted); max-width: 56ch; font-size: 1.04em; }
.bk-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 3vw, 36px); margin-top: clamp(28px, 4vw, 44px); padding-top: 20px; border-top: 2px solid var(--ink); }
.bk-facts li { display: grid; gap: 8px; align-content: start; color: var(--ink); }
.bk-facts .bk-mono { color: var(--accent); }

.bk-cal { padding-top: clamp(8px, 2vw, 20px); }
.bk-card { position: relative; min-height: 640px; padding: clamp(6px, 1.2vw, 14px); border-radius: 26px; background: var(--card); border: 1px solid var(--bk-rule); box-shadow: 0 30px 60px -40px rgba(var(--ink-rgb), 0.45); overflow: hidden; }
.bk-embed { width: 100%; min-height: 620px; }
.bk-loading { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); font-size: 1rem; pointer-events: none; z-index: 0; }
.bk-loading::after { content: ""; width: 7px; height: 7px; margin-left: 10px; border-radius: 50%; background: var(--accent); display: inline-block; animation: bk-pulse 1.2s ease-in-out infinite; }
.bk-card.is-ready .bk-loading { display: none; }
@keyframes bk-pulse { 0%, 100% { opacity: 0.25; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) { .bk-loading::after { animation: none; } }
.bk-fallback { margin-top: 16px; color: var(--muted); }
.bk-after { display: grid; gap: 10px; margin-top: 22px; color: var(--ink); }
.bk-small { color: var(--muted); font-size: 0.9rem; }
.pg-book .bk-btn { display: inline-flex; align-items: center; min-height: 52px; padding: 0 26px; border: 1.5px solid var(--ink); border-radius: 999px; color: var(--ink); font-weight: 600; text-decoration: none; transition: background 0.2s, color 0.2s; }
.pg-book .bk-btn:hover { background: var(--ink); color: var(--bg); }

@media (max-width: 760px) {
  .bk-facts { grid-template-columns: 1fr; gap: 14px; }
  .bk-card { border-radius: 20px; min-height: 560px; }
  .bk-embed { min-height: 540px; }
}