/* Inner-page shell — loaded on every page except home (build.js adds it).
   The header is solid from the start here (header.js), so content clears it.
   The page hero itself comes later, from the user's reference; this file only
   holds the shell pieces every inner page shares. */
.is-inner .page:not(:has(.phero)) { padding-top: 64px; }

/* ---------- Page hero (layout ref: den-tora.framer.website/about-v1 — hero) ----------
   Shorter than the home hero, a still photo instead of video. Breadcrumb, eyebrow
   and headline sit bottom-left; the lead and booking pill bottom-right. The next
   section slides over its bottom edge as the same rounded cream sheet as home. */
.phero {
  position: relative;
  min-height: clamp(560px, 78svh, 820px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: var(--cream);
  background: var(--navy-deep);
  isolation: isolate;
  padding-bottom: var(--hero-overlap);
}
.phero__bg { position: absolute; inset: 0; z-index: -2; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.phero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(0deg, rgba(6, 20, 46, .82) 0%, rgba(6, 20, 46, .35) 45%, rgba(6, 20, 46, 0) 70%),
    linear-gradient(90deg, rgba(6, 20, 46, .55) 0%, rgba(6, 20, 46, 0) 60%),
    linear-gradient(180deg, rgba(6, 20, 46, .5) 0%, rgba(6, 20, 46, 0) 24%);
}
.phero__main {
  width: 100%;
  max-width: calc(var(--wrap) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 140px var(--gutter) clamp(48px, 5vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  align-items: end;
  gap: 32px 64px;
}
.phero__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.phero__title {
  margin: 0;
  max-width: 16ch;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 300;
  font-size: clamp(40px, 3.6vw + 14px, 80px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.phero__side { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; justify-self: end; max-width: 440px; }
.phero__lead { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(253, 247, 235, .84); }
.phero .crumbs ol { color: rgba(253, 247, 235, .6); }
.phero .crumbs a { color: rgba(253, 247, 235, .78); }
.phero .crumbs [aria-current] { color: var(--cream); }
@media (hover: hover) { .phero .crumbs a:hover { color: var(--gold); } }

/* the first section after the hero is the white sheet */
.phero + * {
  position: relative;
  z-index: 2;
  margin-top: calc(-1 * var(--hero-overlap));
  background: var(--bg);
  border-radius: var(--hero-overlap) var(--hero-overlap) 0 0;
  box-shadow: 0 -24px 48px -28px rgba(6, 20, 46, .55);
}

@media (max-width: 809.98px) {
  .phero { min-height: clamp(520px, 86svh, 720px); }
  .phero__main { grid-template-columns: 1fr; padding-top: 112px; gap: 20px; }
  .phero__side { justify-self: start; gap: 20px; }
  .phero__lead { font-size: 15px; }
}

/* Breadcrumb (<!-- @breadcrumb -->) */
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 400 13px/20px var(--font);
  color: var(--ink-faint);
}
.crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.crumbs li + li::before { content: "/"; opacity: .6; }
.crumbs a {
  color: var(--ink-soft);
  text-decoration: none;
  /* comfortable tap target without changing the line */
  padding-block: 12px;
  margin-block: -12px;
}
.crumbs [aria-current] { color: var(--ink-strong); }
@media (hover: hover) { .crumbs a:hover { color: var(--gold-deep); } }
.crumbs a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }

/* 404 */
.notfound { min-height: 72vh; display: flex; align-items: center; }
.notfound .rd-container { width: 100%; }
.notfound__lead { max-width: 52ch; margin: 0; color: var(--ink-soft); font-size: 18px; line-height: 1.6; }
.notfound__links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 32px; }