/* Clay Cottage concept, "paint and glaze" variation: brush strokes under headings and behind the
   current menu item, and a glazed shine on buttons. Loaded after style.css; nothing else changes. */
:root {
  --stroke-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-5%25' y='-60%25' width='110%25' height='220%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .55' numOctaves='2' seed='4'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='11'/%3E%3C/filter%3E%3Cpath filter='url(%23r)' d='M8 9Q150 3 292 8L286 16Q150 20 12 17Z' fill='%23f6d365'/%3E%3C/svg%3E");
  --stroke-wall: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 24' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-5%25' y='-60%25' width='110%25' height='220%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .55' numOctaves='2' seed='9'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='11'/%3E%3C/filter%3E%3Cpath filter='url(%23r)' d='M8 9Q150 3 292 8L286 16Q150 20 12 17Z' fill='%234fb7b7'/%3E%3C/svg%3E");
  --stroke-teal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cfilter id='r' x='-5%25' y='-30%25' width='110%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.01 .3' numOctaves='2' seed='7'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='14'/%3E%3C/filter%3E%3Cpath filter='url(%23r)' d='M10 12Q150 4 290 10L284 50Q150 56 14 49Z' fill='%23157a68'/%3E%3C/svg%3E");
  --glaze: linear-gradient(180deg, rgb(255 255 255 / 0.34), rgb(255 255 255 / 0.08) 46%, rgb(255 255 255 / 0) 52%);
}

/* ---- Brush strokes ---- */
h2, .hero h1, .page-head h1 { padding-bottom: 0.46em; background: var(--stroke-wall) no-repeat left bottom / min(9.5rem, 70%) 0.42em; }
.hero h1, .page-head h1, .band.teal h2 { background-image: var(--stroke-sun); }
.hero h1, .page-head h1 { background-size: min(15rem, 80%) 0.34em; }
.card h2 { background-size: 7rem 0.42em; }
.site-nav a[aria-current="page"] { background: var(--stroke-sun) no-repeat left 0.25rem bottom 0.45rem / 4.5rem 0.5rem; color: var(--teal-deep); }

/* ---- Glazed pieces ---- */
.btn, ol.steps li::before, .dock-main { background-image: var(--glaze); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.16), 0 2px 5px rgb(13 79 69 / 0.22); }
.btn { border-color: transparent; }
.btn:hover { border-color: transparent; }
.btn.ghost { background-color: #fff; background-image: var(--glaze); box-shadow: inset 0 0 0 2px var(--teal), inset 0 -3px 0 rgb(0 0 0 / 0.08), 0 2px 5px rgb(13 79 69 / 0.15); }
.btn.ghost:hover { background-color: var(--teal); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.16); }
.dock-main { box-shadow: none; }
.drop, .hours .is-today { background-image: var(--glaze); box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.1); }

@media (min-width: 60rem) {
  .site-nav a[aria-current="page"] { background: var(--stroke-teal) no-repeat center / 100% 100%; color: #fff; border-radius: 0; }
}