@font-face {
  font-family: Lora;
  src: url("assets/Lora.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("assets/BeVietnamPro-Regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Be Vietnam Pro";
  src: url("assets/BeVietnamPro-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}

:root {
  color-scheme: light;
  --cream: #f7f1e7;
  --earth: #854727;
  --sand: #dec9ae;
  --leaf: #485b45;
  --ink: #382c25;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 1rem/1.65 "Be Vietnam Pro", sans-serif;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
a:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }
.skip { position: absolute; left: 1rem; top: -10rem; }
.skip:focus { top: 1rem; background: var(--cream); padding: .5rem; z-index: 1; }
.wrap { width: min(90%, 76rem); margin-inline: auto; }
.header, .footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.header { padding-block: 1.5rem; }
.logo { width: 145px; height: auto; }
nav { display: flex; align-items: center; justify-content: end; flex-wrap: wrap; gap: 1.25rem; }
nav a { text-decoration: none; }
nav a:not(.button):hover { text-decoration: underline; }
.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: .65rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 4px;
  background: var(--earth);
  color: var(--cream);
  font-weight: 600;
  text-decoration: none;
}

.button:hover { background: var(--ink); }
.button.secondary { border-color: var(--earth); background: transparent; color: var(--earth); }
.button.secondary:hover { background: var(--earth); color: var(--cream); }
.button:focus-visible { outline-color: var(--earth); }
.button.outline { border-color: var(--cream); background: transparent; }
.button.outline:hover { background: var(--cream); color: var(--leaf); }
.button.outline:focus-visible { outline-color: var(--cream); }
.hero { display: grid; grid-template-columns: 2fr 3fr; align-items: stretch; }
.hero-copy { padding: clamp(1.5rem, 4vw, 4rem); background: var(--sand); }
.eyebrow { margin: 0 0 .8rem; font-size: .8rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; }
h1, h2, figcaption { font-family: Lora, Georgia, serif; font-weight: 400; line-height: 1.16; }
h1 { font-size: clamp(2.1rem, 4.5vw, 4.3rem); margin: 0; }
h2 { font-size: clamp(1.85rem, 3.5vw, 3.1rem); margin: 0 0 1rem; }
.hero-copy p:not(.eyebrow), .location p:not(.eyebrow), .contact p { margin: 1.25rem 0 1.75rem; max-width: 36rem; }
.hero-photo { width: 100%; height: 100%; min-height: 18rem; object-fit: cover; }
.section { padding-block: clamp(3rem, 7vw, 6rem); }
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
figure { margin: 0; }
figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
figcaption { margin-top: .7rem; font-size: 1.45rem; }
.location { background: var(--leaf); color: var(--cream); }
.location-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(1.5rem, 6vw, 6rem); align-items: center; padding-block: 3rem; }
.location img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center 55%; }
.contact { text-align: center; }
.contact p { margin-inline: auto; }
.contact-actions, .social-links { display: flex; flex-wrap: wrap; gap: .75rem; }
.contact-actions { justify-content: center; }
.contact .contact-number { margin: .8rem auto 0; font-size: .9rem; }
.social-links a { display: inline-flex; min-height: 44px; align-items: center; }
.footer { border-top: 1px solid var(--sand); padding-block: 1rem; font-size: .85rem; flex-wrap: wrap; }
.footer p { margin: 0; }

@media (max-width: 760px) {
  .hero, .location-inner { grid-template-columns: 1fr; }
  .hero-photo { height: auto; min-height: 0; aspect-ratio: 16 / 10; }
  .location img { order: 1; }
}

@media (max-width: 540px) {
  .header { flex-wrap: wrap; padding-block: 1rem; }
  nav { justify-content: start; gap: .75rem; font-size: .85rem; }
  .gallery { grid-template-columns: 1fr; }
  .button { padding-inline: .85rem; }
}