/* Photo heroes for hub pages (Concierge, Aesthetics, About, Blog, Contact). */

.hero-photo-band { position: relative; overflow: hidden; min-height: clamp(440px, 64vh, 640px); display: flex; align-items: flex-end; border-bottom: 1px solid var(--line); }
.hero-photo-band .bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; z-index: 0; }
.hero-photo-band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,9,.15) 0%, rgba(10,10,9,.55) 55%, rgba(10,10,9,.92) 100%); z-index: 1; }
.hero-photo-band .wrap { position: relative; z-index: 2; width: 100%; padding-top: clamp(80px, 14vw, 160px); padding-bottom: clamp(48px, 7vw, 72px); padding-left: 10vw; text-align: left; }
@media (max-width: 700px) { .hero-photo-band .wrap { padding-left: clamp(20px, 4vw, 56px); } }
.hero-photo-band .breadcrumb, .hero-photo-band .eyecaps { text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.hero-photo-band h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 500; line-height: 1.08; margin: 0 0 18px; max-width: 26ch; }
.hero-photo-band h1 em { font-style: italic; color: var(--bronze-pale); }
.hero-photo-band .sub { font-size: clamp(1rem, 1.4vw, 1.1rem); color: var(--paper-soft); max-width: 68ch; line-height: 1.65; margin: 0 0 30px; }

/* map */
.map-frame { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--ink-card); margin-top: 24px; }
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(0.3) contrast(1.05); }
.map-links { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.hero-photo-band.ai-illustration::before { content: "AI-generated illustration"; position: absolute; right: 14px; top: 12px; z-index: 3; font-size: 0.7rem; letter-spacing: 0.04em; color: var(--paper-soft); background: color-mix(in srgb, var(--ink) 55%, transparent); padding: 3px 8px; border-radius: 4px; pointer-events: none; }

/* About: portrait photo, left-justified, cropped to landscape, fading into black */
.about-band { position: relative; display: grid; grid-template-columns: 1fr; border-bottom: 1px solid var(--line); background: var(--ink); overflow: hidden; }
.about-photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%); }
.about-copy { padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 56px) clamp(40px, 6vw, 64px); position: relative; z-index: 1; }
@media (min-width: 880px) {
  /* text on the left (aligned with other pages), photo on the right fading into black */
  .about-band { grid-template-columns: 1fr minmax(0, 54%); align-items: center; }
  .about-copy { order: 1; padding-left: calc(max(0px, (100vw - 1200px) / 2) + 10vw); padding-right: 0; margin-right: -8%; }
  .about-photo { order: 2; }
  .about-photo img {
    -webkit-mask-image: linear-gradient(to left, #000 0%, #000 50%, transparent 100%);
            mask-image: linear-gradient(to left, #000 0%, #000 50%, transparent 100%); }
}
.about-copy .breadcrumb { font-size: 0.78rem; color: var(--paper-faint); margin-bottom: 18px; }
.about-copy .breadcrumb a { color: var(--paper-faint); text-decoration: none; }
.about-copy h1 { font-size: clamp(2rem, 3.8vw, 3.1rem); font-weight: 500; line-height: 1.1; margin: 0 0 18px; max-width: 18ch; }
.about-copy h1 em { font-style: italic; color: var(--bronze-pale); }
.about-copy .sub { font-size: clamp(1rem, 1.3vw, 1.08rem); color: var(--paper-soft); max-width: 46ch; line-height: 1.65; margin: 0 0 28px; }