/* The shop on one clear page. Body text is 20px or larger. Colors are checked for contrast. */
:root {
  --text: #1b1b1b;
  --paper: #ffffff;
  --brand: #6b2e1f;
  --on-brand: #ffffff;
  --panel: #f7f1ec;
  --line: #4a3a33;
  --note-bg: #fff4d6;
  --note-line: #7a4b00;
  --focus: #0b3b8c;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 1.25rem; line-height: 1.6; overflow-wrap: break-word; }
a { color: var(--brand); text-decoration: underline; text-underline-offset: 0.2em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.skip-link { position: absolute; left: 0.5rem; top: -5rem; background: var(--paper); color: var(--text); padding: 0.75rem 1rem; border: 2px solid var(--text); z-index: 2; }
.skip-link:focus { top: 0.5rem; }

.label { background: var(--note-bg); border-bottom: 3px solid var(--note-line); padding: 0.75rem 1rem; }
.label p { margin: 0 auto; max-width: 42rem; }

.hero { background: var(--brand); color: var(--on-brand); padding: 1.5rem 1rem; }
.hero p { margin: 0 auto 0.5rem; max-width: 42rem; }
.hero .name { font-size: 2rem; line-height: 1.2; font-weight: 700; }
.hero .tag { font-size: 1.35rem; }
.button { display: inline-flex; align-items: center; min-height: 52px; padding: 0.5rem 1.25rem; margin-top: 0.5rem; font-weight: 700; color: var(--brand); background: var(--paper); border: 2px solid var(--paper); border-radius: 0.5rem; text-decoration: none; }
.hero .button:focus-visible { outline-color: var(--paper); }

main { max-width: 42rem; margin: 0 auto; padding: 1rem; }
h2 { font-size: 1.6rem; color: var(--brand); margin: 2rem 0 0.75rem; }
p, ul { margin: 0 0 1rem; }
li { margin-bottom: 0.5rem; }

.hours { border-collapse: collapse; width: 100%; max-width: 26rem; margin-bottom: 1rem; }
.hours th, .hours td { text-align: left; padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--line); }
.hours th { font-weight: 700; }
.services, .reach { padding-left: 1.25rem; }
.reach a { display: inline-block; min-height: 44px; padding: 0.3rem 0; }

.map { margin: 1rem 0; }
.map svg { display: block; width: 100%; height: auto; border: 2px solid var(--line); border-radius: 0.5rem; }
.map figcaption { margin-top: 0.5rem; }

.foot { max-width: 42rem; margin: 2rem auto 0; padding: 1rem; border-top: 2px solid var(--text); }

@media (min-width: 40rem) {
  .hero { padding: 2.5rem 1rem; }
  .hero .name { font-size: 2.75rem; }
}

@media print {
  body { font-size: 12pt; }
  .skip-link, .call { display: none; }
  .hero { background: #ffffff; color: #000000; border-bottom: 2px solid #000000; padding: 0 0 8pt; }
  .label { background: #ffffff; border: 1px solid #000000; }
  h2, a { color: #000000; }
  .map { break-inside: avoid; }
  .map svg { max-height: 3in; width: auto; }
}