/* Story and directions sections */
.about-tavern {
  position: relative;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  align-items: stretch;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  overflow: hidden;
  color: var(--ink);
  background:
    radial-gradient(ellipse at 18% 25%, rgb(255 255 255 / 70%), transparent 34rem),
    repeating-linear-gradient(90deg, transparent 0 138px, rgb(109 74 43 / 5%) 139px 144px),
    linear-gradient(140deg, #fffaf1, #ecd3ac 78%);
  border-block: 5px solid #9a5a32;
}

.about-tavern .about-copy {
  position: relative;
  align-self: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
  color: #352116;
  background:
    linear-gradient(145deg, rgb(255 255 255 / 72%), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 55px, rgb(99 60 28 / 5%) 56px 59px),
    linear-gradient(135deg, #fffaf0, #f0dfc2);
  border: 2px ridge #b27b43;
  border-left: 7px solid #9a5a32;
  box-shadow: 0 14px 30px rgb(61 37 20 / 17%), inset 0 0 0 5px rgb(255 255 255 / 35%);
}

.place-kicker {
  margin: 0 0 .55rem;
  color: #e8b96f;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.about-tavern .place-kicker { color: #8e542f; }

.about-tavern .about-copy h2,
.visit-tavern .visit-heading h2 {
  max-width: 18ch;
  margin: 0 0 1rem;
  color: #fff0d7;
  font-size: clamp(2rem, 4.2vw, 3.2rem);
}

.about-tavern .about-copy h2 { color: #39251b; text-shadow: 0 1px rgb(255 255 255 / 55%); }

.about-tavern .about-copy h2::after,
.visit-tavern .visit-heading h2::after {
  display: block;
  width: 3.3rem;
  height: 3px;
  margin-top: .8rem;
  content: "";
  background: linear-gradient(90deg, #e7b46a, #9d4629);
}

.about-tavern .about-copy p:not(.place-kicker) {
  max-width: 60ch;
  color: #594431;
}

.about-invite {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: .4rem;
  padding: .65rem .9rem;
  color: #56361f;
  font-weight: 700;
  text-decoration: none;
  background: rgb(255 255 255 / 52%);
  border: 1px solid #b27b43;
  transition: gap .2s ease, background .2s ease, transform .2s ease;
}

.about-invite:hover { gap: 1rem; transform: translateY(-2px); background: #fffaf0; }
.about-invite span { color: #9a4c28; font-size: 1.15rem; }

.about-seal {
  position: absolute;
  top: 1.1rem;
  right: 1.15rem;
  display: grid;
  width: 3.6rem;
  aspect-ratio: 1;
  place-items: center;
  color: rgb(127 73 38 / 52%);
  font-family: var(--font-display, Georgia, serif);
  font-size: .85rem;
  border: 1px solid rgb(154 90 50 / 35%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgb(154 90 50 / 5%);
}

.about-tavern .about-facts {
  align-content: center;
  gap: .85rem;
}

.about-tavern .about-facts li {
  display: grid;
  grid-template-columns: 2.7rem minmax(0, 1fr);
  align-items: start;
  gap: .85rem;
  padding: 1.15rem 1.25rem;
  color: #50351f;
  background: linear-gradient(120deg, #fffaf0, #ead1a9);
  border: 1px solid rgb(137 89 48 / 33%);
  border-left: 4px solid #a35e32;
  border-radius: 2px;
  box-shadow: 0 7px 16px rgb(73 46 24 / 13%), inset 0 1px #fff;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.about-tavern .about-facts li:hover {
  transform: translateX(7px);
  border-color: #ae6e3d;
  box-shadow: 0 11px 22px rgb(73 46 24 / 20%), inset 0 1px #fff;
}

.fact-index {
  display: grid;
  width: 2.35rem;
  aspect-ratio: 1;
  place-items: center;
  color: #8a512b;
  font-family: var(--font-display, Georgia, serif);
  font-size: .85rem;
  border: 1px solid rgb(154 90 50 / 42%);
  border-radius: 50%;
}

.about-facts li div { display: grid; gap: .2rem; }
.about-facts li strong { color: #352116; font-size: 1.06rem; }
.about-facts li div span { color: #69533d; font-size: .95rem; line-height: 1.45; }

.visit-tavern {
  display: block;
  color: var(--parchment);
  background:
    radial-gradient(ellipse at 50% 0, rgb(237 182 104 / 14%), transparent 38rem),
    linear-gradient(135deg, #2d1d15, #1e130e);
  border-block: 5px solid #71301f;
}

.visit-heading { max-width: 700px; margin: 0 auto 2rem; text-align: center; }
.visit-heading .place-kicker { margin-bottom: .5rem; }
.visit-tavern .visit-heading h2 { max-width: none; margin-inline: auto; }
.visit-tavern .visit-heading h2::after { margin-inline: auto; }
.visit-heading > p:last-child { margin: 0 auto; color: rgb(242 220 192 / 78%); }

.visit-layout {
  display: grid;
  grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr);
  align-items: stretch;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  max-width: 1320px;
  margin: 0 auto;
}

.visit-tavern .visit-info {
  display: flex;
  flex-direction: column;
  padding: clamp(1.2rem, 2.5vw, 2rem);
  color: #f4e0c2;
  background:
    linear-gradient(145deg, rgb(255 240 215 / 5%), transparent 50%),
    linear-gradient(150deg, #563820, #342218);
  border: 2px ridge #a97643;
  box-shadow: 0 12px 28px rgb(0 0 0 / 28%), inset 0 0 0 4px rgb(232 192 128 / 5%);
}

.visit-location { display: flex; align-items: center; gap: .9rem; padding-bottom: 1.1rem; border-bottom: 1px solid rgb(232 185 111 / 28%); }
.location-emblem { display: grid; width: 3rem; aspect-ratio: 1; flex: 0 0 auto; place-items: center; color: #f0bf76; background: rgb(25 15 10 / 32%); border: 1px solid rgb(232 185 111 / 52%); border-radius: 50%; }
.location-emblem svg { width: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.detail-label { display: block; margin-bottom: .2rem; color: #e8b96f; font-size: .68rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.visit-location address { margin: 0; color: #fff0d7; font-weight: 700; line-height: 1.4; }

.hours-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin: 1.15rem 0 .4rem; }
.hours-heading h3 { margin: 0; color: #fff0d7; font-family: var(--font-body); font-size: 1.05rem; }
.hours-heading > span { color: #e8b96f; font-size: .75rem; }
.visit-tavern .hours { width: 100%; margin-bottom: 1.15rem; border-collapse: collapse; }
.visit-tavern .hours th,
.visit-tavern .hours td { padding: .34rem .2rem; color: rgb(245 226 198 / 83%); font-size: .9rem; text-align: left; border-bottom: 1px solid rgb(232 185 111 / 16%); }
.visit-tavern .hours td { text-align: right; white-space: nowrap; }
.visit-tavern .hours tr.is-today th,
.visit-tavern .hours tr.is-today td { color: #fff0d7; background: rgb(224 166 83 / 12%); }
.today-marker { display: none; margin-left: .35rem; padding: .05rem .3rem; color: #2b1b12; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: #edbd76; border-radius: 2px; }
.hours tr.is-today .today-marker { display: inline-block; }

.visit-tavern .directions-link { align-self: flex-start; margin-top: auto; }
.directions-link span { margin-left: .45rem; }

.map-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(145deg, #654328, #352217);
  border: 2px ridge #aa7947;
  box-shadow: 0 14px 32px rgb(0 0 0 / 34%), inset 0 0 0 5px rgb(232 192 128 / 6%);
}

.map-card-heading,
.map-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; color: #fff0d7; }
.map-card-heading { font-family: var(--font-display, Georgia, serif); font-size: 1rem; }
.map-card-location { display: inline-flex; align-items: center; gap: .45rem; color: #f1c47f; font-family: var(--font-body); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; }
.map-card-location i { width: .55rem; aspect-ratio: 1; background: #93b766; border-radius: 50%; box-shadow: 0 0 0 4px rgb(147 183 102 / 15%), 0 0 12px rgb(147 183 102 / 55%); }

.visit-tavern .map-frame {
  min-height: 0;
  flex: 1;
  padding: .55rem;
  background: #241710;
  box-shadow: inset 0 0 0 1px rgb(232 192 128 / 28%);
}

.visit-tavern .map-frame iframe {
  display: block;
  width: 100%;
  height: clamp(340px, 39vw, 500px);
  min-height: 340px;
  border: 0;
  border-radius: 0;
  filter: sepia(.08) contrast(.97);
}

.map-card-footer { min-height: 3rem; color: rgb(245 226 198 / 78%); font-size: .78rem; }
.map-compass { display: grid; width: 1.7rem; aspect-ratio: 1; place-items: center; color: #f1c47f; font-family: var(--font-display, Georgia, serif); font-size: .7rem; border: 1px solid rgb(232 185 111 / 56%); border-radius: 50%; }

@media (max-width: 820px) {
  .about-tavern { grid-template-columns: 1fr; }
  .about-tavern .about-copy { max-width: none; }
  .about-tavern .about-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .about-tavern .about-facts li { grid-template-columns: 1fr; gap: .6rem; padding: 1rem; }
  .visit-layout { grid-template-columns: 1fr; }
  .visit-tavern .visit-info { order: 1; }
  .map-card { order: 0; }
}

@media (max-width: 560px) {
  .about-tavern .about-facts { grid-template-columns: 1fr; }
  .about-tavern .about-facts li { grid-template-columns: 2.7rem minmax(0, 1fr); }
  .about-seal { width: 2.8rem; font-size: .7rem; }
  .visit-heading { text-align: left; }
  .visit-tavern .visit-heading h2::after { margin-left: 0; }
  .visit-tavern .map-frame iframe { height: 320px; min-height: 320px; }
  .map-card-heading, .map-card-footer { padding-inline: .7rem; }
  .map-card-heading { font-size: .9rem; }
  .map-card-location { font-size: .66rem; }
  .visit-tavern .hours th, .visit-tavern .hours td { font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .about-invite,
  .about-tavern .about-facts li { transition: none; }
}