/* =========================================================================
   Village Butchers, Alvechurch
   01 Tokens · 02 Base · 03 Layout · 04 Chrome (strip, fascia, dock)
   05 Shopfront hero · 06 Counter · 07 Story · 08 Reviews · 09 Visit
   10 Footer · 11 Motion, forced colours, print
   Palette is taken from the real shop: slate fascia, blue-and-white awning,
   cobalt wall tiles and Worcestershire red brick.
   ========================================================================= */

/* ---------- 01 Tokens ---------- */
@font-face { font-family: "Young Serif"; src: url("../assets/fonts/young-serif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../assets/fonts/atkinson-next-var.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../assets/fonts/atkinson-next-italic-var.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; src: url("../assets/fonts/atkinson-mono-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  /* Awning blue — the stripes */
  --awning-50: #eef4ff;
  --awning-100: #dae6fd;
  --awning-200: #bcd1fb;
  --awning-300: #8eb2f6;
  --awning-400: #5b8def;
  --awning-500: #356ce0;
  --awning-600: #2356c5;
  --awning-700: #1d45a0;
  --awning-800: #1c3b83;
  --awning-900: #1b3368;
  --awning-950: #122041;

  /* Slate — the fascia board */
  --slate-50: #f4f5f8;
  --slate-100: #e5e8ef;
  --slate-200: #cbd0dd;
  --slate-300: #a5acc2;
  --slate-400: #7b84a1;
  --slate-500: #5c6583;
  --slate-600: #48506b;
  --slate-700: #3b4159;
  --slate-800: #2f3449;
  --slate-900: #23273a;
  --slate-950: #161927;

  /* Cobalt — the glazed wall tiles */
  --tile-50: #f0f1fb;
  --tile-100: #dfe1f6;
  --tile-200: #c2c6ee;
  --tile-300: #9aa0e1;
  --tile-400: #6f76cf;
  --tile-500: #4e55b9;
  --tile-600: #3c429b;
  --tile-700: #30357e;
  --tile-800: #272b66;
  --tile-900: #1f2250;
  --tile-950: #13153a;

  /* Brick — the cottage */
  --brick-50: #fbf2ee;
  --brick-100: #f6ded3;
  --brick-200: #ecbda7;
  --brick-300: #df9575;
  --brick-400: #d0714c;
  --brick-500: #ba5532;
  --brick-600: #9f4427;
  --brick-700: #833721;
  --brick-800: #6b2e1e;
  --brick-900: #58281b;
  --brick-950: #31130c;

  /* Paper — greaseproof white */
  --paper: #ffffff;
  --paper-2: #f5f6f9;
  --paper-3: #eceef3;

  /* Semantic */
  --ink: var(--slate-950);
  --ink-soft: var(--slate-700);
  --ink-muted: var(--slate-600);
  --line: var(--slate-200);
  --accent: var(--awning-600);
  --accent-ink: var(--awning-700);
  --star: #e3a008;
  --open: #1f7a3d;
  --closed: #a8321d;
  --focus: var(--awning-600);
  --focus-on-dark: #ffd76a;

  /* Type */
  --f-display: "Young Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --f-body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --f-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --step--1: 1rem;
  --step-0: 1.125rem;
  --step-1: 1.3125rem;
  --step-2: clamp(1.5rem, 1.3rem + .8vw, 1.875rem);
  --step-3: clamp(1.9rem, 1.5rem + 1.8vw, 2.75rem);
  --step-4: clamp(2.3rem, 1.6rem + 3.2vw, 4rem);
  --step-5: clamp(2rem, 1.2rem + 4.2vw, 5.2rem);

  /* Space & shape */
  --gutter: clamp(1rem, .6rem + 2vw, 2.25rem);
  --max: 76rem;
  --section: clamp(4rem, 3rem + 5vw, 7.5rem);
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --shadow-1: 0 1px 2px rgb(22 25 39 / .08), 0 2px 8px rgb(22 25 39 / .06);
  --shadow-2: 0 2px 4px rgb(22 25 39 / .08), 0 12px 32px rgb(22 25 39 / .12);

  --stripe: clamp(26px, 2.6vw, 40px);
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  --z-fascia: 50;
  --z-dock: 60;
  --z-skip: 100;
}

/* Visitor-chosen text size (stored per device) */
html[data-text="lg"] { font-size: 112.5%; }
html[data-text="xl"] { font-size: 125%; }

/* Pattern tokens (generated: cobalt mosaic + running-bond brick) */
:root {
  --pat-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Crect width='100%25' height='100%25' fill='%239ea3cf'/%3E%3Crect x='0.65' y='0.65' width='8.70' height='8.70' rx='.8' fill='%23262b72'/%3E%3Crect x='10.65' y='0.65' width='8.70' height='8.70' rx='.8' fill='%233a409d'/%3E%3Crect x='20.65' y='0.65' width='8.70' height='8.70' rx='.8' fill='%2330368c'/%3E%3Crect x='30.65' y='0.65' width='8.70' height='8.70' rx='.8' fill='%2330368c'/%3E%3Crect x='40.65' y='0.65' width='8.70' height='8.70' rx='.8' fill='%232b3182'/%3E%3Crect x='50.65' y='0.65' width='8.70' height='8.70' rx='.8' fill='%23353c96'/%3E%3Crect x='51.85' y='1.85' width='3.91' height='1' rx='.5' fill='%23fff' fill-opacity='.16'/%3E%3Crect x='0.65' y='10.65' width='8.70' height='8.70' rx='.8' fill='%233a409d'/%3E%3Crect x='10.65' y='10.65' width='8.70' height='8.70' rx='.8' fill='%23353c96'/%3E%3Crect x='11.85' y='11.85' width='3.91' height='1' rx='.5' fill='%23fff' fill-opacity='.16'/%3E%3Crect x='20.65' y='10.65' width='8.70' height='8.70' rx='.8' fill='%233a409d'/%3E%3Crect x='21.85' y='11.85' width='3.91' height='1' rx='.5' fill='%23fff' fill-opacity='.16'/%3E%3Crect x='30.65' y='10.65' width='8.70' height='8.70' rx='.8' fill='%2330368c'/%3E%3Crect x='40.65' y='10.65' width='8.70' height='8.70' rx='.8' fill='%232b3182'/%3E%3Crect x='50.65' y='10.65' width='8.70' height='8.70' rx='.8' fill='%233a409d'/%3E%3Crect x='51.85' y='11.85' width='3.91' height='1' rx='.5' fill='%23fff' fill-opacity='.16'/%3E%3Crect x='0.65' y='20.65' width='8.70' height='8.70' rx='.8' fill='%23353c96'/%3E%3Crect x='1.85' y='21.85' width='3.91' height='1' rx='.5' fill='%23fff' fill-opacity='.16'/%3E%3Crect x='10.65' y='20.65' width='8.70' height='8.70' rx='.8' fill='%23282d78'/%3E%3Crect x='11.85' y='21.85' width='3.91' height='1' rx='.5' fill='%23fff' fill-opacity='.16'/%3E%3Crect x='20.65' y='20.65' width='8.70' height='8.70' rx='.8' fill='%23282d78'/%3E%3Crect x='30.65' y='20.65' width='8.70' height='8.70' rx='.8' fill='%232d337f'/%3E%3Crect x='40.65' y='20.65' width='8.70' height='8.70' rx='.8' fill='%23282d78'/%3E%3Crect x='41.85' y='21.85' width='3.91' height='1' rx='.5' fill='%23fff' fill-opacity='.16'/%3E%3Crect x='50.65' y='20.65' width='8.70' height='8.70' rx='.8' fill='%23353c96'/%3E%3Crect x='0.65' y='30.65' width='8.70' height='8.70' rx='.8' fill='%2330368c'/%3E%3Crect x='10.65' y='30.65' width='8.70' height='8.70' rx='.8' fill='%23353c96'/%3E%3Crect x='20.65' y='30.65' width='8.70' height='8.70' rx='.8' fill='%233a409d'/%3E%3Crect x='30.65' y='30.65' width='8.70' height='8.70' rx='.8' fill='%232f3587'/%3E%3Crect x='40.65' y='30.65' width='8.70' height='8.70' rx='.8' fill='%232f3587'/%3E%3Crect x='50.65' y='30.65' width='8.70' height='8.70' rx='.8' fill='%23353c96'/%3E%3Crect x='0.65' y='40.65' width='8.70' height='8.70' rx='.8' fill='%23353c96'/%3E%3Crect x='1.85' y='41.85' width='3.91' height='1' rx='.5' fill='%23fff' fill-opacity='.16'/%3E%3Crect x='10.65' y='40.65' width='8.70' height='8.70' rx='.8' fill='%232d337f'/%3E%3Crect x='20.65' y='40.65' width='8.70' height='8.70' rx='.8' fill='%23262b72'/%3E%3Crect x='30.65' y='40.65' width='8.70' height='8.70' rx='.8' fill='%232d337f'/%3E%3Crect x='40.65' y='40.65' width='8.70' height='8.70' rx='.8' fill='%2330368c'/%3E%3Crect x='41.85' y='41.85' width='3.91' height='1' rx='.5' fill='%23fff' fill-opacity='.16'/%3E%3Crect x='50.65' y='40.65' width='8.70' height='8.70' rx='.8' fill='%233a409d'/%3E%3Crect x='51.85' y='41.85' width='3.91' height='1' rx='.5' fill='%23fff' fill-opacity='.16'/%3E%3Crect x='0.65' y='50.65' width='8.70' height='8.70' rx='.8' fill='%23262b72'/%3E%3Crect x='1.85' y='51.85' width='3.91' height='1' rx='.5' fill='%23fff' fill-opacity='.16'/%3E%3Crect x='10.65' y='50.65' width='8.70' height='8.70' rx='.8' fill='%232f3587'/%3E%3Crect x='20.65' y='50.65' width='8.70' height='8.70' rx='.8' fill='%2330368c'/%3E%3Crect x='30.65' y='50.65' width='8.70' height='8.70' rx='.8' fill='%23262b72'/%3E%3Crect x='31.85' y='51.85' width='3.91' height='1' rx='.5' fill='%23fff' fill-opacity='.16'/%3E%3Crect x='40.65' y='50.65' width='8.70' height='8.70' rx='.8' fill='%23262b72'/%3E%3Crect x='50.65' y='50.65' width='8.70' height='8.70' rx='.8' fill='%232f3587'/%3E%3Crect x='51.85' y='51.85' width='3.91' height='1' rx='.5' fill='%23fff' fill-opacity='.16'/%3E%3C/svg%3E");
  --pat-brick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='184' height='64'%3E%3Crect width='100%25' height='100%25' fill='%23d9b8a4'/%3E%3Crect x='1.5' y='1.5' width='43' height='13' rx='1' fill='%23b4532f'/%3E%3Crect x='47.5' y='1.5' width='43' height='13' rx='1' fill='%23bd5d37'/%3E%3Crect x='93.5' y='1.5' width='43' height='13' rx='1' fill='%239f4527'/%3E%3Crect x='139.5' y='1.5' width='43' height='13' rx='1' fill='%23ab4f30'/%3E%3Crect x='185.5' y='1.5' width='43' height='13' rx='1' fill='%23ab4f30'/%3E%3Crect x='-21.5' y='17.5' width='43' height='13' rx='1' fill='%23b4532f'/%3E%3Crect x='24.5' y='17.5' width='43' height='13' rx='1' fill='%23b4532f'/%3E%3Crect x='70.5' y='17.5' width='43' height='13' rx='1' fill='%23ab4f30'/%3E%3Crect x='116.5' y='17.5' width='43' height='13' rx='1' fill='%23ab4f30'/%3E%3Crect x='162.5' y='17.5' width='43' height='13' rx='1' fill='%23bd5d37'/%3E%3Crect x='1.5' y='33.5' width='43' height='13' rx='1' fill='%23ab4f30'/%3E%3Crect x='47.5' y='33.5' width='43' height='13' rx='1' fill='%23b8583a'/%3E%3Crect x='93.5' y='33.5' width='43' height='13' rx='1' fill='%23ab4f30'/%3E%3Crect x='139.5' y='33.5' width='43' height='13' rx='1' fill='%23c2643f'/%3E%3Crect x='185.5' y='33.5' width='43' height='13' rx='1' fill='%239f4527'/%3E%3Crect x='-21.5' y='49.5' width='43' height='13' rx='1' fill='%23bd5d37'/%3E%3Crect x='24.5' y='49.5' width='43' height='13' rx='1' fill='%23ab4f30'/%3E%3Crect x='70.5' y='49.5' width='43' height='13' rx='1' fill='%239f4527'/%3E%3Crect x='116.5' y='49.5' width='43' height='13' rx='1' fill='%23ab4f30'/%3E%3Crect x='162.5' y='49.5' width='43' height='13' rx='1' fill='%23bd5d37'/%3E%3C/svg%3E");
}

/* ---------- 02 Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(env(safe-area-inset-top, 0px) + 5.5rem); }
@media (max-width: 859px) { html { scroll-padding-top: 1rem; scroll-padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 6rem); } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
[hidden] { display: none !important; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 400; line-height: 1.08; letter-spacing: -.012em; margin: 0; text-wrap: balance; overflow-wrap: break-word; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
figure, blockquote { margin: 0; }
a { color: var(--accent-ink); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
button { font: inherit; color: inherit; }
strong { font-weight: 700; }
address { font-style: normal; }
table { border-collapse: collapse; }
.nowrap { white-space: nowrap; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: var(--focus-on-dark); }
main:focus { outline: none; }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.skip-link {
  position: absolute; left: 1rem; top: -100px; z-index: var(--z-skip);
  background: var(--paper); color: var(--ink); padding: .8rem 1.1rem; border-radius: var(--r-sm);
  font-weight: 700; box-shadow: var(--shadow-2); text-decoration: none;
}
.skip-link:focus { top: calc(1rem + env(safe-area-inset-top, 0px)); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Links on the dark sections */
.on-dark a:not(.btn, .fascia__call, .brand) { color: #fff; }

/* ---------- 03 Layout ---------- */
.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left, 0px)) max(var(--gutter), env(safe-area-inset-right, 0px)); }
.section { padding-block: var(--section); }
.eyebrow { font-family: var(--f-mono); font-size: var(--step--1); font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); margin-bottom: 1rem; }
.section__title { font-size: var(--step-4); }
.section__lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 36em; margin-top: 1.25rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 56px; padding: .85rem 1.4rem; border-radius: 999px; border: 2px solid transparent;
  font-family: var(--f-body); font-size: var(--step-0); font-weight: 700; line-height: 1.2; text-decoration: none; text-align: center;
  cursor: pointer; touch-action: manipulation;
  transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out), transform .15s var(--ease-out), box-shadow .2s var(--ease-out);
}
.btn:active { transform: scale(.98); }
.btn--primary { background: var(--awning-600); color: #fff; box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 6px 18px rgb(35 86 197 / .28); }
.btn--primary:hover { background: var(--awning-700); }
.btn--ghost { background: var(--paper); color: var(--slate-900); border-color: var(--slate-300); }
.btn--ghost:hover { border-color: var(--slate-800); background: var(--slate-50); }
.btn--light { background: #fff; color: var(--slate-900); }
.btn--light:hover { background: var(--awning-50); }
.btn--outline-light { background: transparent; color: #fff; border-color: rgb(255 255 255 / .55); }
.btn--outline-light:hover { border-color: #fff; background: rgb(255 255 255 / .08); }

/* ---------- 04 Chrome ---------- */
/* Utility strip: address, today's status and the text-size control */
.topstrip { background: var(--slate-950); color: var(--slate-100); font-size: var(--step--1); }
.topstrip__inner { display: flex; align-items: center; gap: .25rem 1.5rem; min-height: 48px; padding-block: .25rem; flex-wrap: wrap; }
.topstrip__where { display: inline-flex; align-items: center; gap: .45rem; }
.topstrip__where .icon { width: 1.1em; height: 1.1em; color: var(--awning-300); }
.topstrip__status { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; }
.topstrip__status::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; flex: none; }
.topstrip__status.is-open { color: #9be3b0; }
.topstrip__status.is-soon { color: #ffd48a; }
.topstrip__status.is-closed { color: #ffb7a6; }
.topstrip__status.is-check { color: var(--slate-100); }
.textsize { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; }
.textsize__label { margin-right: .2rem; color: var(--slate-300); }
.textsize__btn {
  min-width: 44px; min-height: 44px; display: inline-grid; place-items: center;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm); cursor: pointer;
  color: #fff; font-family: var(--f-display); font-size: 16px; line-height: 1;
}
.textsize__btn span[aria-hidden] { font-size: 16px; }
.textsize__btn--lg span[aria-hidden] { font-size: 19px; }
.textsize__btn--xl span[aria-hidden] { font-size: 23px; }
.textsize__btn:hover { border-color: var(--slate-500); }
.textsize__btn[aria-pressed="true"] { background: #fff; color: var(--slate-950); }
@media (max-width: 859px) {
  .topstrip__where { display: none; }
  .topstrip__inner { min-height: 44px; }
}

/* Fascia (header): the slate sign board above the awning.
   Header sizes are in px on purpose, so the page's own text-size control
   enlarges the content without pushing the header off the screen. */
.fascia {
  position: sticky; top: 0; z-index: var(--z-fascia);
  background: var(--slate-800); color: #fff;
  padding-top: env(safe-area-inset-top, 0px);
  box-shadow: 0 1px 0 rgb(0 0 0 / .25);
}
.fascia::before { /* the thin silver trim around the real sign board */
  content: ""; position: absolute; inset: 6px max(6px, env(safe-area-inset-left, 0px)); top: calc(6px + env(safe-area-inset-top, 0px));
  border: 1.5px solid rgb(203 208 221 / .38); border-radius: 3px; pointer-events: none;
}
.fascia__inner { position: relative; display: flex; align-items: center; gap: 24px; min-height: 76px; }
.brand { display: inline-flex; align-items: center; gap: 13px; min-width: 0; color: #fff; text-decoration: none; margin-right: auto; }
.brand__roundel { width: 46px; height: 46px; flex: none; color: #fff; }
.brand__word { font-family: var(--f-display); font-size: 25px; line-height: 1.05; letter-spacing: -.005em; white-space: nowrap; }
.brand:focus-visible, .mainnav a:focus-visible, .fascia__call:focus-visible { outline-color: var(--focus-on-dark); }

.mainnav ul { list-style: none; display: flex; gap: 4px; }
.mainnav a {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 16px; border-radius: 999px;
  color: #fff; text-decoration: none; font-size: 18px; font-weight: 600; white-space: nowrap;
}
.mainnav a:hover { background: rgb(255 255 255 / .1); }
.mainnav a[aria-current] { background: rgb(255 255 255 / .14); }

.fascia__call {
  display: inline-flex; align-items: center; gap: 9px; flex: none; min-height: 50px; padding: 0 19px;
  border-radius: 999px; background: #fff; color: var(--slate-900); text-decoration: none;
  font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fascia__call:hover { background: var(--awning-50); }
.fascia__call .icon { color: var(--awning-600); }
.fascia__call-label { display: none; }

@media (max-width: 1023px) { .mainnav a { padding: 0 12px; } .fascia__inner { gap: 16px; } }
@media (min-width: 860px) and (max-width: 959px) {
  .fascia__call-num { display: none; }
  .fascia__call-label { display: inline; }
}
@media (min-width: 860px) and (max-width: 1199px) {
  html[data-text] .fascia__call-num { display: none; }
  html[data-text] .fascia__call-label { display: inline; }
  html[data-text] .mainnav a { padding-inline: 10px; }
  html[data-text] .brand__word { font-size: 23px; }
}
@media (max-width: 859px) {
  .fascia { position: relative; }
  .mainnav { display: none; }
  .fascia__inner { min-height: 68px; gap: 10px; }
  .brand { gap: 10px; }
  .brand__roundel { width: 40px; height: 40px; }
  .brand__word { font-size: 21.5px; white-space: normal; }
  .fascia__call { min-height: 48px; padding: 0 16px; }
  .fascia__call-num { display: none; }
  .fascia__call-label { display: inline; }
}
@media (max-width: 374px) {
  .brand { gap: 8px; }
  .brand__roundel { width: 34px; height: 34px; }
  .brand__word { font-size: 18.5px; }
  .fascia__call { padding: 0 13px; gap: 6px; }
}

/* Mobile dock: call, directions and hours one tap away */
.dock {
  position: fixed; z-index: var(--z-dock);
  left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px));
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 6px; padding: 6px;
  background: var(--slate-900); border-radius: 22px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .16), 0 10px 30px rgb(22 25 39 / .45);
  transform: translateY(calc(100% + 30px + env(safe-area-inset-bottom, 0px)));
  visibility: hidden;
  transition: transform .35s var(--ease-out), visibility 0s linear .35s;
}
.dock.is-on { transform: none; visibility: visible; transition: transform .35s var(--ease-out); }
.dock a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: 58px; border-radius: 16px; color: #fff; text-decoration: none; font-size: 15px; font-weight: 700; line-height: 1.15;
}
.dock a .icon { width: 22px; height: 22px; }
.dock a:first-child { background: var(--awning-600); }
.dock a:not(:first-child):hover { background: rgb(255 255 255 / .08); }
.dock a:focus-visible { outline-color: var(--focus-on-dark); outline-offset: -3px; }
@media (min-width: 860px) { .dock { display: none; } }
@media (max-width: 859px) and (max-height: 520px) { .dock { display: none; } }

/* ---------- 05 Hero (the shop sign, awning edge and window) ---------- */
/* Shared hero parts: live status pill, actions, rating */
.status-pill {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 1.5rem;
  padding: .45rem .95rem .45rem .8rem; border-radius: 999px;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--slate-200);
  font-weight: 700; font-size: var(--step--1); color: var(--slate-900);
}
.status-pill__dot { width: .7rem; height: .7rem; flex: none; border-radius: 50%; background: var(--slate-400); }
.status-pill.is-open .status-pill__dot { background: var(--open); box-shadow: 0 0 0 4px rgb(31 122 61 / .16); }
.status-pill.is-soon .status-pill__dot { background: #c77700; box-shadow: 0 0 0 4px rgb(199 119 0 / .18); }
.status-pill.is-closed .status-pill__dot { background: var(--closed); box-shadow: 0 0 0 4px rgb(168 50 29 / .14); }
.window__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.rating { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .35rem .7rem; margin-top: 1.5rem; min-height: 44px; color: var(--slate-900); text-decoration: none; font-size: var(--step--1); }
.rating:hover span:last-child { text-decoration: underline; }
.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 1.2rem; height: 1.2rem; fill: var(--star); stroke: #b27c00; stroke-width: 1; }
@media (min-width: 400px) { .keep { white-space: nowrap; } html[data-text="xl"] .keep { white-space: normal; } }

/* ---------- Chrome: strip and header, quieter ---------- */
.topstrip { background: var(--slate-950); }
.fascia { background: var(--slate-900); box-shadow: 0 1px 0 rgb(255 255 255 / .06); }
.fascia::before { display: none; }

/* ---------- The hero ---------- */
.hero-c {
  --hc-wall: var(--slate-900);
  --hc-paint: var(--slate-800);
  --hc-trim: rgb(203 208 221 / .4);
  --st: clamp(18px, 1.6vw, 26px);                  /* awning stripe width */
  --hc-win: clamp(320px, min(34vw, 100svh - 430px), 580px); /* window height */
  position: relative;
  padding-top: clamp(14px, 2vw, 28px);
  background: var(--hc-wall);
  color: #fff;
  isolation: isolate;
}

/* The sign board */
.hero-c__sign {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: clamp(18px, 2.2vw, 32px);
  padding: clamp(22px, min(2.4vw, 3.4vh), 36px) clamp(24px, 3.4vw, 52px);
  background:
    linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / 0) 40%, rgb(0 0 0 / .1)),
    var(--hc-paint);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .4), inset 0 1px 0 rgb(255 255 255 / .07);
}
.hero-c__sign::before { /* silver trim, inset like the real board */
  content: ""; position: absolute; inset: 10px; pointer-events: none;
  border: 1.5px solid var(--hc-trim); border-radius: 2px;
  outline: 1px solid rgb(203 208 221 / .13); outline-offset: -6px; /* the fine inner line */
}
.hero-c__sign::after { /* four screws */
  content: ""; position: absolute; inset: 3px; pointer-events: none;
  --screw: radial-gradient(circle 2.6px at 50% 50%, #e9ecf3 0, #a3aabd 55%, #5a6177 90%, transparent 100%);
  background: var(--screw) 0 0 / 7px 7px no-repeat, var(--screw) 100% 0 / 7px 7px no-repeat,
              var(--screw) 0 100% / 7px 7px no-repeat, var(--screw) 100% 100% / 7px 7px no-repeat;
}
.hero-c__roundel { width: clamp(60px, 5.2vw, 84px); height: auto; color: #fff; }
.hero-c__title {
  font-size: min(clamp(2.25rem, 1.05rem + 2.9vw, 3.6rem), 10.5vw);
  line-height: 1.02;
  letter-spacing: -.008em;
  color: #fff;
  text-shadow: .025em .03em 0 rgb(10 12 22 / .6); /* sign-writer's drop shade */
}
.hero-c__where {
  justify-self: end; text-align: right;
  display: grid; gap: .3rem;
  font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase;
  color: var(--slate-200); line-height: 1.3;
}
.hero-c__where span { display: block; white-space: nowrap; }

/* The awning edge: roller bar, striped valance, scalloped hem */
.hero-c__front { position: relative; }
.hero-c__awning {
  position: absolute; z-index: 3; top: 0; pointer-events: none;
  left: max(var(--gutter), env(safe-area-inset-left, 0px)); right: max(var(--gutter), env(safe-area-inset-right, 0px));
  height: calc(var(--st) * 1.25 + var(--st) / 3 + 5px);
  filter: drop-shadow(0 4px 3px rgb(0 0 0 / .42));
}
.hero-c__awning::before, .hero-c__awning::after { content: ""; position: absolute; inset-inline: 0; }
.hero-c__awning::before { /* roller */
  top: 0; height: 5px; z-index: 1;
  background: linear-gradient(180deg, #0f111b, #353b52 60%, #191c2a);
}
.hero-c__awning::after { /* valance: stripes centred so both ends match */
  top: 4px; bottom: 0;
  background:
    linear-gradient(180deg, rgb(8 14 36 / .38), rgb(8 14 36 / .08) 42%, rgb(255 255 255 / .06) 78%, rgb(8 14 36 / .16)),
    linear-gradient(90deg, rgb(8 14 36 / .1), rgb(8 14 36 / 0) 50%, rgb(8 14 36 / .1)) 50% 0 / var(--st) 100% repeat-x,
    linear-gradient(90deg, #f3f5fb 0 25%, var(--awning-600) 25% 75%, #f3f5fb 75%) 50% 0 / calc(var(--st) * 2) 100% repeat-x;
  -webkit-mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--st) / 3) no-repeat,
    radial-gradient(calc(var(--st) / 2) calc(var(--st) / 3) at 50% 0, #000 96%, transparent 100%) 50% 100% / var(--st) calc(var(--st) / 3) repeat-x;
          mask:
    linear-gradient(#000 0 0) top / 100% calc(100% - var(--st) / 3) no-repeat,
    radial-gradient(calc(var(--st) / 2) calc(var(--st) / 3) at 50% 0, #000 96%, transparent 100%) 50% 100% / var(--st) calc(var(--st) / 3) repeat-x;
}

/* The shopfront below: painted panel + window, one piece of joinery */
.hero-c__shop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  background: var(--hc-paint);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .4);
  padding-top: calc(var(--st) * 1.25 + 5px);  /* clear the valance */
}
.hero-c__panel {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: clamp(1.5rem, min(3vw, 4vh), 3rem) clamp(1.5rem, 3vw, 2.75rem);
  min-width: 0;
}
.hero-c__lede { font-size: clamp(var(--step-1), 1rem + .6vw, 1.5rem); line-height: 1.45; color: var(--slate-50); max-width: 21em; }
.hero-c .status-pill {
  margin-top: 1.5rem;
  background: rgb(255 255 255 / .06); color: #fff;
  box-shadow: inset 0 0 0 1px rgb(203 208 221 / .3);
}
.hero-c .status-pill.is-open .status-pill__dot { background: #4cc274; box-shadow: 0 0 0 4px rgb(76 194 116 / .22); }
.hero-c .status-pill.is-soon .status-pill__dot { background: #f0b54a; box-shadow: 0 0 0 4px rgb(240 181 74 / .22); }
.hero-c .status-pill.is-closed .status-pill__dot { background: #ff8a70; box-shadow: 0 0 0 4px rgb(255 138 112 / .2); }
.hero-c .window__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; margin-top: 1.75rem; }
.hero-c .btn--primary { box-shadow: 0 1px 0 rgb(255 255 255 / .22) inset, 0 8px 20px rgb(0 0 0 / .28); }
.hero-c__link {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 48px;
  color: #fff; font-weight: 700; text-decoration: none;
}
.hero-c__link span { text-decoration: underline; text-decoration-color: rgb(255 255 255 / .45); text-decoration-thickness: .08em; text-underline-offset: .28em; }
.hero-c__link:hover span { text-decoration-color: #fff; }
.hero-c__arrow { width: 1.1em; height: 1.1em; transition: translate .2s var(--ease-out); }
.hero-c__link:hover .hero-c__arrow { translate: 3px 0; }
.hero-c .rating { color: var(--slate-100); margin-top: 1rem; }
.hero-c :focus-visible { outline-color: var(--focus-on-dark); }

/* The window: slim painted frame around the photograph */
.hero-c__window {
  position: relative; min-width: 0;
  min-height: var(--hc-win);
  margin: 0 clamp(10px, 1vw, 14px) 0 0;
  padding: clamp(8px, .8vw, 11px);
  background: linear-gradient(180deg, #454b64, var(--slate-700));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .06), 0 0 0 1px rgb(0 0 0 / .35);
}
.hero-c__photo { position: absolute; inset: clamp(8px, .8vw, 11px); display: block; overflow: hidden; box-shadow: 0 0 0 1px rgb(0 0 0 / .45); }
.hero-c__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero-c__photo::after { /* faint reflection on the glass */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgb(255 255 255 / 0) 58%, rgb(255 255 255 / .07) 58.3%, rgb(255 255 255 / 0) 66%);
}

/* Stall riser: a fine band of the cobalt tiles, then the pavement edge */
.hero-c__stall {
  height: clamp(18px, 1.8vw, 26px);
  background:
    linear-gradient(180deg, rgb(0 0 0 / .4), rgb(0 0 0 / 0) 45%),
    repeating-linear-gradient(90deg, rgb(255 255 255 / .08) 0 1px, transparent 1px 13px),
    repeating-linear-gradient(0deg, rgb(255 255 255 / .08) 0 1px, transparent 1px 13px),
    var(--tile-800);
  box-shadow: 0 0 0 1px rgb(0 0 0 / .4);
}
.hero-c::after { /* pavement edge */
  content: ""; display: block; height: clamp(10px, 1vw, 14px);
  background: linear-gradient(180deg, #3b4159, #2a2e41);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .08);
}

/* ---------- Tablet & phone ---------- */
@media (max-width: 1099px) {
  .hero-c__sign { grid-template-columns: auto minmax(0, 1fr); }
  .hero-c__where { grid-column: 2; justify-self: start; text-align: left; display: flex; flex-wrap: wrap; gap: 0 1.2em; margin-top: .55rem; }
  .hero-c__shop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 859px) {
  .topstrip__status { display: none !important; }
  .textsize { margin-left: 0; width: 100%; }
  .textsize__label { margin-right: auto; }
  .fascia__inner { min-height: 60px; }
  .hero-c { padding-top: 8px; --hc-win: clamp(130px, 33vw, 320px); }
  .hero-c__sign { grid-template-columns: minmax(0, 1fr); padding: 20px 22px 18px; }
  .hero-c__roundel { display: none; }
  .hero-c__where { grid-column: 1; font-size: .875rem; letter-spacing: .1em; margin-top: .6rem; }
  .hero-c__shop { grid-template-columns: minmax(0, 1fr); }
  .hero-c__window { order: -1; margin: 0; padding: 0; }
  .hero-c__photo { inset: 6px 7px; }
  .hero-c__panel { padding: 1.1rem 1.1rem 1.4rem; }
  .hero-c__lede { font-size: var(--step-0); }
  .hero-c .status-pill { margin-top: 1.1rem; }
  .hero-c .window__actions { margin-top: 1.1rem; width: 100%; }
  .hero-c .window__actions .btn { width: 100%; }
}
@media (min-width: 600px) and (max-width: 859px) {
  .hero-c .window__actions .btn { width: auto; }
  .hero-c__lede { max-width: 30em; }
}

/* Landscape phones: keep the sign, the status and the call button on screen */
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
  .hero-c { padding-top: 8px; --hc-win: 120px; }
  .hero-c__sign { padding-block: 14px; }
  .hero-c__title { font-size: 2rem; }
  .hero-c__roundel { width: 48px; }
  .hero-c__shop { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
  .hero-c__window { order: 0; min-height: 0; margin: 0 10px 0 0; }
  .hero-c__photo { inset: 8px; }
  .hero-c__panel { padding: 1rem 1.25rem 1.1rem; }
  .hero-c__lede { font-size: 1rem; }
  .hero-c .status-pill, .hero-c .window__actions { margin-top: .75rem; }
  .hero-c .window__actions .btn { width: auto; min-height: 48px; }
  .hero-c .rating { margin-top: .4rem; }
}

/* Motion: the awning drops in once */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-c__awning::after { animation: hc-drop .9s var(--ease-out) .1s both; }
}
@keyframes hc-drop { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 -12px 0); } }

@media (forced-colors: active) {
  .hero-c__awning, .hero-c__stall { forced-color-adjust: none; }
  .hero-c__roundel { color: CanvasText; }
  .hero-c__link { border: 2px solid ButtonText; padding-inline: .75rem; }
}
@media print {
  .hero-c__awning, .hero-c__stall, .hero-c__window, .hero-c::after { display: none !important; }
  .hero-c, .hero-c * { color: #000 !important; background: none !important; box-shadow: none !important; text-shadow: none !important; }
}

/* ---------- 06 On the counter (the slate board) ---------- */
.board { background: var(--slate-900); color: #fff; padding-block: var(--section); position: relative; }
.board__panel {
  position: relative;
  padding: clamp(1.75rem, 1rem + 3vw, 4rem);
  border-radius: var(--r-lg);
  background: radial-gradient(120% 80% at 20% 0%, rgb(255 255 255 / .05), transparent 60%), var(--slate-800);
  box-shadow: inset 0 0 0 1.5px rgb(203 208 221 / .28), inset 0 0 0 10px var(--slate-800), inset 0 0 0 11px rgb(203 208 221 / .14), 0 30px 60px -30px rgb(0 0 0 / .6);
}
.board__panel::before, .board__panel::after { /* screws, like the real sign board */
  content: ""; position: absolute; top: 18px; width: 10px; height: 10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f3f4f8, #9aa1b6 60%, #5c6378);
  box-shadow: 0 1px 1px rgb(0 0 0 / .5);
}
.board__panel::before { left: 18px; }
.board__panel::after { right: 18px; }
.board__head { display: grid; gap: 1rem 3rem; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) { .board__head { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.board .eyebrow { color: var(--awning-200); }
.board .section__title { color: #fff; }
.board .section__lede { color: var(--slate-100); margin-top: 0; }
.board__list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); margin-top: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 1000px) { .board__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 5rem); } }
.board__item {
  padding-block: clamp(1.4rem, 2.5vw, 2rem); border-top: 1px dashed rgb(203 208 221 / .32);
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(88px, 24%, 150px); column-gap: 1.25rem; row-gap: .55rem; align-items: start;
}
.board__text { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; min-width: 0; }
.board__photo { display: block; border-radius: 10px; overflow: hidden; margin: 5px; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--awning-500), 0 10px 20px -8px rgb(0 0 0 / .6); }
.board__photo img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.board__name { font-size: var(--step-3); color: #fff; }
.board__what { font-family: var(--f-mono); font-size: var(--step--1); letter-spacing: .03em; color: var(--awning-200); text-wrap: balance; }
.board__body { color: var(--slate-100); max-width: 34em; }
.board__quote { margin-top: .4rem; }
.board__quote p { color: var(--slate-50); font-style: italic; }
.board__quote figcaption { margin-top: .35rem; font-size: var(--step--1); color: var(--slate-200); }
.board__quote figcaption::before { content: "\2014\00a0"; }
/* Phones: photo sits beside the heading; tagline, body and quotes run full width */
@media (max-width: 599px) {
  .board__item { grid-template-columns: minmax(0, 1fr) 84px; column-gap: 1rem; }
  .board__text { display: contents; }
  .board__name { grid-column: 1; grid-row: 1; align-self: center; }
  .board__photo { grid-column: 2; grid-row: 1; }
  .board__what, .board__body, .board__quote { grid-column: 1 / -1; }
  .board__what { text-wrap: pretty; }
}
@media (max-width: 374px) { .board__item { grid-template-columns: minmax(0, 1fr) 68px; } }
@media (max-width: 480px) {
  html[data-text="xl"] .board__item { grid-template-columns: minmax(0, 1fr); }
  html[data-text="xl"] .board__photo { grid-row: auto; grid-column: 1; width: 84px; order: -1; }
}
.board__foot {
  margin-top: clamp(1.5rem, 3vw, 2.5rem); padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px dashed rgb(203 208 221 / .32);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
}
.board__foot p { color: var(--slate-100); max-width: 38em; }
.board__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.xmas {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  display: grid; gap: .35rem; padding: calc(1.25rem + 6px) 1.5rem 1.25rem;
  border-radius: var(--r-md);
  background: repeating-linear-gradient(90deg, var(--awning-600) 0 14px, #fbfcff 14px 28px) top / 100% 6px no-repeat, rgb(255 255 255 / .06);
  box-shadow: inset 0 0 0 1px rgb(203 208 221 / .25);
}
.xmas__title { font-size: var(--step-2); color: #fff; }
.xmas p { color: var(--slate-100); max-width: 44em; }

/* ---------- 07 The story: old sign, new sign ---------- */
.story { background: var(--paper); }
.story__grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 960px) { .story__grid { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); } }
.story__signs { display: grid; gap: .6rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--r-lg); background: var(--tile-700) var(--pat-tile) 0 0 / 30px 30px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .2), var(--shadow-2); }
.sign { display: grid; place-items: center; gap: .6rem; min-height: 112px; padding: 1.2rem 1rem; border-radius: 4px; text-align: center; }
.sign--old { background: linear-gradient(180deg, #fbfaf6, #eeece4); color: #1f2a6b; box-shadow: inset 0 0 0 3px #d8d6cc, 0 6px 14px rgb(0 0 0 / .3); filter: saturate(.75); transform: rotate(-1.2deg); }
.sign__name { font-family: var(--f-display); line-height: 1; }
.sign--old .sign__name { font-size: clamp(15px, 5vw, 30px); letter-spacing: .06em; white-space: nowrap; }
.sign__rule { width: 60%; height: 2px; background: currentColor; opacity: .6; }
.sign--new { grid-auto-flow: column; justify-content: center; gap: 1rem; background: var(--slate-800); color: #fff; box-shadow: inset 0 0 0 1.5px rgb(203 208 221 / .38), inset 0 0 0 7px var(--slate-800), inset 0 0 0 8px rgb(203 208 221 / .16), 0 10px 22px rgb(0 0 0 / .4); }
.sign__roundel { width: clamp(48px, 8vw, 72px); height: auto; flex: none; }
.sign__name--new { font-size: clamp(20px, 6vw, 38px); }
.sign__when { font-family: var(--f-mono); font-size: var(--step--1); color: #fff; text-align: center; letter-spacing: .04em; margin-bottom: .75rem; }
.sign__when:last-child { margin-bottom: 0; }
.story__text { font-size: var(--step-1); color: var(--ink-soft); margin-top: 1.25rem; max-width: 34em; }
.story__quote { margin-top: 2rem; padding-left: 1.25rem; border-left: 4px solid var(--awning-600); }
.story__quote p { font-family: var(--f-display); font-size: var(--step-2); line-height: 1.3; color: var(--slate-950); }
.story__quote figcaption { margin-top: .75rem; color: var(--ink-muted); font-weight: 600; }

/* ---------- 08 Reviews ---------- */
.reviews { background: var(--paper-2); }
.reviews__head { display: grid; gap: 2rem 3rem; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) { .reviews__head { grid-template-columns: minmax(0, 1fr) auto; } }
.reviews__intro { margin-top: 1.25rem; color: var(--ink-soft); font-size: var(--step-1); max-width: 30em; }
.score { display: flex; align-items: center; gap: 1.25rem 1.75rem; flex-wrap: wrap; }
.score__num { font-family: var(--f-display); font-size: clamp(4.5rem, 3rem + 5vw, 7rem); line-height: .85; color: var(--awning-700); letter-spacing: -.03em; font-variant-numeric: lining-nums; }
.score__meta { display: grid; gap: .35rem; }
.score .stars svg { width: 1.6rem; height: 1.6rem; }
.score__count { font-size: var(--step-1); font-weight: 700; color: var(--slate-900); }
.score__link { font-size: var(--step--1); display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; }
.score__link .icon { width: 1em; height: 1em; }

.feature-quote { margin-top: clamp(2.5rem, 5vw, 4rem); padding: clamp(1.75rem, 4vw, 3.25rem); border-radius: var(--r-lg); background: var(--tile-800) var(--pat-tile) 0 0 / 30px 30px; position: relative; overflow: hidden; }
.feature-quote::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgb(19 21 58 / .78), rgb(19 21 58 / .55)); }
.feature-quote > * { position: relative; }
.feature-quote blockquote { max-width: 52rem; }
.feature-quote p { font-family: var(--f-display); font-size: var(--step-4); line-height: 1.1; color: #fff; }
.feature-quote p::before { content: "\201C"; display: block; font-size: 1.4em; line-height: .6; color: var(--awning-300); margin-bottom: .15em; }
.feature-quote figcaption { margin-top: 1.25rem; color: var(--tile-100); font-weight: 600; }

.review-grid { list-style: none; margin-top: clamp(2rem, 4vw, 3rem); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1.25rem; }
.review { padding: 1.5rem 1.5rem 1.35rem; border-radius: var(--r-md); background: var(--paper); box-shadow: inset 0 0 0 1px var(--paper-3), var(--shadow-1); }
.review figure { height: 100%; display: flex; flex-direction: column; }
.review .stars svg { width: 1.1rem; height: 1.1rem; }
.review blockquote { margin-top: .8rem; }
.review blockquote p { color: var(--slate-900); }
.review figcaption { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; gap: .7rem; font-size: var(--step--1); color: var(--ink-muted); }
.review__avatar { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; background: var(--slate-700); color: #fff; font-weight: 700; flex: none; }
.review__name { color: var(--slate-900); font-weight: 700; display: block; }
.review--cta { position: relative; overflow: hidden; display: grid; align-content: end; gap: .75rem; background: var(--tile-800) var(--pat-tile) 0 0 / 30px 30px; box-shadow: var(--shadow-1); color: #fff; min-height: 12rem; }
.review--cta::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgb(19 21 58 / .82), rgb(19 21 58 / .62)); }
.review--cta > * { position: relative; }
.review--cta p { color: var(--tile-100); }
.review--cta a { font-family: var(--f-display); font-size: var(--step-2); line-height: 1.15; color: #fff; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; }
.review--cta a .icon { width: .8em; height: .8em; }

/* ---------- 09 Visit ---------- */
.visit { background: var(--paper); }
.visit__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 960px) { .visit__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.visit__address { font-family: var(--f-display); font-size: var(--step-2); line-height: 1.25; margin-top: 1.75rem; color: var(--slate-950); }
.visit__landmark { margin-top: 1rem; color: var(--ink-soft); max-width: 34em; }
.visit__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.visit__phone { margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.visit__phone-label { font-size: var(--step--1); color: var(--ink-muted); }
.visit__phone a { font-family: var(--f-display); font-size: var(--step-3); color: var(--slate-950); text-decoration: none; display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; }
.visit__phone a:hover { color: var(--awning-700); text-decoration: underline; text-decoration-thickness: .06em; }
.visit__phone .icon { width: .8em; height: .8em; color: var(--awning-600); }
.visit__side { display: grid; }
.visit__notes { list-style: none; display: grid; gap: .9rem; margin-top: 2.25rem; padding-inline: .25rem; }
.visit__notes li { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: .8rem; color: var(--ink-soft); }
.visit__notes .icon { color: var(--awning-700); margin-top: .2rem; }
.visit__notes strong { color: var(--slate-950); }

/* Opening hours: an enamel plate, like the sign board */
.plate { position: relative; border-radius: var(--r-lg); padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem); background: var(--slate-800); color: #fff; box-shadow: inset 0 0 0 1.5px rgb(203 208 221 / .3), inset 0 0 0 9px var(--slate-800), inset 0 0 0 10px rgb(203 208 221 / .16), var(--shadow-2); }
.plate::before, .plate::after { content: ""; position: absolute; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #f3f4f8, #9aa1b6 60%, #5c6378); box-shadow: 0 1px 1px rgb(0 0 0 / .5); }
.plate::before { left: 16px; }
.plate::after { right: 16px; }
.plate__title { font-size: var(--step-2); display: flex; align-items: center; gap: .6rem; }
.plate__title .icon { width: .9em; height: .9em; color: var(--awning-300); }
.plate__status { margin-top: .6rem; font-weight: 700; color: var(--slate-100); }
.plate__status.is-open { color: #9be3b0; }
.plate__status.is-soon { color: #ffd48a; }
.plate__status.is-closed { color: #ffc3b5; }
.hours { width: 100%; margin-top: 1.5rem; font-variant-numeric: tabular-nums; }
.hours th, .hours td { padding: .8rem .25rem; text-align: left; border-top: 1px dashed rgb(203 208 221 / .3); font-weight: 400; vertical-align: middle; }
.hours th { font-weight: 700; color: #fff; }
.hours td { font-family: var(--f-mono); text-align: right; color: var(--slate-50); white-space: nowrap; }
.hours tr.is-closed-day td { color: var(--slate-300); }
.hours tr.is-today { background: rgb(255 255 255 / .08); }
.hours__today { display: inline-block; margin-left: .5rem; padding: .05rem .55rem; border-radius: 999px; background: #fff; color: var(--slate-900); font-size: .875rem; font-weight: 700; vertical-align: .1em; }
html[data-text="xl"] .hours td { white-space: normal; }
@media (max-width: 479px) {
  .plate { padding-inline: 1.5rem; }
  .hours th, .hours td { padding-inline: .4rem; }
  .hours__today { display: block; width: fit-content; margin: .3rem 0 0; }
}
@media (max-width: 374px) {
  .plate { padding-inline: 1.15rem; }
  .hours th, .hours td { padding-inline: .15rem; }
  html[data-text] .hours td { white-space: normal; }
}
.plate__note { margin-top: 1.25rem; font-size: var(--step--1); color: var(--slate-200); }

/* Map */
.map { margin-top: clamp(2.5rem, 5vw, 4rem); border-radius: var(--r-lg); overflow: hidden; background: #e9edf4; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); position: relative; }
.map__svg { width: 100%; height: auto; aspect-ratio: 980 / 466; }
.map__svg text { font-family: var(--f-body); }
.map__svg .map__shopname { font-family: var(--f-display); }
@media (max-width: 959px) { .map__svg { aspect-ratio: 900 / 520; } }
@media (max-width: 600px) {
  .map__svg { aspect-ratio: 1; }
  .map__svg .map__label { font-size: 27px; }
  .map__svg .map__street { font-size: 22px; }
  .map__svg .map__shop text:not(.map__shopname) { font-size: 19px; }
  .map__svg .map__far { display: none; }
}
.map figcaption { padding: .5rem 1.25rem; background: #fff; font-size: var(--step--1); color: var(--ink-muted); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 1.5rem; border-top: 1px solid var(--line); }
.map figcaption a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- 10 Footer ---------- */
.footer { background: var(--slate-950); color: var(--slate-100); padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem; }
@media (max-width: 859px) { .footer { padding-bottom: calc(2rem + 86px + env(safe-area-inset-bottom, 0px)); } }
@media (max-width: 859px) and (max-height: 520px) { .footer { padding-bottom: 2rem; } }
.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 800px) { .footer__grid { grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: start; } }
.footer__roundel { width: 132px; height: 132px; color: #fff; }
.footer h2 { font-family: var(--f-body); font-size: var(--step--1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--slate-300); margin-bottom: .75rem; }
.footer p, .footer address { line-height: 1.7; }
.footer p > a { display: inline-flex; align-items: center; min-height: 44px; }
.footer__big { font-family: var(--f-display); font-size: var(--step-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.footer__hours { list-style: none; display: grid; gap: .2rem; font-variant-numeric: tabular-nums; }
.footer__hours li { display: flex; justify-content: space-between; gap: 1rem; max-width: 18rem; }
.footer__hours span:last-child { font-family: var(--f-mono); font-size: .95em; }
.footer__base { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.5rem; border-top: 1px solid rgb(255 255 255 / .12); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem 2rem; font-size: var(--step--1); color: var(--slate-300); }
.credits { margin-top: 1rem; font-size: 1rem; color: var(--slate-300); }
.credits summary { cursor: pointer; min-height: 44px; display: inline-flex; align-items: center; gap: .4rem; color: var(--slate-200); list-style: none; }
.credits summary::-webkit-details-marker { display: none; }
.credits summary::before { content: "\25B8"; }
.credits[open] summary::before { content: "\25BE"; }
.credits p { margin-top: .5rem; }
.credits ul { list-style: none; display: grid; gap: .35rem; margin-top: .5rem; }

/* ---------- 11 Motion, forced colours, print ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
@media (forced-colors: active) {
  .btn, .fascia__call, .textsize__btn, .dock a { border: 2px solid ButtonText; }
  .textsize__btn[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
  .mainnav a[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; }
  .brand__roundel, .footer__roundel, .sign__roundel { color: CanvasText; }
  .awning, .pier, .riser, .door { forced-color-adjust: none; }
}
@media print {
  .topstrip, .dock, .awning, .door, .pier, .riser, .textsize, .mainnav, .display, .board__photo, .map, .credits { display: none !important; }
  .fascia { position: static; }
  .shopfront, .shopfront__face, .window, .window__glass { display: block; background: none !important; box-shadow: none !important; margin: 0; padding: 0; }
  .fascia, .fascia *, .feature-quote, .feature-quote *, .story__signs, .story__signs *, .board, .board *, .plate, .plate *, .footer, .footer *, .review--cta, .review--cta *, .btn {
    color: #000 !important; background: none !important; box-shadow: none !important;
  }
  .feature-quote::before, .review--cta::before { display: none; }
  .btn { border: 1px solid #000; }
  .plate, .review, .board__item { break-inside: avoid; }
}