/* PADSTAL · rustic farm stall / plaas-padstal
   Warm earth: terracotta, ochre, sun-bleached cream. Slab serif heads (Bitter) +
   friendly sans (Nunito Sans). Paper grain + gingham motif. Default hero: split. */
:root {
  --c-bg: #f6eedf;
  --c-surface: #fffaf1;
  --c-surface-2: #efe1c6;
  --c-text: #3b2416;
  --c-muted: #644733;
  --c-primary: #9c3f25;
  --c-on-primary: #fffaf1;
  --c-accent: #d4952a;
  --c-on-accent: #2b1a0f;
  --c-accent-text: #8a4b12;
  --c-line: #d9c19b;
  --c-hero-bg: #5b2f1b;
  --c-hero-text: #fff6e6;
  --c-cta: var(--c-accent);       /* one CTA colour: ochre reads on the dark hero, so it is the main action everywhere */
  --c-on-cta: var(--c-on-accent);
  --c-cta-edge: var(--c-on-accent); /* dark 2px edge: the ochre button stands out on the cream page too (UI contrast >= 3:1) */
  --c-footer-bg: #3b2416;
  --c-footer-text: #f6eedf;
  --c-ph-a: #e6c9a0; --c-ph-b: #d9b07a;
  --c-ph-label-text: #3b2416;

  --f-head: "Bitter", "Rockwell", Georgia, serif;
  --f-body: "Nunito Sans", system-ui, sans-serif;
  --fw-head: 700;
  --radius-s: 4px; --radius-m: 8px; --radius-l: 14px; --radius-btn: 8px;
  --shadow: 0 2px 0 #d9c19b;
  --motif-color: #9c3f25;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .2 0 0 0 0 .08 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --texture: var(--grain);
  --hero-texture: var(--grain), radial-gradient(ellipse at 80% 0%, #8a4628 0%, transparent 60%);
  --ph-pattern: var(--grain), linear-gradient(160deg, #e9cfa6 0%, #d39b5e 55%, #9c5a32 100%);
}
.brand__mark { border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); box-shadow: 0 0 0 3px var(--c-bg), 0 0 0 5px var(--c-accent); }
.hero h1 { font-weight: 700; }
/* (round 2) hero button colour now comes from --c-cta, like every other main action */
.site-header { border-bottom: 0; box-shadow: 0 6px 0 -2px var(--c-bg), 0 8px 0 -2px var(--c-line); }
.card { border-width: 2px; }
.card__title::after { content: ""; display: block; width: 2.5rem; height: 3px; margin-top: .4rem; background: var(--c-accent); border-radius: 2px; }
.hours__table th, .hours__table td { border-bottom-style: dotted; border-bottom-width: 2px; }