@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap');

:root {
  color-scheme: light;
  --paper: #f4f1e9;
  --paper-deep: #e9e5d9;
  --ink: #1c2924;
  --muted: #73776e;
  --green: #263d33;
  --green-light: #dce5d8;
  --rust: #bd6344;
  --serif: 'Fraunces', Georgia, serif;
  --sans: 'DM Sans', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
img { display: block; width: 100%; }
a { color: inherit; text-decoration: none; }
::selection { color: white; background: var(--rust); }

.site-header {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 88px;
  padding: 0 7.2%;
  border-bottom: 1px solid rgba(28, 41, 36, .12);
}
.wordmark { display: inline-flex; align-items: center; gap: 11px; }
.wordmark__stamp {
  display: grid;
  width: 37px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--rust);
  border-radius: 50%;
  color: var(--rust);
  font-family: var(--serif);
  font-size: 15px;
}
.wordmark__name { font-family: var(--serif); font-size: 19px; line-height: 1; }
.wordmark__name span { color: var(--rust); font-style: italic; }
.main-nav { display: flex; gap: clamp(22px, 3.2vw, 52px); color: #555d56; font-size: 12px; }
.main-nav a, .footer-top, .text-link { transition: color .2s ease; }
.main-nav a:hover, .footer-top:hover, .text-link:hover { color: var(--rust); }
.header-cta { padding: 12px 0 12px 18px; border-left: 1px solid rgba(28, 41, 36, .2); font-size: 12px; font-weight: 600; }
.header-cta span { margin-left: 12px; color: var(--rust); }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .87fr) minmax(0, 1.13fr);
  min-height: min(690px, calc(100svh - 88px));
  padding: 60px 7.2% 76px;
  overflow: hidden;
}
.hero__copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: 12px 5.2vw 0 0; }
.eyebrow { display: flex; align-items: center; gap: 11px; margin: 0 0 26px; color: var(--rust); font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; }
.eyebrow__line { display: inline-block; width: 26px; height: 1px; background: currentColor; }
h1, h2, h3, p { margin-top: 0; }
.hero h1 { margin-bottom: 22px; font-family: var(--serif); font-size: clamp(58px, 6vw, 89px); font-weight: 400; letter-spacing: 0; line-height: .99; }
h1 em, h2 em { color: var(--rust); font-weight: 400; }
.hero__intro { max-width: 350px; margin-bottom: 29px; color: #656a62; font-size: 14px; line-height: 1.8; }
.hero__actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 23px; min-height: 48px; padding: 0 20px; font-size: 11px; font-weight: 600; transition: background .2s ease, color .2s ease, transform .2s ease; }
.button:hover { transform: translateY(-2px); }
.button--dark { background: var(--green); color: white; }
.button--dark:hover { background: var(--rust); }
.button span { font-size: 16px; }
.text-link { display: inline-flex; align-items: center; gap: 14px; color: var(--ink); font-size: 11px; font-weight: 600; }
.text-link span { color: var(--rust); font-size: 16px; }
.hero__note { display: flex; align-items: center; gap: 12px; margin-top: 54px; color: #74776f; font-size: 10px; line-height: 1.5; }
.hero__note-mark { display: grid; width: 33px; height: 33px; place-items: center; border: 1px solid #c9c3b4; border-radius: 50%; color: var(--rust); font-size: 16px; }
.hero__visual { position: relative; min-height: 480px; align-self: stretch; margin: 4px 0 0; }
.hero__image { height: 100%; min-height: 480px; object-fit: cover; object-position: center 45%; }
.hero__visual::after { position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.25); content: ''; pointer-events: none; }
.hero__image-caption { position: absolute; right: 0; bottom: 0; left: 0; display: flex; justify-content: space-between; padding: 16px 19px; background: linear-gradient(transparent, rgba(20,25,22,.58)); color: white; font-size: 10px; }
.hero__image-caption span:first-child { font-family: var(--serif); font-size: 15px; }
.hero__seal { position: absolute; top: 10%; right: -25px; display: flex; width: 91px; height: 91px; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--green-light); color: var(--green); font-family: var(--serif); font-size: 12px; line-height: 1.2; text-align: center; transform: rotate(8deg); }
.hero__seal b { margin-top: 4px; color: var(--rust); font-family: var(--sans); font-size: 14px; }
.hero__index { position: absolute; bottom: 27px; left: 7.2%; display: flex; align-items: center; gap: 12px; color: #88877d; font-size: 9px; }
.hero__index span { width: 48px; height: 1px; background: #c9c3b4; }

.section-pad { padding-right: 12%; padding-left: 12%; }
.intro { padding-top: 109px; padding-bottom: 93px; background: var(--paper-deep); }
.section-kicker { display: flex; align-items: center; gap: 12px; margin-bottom: 30px; color: #72766d; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }
.section-kicker span { color: var(--rust); }
.intro__content { display: grid; grid-template-columns: 1.3fr .7fr; align-items: end; gap: 8%; }
.intro h2, .visit h2 { margin-bottom: 0; font-family: var(--serif); font-size: clamp(38px, 4.3vw, 58px); font-weight: 400; line-height: 1.13; }
.intro__aside { max-width: 365px; padding-bottom: 5px; }
.intro__aside p { margin-bottom: 19px; color: #666b63; font-size: 13px; line-height: 1.8; }

.gallery { display: grid; grid-template-columns: 1.15fr .85fr 1fr 1fr; grid-template-rows: 285px; gap: 12px; padding: 12px; background: var(--paper); }
.gallery__item { position: relative; min-width: 0; margin: 0; overflow: hidden; background: var(--paper-deep); }
.gallery__item img { height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.gallery__item:hover img { transform: scale(1.035); }
.gallery__item--wide img { object-position: 45% center; }
.gallery__item--tall img { object-position: 66% center; }
.gallery__item--small img { object-position: center; }
.gallery__item figcaption { position: absolute; right: 0; bottom: 0; left: 0; display: flex; gap: 11px; align-items: center; padding: 27px 14px 13px; background: linear-gradient(transparent, rgba(20,25,22,.63)); color: white; font-size: 10px; }
.gallery__item figcaption span { color: #e7b59d; font-size: 9px; }

.visit { position: relative; padding-top: 98px; padding-bottom: 104px; background-color: var(--green); color: white; }
.visit::before { position: absolute; top: 0; right: 0; width: 34%; height: 100%; background: repeating-linear-gradient(135deg, transparent 0 17px, rgba(255,255,255,.025) 17px 18px); content: ''; pointer-events: none; }
.visit .section-kicker { color: #c5cec2; }
.visit__layout { position: relative; display: grid; grid-template-columns: 1fr .82fr; gap: 13%; align-items: center; }
.visit__intro { max-width: 490px; }
.visit__intro .eyebrow { margin-bottom: 23px; color: #df9a7f; }
.visit h2 { margin-bottom: 21px; }
.visit h2 em { color: #e6a184; }
.visit__intro > p:not(.eyebrow) { max-width: 380px; margin-bottom: 28px; color: #c5cec2; font-size: 13px; line-height: 1.8; }
.button--light { background: var(--paper); color: var(--ink); }
.button--light:hover { background: #e4a185; color: var(--ink); }
.hours { padding: 27px 29px 22px; background: var(--paper); color: var(--ink); }
.hours__heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 13px; border-bottom: 1px solid #dad7cc; }
.hours h3 { margin: 0; font-family: var(--serif); font-size: 27px; font-weight: 400; }
.open-status { margin: 0; color: var(--muted); font-size: 10px; }
.open-status.is-open { color: #487451; }
.open-status.is-closed { color: var(--rust); }
.hours__list { margin: 8px 0 13px; }
.hours__row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 2px; border-bottom: 1px solid rgba(28,41,36,.08); color: #5e655d; font-size: 11px; }
.hours__row:last-child { border-bottom: 0; }
.hours__row dd { margin: 0; color: var(--ink); font-variant-numeric: tabular-nums; }
.hours__row.is-today { margin-right: -9px; margin-left: -9px; padding-right: 11px; padding-left: 11px; background: var(--green-light); color: var(--green); font-weight: 700; }
.hours__row.is-today dd { color: var(--green); font-weight: 600; }
.hours__notice { margin: 0; color: #7b7c73; font-size: 9px; }
.hours__notice span { color: var(--rust); }

.site-footer { display: grid; grid-template-columns: 1fr 1fr 1fr auto; align-items: center; gap: 18px; min-height: 100px; padding: 20px 7.2%; }
.wordmark--footer .wordmark__stamp { width: 32px; font-size: 13px; }
.wordmark--footer .wordmark__name { font-size: 16px; }
.site-footer > p { margin: 0; color: #777a72; font-size: 10px; }
.footer-top { justify-self: center; font-size: 10px; }
.footer-top span { margin-left: 8px; color: var(--rust); }
.site-footer small { color: #88877d; font-size: 9px; }

@media (min-width: 1500px) {
  .site-header, .hero, .site-footer { padding-right: max(7.2%, calc((100% - 1320px) / 2)); padding-left: max(7.2%, calc((100% - 1320px) / 2)); }
  .hero { min-height: 720px; }
  .section-pad { padding-right: max(12%, calc((100% - 1120px) / 2)); padding-left: max(12%, calc((100% - 1120px) / 2)); }
}
@media (max-width: 900px) {
  .site-header { padding-right: 5%; padding-left: 5%; }
  .hero { min-height: auto; padding: 48px 5% 70px; }
  .hero__copy { padding-right: 3vw; }
  .hero__visual, .hero__image { min-height: 410px; }
  .hero__index { left: 5%; }
  .section-pad { padding-right: 8%; padding-left: 8%; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 250px 250px; }
  .visit__layout { gap: 7%; }
  .hours { padding: 23px 20px 19px; }
}
@media (max-width: 640px) {
  .site-header { min-height: 70px; padding: 0 20px; }
  .wordmark__stamp { width: 32px; font-size: 13px; }
  .wordmark__name { font-size: 16px; }
  .main-nav { display: none; }
  .header-cta { padding-left: 12px; font-size: 10px; }
  .header-cta span { margin-left: 5px; }
  .hero { grid-template-columns: 1fr; padding: 52px 20px 64px; }
  .hero__copy { padding: 0 0 33px; }
  .eyebrow { margin-bottom: 20px; }
  .hero h1 { font-size: clamp(56px, 15vw, 76px); }
  .hero__intro { max-width: 330px; font-size: 13px; }
  .hero__note { margin-top: 26px; }
  .hero__visual, .hero__image { min-height: 340px; }
  .hero__visual { margin-right: 11px; }
  .hero__seal { top: -19px; right: -11px; width: 75px; height: 75px; font-size: 10px; }
  .hero__index { bottom: 22px; left: 20px; }
  .section-pad { padding-right: 23px; padding-left: 23px; }
  .intro { padding-top: 73px; padding-bottom: 68px; }
  .section-kicker { margin-bottom: 22px; }
  .intro__content { grid-template-columns: 1fr; gap: 19px; }
  .intro h2, .visit h2 { font-size: 41px; }
  .intro__aside { max-width: 440px; }
  .intro__aside p { font-size: 12px; }
  .gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 210px 180px; gap: 8px; padding: 8px; }
  .gallery__item--wide { grid-column: 1 / -1; }
  .gallery__item figcaption { padding: 25px 10px 10px; font-size: 9px; }
  .visit { padding-top: 70px; padding-bottom: 72px; }
  .visit__layout { grid-template-columns: 1fr; gap: 35px; }
  .visit__intro > p:not(.eyebrow) { font-size: 12px; }
  .hours { padding: 21px 17px 18px; }
  .hours__heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .hours h3 { font-size: 25px; }
  .site-footer { grid-template-columns: 1fr auto; gap: 15px; padding: 22px 20px; }
  .site-footer > p { display: none; }
  .footer-top { justify-self: end; }
  .site-footer small { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}