/* Harmony Duo — layout v8.2, 12 Oct 2026.
   Scoped to offer, reviews and personalized proposal only.
   Loaded AFTER premium-pages.css, booking-v5.css and inline proposal styles.
   No interference with forms, menu actions, stored offers, video/audio or SEO.
*/

/* 1. Shared header: same spacing and geometry as the unified site menu. */
body.offer header.nav, body.reviews header.nav {
  min-height:76px;
  background:rgba(9,9,19,.94);
}
body.offer header.nav > .wrap.navin,
body.reviews header.nav > .wrap.navin {
  box-sizing:border-box;
  min-height:76px;
  height:76px;
  width:min(1160px,calc(100% - 48px));
  margin-inline:auto;
  padding:0;
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  justify-content:space-between;
  gap:8px;
}
body.offer header.nav .brand,
body.reviews header.nav .brand {
  min-width:0;
  margin:0;
  padding:0;
  flex:0 0 auto;
  gap:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  white-space:nowrap;
  font:400 32px/1.03 'Allura',cursive;
  color:#fffaf3;
}
body.offer header.nav .brand strong,
body.reviews header.nav .brand strong {
  display:block;
  margin:0;
  font:inherit;
  line-height:1.03;
  color:#fffaf3;
}
body.offer header.nav .brand small,
body.reviews header.nav .brand small {
  margin-top:3px;
  color:#e9c37c;
  font:700 11px/1.2 'DM Sans',Arial,sans-serif;
  letter-spacing:.09em;
}
@media (min-width:1221px) {
  body.offer header.nav nav.navlinks,
  body.reviews header.nav nav.navlinks {gap:2px;flex-wrap:nowrap;min-width:0}
  body.offer header.nav nav.navlinks > a:not(.book),
  body.reviews header.nav nav.navlinks > a:not(.book) {
    padding:9px clamp(3px,.55vw,8px);
    font-size:clamp(11px,.9vw,13px);
    letter-spacing:.015em;
    white-space:nowrap;
  }
  body.offer header.nav nav.navlinks > .book,
  body.reviews header.nav nav.navlinks > .book {
    box-sizing:border-box;
    height:44px;
    min-height:44px;
    max-height:44px;
    margin:0 0 0 4px;
    padding:0 15px;
    font:900 13px/1 'DM Sans',Arial,sans-serif;
  }
}

/* 2. On tablets/phones, make nav controls line up with other site pages. */
@media (max-width:1220px) {
  body.offer header.nav .hamburger,
  body.reviews header.nav .hamburger {
    box-sizing:border-box;
    display:flex;
    flex:0 0 48px;
    width:48px;
    height:48px;
    min-height:48px;
    margin:0 0 0 auto;
    padding:0;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    border:1px solid rgba(255,255,255,.16);
    border-radius:14px;
    background:rgba(255,255,255,.055);
    color:#fffaf3;
    cursor:pointer;
  }
  body.offer header.nav .hamburger span,
  body.reviews header.nav .hamburger span {
    display:block;
    width:20px;
    height:2px;
    margin:0;
    border-radius:3px;
    background:currentColor;
  }
  body.offer header.nav .mobile.open,
  body.reviews header.nav .mobile.open {
    display:flex;
    position:fixed;
    z-index:130;
    top:76px;
    left:max(12px,calc((100vw - 1160px)/2));
    right:max(12px,calc((100vw - 1160px)/2));
    width:auto;
    max-height:calc(100dvh - 88px);
    overflow-y:auto;
    flex-direction:column;
    gap:7px;
    padding:14px;
    margin:0;
    border:1px solid rgba(255,255,255,.14);
    border-radius:0 0 22px 22px;
    background:rgba(9,9,19,.98);
    box-shadow:0 18px 45px rgba(0,0,0,.45);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
  }
  body.offer header.nav .mobile.open a,
  body.reviews header.nav .mobile.open a {
    display:flex;
    flex:0 0 auto;
    min-height:42px;
    padding:9px 14px;
    border-radius:12px;
    font-size:14px;
    line-height:1.3;
  }
}
@media (max-width:600px) {
  body.offer header.nav > .wrap.navin,
  body.reviews header.nav > .wrap.navin {width:calc(100% - 32px)}
  body.offer header.nav .brand,
  body.reviews header.nav .brand {font-size:27px;max-width:calc(100% - 60px)}
  body.offer header.nav .brand strong,
  body.reviews header.nav .brand strong {font-size:inherit;letter-spacing:-.015em}
  body.offer header.nav .mobile.open,
  body.reviews header.nav .mobile.open {left:12px;right:12px}
}
@media (max-width:350px) {
  body.offer header.nav .brand,
  body.reviews header.nav .brand {font-size:24px}
}

/* 3. Personalized proposals: text never overflows its own grid column. */
body.proposal-page .proposal-grid {min-width:0}
body.proposal-page .proposal-grid > * {min-width:0;max-width:100%}
body.proposal-page .venue-title,
body.proposal-page .proposal-sub,
body.proposal-page .proposal-intro,
body.proposal-page .proposal-heading,
body.proposal-page .proposal-tagline,
body.proposal-page .focus-text,
body.proposal-page .pill {max-width:100%;overflow-wrap:anywhere}
body.proposal-page .proposal-sub {
  line-height:1.18;
  text-wrap:pretty;
}
/* Root cause of spillover: old stylesheet enforced nowrap on accented subtitle. */
body.proposal-page .proposal-sub .highlight {
  display:inline;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:normal;
}
body.proposal-page .actions .btn {max-width:100%;white-space:normal;text-align:center;overflow-wrap:anywhere}
body.proposal-page .pill {white-space:normal;line-height:1.45}
body.proposal-page .focus-card,
body.proposal-page .focus-text {min-width:0}
@media (min-width:921px) and (max-width:1350px) {
  body.proposal-page .proposal-sub{font-size:clamp(26px,2.75vw,37px)}
}
@media (max-width:920px) {
  body.proposal-page .proposal-grid {grid-template-columns:minmax(0,1fr)}
  body.proposal-page .portrait {width:100%;min-height:0;padding-bottom:4px}
  body.proposal-page .portrait img {
    display:block;
    width:min(100%,510px);
    max-height:550px;
    height:auto;
    object-fit:contain;
  }
}
@media (max-width:600px) {
  body.proposal-page .proposal-sub {font-size:clamp(24px,6vw,32px);line-height:1.22}
  body.proposal-page .portrait {width:100%;min-height:0}
  body.proposal-page .portrait img {width:min(100%,410px);max-height:500px;height:auto}
  body.proposal-page .venue-title {font-size:clamp(35px,10vw,54px)}
  body.proposal-page .focus-image img {max-width:100%}
}

/* 4. Larger integrated artist portrait on Offer and Reviews. */
@media (min-width:601px) and (max-width:920px) {
  body.offer .hero-photo-premium,
  body.reviews .hero-photo-premium {width:100%;max-width:610px;margin:0 auto -22px}
  body.offer .hero-photo-premium img,
  body.reviews .hero-photo-premium img {width:min(100%,570px);max-height:660px;height:auto}
}
@media (max-width:600px) {
  body.offer .hero-photo-premium,
  body.reviews .hero-photo-premium {width:100%;max-width:none;min-height:0;margin:0 auto -18px}
  body.offer .hero-photo-premium img,
  body.reviews .hero-photo-premium img {
    display:block;
    width:min(100%,430px);
    max-height:540px;
    height:auto;
    object-fit:contain;
  }
}