/* ==========================================================================
   Key Verse Bible — phone reading layout (Study + Daily Devotion)
   Phone only: every rule is scoped to body.is-mobile, which shared/
   responsive.js sets at ≤768px. Desktop and tablet are untouched.

   Levels of control on a phone:
     1. Scripture context  Book / Chapter / Notes — under the hero, then a
                           compact bar docked to the top while reading.
     2. Reading tools      underline, capsules, appearance, font size — in
                           the "More" drawer above the bottom nav (the
                           version selector stays beside the chapter title).
     3. App navigation     ‹ Home › · More · Language — auto-hides while
                           reading (shared/bottom-nav.js / bottom-nav.css).

   Selectors carry #app-view / #main-header plus body.is-mobile so they
   outrank the page-level inline masthead overrides they refine.
   ========================================================================== */

/* ---- 1. Compact phone heroes ------------------------------------------- */
/* The verse, citation and subtitle lines leave the phone hero; the logo,
   title and the gold divider stay, and the padding closes up so the
   reader reaches content much sooner. */
html body.is-mobile #app-view header#main-header.study-header :is(.header-quote, .header-citation, .mobile-subtitle, .random-verse-container) {
    display: none !important;
}

html body.is-mobile #app-view header#main-header.study-header {
    min-height: 0 !important;
    height: auto !important;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 18px !important;
}

html body.is-mobile #app-view header#main-header.study-header .header-lockup,
html body.is-mobile #app-view header#main-header.study-header .header-center-content,
html body.is-mobile #app-view header#main-header.study-header .header-text-group {
    gap: 4px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

html body.is-mobile #app-view header#main-header.study-header .dove-icon {
    width: 62px !important;
    height: 62px !important;
    margin: 0 auto 2px !important;
}

html body.is-mobile #app-view header#main-header.study-header .header-divider {
    margin-top: 6px !important;
    margin-bottom: 0 !important;
}

/* ---- 2. Study: Book / Chapter / Notes context bar ---------------------- */
/* Under the hero it keeps its dark strip. Once the hero has scrolled away
   (app.js adds .top-docked) it becomes a compact bar fixed to the top of the
   viewport, below the status bar / notch. */
html body.is-mobile #app-view {
    --study-phone-gutter: 14px;
    --study-phone-control-height: 36px;
}

html body.is-mobile .sidebar.auto-hide-sidebar .selection-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    width: calc(100% - (var(--study-phone-gutter) * 2)) !important;
    margin-left: var(--study-phone-gutter) !important;
    margin-right: var(--study-phone-gutter) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

html body.is-mobile .sidebar.auto-hide-sidebar .top-selectors-row {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: start !important;
    min-width: 0 !important;
    width: auto !important;
    gap: 8px !important;
}

html body.is-mobile .sidebar.auto-hide-sidebar .notes-form-group {
    justify-self: end !important;
    margin-left: 0 !important;
    min-width: 0 !important;
    max-width: min(38vw, 142px) !important;
}

html body.is-mobile .sidebar.auto-hide-sidebar .top-selectors-row .form-group {
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
}

html body.is-mobile .sidebar.auto-hide-sidebar .top-selectors-row .form-group:first-child {
    flex: 1 1 auto !important;
}

html body.is-mobile .sidebar.auto-hide-sidebar .top-selectors-row .form-group:nth-child(2) {
    flex: 0 0 auto !important;
}

html body.is-mobile .sidebar.auto-hide-sidebar :is(.custom-dropdown-btn, select) {
    min-height: var(--study-phone-control-height) !important;
    height: var(--study-phone-control-height) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-radius: 999px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

html body.is-mobile .sidebar.auto-hide-sidebar :is(.custom-dropdown-container, .custom-dropdown-btn) {
    max-width: 100% !important;
    min-width: 0 !important;
}

html body.is-mobile .sidebar.auto-hide-sidebar .custom-dropdown-label {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.is-mobile .sidebar.auto-hide-sidebar .top-selectors-row .form-group:first-child :is(.custom-dropdown-container, .custom-dropdown-btn, .custom-dropdown-label) {
    max-width: min(31vw, 132px) !important;
}

html body.is-mobile .sidebar.auto-hide-sidebar .top-selectors-row .form-group:nth-child(2) :is(.custom-dropdown-container, .custom-dropdown-btn, .custom-dropdown-label) {
    max-width: min(22vw, 92px) !important;
}

html body.is-mobile .sidebar.auto-hide-sidebar .notes-form-group :is(.custom-dropdown-container, .custom-dropdown-btn, .custom-dropdown-label) {
    max-width: min(34vw, 132px) !important;
}

html body.is-mobile #app-view .sidebar.auto-hide-sidebar .selection-panel,
html body.is-mobile #app-view .sidebar.auto-hide-sidebar:is(.bottom-docked, .top-docked) .selection-panel {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 10px !important;
    width: calc(100% - (var(--study-phone-gutter) * 2)) !important;
    margin-left: var(--study-phone-gutter) !important;
    margin-right: var(--study-phone-gutter) !important;
}

html body.is-mobile #app-view .sidebar.auto-hide-sidebar .top-selectors-row,
html body.is-mobile #app-view .sidebar.auto-hide-sidebar:is(.bottom-docked, .top-docked) .top-selectors-row {
    display: flex !important;
    flex: initial !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    justify-self: start !important;
    width: auto !important;
    min-width: 0 !important;
    gap: 8px !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
}

html body.is-mobile #app-view .sidebar.auto-hide-sidebar .notes-form-group,
html body.is-mobile #app-view .sidebar.auto-hide-sidebar:is(.bottom-docked, .top-docked) .notes-form-group {
    flex: initial !important;
    justify-self: end !important;
    margin-left: 0 !important;
    max-width: min(34vw, 132px) !important;
    min-width: 0 !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
}

html body.is-mobile #app-view .sidebar.auto-hide-sidebar .version-selection-group,
html body.is-mobile #app-view .sidebar.auto-hide-sidebar:is(.bottom-docked, .top-docked) .version-selection-group {
    display: none !important;
}

html body.is-mobile #app-view .sidebar.auto-hide-sidebar:is(.bottom-docked, .top-docked) .top-selectors-row .form-group:first-child :is(.custom-dropdown-container, .custom-dropdown-btn, .custom-dropdown-label) {
    max-width: min(31vw, 132px) !important;
}

html body.is-mobile #app-view .sidebar.auto-hide-sidebar:is(.bottom-docked, .top-docked) .top-selectors-row .form-group:nth-child(2) :is(.custom-dropdown-container, .custom-dropdown-btn, .custom-dropdown-label) {
    max-width: min(22vw, 92px) !important;
}

html body.is-mobile #app-view .sidebar.auto-hide-sidebar:is(.bottom-docked, .top-docked) .notes-form-group :is(.custom-dropdown-container, .custom-dropdown-btn, .custom-dropdown-label) {
    max-width: min(34vw, 132px) !important;
}

html body.is-mobile .sidebar.auto-hide-sidebar.top-docked {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    z-index: 2300 !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
    padding-top: env(safe-area-inset-top, 0px) !important;
    box-sizing: border-box !important;
}

/* Light mode: warm paper bar so it reads as part of the page, not chrome. */
html.parchment-off:not(.dark-mode) body.is-mobile .sidebar.auto-hide-sidebar.top-docked {
    background: rgba(250, 248, 243, 0.70) !important;
    -webkit-backdrop-filter: saturate(1.6) blur(20px) !important;
    backdrop-filter: saturate(1.6) blur(20px) !important;
    border-bottom: 1px solid rgba(64, 54, 38, 0.10) !important;
    box-shadow: 0 6px 18px rgba(40, 33, 22, 0.06) !important;
}

html.parchment-off:not(.dark-mode) body.is-mobile .sidebar.auto-hide-sidebar.top-docked :is(.custom-dropdown-btn, select) {
    background: #FFFEFB !important;
    color: #16213F !important;
    border: 1px solid rgba(30, 45, 80, 0.14) !important;
    box-shadow: none !important;
}

/* Parchment mode: half-warm manuscript tone, softened toward Explore. */
html:not(.parchment-off):not(.dark-mode) body.is-mobile .sidebar.auto-hide-sidebar.top-docked {
    background: rgba(247, 244, 239, 0.78) !important;
    -webkit-backdrop-filter: saturate(1.32) blur(20px) !important;
    backdrop-filter: saturate(1.32) blur(20px) !important;
    border-bottom: 1px solid rgba(88, 76, 58, 0.12) !important;
    box-shadow: 0 6px 18px rgba(34, 42, 64, 0.07) !important;
}

html:not(.parchment-off):not(.dark-mode) body.is-mobile .sidebar.auto-hide-sidebar.top-docked :is(.custom-dropdown-btn, select) {
    background: rgba(253, 252, 249, 0.94) !important;
    color: #2F3137 !important;
    border: 1px solid rgba(88, 76, 58, 0.14) !important;
    box-shadow: none !important;
}

/* Dark mode: deep navy, softly elevated. */
html.dark-mode body.is-mobile .sidebar.auto-hide-sidebar.top-docked {
    background: rgba(8, 14, 28, 0.58) !important;
    -webkit-backdrop-filter: saturate(1.5) blur(20px) !important;
    backdrop-filter: saturate(1.5) blur(20px) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35) !important;
}

/* ---- 3. Study: reading tools live in the "More" drawer ----------------- */
/* study/index.html moves the appearance buttons and the U / M toggles into
   the drawer on phones (body.reader-tools-in-drawer); the version selector
   stays beside the chapter title. Drawer:
     [scroll] [◐] [☾]          [U] [M]
     [   A−   ]   [   A+   ]                                              */
html body.is-mobile.reader-tools-in-drawer .content-header-row h1 {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* Version selector beside the chapter title (moved out of the tools group by
   study/index.html), like the desktop header: title left, version right. */
html body.is-mobile.reader-tools-in-drawer #app-view .content-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: calc(100% - (var(--study-phone-gutter) * 2)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
}
html body.is-mobile.reader-tools-in-drawer #app-view .content-header-row h1 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
html body.is-mobile #app-view .content-header-row .header-version-slot {
    flex: 0 0 auto;
    min-width: 0;
    padding-top: 0 !important;
}
html body.is-mobile #app-view .content-header-row .header-version-slot .version-toggle-btn {
    height: var(--study-phone-control-height) !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 0.9rem !important;
    gap: 6px !important;
}

html body.is-mobile .drawer-reader-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

html body.is-mobile .drawer-reader-tools :is(.font-controls-inline, .reader-capsule-group) {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
}

html body.is-mobile .drawer-reader-tools :is(.reader-capsule-btn, .font-btn) {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 12px !important;
}

html body.is-mobile .hamburger-drawer-fonts {
    gap: 10px !important;
}

html body.is-mobile .hamburger-drawer-fonts .hamburger-font-btn {
    min-width: 0 !important;
    flex: 1 1 0 !important;
    min-height: 44px !important;
}

html body.is-mobile .hamburger-drawer-fonts .hamburger-font-divider {
    display: none !important;
}

html body.is-mobile #bottomHamburgerDrawer .hamburger-drawer-inner {
    padding: 14px 16px 14px !important;
    gap: 12px !important;
}

/* ---- 4. Study navigation (✦) lives in the phone bottom nav -------------- */
/* Desktop/tablet keep the floating button. Phones use the labeled Navigate
   tab in the bottom bar so Scripture never has an overlay parked on top. */
html body.is-mobile #easy-nav-toggle.floating-easy-nav-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

html body.is-mobile .bottom-nav.bottom-nav.bottom-nav.has-sequence .bottom-nav-item:not(.bn-seq),
html body.is-mobile .bottom-nav.bottom-nav.bottom-nav.has-sequence #languageSelectWrapperBottom {
    flex: 1 1 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: none !important;
}

html body.is-mobile .bottom-nav.bottom-nav.bottom-nav.has-sequence .bottom-nav-item span,
html body.is-mobile .bottom-nav.bottom-nav.bottom-nav.has-sequence #languageSelectWrapperBottom .custom-select-trigger span {
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

html body.is-mobile .bottom-nav.bottom-nav.bottom-nav .easy-nav-bottom-btn svg {
    fill: currentColor !important;
    stroke: none !important;
}

html body.is-mobile.easy-nav-active .bottom-nav.bottom-nav.bottom-nav .easy-nav-bottom-btn,
html body.is-mobile .bottom-nav.bottom-nav.bottom-nav .easy-nav-bottom-btn.active,
html body.is-mobile .bottom-nav.bottom-nav.bottom-nav .easy-nav-bottom-btn[aria-expanded="true"] {
    color: var(--kv-selected-text, #2563eb) !important;
}

/* ---- 4a. Premium mobile navigation typography -------------------------- */
/* Applies only to Study's phone controls and panels. Scripture text keeps
   its approved EB Garamond treatment. */
html body.is-mobile {
    --study-nav-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --study-nav-trigger-size: 14px;
    --study-nav-trigger-weight: 500;
    --study-nav-option-size: 14px;
    --study-nav-option-weight: 500;
    --study-nav-secondary-size: 12.5px;
    --study-nav-secondary-weight: 400;
    --study-nav-heading-size: 11px;
    --study-nav-heading-weight: 600;
    --study-nav-radius: 12px;
}

html body.is-mobile #app-view .sidebar.auto-hide-sidebar :is(.custom-dropdown-btn, .custom-dropdown-label),
html body.is-mobile #app-view .content-header-row .header-version-slot .version-toggle-btn {
    font-family: var(--study-nav-font) !important;
    font-size: var(--study-nav-trigger-size) !important;
    font-weight: var(--study-nav-trigger-weight) !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
}

html body.is-mobile #app-view .sidebar.auto-hide-sidebar :is(.custom-dropdown-btn, .version-toggle-btn),
html body.is-mobile #app-view .content-header-row .header-version-slot .version-toggle-btn {
    border-width: 1px !important;
    border-radius: 999px !important;
    box-shadow: none !important;
}

html body.is-mobile #app-view .sidebar.auto-hide-sidebar .custom-dropdown-arrow,
html body.is-mobile #app-view .content-header-row .header-version-slot .version-toggle-btn svg {
    opacity: 0.72 !important;
    stroke-width: 2 !important;
}

html body.is-mobile .kvb-nav-heading,
html body.is-mobile .kvb-version-panel .kvb-version-heading {
    font-family: var(--study-nav-font) !important;
    font-size: var(--study-nav-heading-size) !important;
    font-weight: var(--study-nav-heading-weight) !important;
    line-height: 1.3 !important;
    letter-spacing: 0.1em !important;
}

html body.is-mobile .kvb-nav-heading-count {
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
}

html body.is-mobile .kvb-nav-panel .custom-dropdown-item.kvb-nav-item {
    font-family: var(--study-nav-font) !important;
    font-size: var(--study-nav-option-size) !important;
    font-weight: var(--study-nav-option-weight) !important;
    line-height: 1.28 !important;
    border-radius: var(--study-nav-radius) !important;
}

html body.is-mobile .kvb-nav-panel .custom-dropdown-item.kvb-nav-item.selected {
    font-weight: var(--study-nav-option-weight) !important;
    box-shadow: inset 0 0 0 1px var(--kv-gold-muted) !important;
}

html body.is-mobile .kvb-nav-panel .custom-dropdown-item.kvb-nav-item--num {
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: 10px !important;
}

html body.is-mobile .kvb-nav-panel .custom-dropdown-item.kvb-nav-item--intro {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.09em !important;
}

html body.is-mobile #app-view .sidebar.auto-hide-sidebar .custom-dropdown-menu .custom-dropdown-item:not(.kvb-nav-item) {
    font-family: var(--study-nav-font) !important;
    font-size: var(--study-nav-option-size) !important;
    font-weight: var(--study-nav-option-weight) !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    border-radius: var(--study-nav-radius) !important;
}

html body.is-mobile #app-view .sidebar.auto-hide-sidebar .custom-dropdown-menu .custom-dropdown-item.selected:not(.kvb-nav-item) {
    font-weight: var(--study-nav-option-weight) !important;
    box-shadow: inset 0 0 0 1px var(--kv-gold-muted) !important;
}

html body.is-mobile .version-dropdown-menu.kvb-version-panel:not(.hidden) {
    padding: 12px 6px 8px !important;
    border-radius: 14px !important;
}

html body.is-mobile .kvb-version-panel .kvb-version-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 6px !important;
    row-gap: 4px !important;
}

html body.is-mobile .kvb-version-panel .version-option.kvb-version-item,
html body.is-mobile .kvb-version-panel .version-option.kvb-version-foot-btn {
    min-height: 50px !important;
    padding: 8px 9px !important;
    border-radius: var(--study-nav-radius) !important;
    font-family: var(--study-nav-font) !important;
    font-size: var(--study-nav-option-size) !important;
    font-weight: var(--study-nav-option-weight) !important;
    line-height: 1.25 !important;
    box-shadow: none !important;
}

html body.is-mobile .kvb-version-panel .version-option.selected {
    font-weight: var(--study-nav-option-weight) !important;
    box-shadow: inset 0 0 0 1px var(--kv-gold-muted) !important;
}

html body.is-mobile .kvb-version-panel .kvb-version-code {
    font-size: var(--study-nav-option-size) !important;
    font-weight: var(--study-nav-option-weight) !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
}

html body.is-mobile .kvb-version-panel .kvb-version-name {
    font-size: var(--study-nav-secondary-size) !important;
    font-weight: var(--study-nav-secondary-weight) !important;
    line-height: 1.25 !important;
}

html body.is-mobile .kvb-version-panel .version-option.disabled {
    opacity: 0.54 !important;
}

html body.is-mobile .kvb-version-panel .selection-badge {
    font-size: 11px !important;
    font-weight: 500 !important;
}

html body.is-mobile .hamburger-font-btn,
html body.is-mobile .hfb-a-small,
html body.is-mobile .hfb-a-large {
    font-family: var(--study-nav-font) !important;
    font-weight: 500 !important;
}

html body.is-mobile .hfb-a-large {
    font-size: 19px !important;
}

html body.is-mobile .hfb-a-small {
    font-size: 13px !important;
}

@media (max-width: 340px) {
    html body.is-mobile .kvb-version-panel .kvb-version-list {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body.is-mobile #easy-nav-toggle.floating-easy-nav-btn {
        transition: none !important;
    }
}

/* ---- 5. Drawers never peek out when the bottom nav slides away --------- */
/* Closed drawers used to rest behind the nav; with the nav hidden they would
   show their top edge. Closed now also means invisible (after the slide). */
html body.is-mobile .hamburger-drawer:not(.open) {
    visibility: hidden;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.28s;
}

html body.is-mobile .hamburger-drawer.open {
    visibility: visible;
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s;
}

/* ---- 6. Full-screen reading: the document scrolls on phones ------------ */
/* iOS Safari and Android Chrome only collapse their toolbars (address bar /
   bottom bar) when the document itself scrolls. Study and Daily scrolled an
   inner container (#app-view) inside a locked page, so the browser chrome
   never collapsed. On phones the page now scrolls as a whole; the inner
   containers simply grow with their content. Fixed and docked bars, the
   auto-hiding bottom nav and the safe areas all follow the dynamic viewport. */
@media (max-width: 768px) {
    html {
        height: auto !important;
        min-height: 100% !important;
        overflow: visible !important;
    }
}

html body.is-mobile {
    height: auto !important;
    min-height: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

html body.is-mobile > .container,
html body.is-mobile #app-view {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* The nav overlays the page; the reading content already ends with its own
   bottom padding, so the container no longer reserves a strip for the nav
   (that strip stayed empty while the nav was hidden). */
html body.is-mobile > .container {
    padding-bottom: 0 !important;
}

/* ---- 7. One sequential navigation system on phones -------------------- */
/* The bottom bar's ‹ › (same canonical targets) replace the large in-content
   "← Genesis Introduction · Genesis 2 →" pager on phones. Tablet and desktop
   keep it. */
html body.is-mobile .chapter-nav-bottom.floating-glass {
    display: none !important;
}

/* ---- 8. Phone masthead: premium editorial proportions (Study + Daily) --- */
/* Logo stays the crest; the title, tagline and ornament step back so the
   banner reads as a compact masthead rather than a splash screen. The hero
   is navy in every reading mode, so colours are shared: warm-white title,
   restrained gold tagline and rules. Two ids beat the page-level inline
   masthead overrides. */
html body.is-mobile header#main-header.study-header:not(#_) {
    padding-top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
    padding-bottom: 14px !important;
}

html body.is-mobile header#main-header.study-header:not(#_) .dove-icon {
    width: 58px !important;
    height: 58px !important;
    margin: 0 auto 6px !important;
}

html body.is-mobile header#main-header.study-header:not(#_) .header-text-group {
    gap: 0 !important;
}

html body.is-mobile header#main-header.study-header:not(#_) .main-title {
    margin: 0 !important;
    font-size: clamp(1.6rem, 7.2vw, 1.95rem) !important;
    font-weight: 700 !important;
    line-height: 1.06 !important;
    letter-spacing: -0.02em !important;
    color: #F3EEE4 !important;
    -webkit-text-fill-color: #F3EEE4 !important;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.25) !important;
    white-space: nowrap !important;
}

/* Daily keeps its editorial serif, sized to sit beside the Study title. */
html:has(#devotion-view) body.is-mobile header#main-header.study-header:not(#_) .main-title {
    font-family: "Cormorant Garamond", "Playfair Display", Georgia, serif !important;
    font-weight: 500 !important;
    font-size: clamp(1.75rem, 7.8vw, 2.1rem) !important;
    letter-spacing: -0.005em !important;
    line-height: 1.08 !important;
    font-synthesis: none;
}

html body.is-mobile header#main-header.study-header:not(#_) .header-subtitle {
    margin: 6px 0 0 !important;
    font-size: clamp(0.62rem, 2.75vw, 0.72rem) !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    letter-spacing: 0.16em !important;
    color: rgba(209, 172, 96, 0.88) !important;
    -webkit-text-fill-color: currentColor !important;
    white-space: nowrap !important;
}

@media (max-width: 374px) {
    html body.is-mobile header#main-header.study-header:not(#_) .header-subtitle {
        letter-spacing: 0.12em !important;
    }
}

/* Ornament: a short, quiet rule with a small star. */
html body.is-mobile header#main-header.study-header:not(#_) .header-divider {
    width: min(62%, 240px) !important;
    max-width: 240px !important;
    margin: 10px auto 0 !important;
    padding: 0 !important;
    gap: 3px !important;
    opacity: 0.75;
}

html body.is-mobile header#main-header.study-header:not(#_) .header-divider .divider-line {
    width: 100% !important;
    max-width: 100% !important;
    height: 1px !important;
    margin: 0 !important;
}

html body.is-mobile header#main-header.study-header:not(#_) .header-divider svg {
    width: 9px !important;
    height: 9px !important;
    margin: 0 auto !important;
}