/* ripeleads.eu booking: the site's own system on top of book.css (which already carries
   the paper/ink/coral tokens). What this adds is what made the page read generic:
   the header lockup (mark + lowercase "ripeleads" in Clash Display, as in the site nav),
   the Azeret Mono eyebrow with the coral dot (site: "• PRICING", "• RECEIVED"),
   Clash Display set tight like the site's headlines, the site radius scale
   (6 / 12 / 20, buttons at weight 500) and one ripe apricot from the hero.
   Fonts for the page stay in rl-fonts.css (Fontshare); Azeret Mono is self-hosted here. */
@font-face{font-family:'Azeret Mono';src:url(azeret-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --r-panel:20px; --r-ctl:12px; --r-sm:6px;
  --mono:'Azeret Mono',ui-monospace,Menlo,Consolas,monospace;
  --accent-text:#B63D19; --line-soft:rgba(21,18,14,.28);
  --shadow:0 30px 70px -40px rgba(21,18,14,.28);
}

/* Header lockup, the same proportions as the site nav: 28px mark, 22px wordmark. */
.bk-brand{gap:8px;font:600 22px/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.bk-brand .bk-logo{width:28px;height:28px}

/* Headlines: Clash Display 600 set tight, like the site's h1/h2. Clash's word space is
   narrow, so tight tracking gets a little word spacing back or the words run together. */
.bk-title{font-size:38px;line-height:1.02;letter-spacing:-.03em;word-spacing:.08em;margin:16px 0 18px}
.bk-step{font-size:24px;letter-spacing:-.015em;word-spacing:.08em}
.bk-when-big{letter-spacing:-.01em;word-spacing:.08em}

/* Eyebrow: Azeret Mono, spaced capitals, a coral dot. Used for the manage-page state. */
.bk-badge{background:none;padding:0;border-radius:0;margin:0 0 14px;font:500 12px/1.4 var(--mono);letter-spacing:.2em;
  text-transform:uppercase;color:var(--accent-text);display:inline-flex;align-items:center;gap:10px}
.bk-badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--coral);flex:none}
.bk-badge-off{color:var(--stone)}
.bk-badge-off::before{background:var(--stone)}

/* Facts and day names in the site's mono voice. */
.bk-facts{font-weight:500}
.bk-wd{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:10px 0}

/* Controls on the site's radius scale. The picked day uses the deep coral so its
   number keeps 4.5:1 on white. */
.bk-day.bk-sel{background:var(--coral-deep)}
.bk-btn{font-weight:500;border-width:1.5px;border-color:var(--line-soft)}
.bk-btn-primary{border-color:var(--coral-deep)}
.bk-btn-danger{border-color:var(--red)}
.bk-time{font-weight:500;border-color:var(--line-soft)}
.bk-nav{border-color:var(--line-soft)}

/* One ripe apricot from the site hero, bottom of the info column (desktop only). */
.bk-info:not(.bk-info-wide){position:relative;padding-bottom:132px}
.bk-info:not(.bk-info-wide)::after{content:'';position:absolute;left:28px;bottom:28px;width:72px;height:72px;
  background:url(mail-apricot-confirmed.png) no-repeat center/contain;pointer-events:none}

/* A cancelled meeting gets the green apricot, as its mail does. */
.bk-shell:has(.bk-badge-off) .bk-info::after{background-image:url(mail-apricot-cancelled.png)}

/* Tablet widths: keep the panel off the screen edges. */
@media (min-width:721px) and (max-width:1080px){.bk-shell{width:auto;margin:32px 24px 24px}}

@media (max-width:720px){
  .bk-title{font-size:30px}
  .bk-info:not(.bk-info-wide){padding-bottom:20px}
  .bk-info:not(.bk-info-wide)::after{display:none}
}