/* =========================================================
   Landing page
   ========================================================= */
body.landing { background: var(--c-velvet); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  padding-top: env(safe-area-inset-top, 0px);
  transition: background-color .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-solid { background: rgba(18,28,51,.92); backdrop-filter: blur(10px); border-color: var(--c-velvet-line); }
.site-header__inner { height: var(--header-h); display: flex; align-items: center; gap: var(--s-5); }
.brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.brand img { height: 42px; width: auto; }
.brand span { font-family: var(--f-display); font-size: 1.6rem; letter-spacing: .06em; color: var(--c-linen); }
.site-nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-5); }
.site-nav a { text-decoration: none; font-size: var(--t-sm); color: var(--c-mist); }
.site-nav a:hover { color: var(--c-linen); }
.site-nav a.btn--gold, .site-nav a.btn--gold:hover { color: var(--c-night); }
.nav-toggle { display: none; }
@media (max-width: 860px) {
  .nav-toggle { display: inline-grid; margin-left: auto; }
  .site-nav {
    position: fixed; inset: calc(var(--header-h) + env(safe-area-inset-top, 0px)) 0 auto 0;
    flex-direction: column; align-items: flex-start; gap: var(--s-4);
    padding: var(--s-5) 1.25rem var(--s-6);
    background: var(--c-velvet); border-bottom: 1px solid var(--c-velvet-line);
    transform: translateY(-120%); transition: transform .3s var(--ease);
  }
  .site-nav.is-open { transform: none; }
  .site-nav a { font-size: var(--t-md); }
}

/* ---------- Hero ---------- */
.hero {
  min-height: 100svh;
  padding: calc(var(--header-h) + env(safe-area-inset-top, 0px) + var(--s-6)) 0 var(--s-8);
  display: grid; align-items: center;
  background:
    radial-gradient(60% 50% at 78% 40%, rgba(201,168,107,.12), transparent 70%),
    var(--c-night);
}
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--s-8); align-items: center; }
.hero__title { font-size: var(--t-hero); line-height: .85; letter-spacing: .02em; color: var(--c-linen); }
.hero__title small {
  display: block; margin-top: var(--s-4);
  font-family: var(--f-body); font-size: var(--t-md); font-weight: 300; letter-spacing: .38em;
  color: var(--c-champagne);
}
.hero__lead { margin-top: var(--s-6); font-size: var(--t-md); line-height: 1.55; color: var(--c-mist); max-width: 34ch; }
.hero__actions { margin-top: var(--s-6); display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero__meta { margin-top: var(--s-7); display: flex; flex-wrap: wrap; gap: var(--s-6); font-size: var(--t-sm); color: var(--c-mist); }
.hero__meta strong { display: block; color: var(--c-linen); font-weight: 400; }
.hero__arch { aspect-ratio: 3 / 4.6; width: min(100%, 440px); justify-self: center; }

/* The one orchestrated moment: the arch opens like a window on load */
.hero__arch img { animation: arch-rise 1.4s var(--ease) both; }
@keyframes arch-rise { from { clip-path: inset(100% 0 0 0); transform: scale(1.08); } to { clip-path: inset(0 0 0 0); transform: none; } }

@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .hero__arch { order: -1; width: min(78%, 340px); }
  .hero { min-height: auto; }
}

/* ---------- Sections ---------- */
.section { padding: var(--s-9) 0; }
.section--night { background: var(--c-night); }
.section__head { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); max-width: 640px; }
.section__head p { color: var(--c-mist); font-size: var(--t-md); line-height: 1.55; }

/* ---------- Day: morning to night (a real time sequence) ---------- */
.day { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5); }
.day__item { display: grid; gap: var(--s-4); align-content: start; }
.day__item .arch { aspect-ratio: 3 / 4.2; }
.day__time { font-size: var(--t-xs); color: var(--c-champagne); letter-spacing: .08em; }
.day__item h3 { font-size: var(--t-lg); }
.day__item p { color: var(--c-mist); font-size: var(--t-sm); }
.day__item:nth-child(even) { margin-top: var(--s-8); }
@media (max-width: 960px) { .day { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) {
  .day { grid-template-columns: 1fr; }
  .day__item:nth-child(even) { margin-top: 0; }
  .day__item .arch { aspect-ratio: 4 / 4.4; }
}

/* ---------- Gallery ---------- */
.gallery { columns: 3 260px; column-gap: var(--s-5); }
.gallery figure { break-inside: avoid; margin-bottom: var(--s-5); }
.gallery .arch { border-radius: var(--arch); }
.gallery figure:nth-child(3n+2) .arch { border-radius: var(--r-md); }
.gallery figcaption { margin-top: var(--s-2); font-size: var(--t-xs); color: var(--c-mist); }
.gallery__foot { margin-top: var(--s-6); }

/* ---------- Private lounge ---------- */
.private { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--s-8); align-items: center; }
.private .arch { aspect-ratio: 3 / 4; }
.private__text { display: grid; gap: var(--s-5); justify-items: start; }
.private__text p { color: var(--c-mist); font-size: var(--t-md); line-height: 1.6; }
@media (max-width: 860px) { .private { grid-template-columns: 1fr; gap: var(--s-6); } .private .arch { width: min(80%, 360px); } }

/* ---------- Visit ---------- */
.visit { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-6); border-top: 1px solid var(--c-velvet-line); padding-top: var(--s-6); }
.visit h3 { color: var(--c-champagne); margin-bottom: var(--s-3); }
.visit p, .visit li { color: var(--c-mist); font-size: var(--t-sm); }
.visit a { color: var(--c-linen); text-decoration-color: rgba(201,168,107,.5); text-underline-offset: 4px; }
.hours-list { display: grid; gap: var(--s-1); }
.hours-list li { display: flex; justify-content: space-between; gap: var(--s-4); max-width: 280px; }
.hours-list li.is-today { color: var(--c-linen); }
@media (max-width: 760px) { .visit { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.site-footer { padding: var(--s-7) 0 calc(var(--s-6) + env(safe-area-inset-bottom, 0px)); background: var(--c-night); }
.site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); font-size: var(--t-xs); color: var(--c-mist); }
.site-footer img { height: 64px; width: auto; }
.site-footer a { color: var(--c-mist); }

/* ---------- Responsive refinements ---------- */
.visit a, .site-footer a { display: inline-block; padding-block: 6px; }
@media (max-width: 860px) {
  .site-nav a:not(.btn) { display: flex; align-items: center; min-height: 44px; width: 100%; }
  .site-nav .btn { width: 100%; min-height: 48px; }
  .hero__lead { max-width: 46ch; }
}
/* Tablet portrait: keep the arch and text side by side */
@media (min-width: 640px) and (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .hero__arch { order: 0; width: 100%; }
  .hero__title { font-size: clamp(4rem, 13vw, 6.5rem); }
}
/* Large desktops: a little more air, not a wider line length */
@media (min-width: 1600px) {
  :root { --container: 1320px; }
  .hero__arch { width: min(100%, 500px); }
}
@media (pointer: coarse) and (min-width: 861px) {
  .site-nav a:not(.btn) { padding-block: 12px; }
}

/* ---------- Google Map ---------- */
.map-frame {
  margin-top: var(--s-7);
  aspect-ratio: 16 / 7;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-velvet-line);
  outline: 1px solid rgba(201,168,107,.35); outline-offset: 6px;
  background: var(--c-velvet);
}
.map-frame iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 860px) { .map-frame { aspect-ratio: 4 / 3; } }
@media (max-width: 520px) { .map-frame { aspect-ratio: 3 / 4; outline-offset: 4px; } }

.hero__meta a { color: inherit; text-decoration: none; }
.hero__meta a:hover { color: var(--c-champagne-2); }
.parking { margin-top: var(--s-2); color: var(--c-champagne-2) !important; }
.hero__meta a { display: inline-block; padding-block: 8px; margin-block: -8px; }

.parking { display: inline-flex; align-items: center; gap: var(--s-2); padding: 6px 14px; border: 1px solid rgba(201,168,107,.45); border-radius: var(--arch-full); font-size: var(--t-sm); }
.parking::before { content: "P"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 5px; background: var(--c-champagne); color: var(--c-night); font-weight: 500; font-size: 13px; }