/* Dorpsdraad starter kit · base.css
   Shared layout + components. Everything visual is driven by the tokens below;
   each style in styles/*.css overrides the tokens (and adds a few flourishes).
   Mobile-first: base rules = phone, @media (min-width: 48rem / 64rem) = bigger. */

:root {
  /* --- palette --- */
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-surface-2: #f3f3f3;
  --c-text: #1a1a1a;
  --c-muted: #555555;
  --c-primary: #1a1a1a;
  --c-on-primary: #ffffff;
  --c-accent: #c2561a;
  --c-on-accent: #ffffff;
  --c-cta: var(--c-primary);      /* ONE colour for the main action (hero, contact, floating button); brief token to change it */
  --c-on-cta: var(--c-on-primary);
  --c-line: #e2e2e2;
  --c-hero-bg: var(--c-bg);
  --c-hero-text: var(--c-text);
  --c-footer-bg: var(--c-text);
  --c-footer-text: var(--c-bg);
  --c-ph-a: #e8e8e8;        /* placeholder image colours */
  --c-ph-b: #d6d6d6;
  --c-ph-label-bg: rgba(255,255,255,.88);
  --c-ph-label-text: #1a1a1a;

  /* --- type --- */
  --f-head: Georgia, "Times New Roman", serif;
  --f-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fw-head: 700;
  --fw-body-bold: 700;
  --ls-head: 0;
  --tt-head: none;
  --fs-eyebrow: .8rem;
  --ls-eyebrow: .14em;
  --tt-eyebrow: uppercase;
  --lh-head: 1.12;
  --step--1: clamp(.85rem, .82rem + .15vw, .95rem);
  --step-0: clamp(1rem, .96rem + .2vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.1rem + .5vw, 1.45rem);
  --step-2: clamp(1.45rem, 1.25rem + 1vw, 2rem);
  --step-3: clamp(1.8rem, 1.4rem + 2vw, 2.9rem);
  --step-4: clamp(2.2rem, 1.5rem + 3.4vw, 4.2rem);

  /* --- space / shape --- */
  --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem;
  --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem;
  --section-pad: clamp(3rem, 2rem + 5vw, 6rem);
  --max-w: 72rem;
  --radius-s: 4px; --radius-m: 10px; --radius-l: 20px; --radius-btn: 999px;
  --radius-ph: var(--radius-m);
  --border-w: 1px;
  --shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);

  /* --- texture (CSS only) --- */
  --texture: none;                      /* body background-image */
  --hero-texture: none;                 /* extra layer on hero */
  --ph-pattern: repeating-linear-gradient(135deg, var(--c-ph-a) 0 14px, var(--c-ph-b) 14px 28px);
  --motif-color: var(--c-accent);
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  background-color: var(--c-bg);
  background-image: var(--texture);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3 {
  font-family: var(--f-head); font-weight: var(--fw-head);
  letter-spacing: var(--ls-head); text-transform: var(--tt-head);
  line-height: var(--lh-head); margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
p { margin: 0 0 var(--space-4); max-width: 65ch; }
a { color: inherit; text-underline-offset: .18em; }
a:focus-visible, .btn:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
address { font-style: normal; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--c-primary); color: var(--c-on-primary); padding: var(--space-3) var(--space-4); z-index: 100; }
.skip:focus { left: var(--space-4); top: var(--space-4); }
.wrap { width: min(100% - 2.5rem, var(--max-w)); margin-inline: auto; }

/* ---------- preview bar ---------- */
.previewbar { background: var(--c-text); color: var(--c-bg); font-size: var(--step--1); text-align: center; padding: var(--space-2) var(--space-4); }
.previewbar p { margin: 0 auto; max-width: none; }

/* ---------- header ---------- */
.site-header { background: var(--c-bg); border-bottom: var(--border-w) solid var(--c-line); position: relative; z-index: 20; }
.site-header__inner { display: flex; flex-direction: column; gap: var(--space-2); padding-block: var(--space-3); }
.brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.brand__mark {
  flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem;
  background: var(--c-primary); color: var(--c-on-primary); border-radius: var(--radius-btn);
  font-family: var(--f-head); font-weight: var(--fw-head); font-size: 1.25rem;
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-family: var(--f-head); font-weight: var(--fw-head); font-size: var(--step-1); letter-spacing: var(--ls-head); text-transform: var(--tt-head); }
.brand__tag { font-size: var(--step--1); color: var(--c-muted); }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; }
.site-nav a { display: block; padding: var(--space-2) var(--space-3); text-decoration: none; font-size: var(--step--1); font-weight: var(--fw-body-bold); border-radius: var(--radius-btn); white-space: nowrap; }
.site-nav a:hover { background: var(--c-surface-2); }
@media (min-width: 48rem) {
  .site-header { position: sticky; top: 0; }
  .site-header__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-btn); border: 2px solid transparent;
  font-family: var(--f-body); font-weight: var(--fw-body-bold); font-size: var(--step-0);
  text-decoration: none; line-height: 1.2; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--c-cta); color: var(--c-on-cta); border-color: var(--c-cta-edge, transparent); }
.btn--ghost { background: transparent; color: currentColor; border-color: currentColor; }
.btn--big { font-size: var(--step-1); padding: var(--space-4) var(--space-6); }
.icon { width: 1.25em; height: 1.25em; fill: currentColor; }

/* ---------- eyebrow / section heads ---------- */
.eyebrow { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-eyebrow); text-transform: var(--tt-eyebrow); font-weight: var(--fw-body-bold); color: var(--c-accent-text, var(--c-muted)); margin-bottom: var(--space-3); }
.section { padding-block: var(--section-pad); position: relative; }
.section:nth-of-type(even) { background: var(--c-surface-2); }
.section__head { margin-bottom: var(--space-6); }
.section__intro { color: var(--c-muted); font-size: var(--step-1); line-height: 1.5; }

/* ---------- placeholder imagery (CSS only, clearly labelled) ---------- */
.ph { margin: 0; position: relative; background: var(--ph-pattern); border-radius: var(--radius-ph); overflow: hidden; display: grid; place-items: end center; min-height: 10rem; }
.ph__label {
  background: var(--c-ph-label-bg); color: var(--c-ph-label-text);
  font: 600 .78rem/1.3 var(--f-body); letter-spacing: .03em;
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); margin: var(--space-3); text-align: center; max-width: 90%;
}
.ph--hero { aspect-ratio: 4 / 3; }
.ph--portrait { aspect-ratio: 4 / 5; }
.ph--card { aspect-ratio: 3 / 2; border-radius: 0; min-height: 0; }

/* ---------- hero (variants: split | full | stamp | minimal) ---------- */
.hero { background-color: var(--c-hero-bg); background-image: var(--hero-texture); color: var(--c-hero-text); padding-block: var(--space-7) var(--section-pad); position: relative; overflow: hidden; }
.hero__inner { display: grid; gap: var(--space-6); align-items: center; }
.hero .lead { font-size: var(--step-1); line-height: 1.5; opacity: .95; }
.hero .eyebrow { color: inherit; opacity: .9; }
@media (min-width: 56rem) {
  .hero--split .hero__inner { grid-template-columns: 1.1fr 1fr; gap: var(--space-8); }
}
/* full-bleed: placeholder becomes the background (desktop), text sits on a card */
.hero--full .hero { padding: 0; }
.hero--full .hero__inner { width: 100%; max-width: none; display: flex; flex-direction: column; gap: 0; }
.hero--full .ph--hero { order: -1; aspect-ratio: 4 / 3; border-radius: 0; min-height: 16rem; place-items: start center; }
.hero--full .hero__text {
  position: relative; z-index: 1; margin: -3.5rem var(--space-4) var(--space-6); padding: var(--space-6) var(--space-5);
  background: var(--c-hero-bg); color: var(--c-hero-text); border-radius: var(--radius-l); max-width: 40rem;
}
@media (min-width: 56rem) {
  .hero--full .hero__inner { display: grid; grid-template-areas: "stack"; min-height: min(88vh, 46rem); }
  .hero--full .hero__inner > * { grid-area: stack; }
  .hero--full .ph--hero { aspect-ratio: auto; height: 100%; place-items: end; }
  .hero--full .hero__text { margin: var(--space-8); align-self: center; justify-self: start; padding: var(--space-7) var(--space-6); }
}
/* stamp: centred, generous, image as a wide band below */
.hero--stamp .hero__inner { text-align: center; justify-items: center; }
.hero--stamp .hero__text p { margin-inline: auto; }
.hero--stamp .actions { justify-content: center; }
.hero--stamp .ph--hero { width: 100%; aspect-ratio: 16 / 7; }
/* minimal: huge type, small image offset */
.hero--minimal .hero__inner { gap: var(--space-5); }
.hero--minimal h1 { font-size: clamp(2.6rem, 1.4rem + 6vw, 6.5rem); }
@media (min-width: 56rem) { .hero--minimal .hero__inner { grid-template-columns: 2fr 1fr; align-items: end; } }

/* ---------- about ---------- */
.about__inner { display: grid; gap: var(--space-6); align-items: center; }
.signoff { font-family: var(--f-head); font-size: var(--step-1); font-style: italic; color: var(--c-primary); }
@media (min-width: 56rem) { .about__inner { grid-template-columns: 1.2fr 1fr; gap: var(--space-8); } }

/* ---------- products / menu cards ---------- */
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17.5rem), 1fr)); }
.cards:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
@media (min-width: 40rem) and (max-width: 63.99rem) { .cards:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .cards:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 48rem) { .cards:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); } }
.card { background: var(--c-surface); border: var(--border-w) solid var(--c-line); border-radius: var(--radius-m); overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--shadow); }
.card__body { padding: var(--space-4) var(--space-5) var(--space-5); display: flex; flex-direction: column; flex: 1; }
.card__title { margin-bottom: var(--space-2); }
.card__desc { color: var(--c-muted); font-size: var(--step--1); flex: 1; }
.card__price { margin: 0; font-weight: var(--fw-body-bold); color: var(--c-price, var(--c-primary)); font-size: var(--step-1); }
.card__price:empty, .products__more:empty, .hours__note:empty, .brand__tag:empty, .eyebrow:empty { display: none; }
.products__more { margin-top: var(--space-6); color: var(--c-muted); }

/* ---------- review ---------- */
.quote { margin: 0 auto; max-width: 48rem; text-align: center; }
.quote blockquote { margin: 0; font-family: var(--f-head); font-size: var(--step-2); line-height: 1.35; }
.quote blockquote p { max-width: none; }
.quote blockquote p::before { content: "“"; } .quote blockquote p::after { content: "”"; }
.quote figcaption { color: var(--c-muted); font-size: var(--step--1); }

/* ---------- hours ---------- */
.hours__inner { display: grid; gap: var(--space-5); }
.hours__table { width: 100%; max-width: 34rem; border-collapse: collapse; font-size: var(--step-0); }
.hours__table th, .hours__table td { padding: var(--space-3) 0; border-bottom: var(--border-w) dashed var(--c-line); text-align: left; vertical-align: top; }
.hours__table th { font-weight: var(--fw-body-bold); padding-right: var(--space-4); }
.hours__table td { text-align: right; font-variant-numeric: tabular-nums; }
.hours__note { color: var(--c-muted); font-size: var(--step--1); }
@media (min-width: 56rem) { .hours__inner { grid-template-columns: 1fr 1.2fr; align-items: start; } .hours__note { grid-column: 2; } }

/* ---------- location + map placeholder ---------- */
.location__inner { display: grid; gap: var(--space-6); align-items: center; }
.location address { font-size: var(--step-1); margin-bottom: var(--space-4); }
.location address span { display: block; }
.map-ph {
  margin: 0; position: relative; min-height: 18rem; border-radius: var(--radius-ph); overflow: hidden; display: grid; place-items: end start;
  background-color: var(--c-surface);
  background-image:
    linear-gradient(28deg, transparent 47%, var(--c-ph-b) 47% 50%, transparent 50%),
    linear-gradient(-62deg, transparent 58%, var(--c-ph-b) 58% 60%, transparent 60%),
    linear-gradient(var(--c-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--c-line) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 32px 32px, 32px 32px;
  border: var(--border-w) solid var(--c-line);
}
.map-ph__pin { position: absolute; left: 52%; top: 42%; width: 28px; height: 28px; background: var(--c-primary); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-primary) 25%, transparent); }
@media (min-width: 56rem) { .location__inner { grid-template-columns: 1fr 1.3fr; gap: var(--space-8); } }

/* ---------- contact ---------- */
.contact__inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.contact__inner p { margin-inline: auto; }
.contact__list { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: grid; gap: var(--space-2); }
.contact__list span { color: var(--c-muted); font-size: var(--step--1); text-transform: uppercase; letter-spacing: .1em; margin-right: var(--space-2); }

/* ---------- footer ---------- */
.site-footer { background: var(--c-footer-bg); color: var(--c-footer-text); padding-block: var(--space-7) calc(var(--space-7) + 3rem); text-align: center; }
.site-footer p { margin-inline: auto; }
.site-footer__name { font-family: var(--f-head); font-weight: var(--fw-head); font-size: var(--step-2); text-transform: var(--tt-head); letter-spacing: var(--ls-head); }
.site-footer__small { font-size: var(--step--1); opacity: .85; }

/* ---------- floating WhatsApp ---------- */
.wa-float {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 30; width: 3.5rem; height: 3.5rem; border-radius: 50%;
  display: grid; place-items: center; background: #1f7a4d; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
.wa-float svg { width: 1.8rem; height: 1.8rem; fill: currentColor; }

/* ---------- section dividers / accent motif (body.motif--*) ---------- */
.motif--none .section::before { display: none; }
.section::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; pointer-events: none; }
.motif--scallop .section:nth-of-type(even)::before { top: -11px; background: radial-gradient(circle at 12px 12px, var(--c-surface-2) 11px, transparent 12px) 0 0 / 24px 24px repeat-x; }
.motif--zigzag .section::before { height: 10px; background: linear-gradient(135deg, var(--motif-color) 25%, transparent 25%) -10px 0 / 20px 20px, linear-gradient(225deg, var(--motif-color) 25%, transparent 25%) -10px 0 / 20px 20px; opacity: .8; }
.motif--dots .section::before { height: 8px; top: 0; background: radial-gradient(circle, var(--motif-color) 2.5px, transparent 3px) 0 0 / 16px 8px repeat-x; width: 10rem; left: 50%; transform: translateX(-50%); }
.motif--rule .section::before { height: 7px; left: 50%; width: min(60%, 28rem); transform: translateX(-50%); border-top: 1px solid var(--motif-color); border-bottom: 1px solid var(--motif-color); top: var(--space-6); }
.motif--stripe .section::before { height: 6px; background: repeating-linear-gradient(90deg, var(--motif-color) 0 24px, transparent 24px 36px); opacity: .7; }
.motif--gingham .section::before { height: 14px; background:
  repeating-linear-gradient(90deg, color-mix(in srgb, var(--motif-color) 55%, transparent) 0 14px, transparent 14px 28px),
  repeating-linear-gradient(0deg, color-mix(in srgb, var(--motif-color) 55%, transparent) 0 7px, transparent 7px 14px); }

/* ---------- print ---------- */
@media print { .site-header, .wa-float, .previewbar { position: static; } .wa-float { display: none; } }

/* phone-only CTA (no confirmed WhatsApp yet) */
.wa-float--phone { background: var(--c-cta); color: var(--c-on-cta); }

/* ---------- demo / portfolio extras (optional sections: features, gallery, faq) ---------- */
.demobar { background: var(--c-primary); color: var(--c-on-primary); }
.demobar a { color: inherit; }
.ph-quiet .ph__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.features { padding-block: var(--space-7); }
.features__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.feature { text-align: center; padding: var(--space-4); }
.feature p { margin-inline: auto; color: var(--c-muted); font-size: var(--step--1); }
.feature__title { font-size: var(--step-1); margin-bottom: var(--space-2); }
.feature__icon { display: block; width: 4rem; height: 4rem; margin: 0 auto var(--space-3); border-radius: 50%; background-color: var(--c-surface-2); background-repeat: no-repeat; background-position: center; background-size: 60%; }

.mosaic { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(2, 1fr); grid-auto-rows: 9rem; grid-auto-flow: dense; }
.mosaic__item .ph { height: 100%; min-height: 0; }
.mosaic__item.wide { grid-column: span 2; }
.mosaic__item.tall { grid-row: span 2; }
@media (min-width: 48rem) { .mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 12rem; } }

.faq__inner { display: grid; gap: var(--space-5); }
.faq__list { display: grid; gap: var(--space-3); }
.faq details { background: var(--c-surface); border: var(--border-w) solid var(--c-line); border-radius: var(--radius-m); padding: var(--space-4) var(--space-5); }
.faq summary { cursor: pointer; font-weight: var(--fw-body-bold); list-style: none; display: flex; justify-content: space-between; gap: var(--space-4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.4em; line-height: 1; color: var(--c-primary); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: var(--space-3) 0 0; color: var(--c-muted); }
@media (min-width: 56rem) { .faq__inner { grid-template-columns: 1fr 2fr; align-items: start; } }

/* ---------- optional sections (11 Oct, wider business types): rooms · services · booking ---------- */
.room__sleeps { margin: 0 0 var(--space-2); font-size: var(--step--1); font-weight: 600; color: var(--c-accent-text); letter-spacing: .02em; }
.room__amenities { list-style: none; margin: var(--space-2) 0 var(--space-3); padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.room__amenities li { font-size: var(--step--1); padding: .15rem .6rem; border-radius: 999px; background: var(--c-surface-2); color: var(--c-text); border: 1px solid var(--c-line); }
.services__list { list-style: none; margin: 0 auto; padding: 0; max-width: 46rem; }
.service { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-3) 0; border-bottom: 1px dashed var(--c-line); }
.service__name { margin: 0; font-size: var(--step-1); }
.service__desc { margin: .2rem 0 0; color: var(--c-muted); font-size: var(--step--1); }
.service__meta { margin: 0; display: flex; gap: var(--space-3); white-space: nowrap; font-size: var(--step--1); }
.service__duration { color: var(--c-muted); }
.service__price { font-weight: 700; color: var(--c-price); }
.section.booking { background: var(--c-primary); color: var(--c-on-primary); text-align: center; }
.booking .eyebrow, .booking h2, .booking__text { color: var(--c-on-primary); }
.booking__inner { max-width: 44rem; }
.booking__inner > * { margin-inline: auto; }
.booking__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
.booking .btn--primary { background: var(--c-on-primary); color: var(--c-primary); border-color: var(--c-on-primary); }
.booking .btn--ghost { color: var(--c-on-primary); border-color: var(--c-on-primary); background: transparent; }
@media (max-width: 34rem) { .service { flex-direction: column; gap: .25rem; } }

/* =====================================================================================
   Round 2 (Manager quality gate, 11 Oct 2026): K1 nav · K2 floating button · K4 mobile
   density · K5 tap targets · K8 rates/price labels · K9 gallery/booking menu entries
   ===================================================================================== */
/* K5: every tap target at least 44 px high */
.site-nav a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }   /* = Developer's studio fix */
.contact__list li { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0 var(--space-2); }
.contact__list a { display: inline-block; padding-block: .6rem; min-height: 44px; padding-inline: var(--space-2); }   /* = Developer's studio fix */
.faq summary { min-height: 44px; align-items: center; }
.site-footer a, .previewbar a { display: inline-block; padding-block: .75rem; margin-block: -.75rem; min-height: 44px; }
.brand { min-height: 44px; }

/* K1: on phones the menu wraps onto a second line instead of scrolling sideways out of sight */
@media (max-width: 47.99rem) {
  .site-nav ul { flex-wrap: wrap; overflow: visible; column-gap: 0; margin-inline: calc(var(--space-3) * -1); }
  .site-nav a { padding-inline: var(--space-3); letter-spacing: min(var(--ls-nav, .06em), .06em); }
}

/* K2: the floating call button never sits on the page's own buttons
   - smaller on phones, inside the safe area, and the footer/contact get clearance below it
   - where the browser supports scroll-driven animations (Chrome/Edge/Samsung Internet, Safari 26) it stays out
     of the way while the hero buttons, the booking band or the contact section are on screen (CSS only, no JS) */
.wa-float { right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); }
@media (max-width: 47.99rem) {
  .wa-float { width: 3.25rem; height: 3.25rem; right: max(.75rem, env(safe-area-inset-right)); bottom: max(.75rem, env(safe-area-inset-bottom)); }
  .wa-float svg { width: 1.6rem; height: 1.6rem; }
  .site-footer { padding-bottom: calc(var(--space-7) + 4.5rem); }
}
@supports (animation-timeline: view()) {
  body { timeline-scope: --dd-hero, --dd-booking, --dd-contact; }
  .hero { view-timeline: --dd-hero block; }
  #bespreek { view-timeline: --dd-booking block; }
  #kontak { view-timeline: --dd-contact block; }
  .wa-float {
    animation: dd-float-in linear both, dd-float-away linear both, dd-float-out linear both;
    animation-timeline: --dd-hero, --dd-booking, --dd-contact;
    animation-range: exit 35% exit 65%, cover 0% cover 100%, entry 0% entry 35%;
  }
  @keyframes dd-float-in { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
  @keyframes dd-float-away { 0%, 100% { scale: 1; } 12%, 88% { scale: 0; } }
  @keyframes dd-float-out { from { translate: 0 0; } to { translate: 0 calc(100% + 3rem); } }
}

/* K4: shorter phone pages: tighter rhythm, two product cards per row, compact rooms and features */
@media (max-width: 47.99rem) {
  :root { --section-pad: 2.75rem; }
  .section__head { margin-bottom: var(--space-5); }
  .features { padding-block: var(--space-6); }
  .features__list { gap: var(--space-3); }
  .feature { display: grid; grid-template-columns: 3rem 1fr; column-gap: var(--space-4); text-align: left; padding: var(--space-2) 0; align-items: start; }
  .feature__icon { grid-row: span 2; width: 3rem; height: 3rem; margin: 0; }
  .feature__title { margin-bottom: var(--space-1); }
  .feature p { margin: 0; }
  .products .cards, .products .cards:has(> li:nth-child(4):last-child), .products .cards:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .products .cards > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .products .cards > li:last-child:nth-child(odd) .ph--card { aspect-ratio: 2 / 1; max-height: 10rem; }
  .products .card .ph--card { aspect-ratio: 1 / 1; max-height: 10rem; width: 100%; }
  .products .card__body { padding: var(--space-3); }
  .products .card__title { font-size: var(--step-0); hyphens: manual; overflow-wrap: break-word; }
  .products .card__desc { font-size: .9rem; line-height: 1.45; margin-bottom: var(--space-2); }
  .products .card__price { font-size: .9rem; }
  .products .ph__label { font-size: .7rem; margin: var(--space-2); padding: var(--space-1) var(--space-2); }
  .rooms .card .ph--card { aspect-ratio: 16 / 9; max-height: 12rem; width: 100%; border-radius: 0; }
  .rooms__list { gap: var(--space-4); }
  .about .ph--portrait { aspect-ratio: 4 / 3; }
  .gallery .mosaic { grid-auto-rows: 7rem; }
}
/* (5) Chrome has no Afrikaans hyphenation: briefs put ­ (U+00AD) in long compounds; this is the safety net */
h1, h2, h3, .card__title, .brand__name { hyphens: manual; overflow-wrap: anywhere; }
.hero__inner > *, .about__inner > *, .location__inner > * { min-width: 0; }   /* a long word can never push a grid column past the screen */

/* K2 (Developer #5) + round 3 (Manager, 11 Oct): below 400 px the hero buttons stack, full width and CENTRED.
   Browsers with scroll-driven animations hide the floating button while the hero is on screen, so no space is reserved;
   older browsers get symmetric 2.5rem side padding (centred, ~240px wide at 360; was 4rem = 192px). */
@media (max-width: 25rem) {
  .hero .actions { flex-direction: column; align-items: stretch; padding-inline: 0; }
  .hero .actions .btn { width: 100%; justify-content: center; text-align: center; }
  @supports not (animation-timeline: view()) { .hero .actions { padding-inline: 2.5rem; } }   /* round 4: 4rem left only 192px of button at 360 */
}

/* K8: a rate or price is information, not a button: plain text in the body colour; the room link is a real link */
.card__price { background: none; border: 0; box-shadow: none; }
.room .card__price { color: var(--c-text); font-weight: 600; font-size: var(--step--1); margin-top: var(--space-2); }
.room__ask { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-1); font-weight: var(--fw-body-bold); color: var(--c-accent-text, var(--c-primary)); }

/* GLYPHS:start (generated by tools/glyphs.py: do not edit by hand) */
.ph[class*="glyph-"]::before { content: ""; position: absolute; left: 50%; top: 42%; translate: -50% -50%; width: min(46%, 9rem); aspect-ratio: 1; border-radius: 50%; background: var(--glyph-bg, color-mix(in srgb, var(--c-surface) 82%, transparent)); }
.ph[class*="glyph-"]::after { content: ""; position: absolute; left: 50%; top: 42%; translate: -50% -50%; width: min(30%, 5.8rem); aspect-ratio: 1; background: var(--glyph-c, var(--c-primary)); -webkit-mask: var(--glyph) center / contain no-repeat; mask: var(--glyph) center / contain no-repeat; }
.ph[class*="glyph-"] .ph__label { position: relative; z-index: 1; }
.glyph-cup { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 18h24v10a10 10 0 0 1-10 10h-4A10 10 0 0 1 9 28z%22/%3E%3Cpath d=%22M33 21h3a5 5 0 0 1 0 10h-3%22/%3E%3Cpath d=%22M16 6c-2 3 2 5 0 8M23 6c-2 3 2 5 0 8%22/%3E%3Cpath d=%22M6 42h32%22/%3E%3C/svg%3E"); }
.glyph-gift { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%227%22 y=%2218%22 width=%2234%22 height=%228%22 rx=%221%22/%3E%3Cpath d=%22M10 26v15h28V26M24 18v23%22/%3E%3Cpath d=%22M24 18c-4-8-12-8-11-3 1 4 11 3 11 3zM24 18c4-8 12-8 11-3-1 4-11 3-11 3z%22/%3E%3C/svg%3E"); }
.glyph-print { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M13 16V6h22v10%22/%3E%3Crect x=%226%22 y=%2216%22 width=%2236%22 height=%2216%22 rx=%223%22/%3E%3Crect x=%2213%22 y=%2227%22 width=%2222%22 height=%2215%22/%3E%3Cpath d=%22M17 33h14M17 37h10%22/%3E%3Ccircle cx=%2235%22 cy=%2221%22 r=%221.4%22 fill=%22%23000%22/%3E%3C/svg%3E"); }
.glyph-plant { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 30h20l-3 12H17z%22/%3E%3Cpath d=%22M24 30V17%22/%3E%3Cpath d=%22M24 22c-8 0-12-5-12-11 7 0 12 4 12 11zM24 18c0-7 5-12 12-12 0 7-5 12-12 12z%22/%3E%3C/svg%3E"); }
.glyph-flower { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2224%22 cy=%2215%22 r=%224%22/%3E%3Cpath d=%22M24 11c-2-6 6-6 4 0M28 15c6-2 6 6 0 4M24 19c2 6-6 6-4 0M20 15c-6 2-6-6 0-4%22/%3E%3Cpath d=%22M24 19v23M24 32c-6-1-9-5-9-9 5 0 9 4 9 9zM24 36c5-1 8-4 8-8-4 0-8 3-8 8z%22/%3E%3C/svg%3E"); }
.glyph-camera { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 16h8l3-5h14l3 5h8v22H6z%22/%3E%3Ccircle cx=%2224%22 cy=%2226%22 r=%227%22/%3E%3Ccircle cx=%2236%22 cy=%2221%22 r=%221.4%22 fill=%22%23000%22/%3E%3C/svg%3E"); }
.glyph-bread { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8 22c0-8 8-12 16-12s16 4 16 12c0 3-2 4-4 4v14H12V26c-2 0-4-1-4-4z%22/%3E%3Cpath d=%22M17 18l3 5M24 16l2 6M31 18l-2 5%22/%3E%3C/svg%3E"); }
.glyph-pie { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 26h36l-4 12H10z%22/%3E%3Cpath d=%22M8 26c0-8 7-13 16-13s16 5 16 13%22/%3E%3Cpath d=%22M16 21l2 3M24 18v4M32 21l-2 3%22/%3E%3C/svg%3E"); }
.glyph-plate { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2224%22 cy=%2225%22 r=%2212%22/%3E%3Ccircle cx=%2224%22 cy=%2225%22 r=%227%22/%3E%3Cpath d=%22M6 10v8a3 3 0 0 0 3 3v19M6 10v6M9 10v6M12 10v8a3 3 0 0 1-3 3%22/%3E%3Cpath d=%22M42 10c-4 2-5 7-5 12h5v18%22/%3E%3C/svg%3E"); }
.glyph-platter { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cellipse cx=%2224%22 cy=%2230%22 rx=%2219%22 ry=%229%22/%3E%3Ccircle cx=%2215%22 cy=%2227%22 r=%223.5%22/%3E%3Cpath d=%22M22 24l7 2-3 5zM33 25h5v5h-5z%22/%3E%3Ccircle cx=%2220%22 cy=%2233%22 r=%221.6%22 fill=%22%23000%22/%3E%3Ccircle cx=%2229%22 cy=%2233%22 r=%221.6%22 fill=%22%23000%22/%3E%3C/svg%3E"); }
.glyph-venue { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 20 24 8l19 12%22/%3E%3Cpath d=%22M9 18v22h30V18%22/%3E%3Cpath d=%22M14 40V28h8v12%22/%3E%3Crect x=%2227%22 y=%2226%22 width=%227%22 height=%226%22/%3E%3Cpath d=%22M14 22h20%22 stroke-dasharray=%222 3%22/%3E%3C/svg%3E"); }
.glyph-easel { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%2212%22 y=%227%22 width=%2224%22 height=%2218%22 rx=%221%22/%3E%3Cpath d=%22M16 21l5-6 4 4 3-3 5 5%22/%3E%3Cpath d=%22M24 25v17M17 42l4-17M31 42l-4-17M14 32h20%22/%3E%3C/svg%3E"); }
.glyph-chair { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 6v20M34 6v20M14 10h20M14 16h20%22/%3E%3Cpath d=%22M11 26h26l-2 5H13z%22/%3E%3Cpath d=%22M14 31l-2 11M34 31l2 11M17 31v7M31 31v7%22/%3E%3C/svg%3E"); }
.glyph-lamp { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M15 20 19 6h10l4 14z%22/%3E%3Cpath d=%22M24 20v16M16 42h16M20 36h8v6h-8z%22/%3E%3C/svg%3E"); }
.glyph-egg { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M24 6c8 0 13 12 13 20a13 13 0 0 1-26 0c0-8 5-20 13-20z%22/%3E%3Cpath d=%22M24 23c-2 2-2 4 0 6 2-2 2-4 0-6z%22 fill=%22%23000%22/%3E%3Cpath d=%22M17 32h14%22/%3E%3C/svg%3E"); }
.glyph-jar { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%2213%22 y=%2212%22 width=%2222%22 height=%2230%22 rx=%224%22/%3E%3Cpath d=%22M15 6h18v6H15zM13 22h22M13 32h22%22/%3E%3C/svg%3E"); }
.glyph-soap { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%229%22 y=%2220%22 width=%2230%22 height=%2216%22 rx=%227%22/%3E%3Ccircle cx=%2217%22 cy=%2212%22 r=%223%22/%3E%3Ccircle cx=%2225%22 cy=%229%22 r=%222%22/%3E%3Ccircle cx=%2231%22 cy=%2214%22 r=%222.5%22/%3E%3C/svg%3E"); }
.glyph-mirror { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cellipse cx=%2224%22 cy=%2220%22 rx=%2212%22 ry=%2215%22/%3E%3Cpath d=%22M19 13c2-3 5-4 8-3%22/%3E%3Cpath d=%22M24 35v7M17 42h14%22/%3E%3C/svg%3E"); }
.glyph-dress { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M24 5v3M20 8h8%22/%3E%3Cpath d=%22M19 8l-5 6 5 3-6 25h22l-6-25 5-3-5-6%22/%3E%3Cpath d=%22M18 24h12%22/%3E%3C/svg%3E"); }
.glyph-linen { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%228%22 y=%2230%22 width=%2232%22 height=%2210%22 rx=%222%22/%3E%3Crect x=%2210%22 y=%2220%22 width=%2228%22 height=%2210%22 rx=%222%22/%3E%3Crect x=%2212%22 y=%2210%22 width=%2224%22 height=%2210%22 rx=%222%22/%3E%3Cpath d=%22M12 15h24M10 25h28M8 35h32%22 stroke-dasharray=%222 3%22/%3E%3C/svg%3E"); }
.glyph-frame { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%227%22 y=%227%22 width=%2234%22 height=%2234%22/%3E%3Crect x=%2213%22 y=%2213%22 width=%2222%22 height=%2222%22/%3E%3Cpath d=%22M15 31l6-7 5 5 3-3 5 5%22/%3E%3Ccircle cx=%2229%22 cy=%2219%22 r=%222%22/%3E%3C/svg%3E"); }
.glyph-pen { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M34 6l8 8-22 22-10 2 2-10z%22/%3E%3Cpath d=%22M28 12l8 8M12 38c4 4 10 4 14 0%22/%3E%3C/svg%3E"); }
.glyph-tshirt { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M17 7l-11 6 4 8 5-2v22h18V19l5 2 4-8-11-6c-1 3-4 5-7 5s-6-2-7-5z%22/%3E%3C/svg%3E"); }
.glyph-drawers { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%229%22 y=%228%22 width=%2230%22 height=%2230%22 rx=%221%22/%3E%3Cpath d=%22M9 18h30M9 28h30M21 13h6M21 23h6M21 33h6M12 38v4M36 38v4%22/%3E%3C/svg%3E"); }
.glyph-shoe { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 34c0-6 3-10 3-16h10c2 5 6 7 12 8 7 1 13 3 13 8v3H5z%22/%3E%3Cpath d=%22M5 37h38M14 18v6M19 21l2-2M23 24l2-2%22/%3E%3C/svg%3E"); }
.glyph-sock { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M16 5h14v19l7 8c3 4-1 10-6 7l-14-9c-2-1-1-3-1-5z%22/%3E%3Cpath d=%22M16 11h14M27 34l5-5%22/%3E%3C/svg%3E"); }
.glyph-meat { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M10 28c-4-8 3-19 14-19 9 0 15 6 14 14-1 9-10 15-19 13-4-1-7-4-9-8z%22/%3E%3Cpath d=%22M16 26c-1-5 3-10 9-10%22/%3E%3Ccircle cx=%2231%22 cy=%2223%22 r=%223%22/%3E%3C/svg%3E"); }
.glyph-sausage { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 30c6 6 22 6 30-6 3-4-2-8-5-5-6 8-15 9-20 5-3-2-8 2-5 6z%22/%3E%3Cpath d=%22M7 32l-3 3M41 21l3-3%22/%3E%3C/svg%3E"); }
.glyph-scale { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M24 8v28M14 42h20M24 36l-5 6M24 36l5 6%22/%3E%3Cpath d=%22M10 12h28%22/%3E%3Cpath d=%22M10 12l-5 12h10zM38 12l-5 12h10z%22/%3E%3Cpath d=%22M5 24a5 3 0 0 0 10 0M33 24a5 3 0 0 0 10 0%22/%3E%3C/svg%3E"); }
.glyph-bed { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 14v26M6 30h36v10M6 24h36v6%22/%3E%3Crect x=%229%22 y=%2218%22 width=%2210%22 height=%226%22 rx=%222%22/%3E%3C/svg%3E"); }
.glyph-key { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2216%22 cy=%2224%22 r=%228%22/%3E%3Ccircle cx=%2216%22 cy=%2224%22 r=%222.5%22/%3E%3Cpath d=%22M24 24h18M36 24v6M41 24v5%22/%3E%3C/svg%3E"); }
.glyph-scissors { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2234%22 r=%225%22/%3E%3Ccircle cx=%2212%22 cy=%2214%22 r=%225%22/%3E%3Cpath d=%22M16 31 42 12M16 17l26 19%22/%3E%3C/svg%3E"); }
.glyph-bottle { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 5h8v8c0 3 5 5 5 11v18H15V24c0-6 5-8 5-11z%22/%3E%3Cpath d=%22M15 27h18v9H15z%22/%3E%3C/svg%3E"); }
.glyph-cheese { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 34 30 12l12 8v14z%22/%3E%3Cpath d=%22M6 34h36%22/%3E%3Ccircle cx=%2220%22 cy=%2229%22 r=%222.5%22/%3E%3Ccircle cx=%2232%22 cy=%2224%22 r=%222%22/%3E%3Ccircle cx=%2234%22 cy=%2230%22 r=%221.6%22/%3E%3C/svg%3E"); }
.glyph-icecream { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M16 22h16l-8 20z%22/%3E%3Cpath d=%22M15 22c-2-8 4-13 9-13s11 5 9 13%22/%3E%3Cpath d=%22M20 12c1-4 7-4 8 0%22/%3E%3C/svg%3E"); }
.glyph-waffle { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%229%22 y=%229%22 width=%2230%22 height=%2230%22 rx=%226%22/%3E%3Cpath d=%22M9 19h30M9 29h30M19 9v30M29 9v30%22/%3E%3C/svg%3E"); }
.glyph-lighthouse { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M19 42l2-24h6l2 24z%22/%3E%3Cpath d=%22M18 18h12M20 12h8v6h-8zM24 8v4%22/%3E%3Cpath d=%22M28 14l10-4M28 16l10 4M20 14l-10-4M20 16l-10 4%22/%3E%3Cpath d=%22M6 42h36M20.5 26h7M19.8 34h8.4%22/%3E%3C/svg%3E"); }
.glyph-fish { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 24c6-8 16-10 26-4l8-6v20l-8-6c-10 6-20 4-26-4z%22/%3E%3Ccircle cx=%2214%22 cy=%2223%22 r=%221.5%22 fill=%22%23000%22/%3E%3C/svg%3E"); }
.glyph-shell { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M24 40 8 22c4-10 28-10 32 0z%22/%3E%3Cpath d=%22M24 40 16 16M24 40V14M24 40l8-24M24 40 11 19M24 40l13-21%22/%3E%3C/svg%3E"); }
.glyph-bag { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M9 16h30l-3 26H12z%22/%3E%3Cpath d=%22M17 16v-3a7 7 0 0 1 14 0v3%22/%3E%3C/svg%3E"); }
.glyph-brush { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M31 6l11 11-14 9-6-6z%22/%3E%3Cpath d=%22M22 20c-6 0-10 4-10 9 0 4-3 8-6 9 8 2 17-1 18-8 1-4 0-7-2-10z%22/%3E%3C/svg%3E"); }
.glyph-knife { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 30 34 8c3 3 3 9-2 14L16 38z%22/%3E%3Cpath d=%22M16 38l-4 4M20 34l-6 6%22/%3E%3C/svg%3E"); }
.glyph-pot { --glyph: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 48 48%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M8 20h32v14a8 8 0 0 1-8 8H16a8 8 0 0 1-8-8z%22/%3E%3Cpath d=%22M4 20h40M18 20v-4a6 6 0 0 1 12 0v4%22/%3E%3Cpath d=%22M18 10c-1-2 1-3 0-5M24 10c-1-2 1-3 0-5M30 10c-1-2 1-3 0-5%22/%3E%3C/svg%3E"); }
/* GLYPHS:end */