/* A compact, traditional small-business page. Keep the content easy to read. */
:root {
  color-scheme: light;
  --green: #254c32;
  --red: #8b2924;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 12px; }
body {
  margin: 0;
  padding: 24px 16px;
  background: #e4e8dc;
  color: #292929;
  font: 16px/1.5 Arial, Helvetica, sans-serif;
}
.page {
  max-width: 820px;
  margin: 0 auto;
  background: #fffef9;
  border: 1px solid #a4ad98;
  border-top: 6px solid var(--green);
}
a { color: #245b31; text-underline-offset: 2px; }
a:hover { color: var(--red); }
a:focus-visible { outline: 3px solid #a04b14; outline-offset: 4px; }
header { text-align: center; padding: 20px 16px 0; }
.site-title {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  color: var(--green);
  font: bold 36px/1.2 Georgia, 'Times New Roman', serif;
}
.site-title img { flex-shrink: 0; }
header p { margin: 6px 0 16px; color: var(--red); font: italic 18px Georgia, serif; }
nav { padding: 9px 0; border-top: 1px solid #bdc6b4; border-bottom: 1px solid #bdc6b4; font-size: 14px; }
nav span { padding: 0 9px; color: #7a8272; }
main { padding: 22px 30px 14px; }
h1 { color: var(--green); font: bold 26px/1.25 Georgia, serif; margin: 0 0 5px; }
h2 { color: var(--green); font: bold 22px/1.3 Georgia, serif; margin: 20px 0 8px; }
p { margin: 10px 0; }
.date { color: #666; font-size: 13px; margin: 0 0 14px; }
.reservation { margin: 18px 0; padding: 12px 16px; background: #eff2e7; border: 1px solid #b3c0a4; }
.reservation h2 { margin: 0 0 8px; color: var(--red); font-size: 21px; }
.reservation p:last-child { margin-bottom: 0; }
.booking { font-size: 19px; font-weight: bold; }
ul { margin: 8px 0 12px; padding-left: 25px; }
li { margin: 3px 0; }
.notice { color: #792721; }
#visit { border-top: 1px solid #d3d7cb; margin-top: 20px; }
.signature { margin-top: 16px; font-family: Georgia, serif; font-style: italic; }
footer { border-top: 1px solid #bdc6b4; background: #f0f1e9; padding: 10px 16px; text-align: center; color: #58604f; font-size: 12px; }
footer span { padding: 0 7px; }
.skip { position: absolute; top: -100px; left: 12px; padding: 10px; background: white; }
.skip:focus { top: 10px; }
@media (max-width: 560px) {
  body { padding: 8px; }
  header { padding: 18px 12px 0; }
  .site-title { font-size: 28px; gap: 10px; }
  .site-title img { width: 21px; height: 29px; }
  header p { font-size: 16px; }
  nav { font-size: 13px; }
  nav span { padding: 0 3px; }
  main { padding: 18px 16px 12px; }
  h1 { font-size: 24px; }
  .reservation { padding: 12px; }
  .booking { font-size: 18px; }
}

/* Shared navigation and additional information pages. */
nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px 17px; }
nav a { white-space: nowrap; }
nav a[aria-current="page"] { font-weight: bold; color: var(--red); }
address { font-style: normal; margin: 14px 0; }
.hours { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.hours caption { text-align: left; font: bold 22px Georgia, serif; color: var(--green); margin-bottom: 10px; }
.hours th, .hours td { text-align: left; padding: 9px 8px; border: 1px solid #bcc6b1; }
.hours th { background: #e8edde; }
.hours tbody tr:nth-child(even) { background: #f3f5ed; }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.gallery a { display: block; }
.gallery img { display: block; width: 100%; height: 230px; object-fit: contain; background: #eef0e7; border: 1px solid #bdc6b4; }
.directions-map { display: block; max-width: 100%; height: auto; border: 1px solid #bdc6b4; }
@media (max-width: 560px) {
  nav { gap: 6px 14px; }
  .hours { font-size: 13px; }
  .hours th, .hours td { padding: 8px 5px; }
  .gallery { grid-template-columns: 1fr; }
  .gallery img { height: auto; }
}

.home-photo { display: block; width: 100%; max-width: 480px; height: auto; margin: 14px auto 18px; border: 1px solid #bdc6b4; }