/* Shared KEROSE memorial frame — matched to the approved header reference. */
:root {
  --kerose-header-top: 7px;
  --kerose-header-height: 136px;
  --kerose-header-end: 143px;
}

.topline {
  position: absolute !important;
  inset: 0 0 auto !important;
  height: 7px !important;
  background: #a91927 !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) !important;
}

.topline::before {
  display: none;
}

body::before {
  inset: 7px clamp(14px, 3vw, 40px) 10px !important;
  border-color: rgba(105,105,105,.82) !important;
}

body .site-header {
  position: absolute !important;
  z-index: 20;
  top: var(--kerose-header-top) !important;
  left: 50% !important;
  width: calc(100% - clamp(28px, 6vw, 80px)) !important;
  max-width: none !important;
  height: var(--kerose-header-height) !important;
  min-height: var(--kerose-header-height) !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  grid-template-rows: 82px 54px !important;
  align-content: stretch !important;
  align-items: center !important;
  column-gap: 24px !important;
  color: #fff !important;
  background:
    linear-gradient(rgba(7,6,6,.78), rgba(10,6,7,.88)),
    var(--kerose-memorial-art) center / cover no-repeat !important;
  border: 0 !important;
  border-bottom: 2px solid rgba(132,132,132,.64) !important;
  transform: translateX(-50%) !important;
  overflow: hidden;
}

body .site-header > .brand {
  grid-column: 2 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: center !important;
  gap: 0 !important;
  color: #fff !important;
}

body .site-header > .brand .brand-logo {
  position: absolute !important;
  left: 8px !important;
  top: 41px !important;
  width: 74px !important;
  height: 58px !important;
  padding: 0 !important;
  object-fit: contain !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: brightness(0) invert(1) drop-shadow(0 8px 22px rgba(0,0,0,.35)) !important;
  mix-blend-mode: normal !important;
  transform: translateY(-50%) !important;
}

body .site-header > .brand > span {
  display: grid !important;
  justify-items: center !important;
  line-height: 1 !important;
  text-align: center !important;
}

body .site-header > .brand strong {
  color: #fff !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  letter-spacing: .28em !important;
  line-height: 1 !important;
  text-shadow: 0 4px 22px rgba(0,0,0,.72) !important;
}

body .site-header > .brand small {
  margin-top: 8px !important;
  color: #fff !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 11px !important;
  font-weight: 400 !important;
  letter-spacing: .25em !important;
  line-height: 1 !important;
  text-shadow: 0 4px 18px rgba(0,0,0,.72) !important;
}

body .site-header > .quiet-button,
body .site-header > .privacy-label {
  grid-column: 3 !important;
  grid-row: 1 !important;
  align-self: center !important;
  justify-self: end !important;
  width: 32px !important;
  height: 32px !important;
  margin: 0 10px 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: transparent !important;
  background: transparent !important;
  border: 0 !important;
  font-size: 0 !important;
}

body .site-header .lock-icon {
  width: 27px !important;
  height: 27px !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  color: transparent !important;
  background: transparent !important;
  border: 1.5px solid #b7192a !important;
  border-radius: 0 !important;
  transform: rotate(45deg) !important;
}

body .site-header .lock-icon::after {
  content: "";
  width: 7px;
  height: 7px;
  background: #b7192a;
}

body .site-header > nav {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  width: 100% !important;
  padding: 0 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(20px, 2.5vw, 34px) !important;
  background: rgba(8,6,7,.42) !important;
  border-top: 2px solid rgba(132,132,132,.5) !important;
  overflow-x: auto !important;
  scrollbar-width: none;
}

body .site-header > nav::-webkit-scrollbar { display: none; }

body .site-header nav a {
  flex: 0 0 auto !important;
  color: #f8f4f2 !important;
  font-family: "Manrope", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  text-shadow: 0 3px 16px rgba(0,0,0,.74) !important;
}

body .site-header nav a:hover,
body .site-header nav a:focus-visible,
body .site-header nav a.active,
body .site-header nav a[aria-current="page"] {
  color: #db3444 !important;
}

body > main { padding-top: var(--kerose-header-end) !important; }
body > main.review-main { padding-top: calc(var(--kerose-header-end) + 72px) !important; }

body.home-page .hero {
  background:
    linear-gradient(120deg, rgba(255,255,255,.94), rgba(255,252,249,.9) 58%, rgba(248,229,231,.86)),
    var(--kerose-memorial-art) center top / cover no-repeat !important;
}
body.home-page .hero-copy { padding-top: 54px !important; }
body.about-page .about-hero {
  padding-top: 54px !important;
  background:
    linear-gradient(120deg, rgba(16,10,10,.34), rgba(116,14,27,.44)),
    var(--kerose-memorial-art) center top / cover no-repeat !important;
}
body.story-page .story-studio { padding-top: 54px !important; }
body.account-page .account-hero,
body.account-page.account-authenticated .account-hero { padding-top: 54px !important; }
body.legal-page .legal-hero { padding-top: 54px !important; }
body .library-hero { padding-top: 50px !important; }
body .tribute-profile { padding-top: 62px !important; }
body .tribute-profile .back-link { top: 28px !important; }

@media (max-width: 900px) {
  :root {
    --kerose-header-top: 7px;
    --kerose-header-height: 136px;
    --kerose-header-end: 143px;
  }

  .topline { top: 0 !important; height: 7px !important; }
  body::before { inset: 7px 16px 8px !important; }
  body .site-header {
    width: calc(100% - 32px) !important;
    grid-template-rows: 82px 54px !important;
  }
  body .site-header > .brand .brand-logo {
    left: 8px !important;
    top: 41px !important;
    width: 72px !important;
    height: 56px !important;
  }
  body .site-header > .brand strong { font-size: 24px !important; }
  body .site-header > .brand small { margin-top: 8px !important; font-size: 11px !important; }
  body .site-header > .quiet-button,
  body .site-header > .privacy-label { width: 32px !important; height: 32px !important; margin-right: 10px !important; }
  body .site-header .lock-icon { width: 27px !important; height: 27px !important; }
  body .site-header .lock-icon::after { width: 7px; height: 7px; }
  body .site-header > nav { padding: 0 16px !important; gap: 24px !important; justify-content: center !important; }
  body .site-header nav a { font-size: 15px !important; }
  body > main.review-main { padding-top: calc(var(--kerose-header-end) + 58px) !important; }
  body.home-page .hero-copy,
  body.about-page .about-hero,
  body.story-page .story-studio,
  body.account-page .account-hero,
  body.account-page.account-authenticated .account-hero,
  body.legal-page .legal-hero,
  body .library-hero,
  body .tribute-profile { padding-top: 58px !important; }
  body .tribute-profile .back-link { top: 20px !important; }
}

@media (max-width: 600px) {
  :root {
    --kerose-header-top: 7px;
    --kerose-header-height: 128px;
    --kerose-header-end: 135px;
  }

  .topline { top: 0 !important; height: 7px !important; }
  body::before { inset: 7px 7px 7px !important; }
  body .site-header {
    width: calc(100% - 14px) !important;
    grid-template-columns: 1fr auto 1fr !important;
    grid-template-rows: 76px 52px !important;
    column-gap: 8px !important;
  }
  body .site-header > .brand .brand-logo {
    left: 6px !important;
    top: 38px !important;
    width: 58px !important;
    height: 46px !important;
  }
  body .site-header > .brand strong {
    font-size: 20px !important;
    letter-spacing: .2em !important;
  }
  body .site-header > .brand small {
    margin-top: 7px !important;
    font-size: 9px !important;
    letter-spacing: .19em !important;
  }
  body .site-header > .quiet-button,
  body .site-header > .privacy-label {
    width: 27px !important;
    height: 27px !important;
    margin-right: 8px !important;
  }
  body .site-header .lock-icon { width: 23px !important; height: 23px !important; border-width: 1.5px !important; }
  body .site-header .lock-icon::after { width: 6px; height: 6px; }
  body .site-header > nav {
    padding: 0 15px !important;
    gap: 18px !important;
    justify-content: flex-start !important;
  }
  body .site-header nav a { font-size: 14px !important; }
  body > main.review-main { padding-top: calc(var(--kerose-header-end) + 44px) !important; }
  body.home-page .hero-copy,
  body.about-page .about-hero,
  body.story-page .story-studio,
  body.account-page .account-hero,
  body.account-page.account-authenticated .account-hero,
  body.legal-page .legal-hero,
  body .library-hero,
  body .tribute-profile { padding-top: 44px !important; }
  body .tribute-profile .back-link { top: 14px !important; }
}