/* OudBeat premium light section headers — scoped to Home, History and Waves only. */
:root {
  --ob-cream: #fbf7ee;
  --ob-paper: #f4ead9;
  --ob-green: #153b2d;
  --ob-green-deep: #0d2c21;
  --ob-gold: #a96f24;
  --ob-gold-light: #d7ac62;
  --ob-ink: #30281f;
}

/* Shared light navigation treatment. */
body.homepage-redesign .topbar,
body.history-page .topbar.section-header-history,
body.waves-page .topbar.section-header-waves {
  position: relative !important;
  z-index: 20 !important;
  color: var(--ob-ink) !important;
  background: rgba(255, 252, 245, .97) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(169, 111, 36, .24) !important;
  box-shadow: 0 8px 28px rgba(58, 42, 20, .07) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
body.homepage-redesign .topbar .nav,
body.history-page .topbar .nav,
body.waves-page .topbar .nav { min-height: 78px !important; }
body.homepage-redesign .topbar .navlinks a,
body.history-page .topbar .navlinks a,
body.waves-page .topbar .navlinks a,
body.homepage-redesign .topbar .oudbeat-release-bell,
body.history-page .topbar .oudbeat-release-bell,
body.waves-page .topbar .oudbeat-release-bell {
  color: #40372b !important;
  text-shadow: none !important;
}
body.homepage-redesign .topbar .navlinks a:hover,
body.history-page .topbar .navlinks a:hover,
body.waves-page .topbar .navlinks a:hover { color: var(--ob-gold) !important; }
body.homepage-redesign .topbar .navlinks .pill,
body.history-page .topbar .navlinks .pill,
body.waves-page .topbar .navlinks .pill { text-shadow: none !important; }

/* HOME — light editorial canvas, oud on the left, rosette detail on the right. */
body.homepage-redesign { background: var(--ob-cream) !important; }
body.homepage-redesign .premium-home-stage {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #fffaf0 0%, #f5ecdd 54%, #fffaf1 100%) !important;
  border-bottom: 1px solid rgba(169, 111, 36, .2) !important;
}
body.homepage-redesign .premium-home-stage::before { display: none !important; content: none !important; }
body.homepage-redesign .topbar.section-header-journal {
  background: rgba(255, 252, 245, .97) !important;
  background-image: none !important;
  border-bottom: 1px solid rgba(169, 111, 36, .24) !important;
}
body.homepage-redesign .premium-intro {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-height: 600px !important;
  padding: 62px 0 116px !important;
  overflow: hidden !important;
  background: radial-gradient(ellipse at 55% 45%, rgba(255,255,255,.76), transparent 56%), linear-gradient(110deg, #fbf7ee 0%, #f4ead9 48%, #fbf7ee 100%) !important;
  text-align: center !important;
}
body.homepage-redesign .premium-intro::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 auto 0 0 !important;
  width: min(27vw, 410px) !important;
  background: url("/assets/home-hero-oud.webp") left center / auto 100% no-repeat !important;
  mix-blend-mode: multiply !important;
  opacity: .98 !important;
  pointer-events: none !important;
}
body.homepage-redesign .premium-intro::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 8px !important;
  right: max(0px, calc((100vw - 1540px) / 2)) !important;
  width: clamp(170px, 20vw, 300px) !important;
  aspect-ratio: 1 !important;
  background: url("/assets/home-hero-rosette.webp") center / contain no-repeat !important;
  opacity: .58 !important;
  pointer-events: none !important;
}
body.homepage-redesign .premium-intro-inner {
  position: relative !important;
  z-index: 2 !important;
  width: min(960px, calc(100% - 370px)) !important;
  max-width: 960px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
}
body.homepage-redesign .premium-intro .hero-kicker {
  justify-content: center !important;
  color: #93601e !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: .25em !important;
  text-shadow: none !important;
  margin-bottom: 18px !important;
}
body.homepage-redesign .premium-intro .live-dot { background: #b27b2b !important; box-shadow: 0 0 0 4px rgba(178,123,43,.12) !important; }
body.homepage-redesign .premium-intro h1 {
  max-width: 960px !important;
  margin: 0 auto 17px !important;
  color: var(--ob-green) !important;
  font: 700 clamp(46px, 6.1vw, 88px)/.99 Georgia, "Times New Roman", serif !important;
  letter-spacing: -.035em !important;
  text-shadow: none !important;
}
body.homepage-redesign .premium-intro h1 em { color: #23533e !important; font-style: italic !important; }
body.homepage-redesign .premium-intro h2 {
  max-width: 880px !important;
  margin: 0 auto 19px !important;
  color: #244b37 !important;
  font: 600 clamp(19px, 2.1vw, 29px)/1.28 Georgia, "Times New Roman", serif !important;
  text-shadow: none !important;
}
body.homepage-redesign .premium-intro-copy,
body.homepage-redesign .premium-intro-note {
  max-width: 860px !important;
  margin: 0 auto 12px !important;
  color: #51483b !important;
  font: 400 clamp(15px, 1.15vw, 18px)/1.72 Arial, sans-serif !important;
  text-shadow: none !important;
}
body.homepage-redesign .premium-intro-note { color: #76532c !important; font-weight: 600 !important; }
body.homepage-redesign .premium-category-band {
  position: relative !important;
  z-index: 4 !important;
  margin-top: -78px !important;
  padding: 0 0 42px !important;
  background: transparent !important;
}
body.homepage-redesign .premium-category-grid {
  width: min(1320px, calc(100% - 48px)) !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 20px !important;
}
body.homepage-redesign .premium-category-card {
  min-height: 176px !important;
  padding: 25px 24px 22px !important;
  border: 1px solid rgba(198, 151, 78, .48) !important;
  border-radius: 22px !important;
  background: linear-gradient(145deg, rgba(255,253,248,.99), rgba(245,235,218,.98)) !important;
  box-shadow: 0 16px 38px rgba(67, 48, 20, .12), inset 0 1px 0 #fff !important;
  color: var(--ob-ink) !important;
}
body.homepage-redesign .premium-category-card:hover { transform: translateY(-5px) !important; box-shadow: 0 21px 46px rgba(67,48,20,.16) !important; }
body.homepage-redesign .premium-card-content strong { color: var(--ob-green) !important; }
body.homepage-redesign .premium-card-content>span:not(.premium-card-link) { color: #595044 !important; }
body.homepage-redesign .premium-card-link { color: #905c1d !important; }

/* HISTORY — parchment archive panorama, illustrated instruments and a timeline. */
body.history-page { background: linear-gradient(180deg, #fbf7ee, #f2e9dc) !important; }
body.history-page main.oudbeat-history-redesign {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 24px 0 76px !important;
  background: linear-gradient(180deg, #fbf7ee 0%, #f3eadc 100%) !important;
}
body.history-page main.oudbeat-history-redesign .history-intro-panel {
  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: min(1600px, calc(100% - 56px)) !important;
  max-width: 1600px !important;
  min-height: 535px !important;
  margin: 0 auto 46px !important;
  padding: 58px clamp(36px, 5.5vw, 92px) 78px !important;
  overflow: hidden !important;
  text-align: left !important;
  border: 1px solid rgba(178, 133, 65, .26) !important;
  border-radius: 28px !important;
  background-color: #f8f0e3 !important;
  background-image: linear-gradient(90deg, #f8f0e3 0%, rgba(248,240,227,.98) 32%, rgba(248,240,227,.76) 48%, rgba(248,240,227,.04) 72%), url("/assets/history-hero-art.webp") !important;
  background-size: cover, auto 100% !important;
  background-position: center, right center !important;
  background-repeat: no-repeat !important;
  box-shadow: 0 18px 48px rgba(69, 47, 22, .10) !important;
}
body.history-page .history-hero-copy { position: relative !important; z-index: 2 !important; width: min(760px, 62%) !important; }
body.history-page .history-intro-panel .eyebrow {
  color: #81501f !important;
  font-size: 12px !important;
  font-weight: 850 !important;
  letter-spacing: .24em !important;
}
body.history-page .history-intro-panel h1 {
  margin: 18px 0 8px !important;
  color: #173f2e !important;
  font: 700 clamp(46px, 5.4vw, 78px)/1.02 Georgia, "Times New Roman", serif !important;
  letter-spacing: -.035em !important;
  text-shadow: none !important;
}
body.history-page .history-hero-subtitle {
  margin: 0 0 14px !important;
  color: #70401f !important;
  font: italic 600 clamp(23px, 2.5vw, 36px)/1.2 Georgia, "Times New Roman", serif !important;
}
body.history-page .history-hero-rule { display: flex !important; align-items: center !important; gap: 12px !important; width: min(520px, 100%) !important; color: #b47a2c !important; margin: 10px 0 18px !important; }
body.history-page .history-hero-rule span { flex: 1 !important; height: 1px !important; background: linear-gradient(90deg, transparent, #b47a2c) !important; }
body.history-page .history-hero-rule span:last-child { background: linear-gradient(90deg, #b47a2c, transparent) !important; }
body.history-page .history-hero-rule i { font-style: normal !important; font-size: 20px !important; }
body.history-page .history-intro-panel .heroText { max-width: 680px !important; margin: 0 !important; color: #3e3a32 !important; font-size: clamp(16px, 1.45vw, 20px) !important; line-height: 1.68 !important; text-shadow: none !important; }
body.history-page .history-feature-strip {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 0 !important;
  width: min(910px, 74%) !important;
  margin-top: 34px !important;
  padding-top: 19px !important;
  border-top: 1px solid rgba(159, 112, 48, .32) !important;
}
body.history-page .history-feature { display: flex !important; align-items: center !important; gap: 12px !important; min-width: 0 !important; padding: 0 16px !important; border-right: 1px solid rgba(159,112,48,.28) !important; }
body.history-page .history-feature:first-child { padding-left: 0 !important; }
body.history-page .history-feature:last-child { border-right: 0 !important; }
body.history-page .history-feature>span { color: #a96f24 !important; font: 600 30px/1 Georgia,serif !important; }
body.history-page .history-feature strong { display: block !important; color: #1d4a35 !important; font: 700 16px/1.25 Georgia,serif !important; }
body.history-page .history-feature small { display: block !important; margin-top: 4px !important; color: #5e5548 !important; font: 12px/1.4 Arial,sans-serif !important; }
body.history-page .history-timeline { position: absolute !important; z-index: 2 !important; left: 6.5% !important; right: 6.5% !important; bottom: 27px !important; height: 1px !important; background: linear-gradient(90deg, transparent, #bd8738 8%, #bd8738 92%, transparent) !important; }
body.history-page .history-timeline i { position: absolute !important; top: -6px !important; width: 13px !important; height: 13px !important; border: 2px solid #b77d2e !important; border-radius: 50% !important; background: #fbf4e8 !important; }
body.history-page .history-timeline i:nth-child(1) { left: 16% !important; }
body.history-page .history-timeline i:nth-child(2) { left: 50% !important; }
body.history-page .history-timeline i:nth-child(3) { right: 16% !important; }
body.history-page main.oudbeat-history-redesign .history-archive-panel { width: min(1450px, calc(100% - 64px)) !important; max-width: 1450px !important; }

/* WAVES — light scientific editorial header with oud detail, waveform and ripple illustrations. */
body.waves-page { background: linear-gradient(180deg, #fbf7ef 0%, #f3eadb 100%) !important; }
body.waves-page main#main-content { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 0 72px !important; background: transparent !important; }
body.waves-page .waves-premium-hero {
  position: relative !important;
  isolation: isolate !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-height: 545px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 58px 24px 38px !important;
  overflow: hidden !important;
  background: radial-gradient(ellipse at 50% 38%, rgba(255,255,255,.92), transparent 55%), linear-gradient(110deg,#f7eddd,#fffaf1 48%,#f3e7d4) !important;
  border-bottom: 1px solid rgba(174,127,57,.24) !important;
}
body.waves-page .waves-premium-hero::before {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: min(26vw, 410px) !important;
  background: url("/assets/waves-hero-oud.webp") left center / auto 100% no-repeat !important;
  mix-blend-mode: multiply !important;
  opacity: .98 !important;
  pointer-events: none !important;
}
body.waves-page .waves-premium-hero::after {
  content: "" !important;
  position: absolute !important;
  z-index: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: min(27vw, 430px) !important;
  background: url("/assets/waves-hero-diagram.webp") right center / auto 100% no-repeat !important;
  mix-blend-mode: multiply !important;
  opacity: .86 !important;
  pointer-events: none !important;
}
body.waves-page .waves-hero-copy { position: relative !important; z-index: 2 !important; width: min(980px, 72%) !important; margin: 0 auto !important; text-align: center !important; }
body.waves-page .waves-hero-copy .eyebrow { color: #98611e !important; font-size: 12px !important; font-weight: 850 !important; letter-spacing: .25em !important; }
body.waves-page .waves-hero-copy h1 { margin: 18px 0 12px !important; color: #153e2e !important; font: 700 clamp(48px, 6vw, 84px)/1.02 Georgia,"Times New Roman",serif !important; letter-spacing: -.035em !important; }
body.waves-page .waves-hero-subtitle { margin: 0 auto !important; max-width: 940px !important; color: #302f29 !important; font: 500 clamp(17px, 1.75vw, 24px)/1.5 Georgia,"Times New Roman",serif !important; }
body.waves-page .waves-hero-divider { display: flex !important; align-items: center !important; justify-content: center !important; gap: 14px !important; width: min(360px, 80%) !important; margin: 24px auto 0 !important; color: #b77b2b !important; }
body.waves-page .waves-hero-divider span { flex: 1 !important; height: 1px !important; background: linear-gradient(90deg, transparent, #bd8434) !important; }
body.waves-page .waves-hero-divider span:last-child { background: linear-gradient(90deg,#bd8434,transparent) !important; }
body.waves-page .waves-hero-divider b { font: 700 38px/1 Georgia,serif !important; }
body.waves-page .waves-feature-strip {
  position: relative !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  gap: 18px !important;
  width: min(1260px, 90%) !important;
  margin: 42px auto 0 !important;
}
body.waves-page .waves-feature {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  min-height: 78px !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(185,133,57,.48) !important;
  border-radius: 16px !important;
  background: rgba(255,252,245,.82) !important;
  box-shadow: 0 8px 22px rgba(82,59,28,.07), inset 0 1px 0 #fff !important;
  color: #17412f !important;
  font: 700 clamp(15px,1.45vw,20px)/1.25 Georgia,serif !important;
  text-align: center !important;
}
body.waves-page .waves-feature>span { color: #b77b2b !important; font: 700 32px/1 Arial,sans-serif !important; }
body.waves-page .waves-article-section { width: min(1450px, calc(100% - 64px)) !important; max-width: 1450px !important; margin: 0 auto !important; padding-top: 48px !important; }
body.waves-page .waves-index-heading {
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 auto 30px !important;
  padding: 14px 34px !important;
  border: 1px solid rgba(184,132,58,.40) !important;
  border-radius: 18px !important;
  background: linear-gradient(135deg,#fffdf7,#f2e6d2) !important;
  box-shadow: 0 9px 24px rgba(79,58,29,.07) !important;
  color: #184330 !important;
  font: 700 clamp(24px,3vw,38px)/1.18 Georgia,"Times New Roman",serif !important;
  text-align: center !important;
}

/* Responsive behavior */
@media (max-width: 980px) {
  body.homepage-redesign .premium-intro-inner { width: min(780px, calc(100% - 280px)) !important; }
  body.history-page main.oudbeat-history-redesign .history-intro-panel { min-height: 560px !important; }
  body.history-page .history-hero-copy { width: 68% !important; }
  body.history-page .history-feature-strip { width: 84% !important; }
  body.waves-page .waves-hero-copy { width: 78% !important; }
}
@media (max-width: 760px) {
  body.homepage-redesign .premium-intro { min-height: 0 !important; padding: 52px 0 104px !important; }
  body.homepage-redesign .premium-intro::before { width: 190px !important; opacity: .28 !important; background-position: left bottom !important; }
  body.homepage-redesign .premium-intro::after { width: 150px !important; opacity: .32 !important; }
  body.homepage-redesign .premium-intro-inner { width: calc(100% - 34px) !important; padding: 0 8px !important; }
  body.homepage-redesign .premium-intro h1 { font-size: clamp(42px, 10vw, 62px) !important; }
  body.homepage-redesign .premium-intro h2 { font-size: clamp(19px, 5vw, 25px) !important; }
  body.homepage-redesign .premium-category-band { margin-top: -58px !important; padding-bottom: 30px !important; }
  body.homepage-redesign .premium-category-grid { width: calc(100% - 28px) !important; grid-template-columns: 1fr !important; gap: 12px !important; }
  body.homepage-redesign .premium-category-card { min-height: 0 !important; padding: 18px !important; }
  body.history-page main.oudbeat-history-redesign .history-intro-panel {
    width: calc(100% - 28px) !important;
    min-height: 0 !important;
    margin-bottom: 30px !important;
    padding: 42px 22px 74px !important;
    border-radius: 22px !important;
    background-image: linear-gradient(180deg,rgba(248,240,227,.90),rgba(248,240,227,.96)),url("/assets/history-hero-art.webp") !important;
    background-position: center, right bottom !important;
    background-size: cover, auto 68% !important;
  }
  body.history-page .history-hero-copy { width: 100% !important; }
  body.history-page .history-intro-panel h1 { font-size: clamp(40px, 10vw, 58px) !important; }
  body.history-page .history-feature-strip { width: 100% !important; grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 28px !important; }
  body.history-page .history-feature { border-right: 0 !important; padding: 0 !important; }
  body.history-page .history-feature>span { width: 34px !important; text-align: center !important; }
  body.history-page .history-timeline { left: 9% !important; right: 9% !important; bottom: 34px !important; }
  body.history-page main.oudbeat-history-redesign .history-archive-panel { width: calc(100% - 28px) !important; }
  body.waves-page .waves-premium-hero { min-height: 0 !important; padding: 52px 18px 30px !important; }
  body.waves-page .waves-premium-hero::before { width: 140px !important; opacity: .30 !important; background-position: left center !important; }
  body.waves-page .waves-premium-hero::after { width: 145px !important; opacity: .42 !important; background-position: right center !important; }
  body.waves-page .waves-hero-copy { width: 100% !important; }
  body.waves-page .waves-hero-copy h1 { font-size: clamp(40px, 10vw, 60px) !important; }
  body.waves-page .waves-hero-subtitle { max-width: 620px !important; font-size: 17px !important; }
  body.waves-page .waves-feature-strip { width: 100% !important; grid-template-columns: 1fr !important; gap: 10px !important; margin-top: 28px !important; }
  body.waves-page .waves-feature { min-height: 58px !important; }
  body.waves-page .waves-article-section { width: calc(100% - 28px) !important; padding-top: 30px !important; }
  body.waves-page .waves-index-heading { padding: 12px 18px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.homepage-redesign .premium-category-card { transition: none !important; }
}

/* Home decorative imagery as real image elements (more reliable than pseudo backgrounds). */
body.homepage-redesign .premium-intro::before,
body.homepage-redesign .premium-intro::after { content: none !important; display: none !important; }
body.homepage-redesign .home-hero-artwork {
  position: absolute !important;
  z-index: 1 !important;
  inset: 0 !important;
  pointer-events: none !important;
}
body.homepage-redesign .home-hero-oud {
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: min(27vw, 410px) !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: left bottom !important;
  mix-blend-mode: multiply !important;
}
body.homepage-redesign .home-hero-rosette {
  position: absolute !important;
  right: max(0px, calc((100vw - 1540px) / 2)) !important;
  top: 8px !important;
  width: clamp(170px, 20vw, 300px) !important;
  height: auto !important;
  opacity: .58 !important;
  mix-blend-mode: multiply !important;
}
@media(max-width:760px) {
  body.homepage-redesign .home-hero-oud { width: 155px !important; opacity: .34 !important; }
  body.homepage-redesign .home-hero-rosette { width: 130px !important; opacity: .28 !important; }
}
@media (min-width: 761px) {
  body.homepage-redesign .home-hero-oud { width: auto !important; height: 554px !important; max-width: 25vw !important; }
  body.homepage-redesign .home-hero-rosette { width: 270px !important; height: 270px !important; }
}
@media (max-width: 760px) {
  body.homepage-redesign .home-hero-oud { width: auto !important; height: 300px !important; max-width: 42vw !important; }
  body.homepage-redesign .home-hero-rosette { width: 125px !important; height: 125px !important; }
}

/* Explicit, browser-independent placement of the hero illustration assets. */
body.homepage-redesign .home-hero-oud {
  display: block !important;
  position: absolute !important;
  left: 0 !important; right: auto !important; top: auto !important; bottom: 0 !important;
  z-index: 1 !important;
  width: 330px !important; height: 554px !important; max-width: none !important;
  object-fit: contain !important; object-position: left bottom !important;
}
body.homepage-redesign .home-hero-rosette {
  display: block !important;
  position: absolute !important;
  left: auto !important; right: 22px !important; top: 12px !important; bottom: auto !important;
  z-index: 1 !important;
  width: 270px !important; height: 270px !important; max-width: none !important;
}
body.waves-page .waves-premium-hero::before,
body.waves-page .waves-premium-hero::after { content: none !important; display: none !important; }
body.waves-page .waves-hero-artwork { position: absolute !important; z-index: 1 !important; inset: 0 !important; pointer-events: none !important; }
body.waves-page .waves-hero-oud {
  display: block !important; position: absolute !important; left: 0 !important; right: auto !important; top: auto !important; bottom: 0 !important;
  width: 365px !important; height: 418px !important; max-width: none !important; object-fit: contain !important; object-position: left bottom !important; mix-blend-mode: multiply !important;
}
body.waves-page .waves-hero-diagram {
  display: block !important; position: absolute !important; left: auto !important; right: 0 !important; top: 0 !important; bottom: auto !important;
  width: 348px !important; height: 418px !important; max-width: none !important; object-fit: contain !important; object-position: right top !important; mix-blend-mode: multiply !important; opacity: .9 !important;
}
@media(max-width:760px) {
  body.homepage-redesign .home-hero-oud { width: 150px !important; height: 255px !important; opacity: .33 !important; }
  body.homepage-redesign .home-hero-rosette { width: 125px !important; height: 125px !important; right: 0 !important; opacity: .3 !important; }
  body.waves-page .waves-hero-oud { width: 140px !important; height: 190px !important; opacity: .34 !important; }
  body.waves-page .waves-hero-diagram { width: 145px !important; height: 180px !important; opacity: .42 !important; }
}

/* Final background-image composition: artwork remains behind live HTML text. */
body.homepage-redesign .premium-intro {
  background-color: #fbf7ee !important;
  background-image:
    linear-gradient(90deg, rgba(251,247,238,.02) 0%, rgba(251,247,238,.05) 25%, rgba(251,247,238,.10) 72%, rgba(251,247,238,.08) 100%),
    url("/assets/home-hero-rosette.webp"),
    url("/assets/home-hero-oud.webp") !important;
  background-size: cover, 270px 270px, auto 100% !important;
  background-position: center, right 20px top 8px, left center !important;
  background-repeat: no-repeat !important;
}
body.waves-page .waves-premium-hero {
  background-color: #f8f0e3 !important;
  background-image:
    linear-gradient(90deg, rgba(248,240,227,.06) 0%, rgba(255,250,241,.08) 48%, rgba(248,240,227,.03) 100%),
    url("/assets/waves-hero-diagram.webp"),
    url("/assets/waves-hero-oud.webp") !important;
  background-size: cover, 348px 418px, 365px 418px !important;
  background-position: center, right top, left bottom !important;
  background-repeat: no-repeat !important;
}
@media(max-width:760px) {
  body.homepage-redesign .premium-intro {
    background-image:
      linear-gradient(90deg,rgba(251,247,238,.22),rgba(251,247,238,.75) 30%,rgba(251,247,238,.75) 70%,rgba(251,247,238,.35)),
      url("/assets/home-hero-rosette.webp"),
      url("/assets/home-hero-oud.webp") !important;
    background-size: cover, 125px 125px, 145px 255px !important;
    background-position: center, right top 8px, left bottom !important;
  }
  body.waves-page .waves-premium-hero {
    background-image:
      linear-gradient(90deg,rgba(248,240,227,.4),rgba(255,250,241,.82) 30%,rgba(255,250,241,.82) 70%,rgba(248,240,227,.4)),
      url("/assets/waves-hero-diagram.webp"),
      url("/assets/waves-hero-oud.webp") !important;
    background-size: cover, 140px 180px, 140px 180px !important;
    background-position: center, right top, left bottom !important;
  }
}
/* Explicit type scales for consistent rendering across browser engines. */
body.homepage-redesign .premium-intro h1 { font-size: 78px !important; }
body.homepage-redesign .premium-intro h2 { font-size: 28px !important; }
body.homepage-redesign .premium-intro-copy,
body.homepage-redesign .premium-intro-note { font-size: 17px !important; }
body.history-page .history-intro-panel h1 { font-size: 72px !important; }
body.history-page .history-hero-subtitle { font-size: 34px !important; }
body.waves-page .waves-hero-copy h1 { font-size: 80px !important; }
body.waves-page .waves-hero-subtitle { font-size: 23px !important; }
@media (max-width: 1100px) and (min-width: 761px) {
  body.homepage-redesign .premium-intro h1 { font-size: 64px !important; }
  body.history-page .history-intro-panel h1 { font-size: 60px !important; }
  body.waves-page .waves-hero-copy h1 { font-size: 64px !important; }
}
@media (max-width: 760px) {
  body.homepage-redesign .premium-intro h1 { font-size: 48px !important; }
  body.homepage-redesign .premium-intro h2 { font-size: 20px !important; }
  body.homepage-redesign .premium-intro-copy,
  body.homepage-redesign .premium-intro-note { font-size: 15px !important; }
  body.history-page .history-intro-panel h1 { font-size: 48px !important; }
  body.history-page .history-hero-subtitle { font-size: 26px !important; }
  body.waves-page .waves-hero-copy h1 { font-size: 48px !important; }
  body.waves-page .waves-hero-subtitle { font-size: 17px !important; }
}


/* Final mobile responsive refinement: the desktop typography and layout remain unchanged. */
@media (max-width: 760px) {
  body.homepage-redesign .premium-intro { padding-top: 24px !important; padding-bottom: 12px !important; }
  body.homepage-redesign .premium-intro h1 { font-size: clamp(39px, 10.1vw, 42px) !important; line-height: 1.02 !important; margin-bottom: 12px !important; }
  body.homepage-redesign .premium-intro h2 { font-size: clamp(18px, 4.5vw, 19px) !important; line-height: 1.28 !important; margin-bottom: 12px !important; }
  body.homepage-redesign .premium-intro-copy,
  body.homepage-redesign .premium-intro-note { font-size: 14.5px !important; line-height: 1.55 !important; }
  .mobilebar { gap: 4px !important; }
  .mobilebar a { font-size: 9px !important; padding: 9px 1px !important; line-height: 1.15 !important; }
}
@media (max-width: 390px) {
  body.homepage-redesign .premium-intro h1 { font-size: 39px !important; }
  .mobilebar a { font-size: 8.5px !important; }
}

/* Keep the mobile homepage introduction clear of the first category card. */
@media (max-width: 760px) {
  body.homepage-redesign .premium-category-band { margin-top: 12px !important; padding-top: 0 !important; }
}
@media (max-width: 760px) {
  body { padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important; }
}