/* Chalkboard Bistro — direction B from the Ember and Oak canvas.
   Overlay on studio.css: board texture, Caveat chalk hand, taped photos. */
:root {
  --chalk: #eef0ea;
  --chalk-yellow: #f4c96b;
  --chalk-hand: 'Caveat', cursive;
  --chalk-body: 'Work Sans', 'Segoe UI', sans-serif;
}
body { font-family: var(--chalk-body); }

/* the board itself: streaks + wipe marks over whatever page color is live */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E"),
    radial-gradient(42% 16% at 22% 30%, rgba(238,240,234,0.045) 0%, transparent 70%),
    radial-gradient(36% 13% at 74% 55%, rgba(238,240,234,0.038) 0%, transparent 70%),
    radial-gradient(46% 15% at 40% 78%, rgba(238,240,234,0.032) 0%, transparent 70%),
    radial-gradient(30% 11% at 85% 16%, rgba(238,240,234,0.04) 0%, transparent 70%),
    repeating-linear-gradient(93deg, rgba(255,255,255,0.018) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(2deg, rgba(0,0,0,0.13) 0 3px, transparent 3px 9px),
    radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,0.42) 100%);
}

.brand, .logo { font-family: var(--chalk-hand) !important; font-size: 1.6rem !important; color: var(--chalk-yellow) !important; transform: rotate(-1.2deg); display: inline-block; padding: 0 0.3em 0.1em 0; }

h1, h2, .display, .display-sm {
  font-family: var(--chalk-hand) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--chalk);
}
h1 { font-size: clamp(3rem, 7.5vw, 5.4rem) !important; line-height: 1.02 !important; transform: rotate(-1deg); }
h2 { transform: rotate(-0.8deg); display: inline-block; }
h2::after {
  content: ""; display: block; width: 70%; margin-top: 4px;
  border-bottom: 3px solid rgba(244, 201, 107, 0.7); border-radius: 50%;
  transform: rotate(-1deg);
}
h1 em, h2 em, .display em { color: var(--chalk-yellow) !important; font-style: normal !important; }

.btn, .cta {
  font-family: var(--chalk-hand) !important; font-size: 1.25rem !important;
  letter-spacing: 0.02em !important; text-transform: none !important;
  background: var(--chalk-yellow) !important; color: #1b1f1d !important;
  border-radius: 2px !important; transform: rotate(-1.5deg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.btn-ghost, .btn.ghost { background: transparent !important; color: var(--chalk-yellow) !important; border: 2px dashed rgba(244, 201, 107, 0.6) !important; }

.photo-strip img, .gallery img, .card img {
  border: 6px solid #2c322e; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  border-radius: 0 !important;
}
.photo-strip figure:nth-child(odd) img, .gallery a:nth-child(odd) img { transform: rotate(0.7deg); }
.photo-strip figure:nth-child(even) img, .gallery a:nth-child(even) img { transform: rotate(-0.7deg); }

.plan, .card, .review {
  background: rgba(255, 255, 255, 0.025) !important;
  border: 2px solid rgba(238, 240, 234, 0.14) !important;
  border-radius: 3px !important;
  backdrop-filter: none !important;
}
.plan-price { font-family: var(--chalk-hand) !important; font-size: 2.1rem !important; color: var(--chalk-yellow) !important; }
.plan.featured, .plan[data-featured] { border-color: rgba(244, 201, 107, 0.65) !important; }

.timetable td, .timetable th { border-bottom: 1px dashed rgba(238, 240, 234, 0.18) !important; }

.marquee, .marquee-track { font-family: var(--chalk-hand); font-size: 1.15rem; letter-spacing: 0.05em; color: rgba(238, 240, 234, 0.7); }

/* chalk lettering: strokes filled with dust grain, not flat pixels */
h1, h2, .display, .display-sm, .plan-price, .brand, .logo, .marquee-track {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.85 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"),
    linear-gradient(175deg, #f4f6f0 0%, #d9ddd2 55%, #eef0ea 100%);
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
  filter: drop-shadow(0 0 1px rgba(238, 240, 234, 0.35));
}
.brand, .logo, .plan-price, h1 em, h2 em, .display em {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.85 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E"),
    linear-gradient(175deg, #ffd98a 0%, #e3b64f 55%, #f4c96b 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
}
h1 em, h2 em, .display em { filter: drop-shadow(0 0 1px rgba(244, 201, 107, 0.4)); }

::selection { background: var(--chalk-yellow); color: #1b1f1d; }