@import url('/assets/reviews.css');
/* Small editorial details, grounded in the restaurant's existing identity. */
.azulejo-band {
  height: 86px;
  max-width: 1800px;
  margin-inline: auto;
  background: #f6f1e7 url('/assets/azulejos-portugueses.png') center / auto 100% repeat-x;
  border-block: 1px solid #8e9da1;
  box-shadow: 0 5px 16px #123e5810;
}
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 18px;
  border: 1px solid rgb(255 250 237 / 48%);
  pointer-events: none;
}
.hero-photo figcaption { z-index: 1; }
.story-photo { position: relative; }
.story-photo::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgb(255 250 237 / 65%);
  pointer-events: none;
}
.page-intro > .eyebrow {
  display: flex;
  align-items: center;
  gap: 15px;
}
.page-intro > .eyebrow::before {
  content: "";
  width: 35px;
  height: 1px;
  background: currentColor;
  opacity: .65;
}
.feature-links > a {
  position: relative;
  isolation: isolate;
  transition: color .25s ease;
}
.feature-links > a::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -1;
  background: #fffcf5;
  border: 1px solid #c1b89e;
  opacity: 0;
  transition: opacity .25s ease, box-shadow .25s ease;
  pointer-events: none;
}
.feature-links > a > div > svg {
  width: 23px;
  height: 23px;
  transition: transform .25s ease;
}
.feature-links > a img:not(.food-cutout) {
  outline: 1px solid rgb(255 250 237 / 72%);
  outline-offset: -7px;
  box-shadow: 0 6px 16px #173c5016;
}
.reservation-band {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff9ee;
  background: radial-gradient(ellipse at 12% 0%, #285c72, transparent 65%), #123e58;
  border-color: #7497a7;
}
.reservation-band::before {
  content: "";
  position: absolute;
  inset: 16px;
  border: 1px solid #aac5ce69;
  pointer-events: none;
  z-index: -1;
}
.reservation-band .eyebrow { color: #c8e0e8; letter-spacing: .22em; }
.reservation-band h2 { color: #fffaf0; text-wrap: balance; }
.reservation-band p:not(.eyebrow) { color: #e1ebed; text-wrap: pretty; }
.reservation-band .primary {
  background: #f5eee1;
  color: #123e58;
  border-color: #fff9ed;
  box-shadow: 0 6px 20px #08243540;
}
.reservation-band .outline { color: #fff9ee; border-color: #a2c1cf; }
.reservation-band .outline:hover { background: #ffffff12; }
.reservation-band .primary:hover { background: #fffaf1; }
.story-brand { position: relative; }
.story-brand::after {
  content: "";
  position: absolute;
  inset: 17px;
  border: 1px solid #ffffff30;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .feature-links > a:hover::before { opacity: 1; box-shadow: 0 8px 22px #173c5010; }
  .feature-links > a:hover > div > svg { transform: translate(3px, -3px); }
}
@media (max-width: 760px) {
  .azulejo-band { height: 62px; }
  /* Keep the stacked logo panel in flow, without the desktop sticky offset. */
  .story-brand { top: auto; }
  .hero-photo::after { inset: 11px; }
  .reservation-band::before { inset: 11px; }
  .reservation-band .wrap { width: calc(100% - 58px); }
  .feature-links > a::before { display: none; }
  .page-intro > .eyebrow::before { width: 24px; }
}
@media (prefers-reduced-motion: no-preference) {
  .refine-revealed { animation: refine-arrive .7s cubic-bezier(.22, .61, .36, 1) both; }
  @keyframes refine-arrive {
    from { opacity: .5; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .feature-links > a, .feature-links > a::before, .feature-links > a > div > svg { transition: none; }
}
@media print {
  .refine-revealed { animation: none; }
  .reservation-band { background: white; color: #123e58; }
  .reservation-band h2, .reservation-band p:not(.eyebrow), .reservation-band .eyebrow { color: inherit; }
}