/* ==========================================================================
   Hero — brand pattern on Incandescent Gold (replaces the arrival photo)
   Loaded after styles.css, so these rules win.
   ========================================================================== */
.hero {
  background: var(--gold);
  isolation: isolate;
}

/* Scattered logos + illustrations, tinted with CSS masks */
.hero-pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero-pattern span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: clamp(54px, 6.4vw, 100px);
  aspect-ratio: var(--ar);
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  background: var(--motif, var(--green));
  -webkit-mask: var(--img) center / contain no-repeat;
          mask: var(--img) center / contain no-repeat;
  opacity: var(--motif-opacity, .18);
}
.hero-pattern .p-buddy  { --img: url("assets/buddy-emerald.png");  --ar: 607 / 760; }
.hero-pattern .p-pigeon { --img: url("assets/pigeon-emerald.png"); --ar: 753 / 790; }
.hero-pattern .p-teeth  { --img: url("assets/teeth-emerald.png");  --ar: 696 / 724; }
.hero-pattern .p-word   {
  --img: url("assets/wordmark-descriptor-gold.png");
  --ar: 2070 / 746;
  width: clamp(110px, 12vw, 180px);
}

/* Text + logo in Vintage Green */
.hero-title,
.hero-hours { color: var(--green); }
.hero-hours { opacity: 1; }

.hero-logo-mark {
  display: block;
  aspect-ratio: 2070 / 746;
  height: auto;
  background: var(--green);
  -webkit-mask: url("assets/wordmark-descriptor-gold.png") center / contain no-repeat;
          mask: url("assets/wordmark-descriptor-gold.png") center / contain no-repeat;
}

/* Buttons: the gold button would disappear on gold */
.hero .btn-primary { background: var(--green); color: var(--eggshell); }
.hero .btn-primary:hover { background: var(--emerald); }
.hero .btn-outline { border-color: var(--green); color: var(--green); }
.hero .btn-outline:hover { background: var(--green); color: var(--gold); }

@media (max-width: 780px) {
  .hero-pattern { --motif-opacity: .14; }
  .hero-pattern span { width: clamp(44px, 13vw, 64px); }
  .hero-pattern .p-word { width: clamp(90px, 26vw, 120px); }
}

/* ==========================================================================
   Make yourself at home — branded illustration instead of the interior photo
   ========================================================================== */
.about-art {
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  background: var(--plum);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.about-art-mark {
  display: block;
  width: 80%;
  aspect-ratio: 600 / 475;
  background: var(--pink);
  -webkit-mask: url("assets/cheers-mask.png") center / contain no-repeat;
          mask: url("assets/cheers-mask.png") center / contain no-repeat;
}
@media (max-width: 780px) {
  .about-art { aspect-ratio: 4 / 3; max-width: 520px; }
  .about-art-mark { width: 62%; }
}

/* ==========================================================================
   Contact — hours, location and reservations live here now
   ========================================================================== */
.contact-title {
  font-family: 'Salted', var(--font-body, sans-serif);
  font-weight: normal;
  font-size: 2.2rem;
  margin-bottom: 28px;
}
.info-card .hours-list { margin: 4px 0 6px; }
.contact-link {
  color: var(--green);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid rgba(39, 84, 47, .35);
}
.contact-link:hover { border-color: var(--green); }
.info-grid-inner { align-items: start; }