:root {
  color-scheme: light;
  --ink: #36241d;
  --cream: #fbf5e9;
  --clay: #8e4433;
  --honey: #eac787;
  --line: #d9c7b1;
  font: 100%/1.6 system-ui, sans-serif;
  color: var(--ink);
  background: var(--cream);
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-underline-offset: .23em; }
:focus-visible { outline: 3px solid #aa692d; outline-offset: 4px; }
.skip { position: absolute; top: -5rem; background: white; padding: .5rem; }
.skip:focus { top: .5rem; z-index: 2; }
.wrap { width: min(91%, 75rem); margin-inline: auto; }
.bar, nav, .actions, .hours-banner .wrap { display: flex; align-items: center; gap: clamp(.75rem, 3vw, 2rem); }
.bar, .hours-banner .wrap { justify-content: space-between; }
.bar { padding-block: .9rem; }
.brand { display: inline-block; font: bold clamp(1.18rem, 3vw, 1.8rem)/1 Georgia, serif; text-decoration: none; }
.brand small { display: block; font: 700 .6rem/1.4 system-ui, sans-serif; letter-spacing: .17em; margin-top: .3rem; }
nav a { font-weight: 650; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: .62rem 1.15rem; background: var(--clay); color: white; border: 1px solid var(--clay); border-radius: 5px; font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; }
.button:hover { background: #713428; }
.button.outline { background: transparent; color: var(--ink); }
.button.outline:hover { background: var(--honey); }
.hero { display: grid; grid-template-columns: 2fr 3fr; border-radius: 12px; overflow: hidden; margin-bottom: 1.5rem; background: #f0e2cb; }
.welcome { padding: clamp(1.45rem, 4vw, 4.5rem); align-self: center; }
img { display: block; width: 100%; object-fit: cover; }
.hero img { height: 100%; aspect-ratio: 4/3; object-position: center; }
h1, h2, h3 { font-family: Georgia, serif; font-weight: 500; line-height: 1.08; margin: 0 0 .65em; }
h1 { font-size: clamp(2.6rem, 4.6vw, 4.9rem); letter-spacing: -.045em; margin-bottom: .35em; }
h2 { font-size: clamp(2.15rem, 4vw, 3.7rem); letter-spacing: -.035em; }
h3 { font-size: 1.65rem; }
p { margin: 0 0 1em; max-width: 58ch; }
.eyebrow { color: #753d2e; font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.actions { flex-wrap: wrap; gap: .65rem; margin-top: 1.4rem; }
.hours-banner { background: var(--honey); font-weight: 650; padding-block: .85rem; }
.section { padding-block: clamp(2.8rem, 7vw, 5.6rem); }
.intro { margin-bottom: 1.7rem; }
.interiors, .plates, .split { display: grid; gap: clamp(1rem, 3vw, 2.3rem); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.interiors img { aspect-ratio: 4/3; }
.plates { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1.65rem; }
.plates img { aspect-ratio: 5/4; }
.interiors img, .plates img { border-radius: 8px; }
.tinted { background-color: #f4e7d5; background-image: repeating-linear-gradient(115deg, transparent 0 5px, #81513208 6px, transparent 7px 10px); }
.note { border-left: 3px solid #a85841; padding: .75rem 1rem; background: #fff9ef; }
.caption { margin-top: .7rem; font-size: .88rem; }
form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; background: #f0e2cb; padding: clamp(1rem, 3vw, 2rem); border-radius: 10px; }
label { display: grid; gap: .25rem; align-content: start; font-weight: 650; }
label span { display: inline; font-size: .85rem; font-weight: 400; }
.wide { grid-column: 1 / -1; }
input, textarea, select { font: inherit; color: inherit; width: 100%; min-width: 0; min-height: 44px; border: 1px solid #947e69; background: #fffaf2; border-radius: 4px; padding: .5rem; }
#booking-status:empty { margin: 0; }
#booking-status { margin: .7rem 0 0; }
address { font-style: normal; margin-bottom: .8rem; }
.hours { margin: 0; }
.hours div { display: flex; justify-content: space-between; gap: .5rem; padding: .45rem 0; border-bottom: 1px solid var(--line); }
dd { margin: 0; text-align: right; }
footer { background: var(--ink); color: var(--cream); padding-block: 2.5rem; }
footer p { margin-top: 1rem; }
footer .hours div { border-color: #775d4b; }
@media (max-width: 700px) {
  .hero, .split { grid-template-columns: 1fr; }
  .hero img { height: auto; }
  .hours-banner .wrap { font-size: .86rem; }
}
@media (max-width: 390px) {
  nav a:not(.button) { display: none; }
  form { grid-template-columns: 1fr; }
}

/* The masthead takes its shape from the oval sign on the cottage wall. */
:root {
  --ink: #39241f;
  --cream: #faf2e2;
  --clay: #702f3d;
  --honey: #e5bd76;
}
body { background: radial-gradient(ellipse at top, #fff9ed, transparent 45rem), var(--cream); }
.bar { border-bottom: 1px solid var(--line); }
.brand {
  padding: .65rem 1.25rem;
  border: 3px double currentColor;
  border-radius: 50%;
  text-align: center;
  color: var(--clay);
}
nav a { text-decoration: none; }
nav a:hover { text-decoration: underline; }
.button { border-radius: 0; }
.button:hover { background: #54222f; }
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: visible;
  margin: 0;
  border-radius: 0;
  background: transparent;
}
.hero img {
  order: -1;
  height: clamp(16rem, 43vw, 38rem);
  aspect-ratio: auto;
  object-position: center 49%;
}
.welcome {
  position: relative;
  width: min(92%, 55rem);
  margin: -3.4rem auto 2.1rem;
  padding: clamp(1.4rem, 4vw, 3.1rem);
  text-align: center;
  background: var(--cream);
  border: 1px solid #9f7764;
  outline: 1px solid #9f7764;
  outline-offset: -7px;
}
.welcome h1 { font-size: clamp(2.2rem, 6vw, 5rem); color: var(--clay); }
.welcome p { margin-inline: auto; }
.welcome .eyebrow { text-transform: none; letter-spacing: .035em; font-size: .92rem; }
.actions { justify-content: center; }
.hours-banner { background: var(--ink); color: var(--cream); }
.hours-banner .wrap { justify-content: center; flex-wrap: wrap; column-gap: 2rem; row-gap: .2rem; }
main > .section:has(.interiors) { display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: 2rem; }
.interiors { grid-template-columns: 3fr 2fr; align-items: end; gap: .75rem; }
.interiors img:first-child { aspect-ratio: 5/4; }
.interiors img:last-child { aspect-ratio: 3/4; }
.interiors img, .plates img, form { border-radius: 0; }
#menu { background: #ead5b9; border-block: 1px solid var(--line); }
#menu .section { text-align: center; }
#menu .note { margin-inline: auto; border: 3px double #9f7764; }
#menu .caption { margin-inline: auto; }
.plates { gap: .75rem; }
.plates img { aspect-ratio: 4/5; }
form { background: #f2dfc3; border: 3px double #9f7764; }
footer .brand { color: var(--cream); }

@media (max-width: 700px) {
  .hero img { height: clamp(12rem, 56vw, 24rem); }
  .welcome { margin-top: -1.35rem; }
  main > .section:has(.interiors) { grid-template-columns: 1fr; gap: .5rem; }
  .bar { padding-block: .65rem; }
}