/* Shared chrome and spacing for the retained page families. Content and
   controls retain their existing markup, state and reading surfaces. */
body .cp-site {
  --cp-body: Arial, sans-serif;
  --cp-display: Anton, 'Arial Narrow', sans-serif;
  --cp-gutter: clamp(24px, 3.5vw, 40px);
  --cp-red: #b43042;
  --gp-primary: #b43042;
  --gp-primary-hover: #c73950;
  --gp-control-border: #d45c6b66;
  --gp-control-radius: 7px;
  --gp-action-height: 48px;
  --gp-action-size: 14px;
  --gp-blue: #85d8e8;
  --gp-blue-soft: #a6e8ee;
  --gp-blue-surface: #122a33;
  --gp-blue-line: #527c86;
  --gp-focus: #85d8e8;
  --mn-bg: #080b0c;
  --mn-panel: #10181c;
  --mn-paper: #f5f3ee;
  --mn-muted: #afb9bd;
  --mn-cyan: #85d8e8;
  --mn-line: #353f4380;
  --site-gutter: var(--cp-gutter);
  font-family: Arial, sans-serif;
  background: #080b0c;
}

body .cp-site .gp-brand-header {
  position: relative !important;
  z-index: 50;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 30px !important;
  width: 100%;
  max-width: 1240px;
  min-height: 114px;
  margin: 0 auto !important;
  padding: 28px 40px !important;
  background: #080b0c !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #f5f3ee;
  box-shadow: none !important;
  transform: none !important;
  /* The retained header blur would contain its fixed mobile navigation. */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body .cp-site .gp-brand-header ._wordmark_1qjqh_17 { display: flex; flex: none; flex-direction: column; gap: 7px; text-decoration: none; color: #f5f3ee !important; }
body .cp-site .gp-brand-header ._wordmark_1qjqh_17 strong { font: 400 27px/1.2 Anton, sans-serif !important; letter-spacing: .018em; text-transform: uppercase; white-space: nowrap; }
body .cp-site .gp-brand-header ._wordmark_1qjqh_17 small { font: 400 9px/1.4 Arial, sans-serif !important; letter-spacing: .17em !important; color: #b8c0c3 !important; margin: 0 !important; }
body .cp-site .gp-brand-header .cp-primary-nav { display: flex !important; align-items: center; gap: 29px !important; margin-left: auto; }
body .cp-site .gp-brand-header .cp-primary-nav > a { position: relative; display: flex; align-items: center; min-height: 44px; padding: 10px 0; color: #aeb9bd !important; font: 400 14px/1.4 Arial, sans-serif !important; letter-spacing: 0; text-transform: none; text-decoration: none; border: 0; }
body .cp-site .gp-brand-header .cp-primary-nav > a > svg { display: none; }
body .cp-site .gp-brand-header .cp-primary-nav > a[aria-current="page"] { color: #96e2eb !important; border-bottom: 2px solid #85d8e8 !important; }
body .cp-site .gp-brand-header .gp-more-menu { position: relative; }
body .cp-site .gp-brand-header .gp-more-menu > summary { display: flex; align-items: center; gap: 9px; min-height: 44px; padding: 10px 0; color: #b1bcc1; font: 400 13px/1.4 Arial, sans-serif; list-style: none; cursor: pointer; }
body .cp-site .gp-brand-header .gp-more-menu > summary::-webkit-details-marker { display: none; }
body .cp-site .gp-brand-header .gp-more-menu > div { position: absolute; top: calc(100% + 10px); right: 0; width: 290px; max-height: min(640px, calc(100dvh - 135px)); overflow-y: auto; padding: 13px; background: #10191d; border: 1px solid #42545c; border-radius: 10px; box-shadow: 0 15px 55px #000b; }
body .cp-site .gp-brand-header .gp-more-menu:not([open]) > div { display: none; }
body .cp-site .gp-brand-header .gp-more-menu a { display: flex; align-items: center; min-height: 44px; padding: 10px 12px; color: #c2cdd0 !important; text-decoration: none; font: 400 13px/1.4 Arial, sans-serif !important; text-transform: none; letter-spacing: 0; border: 0; }
body .cp-site .gp-brand-header .gp-more-menu a:hover, body .cp-site .gp-brand-header .gp-more-menu a[aria-current="page"] { color: #a2e9f0 !important; background: #1a2c33; border-radius: 4px; }
body .cp-site .gp-brand-guides { border-top: 1px solid #35474f; margin-top: 8px; }
body .cp-site .gp-brand-guides > summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; padding: 12px; font: 400 13px/1.5 Arial, sans-serif; cursor: pointer; color: #b8dce1; list-style: none; }
body .cp-site .gp-brand-guides > summary::-webkit-details-marker { display: none; }
body .cp-site .gp-brand-header .gp-brand-guides > summary::after { content: none; }
body .cp-site .gp-brand-header .gp-brand-guides > div { display: block; position: static; width: auto; padding: 0 0 10px 12px; border: 0; background: transparent; box-shadow: none; }
body .cp-site .gp-brand-header .cp-menu { display: none !important; }
body .cp-site .gp-brand-header .gp-brand-bottom-nav { display: none; }
body .cp-site .gp-brand-header :is(a, summary):focus-visible { outline: 2px solid #85d8e8; outline-offset: 4px; }

body .cp-site .gp-brand-footer { max-width: 1240px; margin: 48px auto 0; background: #080b0c !important; border-color: #303c42 !important; }
body .cp-site .gp-brand-footer .gp-footer-wordmark { font-family: Anton, sans-serif; }
body .cp-site .gp-brand-footer :is(.gp-footer-tagline, .gp-footer-group-links a, .gp-footer-utility) { font-family: Arial, sans-serif !important; }
body .cp-site .gp-brand-footer :is(.gp-footer-column h2, .gp-footer-disclosure summary) { color: #8bdbe4 !important; }
body .cp-site .gp-brand-footer .gp-footer-join { color: #9fe6ed !important; border-color: #527b86 !important; border-radius: 6px; min-height: 44px; }

/* A common reading width, typography and tactile controls, without replacing
   the cream Scripture/print surfaces or imposing layouts on forms or media. */
body .cp-site :is(.mn-content, .mn-task-hero, .st-main, .jr-hub, .cm-room, .gp-store-shell) { max-width: 1240px; margin-inline: auto; }
body .cp-site .mn-content { padding-inline: var(--cp-gutter); }
body .cp-site .mn-page { background: #080b0c; }
body .cp-site :is(.mn-task-hero, .mn-hero) { background-color: #0c1418; }
body .cp-site :is(.mn-hero h1, .mn-task-hero h1, .mn-page h2, .cp-track-section h2) { font-family: Anton, sans-serif; font-weight: 400; letter-spacing: -.015em; }
body .cp-site :is(.mn-kicker, .mn-eyebrow, .mn-card-arrow) { color: #8bdbe4 !important; }
body .cp-site :is(.mn-card, .mn-result, .mn-song, .mn-aside, .mn-connected) { border-color: #3b515b80; border-radius: 7px; }
body .cp-site :is(.mn-card, .mn-result, .mn-song) { background: #101b20; }
body .cp-site .mn-card:hover, body .cp-site .mn-song:hover { background: #14282f; border-color: #74c7d4; }
body .cp-site :is(.mn-button, .cp-button) { min-height: 48px; border-radius: 7px; background: #b43042; border-color: #d45c6b66; color: #fff !important; letter-spacing: .01em; font-family: Arial, sans-serif; }
body .cp-site :is(.mn-button, .cp-button):hover { background: #c73950; }
body .cp-site .mn-button--secondary { color: #a6e8ee !important; background: #122a33; border-color: #527c86; }
body .cp-site .mn-button--secondary:hover { background: #1c3943; }
body .cp-site :is(.mn-chip, .mn-scripture-link) { border-radius: 999px; border-color: #3c6470; color: #a2e2ec !important; }
body .cp-site :is(.mn-card, .mn-song, .mn-button, .cp-button):focus-visible { outline-color: #85d8e8; }
body .cp-site :is(.mn-page, .cp-page) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) { border-radius: 6px; }

/* Let longer guide introductions determine their own height so the title and
   description cannot collide after the display font has loaded. */
@media (min-width: 701px) {
  body .cp-site .gh-hero--intro { height: auto; min-height: 420px; padding: 100px var(--gh-gutter) 38px; }
  body .cp-site .gh-hero--intro .gh-title { position: relative; top: auto; left: auto; width: 100%; margin: 0 0 22px; }
  body .cp-site .gh-hero--intro .gh-summary { position: relative; left: auto; bottom: auto; }
  /* This studio portrait places the head near the top of the source. Keep both
     artwork layers aligned there when the shorter intro crops the lower body. */
  body .cp-site .gh-hero--intro[data-hero-art="cover-515c57b465c7"] .gh-art img { top: 0 !important; object-position: center top; }
}

@media (max-width: 900px) and (min-width: 701px) {
  body .cp-site .gp-brand-header { gap: 18px !important; padding-inline: 28px !important; }
  body .cp-site .gp-brand-header ._wordmark_1qjqh_17 strong { font-size: 23px !important; }
  body .cp-site .gp-brand-header .cp-primary-nav { gap: 18px !important; }
}

@media (max-width: 700px) {
  body .cp-site { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); --cp-gutter: 24px; }
  body .cp-site .cp-site { padding-bottom: 0; }
  body .cp-site .player { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body .cp-site:has(.player) { padding-bottom: calc(220px + env(safe-area-inset-bottom, 0px)); }
  body .cp-site .gp-brand-header { min-height: 72px; padding: 16px 23px 12px !important; gap: 14px !important; }
  body .cp-site .gp-brand-header ._wordmark_1qjqh_17 { gap: 6px; }
  body .cp-site .gp-brand-header ._wordmark_1qjqh_17 strong { font-size: 20px !important; letter-spacing: .01em; }
  body .cp-site .gp-brand-header ._wordmark_1qjqh_17 small { font-size: 6.5px !important; letter-spacing: .16em !important; }
  body .cp-site .gp-brand-header .cp-primary-nav { display: none !important; }
  body .cp-site .gp-brand-header .cp-menu { display: block !important; position: relative; }
  body .cp-site .gp-brand-header .cp-menu > summary { display: flex; align-items: center; justify-content: center; gap: 11px; min-width: 44px; min-height: 44px; padding: 5px 0; font: 400 12px/1.4 Arial, sans-serif; list-style: none; cursor: pointer; color: #c1cccf; }
  body .cp-site .gp-brand-header .cp-menu > summary > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  body .cp-site .gp-brand-header .cp-menu > summary::-webkit-details-marker { display: none; }
  body .cp-site .gp-brand-header .cp-menu > summary::after { content: none; }
  body .cp-site .gp-brand-header .cp-menu > summary svg { width: 19px; height: 19px; }
  body .cp-site .gp-brand-header .cp-menu > nav { position: absolute; z-index: 55; top: calc(100% + 10px); right: 0; left: auto; width: min(340px, calc(100vw - 32px)); max-height: calc(100dvh - 170px); overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px; margin: 0; background: #10191d; color: #c1cdd1; border: 1px solid #42545c; border-radius: 11px; box-shadow: 0 15px 55px #000b; }
  body .cp-site .gp-brand-header .cp-menu:not([open]) > nav { display: none !important; }
  body .cp-site .gp-brand-header .cp-menu > nav > a, body .cp-site .gp-brand-header .cp-menu .gp-brand-guides a { display: flex; align-items: center; min-height: 44px; padding: 10px 0; margin: 0; font: 400 14px/1.5 Arial, sans-serif !important; letter-spacing: 0; text-transform: none; color: #bdcacf !important; text-decoration: none; border: 0; border-bottom: 1px solid #2e3d4280; }
  body .cp-site .gp-brand-header .cp-menu > nav > a:nth-child(-n+4) { color: #e5eef0 !important; font-size: 18px !important; }
  body .cp-site .gp-brand-header .cp-menu a[aria-current="page"] { color: #9fe6ed !important; }
  body .cp-site .gp-brand-header .gp-brand-bottom-nav { display: flex; position: fixed; z-index: 45; inset: auto 0 0; width: 100%; min-height: 74px; padding: 7px 12px max(10px, env(safe-area-inset-bottom)); margin: 0; align-items: center; justify-content: space-around; background: #0a1013ed; backdrop-filter: blur(18px); border-top: 1px solid #30404780; box-shadow: none; }
  body .cp-site .gp-brand-header .gp-brand-bottom-nav > a { position: relative; isolation: isolate; display: flex; flex: 1; min-width: 0; min-height: 54px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 5px 0; margin: 0; color: #9baeb3 !important; font: 400 10px/1.3 Arial, sans-serif !important; text-transform: none; letter-spacing: 0; text-decoration: none; border: 0; }
  body .cp-site .gp-brand-header .gp-brand-bottom-nav svg { width: 20px; height: 20px; stroke-width: 1.6; }
  body .cp-site .gp-brand-header .gp-brand-bottom-nav > a[aria-current="page"] { color: #9fe6ed !important; }
  body .cp-site .gp-brand-header .gp-brand-bottom-nav > a[aria-current="page"]::before { content: ""; position: absolute; inset: 0 10px; z-index: -1; background: #74d5e911; border: 1px solid #8edce719; border-radius: 15px; }
  body .cp-site .gp-brand-footer { padding-inline: 24px !important; padding-bottom: 30px !important; margin-top: 38px; }
  body .cp-site .gp-brand-footer .gp-footer-group-links a { min-height: 44px; }
  body .cp-site :is(.mn-page, .cp-page) :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="range"]) { font-size: 16px; }
}

@media (max-width: 360px) {
  body .cp-site { --cp-gutter: 20px; }
  body .cp-site .gp-brand-header { padding-inline: 20px !important; gap: 12px !important; }
  body .cp-site .gp-brand-header ._wordmark_1qjqh_17 strong { font-size: 18px !important; }
  body .cp-site .gp-brand-header ._wordmark_1qjqh_17 small { font-size: 6px !important; }
}

@media print {
  body .cp-site { padding-bottom: 0; background: #fff; }
  body .cp-site .gp-brand-header, body .cp-site .gp-brand-footer { display: none !important; }
}