/* Booking Friend tokens. Our own brand: warm paper, ink lines, serif voice. */
:root{
  --paper:#f4f1ea; --paper-2:#ebe7dd; --card:#ffffff;
  --ink:#1f1d1a; --ink-70:rgba(31,29,26,.7); --ink-50:rgba(31,29,26,.5); --ink-25:rgba(31,29,26,.25);
  --line:#e3ded2; --line-strong:#cbc4b3;
  --coat:#e5a955; --coat-2:#c98a3a; --nose:#2f2a26; --tongue:#e8806f;
  --accent:#d9572c; --accent-ink:#fff;
  --tag:#f6d9a6; --tag-ink:#6b3a12;
  --mint:#d8ecd9; --mint-ink:#2f6b3a; --sky:#d9e7f3; --sky-ink:#1f5f86; --butter:#f6ecc4; --butter-ink:#6b5a12; --blush:#f5dde3; --blush-ink:#8a3a56;
  --lilac:#e6dcf6; --lilac-ink:#4e2f86; --tomato:#f8d3c9; --tomato-ink:#9b2c1c; --beanie:#1652c8; --beanie-2:#0f3f9e;
  --ok:#4caf6e;
  --serif:'Rokkitt','Zilla Slab',Georgia,serif;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',Helvetica,Arial,sans-serif;
  --r-card:14px; --r-pill:999px;
  --shadow:0 10px 30px rgba(31,29,26,.10), 0 2px 6px rgba(31,29,26,.06);
  --pop:cubic-bezier(.34,1.45,.64,1); --out:cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:-.01em;margin:0}
button{font:inherit;color:inherit;cursor:pointer}
.tag{display:inline-block;font-family:var(--serif);font-size:14px;line-height:1.3;padding:2px 7px;background:var(--tag);color:var(--tag-ink);border-radius:3px;white-space:nowrap}
.pill{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:var(--r-pill);border:1.5px solid var(--ink);background:var(--card);font-weight:500;line-height:1}
.pill.ink{background:var(--ink);color:#fff}
.pill.accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card)}
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .25 0'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>")}