/* Shared action size; mobile override lives with the responsive layout. */
body { --action-control-size: 32px; }
/* Locked presentation contract: docs/shared-presentation-contract.md.
   Edit these component rules in place; do not append competing overrides.
   Content and selections belong to SQLite, not this stylesheet. */

/* Standard reading scale. Explicit view allowlist leaves Bhavachitralu untouched.
   Body 18–20px, compact metadata 16px, controls 17px; headings retain hierarchy. */
:is(#homeView, #platesView, #journeyView, #libraryView, #volumesView, #studioView, #audiosView, #explanationsView, #ragasView, #insightsView, #collectionsView, #groupsView, #bookmarksView, #aboutView, #alamelumangaView, #alamelumangaSatakamView, #annamayyaLectureView, #tallapakaServiceView, #peopleView, #biographyView, #researchView, #readerContent) {
  --reading-body: clamp(18px, 1.15vw, 20px);
  --reading-title: clamp(28px, 2.3vw, 38px);
  font-family: 'Annamayya Tiro', serif;
}
:is(#homeView, #platesView, #journeyView, #libraryView, #volumesView, #studioView, #audiosView, #explanationsView, #ragasView, #insightsView, #collectionsView, #groupsView, #bookmarksView, #aboutView, #alamelumangaView, #alamelumangaSatakamView, #annamayyaLectureView, #tallapakaServiceView, #peopleView, #biographyView, #researchView, #readerContent) :is(p, li, dd, blockquote, label, input, select, textarea, button, h1, h2, h3, h4, small) {
  font-family: 'Annamayya Tiro', serif;
}
:is(#homeView, #platesView, #journeyView, #libraryView, #volumesView, #studioView, #audiosView, #explanationsView, #ragasView, #insightsView, #collectionsView, #groupsView, #bookmarksView, #aboutView, #alamelumangaView, #alamelumangaSatakamView, #annamayyaLectureView, #tallapakaServiceView, #peopleView, #biographyView, #researchView, #readerContent) :is(p, li, dd, blockquote) { font-size: var(--reading-body); line-height: 1.85; }
:is(#homeView, #platesView, #journeyView, #libraryView, #volumesView, #studioView, #audiosView, #explanationsView, #ragasView, #insightsView, #collectionsView, #groupsView, #bookmarksView, #aboutView, #alamelumangaView, #alamelumangaSatakamView, #annamayyaLectureView, #tallapakaServiceView, #peopleView, #biographyView, #researchView, #readerContent) :is(input, select, textarea, button, label) { font-size: 17px; line-height: 1.65; }
:is(#homeView, #platesView, #journeyView, #libraryView, #volumesView, #studioView, #audiosView, #explanationsView, #ragasView, #insightsView, #collectionsView, #groupsView, #bookmarksView, #aboutView, #alamelumangaView, #alamelumangaSatakamView, #annamayyaLectureView, #tallapakaServiceView, #peopleView, #biographyView, #researchView, #readerContent) label { font-weight: 700; }
:is(#homeView, #platesView, #journeyView, #libraryView, #volumesView, #studioView, #audiosView, #explanationsView, #ragasView, #insightsView, #collectionsView, #groupsView, #bookmarksView, #aboutView, #alamelumangaView, #alamelumangaSatakamView, #annamayyaLectureView, #tallapakaServiceView, #peopleView, #biographyView, #researchView, #readerContent) :is(.page-intro h2, .about-hero h2, .research-hero h2) { font-size: var(--reading-title); line-height: 1.55; }
:is(#homeView, #platesView, #journeyView, #libraryView, #volumesView, #studioView, #audiosView, #explanationsView, #ragasView, #insightsView, #collectionsView, #groupsView, #bookmarksView, #aboutView, #alamelumangaView, #alamelumangaSatakamView, #annamayyaLectureView, #tallapakaServiceView, #peopleView, #biographyView, #researchView, #readerContent) :is(h3, h4) { font-size: clamp(21px, 1.5vw, 26px); line-height: 1.6; }
:is(#homeView, #platesView, #journeyView, #libraryView, #volumesView, #studioView, #audiosView, #explanationsView, #ragasView, #insightsView, #collectionsView, #groupsView, #bookmarksView, #aboutView, #alamelumangaView, #alamelumangaSatakamView, #annamayyaLectureView, #tallapakaServiceView, #peopleView, #biographyView, #researchView, #readerContent) :is(small, .song-title p, .song-meta, .keertana-meta, .results-meta p) { font-size: 16px; line-height: 1.7; }
:is(#homeView, #platesView, #journeyView, #libraryView, #volumesView, #studioView, #audiosView, #explanationsView, #ragasView, #insightsView, #collectionsView, #groupsView, #bookmarksView, #aboutView, #alamelumangaView, #alamelumangaSatakamView, #annamayyaLectureView, #tallapakaServiceView, #peopleView, #biographyView, #researchView, #readerContent) .song-title h3 { font-size: 20px; line-height: 1.65; }
:is(#homeView, #platesView, #journeyView, #libraryView, #volumesView, #studioView, #audiosView, #explanationsView, #ragasView, #insightsView, #collectionsView, #groupsView, #bookmarksView, #aboutView, #alamelumangaView, #alamelumangaSatakamView, #annamayyaLectureView, #tallapakaServiceView, #peopleView, #biographyView, #researchView, #readerContent) :is(p, h2, h3, h4, label) { overflow-wrap: anywhere; }

/* Legacy theme uses important sizes for these labels; keep them readable. */
:is(#homeView, #platesView, #journeyView, #libraryView, #volumesView, #studioView, #audiosView, #explanationsView, #ragasView, #insightsView, #collectionsView, #groupsView, #bookmarksView, #aboutView, #alamelumangaView, #alamelumangaSatakamView, #annamayyaLectureView, #tallapakaServiceView, #peopleView, #biographyView, #researchView, #readerContent) :is(.eyebrow, .section-kicker, .keertana-meta, .home-service-heading) { font-size: 16px !important; line-height: 1.8; }
:is(#homeView, #platesView, #journeyView, #libraryView, #volumesView, #studioView, #audiosView, #explanationsView, #ragasView, #insightsView, #collectionsView, #groupsView, #bookmarksView, #aboutView, #alamelumangaView, #alamelumangaSatakamView, #annamayyaLectureView, #tallapakaServiceView, #peopleView, #biographyView, #researchView, #readerContent) .song-title p { font-size: 16px !important; }
:is(#homeView, #platesView, #journeyView, #libraryView, #volumesView, #studioView, #audiosView, #explanationsView, #ragasView, #insightsView, #collectionsView, #groupsView, #bookmarksView, #aboutView, #alamelumangaView, #alamelumangaSatakamView, #annamayyaLectureView, #tallapakaServiceView, #peopleView, #biographyView, #researchView, #readerContent) .index-toolbar { flex-wrap: wrap; }
:is(#homeView, #platesView, #journeyView, #libraryView, #volumesView, #studioView, #audiosView, #explanationsView, #ragasView, #insightsView, #collectionsView, #groupsView, #bookmarksView, #aboutView, #alamelumangaView, #alamelumangaSatakamView, #annamayyaLectureView, #tallapakaServiceView, #peopleView, #biographyView, #researchView, #readerContent) .library-search { min-width: 0; max-width: 100%; }
:is(#homeView, #platesView, #journeyView, #libraryView, #volumesView, #studioView, #audiosView, #explanationsView, #ragasView, #insightsView, #collectionsView, #groupsView, #bookmarksView, #aboutView, #alamelumangaView, #alamelumangaSatakamView, #annamayyaLectureView, #tallapakaServiceView, #peopleView, #biographyView, #researchView, #readerContent) .library-search input { min-width: 0; width: 100%; }
:is(#homeView, #platesView, #journeyView, #libraryView, #volumesView, #studioView, #audiosView, #explanationsView, #ragasView, #insightsView, #collectionsView, #groupsView, #bookmarksView, #aboutView, #alamelumangaView, #alamelumangaSatakamView, #annamayyaLectureView, #tallapakaServiceView, #peopleView, #biographyView, #researchView, #readerContent) .pagination { flex-wrap: wrap; }
#insightsView .volume-chart { overflow-x: auto; max-width: 100%; }

/* Compact brand has its own row; only navigation and footer scroll. */
#sidebar { overflow: hidden; padding: 12px; }
#sidebar > .brand { position: relative; top: auto; flex: 0 0 54px; min-height: 54px; margin: 0 0 10px; padding: 0 0 10px; border: 0; border-bottom: 1px solid #d6b56a55; border-radius: 0; background: transparent; box-shadow: none; transform: none; }
#sidebar .brand-mark, #sidebar .brand p, #sidebar .brand small { display: none !important; }
#sidebar .brand h1 { margin: 0; color: #ecd298; font: 400 clamp(17px, 1.55vw, 22px)/1.6 'Annamayya Tiro', serif; white-space: nowrap; }
#sidebar .sidebar-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b6995b66 transparent; padding: 0 3px 12px; }
#sidebar .mobile-nav-close { position: absolute; z-index: 20; top: 14px; right: 14px; margin: 0; }
@media (max-width: 900px) {
  #sidebar > .brand { padding-right: 52px; }
  #sidebar.open .mobile-nav-close { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid #d6b56a80; border-radius: 50%; background: #f8e8c5; color: #183f3d; font: 30px/1 sans-serif; }
  #sidebar .brand h1 { font-size: 19px; }
}

/* Sidebar footer stays available at every viewport height, below the links.
   !important overrides the inherited phone rule that hides both elements. */
#sidebar .sidebar-saint { display: grid !important; flex: 0 0 180px; height: 180px; margin: 20px 0 12px; }
#sidebar .sidebar-saint img { height: 180px; max-height: 100%; object-fit: contain; }
#sidebar .side-verse { display: block !important; flex: 0 0 auto; margin: 8px 5px 20px; }
#sidebar .side-verse p { font-size: 14px; line-height: 1.9; }
#sidebar .side-verse p span { white-space: normal; }

/* Shared title cards. Bhavachitralu is excluded by home-presentation.js.
   !important reserves icon space against the inherited V1 padding rules. */
.with-lord-icon { position: relative; padding-right: 210px !important; min-height: 250px; }
.with-lord-icon > .page-title-lord { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); width: 170px; height: 210px; object-fit: contain; pointer-events: none; }
.page-intro.illustrated-page-intro.with-lord-icon { padding-left: 215px; }
.page-intro.illustrated-page-intro.with-lord-icon::after { left: 25px; width: 165px; height: 205px; }
.page-intro.illustrated-page-intro.with-lord-icon::before { left: 195px; }
.with-lord-icon .about-monogram.annamacharya-portrait { width: 185px; height: 220px; flex-basis: 185px; }

/* Mungili: heading row, full-width subtitle, three-column artwork row. */
#homeView, #homeView * { font-family: 'Annamayya Tiro', serif; }
#pallaviRibbonEdit:not(.admin-visible), #pallaviRibbonEdit[hidden] { display: none !important; }
#homeView .hero { display: grid; grid-template-columns: minmax(150px, .65fr) minmax(0, 2fr) minmax(150px, .65fr); gap: 8px 10px; align-items: center; padding: 20px !important; min-height: 0; }
#homeView .hero-date { position: relative; inset: auto; grid-column: 1 / 3; grid-row: 1; justify-self: start; align-self: start; margin: 0; white-space: nowrap; max-width: 100%; line-height: 1.8; font-size: 16px; font-weight: 400; letter-spacing: normal; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; backdrop-filter: none; color: #edc875; }
#homeView .hero-copy { width: auto; max-width: none; grid-column: 1 / -1; grid-row: 2; text-align: center; z-index: 3; }
#homeView .hero h2 { font-size: clamp(26px, 2.2vw, 36px); margin: 0; line-height: 1.55; }
#homeView .hero h2 > span, #homeView .hero h2 > em { display: inline; white-space: normal; margin-left: 0; }
#homeView .hero h2 > em { margin-left: 10px; }
#homeView .hero-sub { margin: 0; font-size: 16px; line-height: 1.8; max-width: none; }
#homeView .hero > .hero-sub { grid-column: 1 / -1; grid-row: 3; text-align: center; position: relative; z-index: 3; width: 100%; white-space: nowrap; font-size: clamp(12px, 1.12vw, 18px); }
#homeView .home-service-heading { grid-column: 3; grid-row: 1; align-self: start; text-align: right; position: relative; z-index: 3; margin: 0; font-size: 16px; font-weight: 400; line-height: 1.8; letter-spacing: normal; color: #edc875; }
#homeView .home-singing-annamayya { position: relative; grid-column: 1; grid-row: 4; width: 100%; height: 210px; object-fit: contain; z-index: 2; justify-self: start; }
#homeView .hero-manuscript { display: block; position: relative; inset: auto; grid-column: 2; grid-row: 4; margin: 0; width: 100%; max-width: none; }
#homeView .hero-manuscript img { max-height: none; object-fit: contain; }
#homeView .hero-manuscript figcaption { flex-wrap: wrap; gap: 6px; font-size: 12px; }
#homeView .hero-manuscript figcaption b { font-size: 18px; }
#homeView .hero > .page-title-lord { position: relative; inset: auto; transform: none; grid-column: 3; grid-row: 4; width: 100%; height: 210px; justify-self: end; }

#homeView .hero-date::before, #homeView .hero-date::after { content: none; }

/* Prayer artwork and SQLite-rendered prayer text share one responsive layout. */
#homeView .vandana-reading { display: grid; grid-template-columns: clamp(190px, 20vw, 270px) minmax(0, 1fr); gap: 12px 20px; align-items: center; }
#homeView .guru-prayer-art { grid-column: 1; grid-row: 1 / 3; display: block; width: 100%; height: 100%; min-height: 0; contain: size; align-self: stretch; object-fit: contain; background: #052f21; border-radius: 12px; }
#homeView .vandana-reading > .engraved-sloka { grid-column: 2; grid-row: 1; }
#homeView .vandana-reading > .engraved-sloka::before, #homeView .vandana-reading > .engraved-sloka::after { content: none; }
#homeView .vandana-reading > .sloka-bhavamu { grid-column: 2; grid-row: 2; }

/* Srimannarayana follows the prayer: artwork left, verses and meaning right. */
#homeView .home-keertana { display: grid; grid-template-columns: minmax(200px, .85fr) minmax(0, 1.15fr); gap: 12px 24px; max-width: none; align-items: center; }
#homeView .home-keertana > .section-kicker { grid-column: 1 / -1; grid-row: 1; margin: 0; }
#homeView .home-keertana > h3 { grid-column: 1 / -1; grid-row: 2; margin: 0; font-size: clamp(30px, 2.5vw, 40px); }
#homeView .home-keertana > .keertana-meta { grid-column: 1 / -1; grid-row: 3; margin: 0 0 12px; }
#homeView .home-keertana > .sacred-feet { grid-column: 1; grid-row: 4; width: 100% !important; max-width: none !important; height: auto; min-height: 0; margin: 0; position: relative; align-self: start; aspect-ratio: auto; }
#homeView .sacred-feet img { display: block; position: static; transform: none; width: 100%; height: auto; max-width: none; max-height: none; object-fit: contain; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 100%); }
#homeView .keertana-line { display: block; text-wrap: balance; overflow-wrap: normal; word-break: normal; }
#homeView .home-keertana > .keertana-verses { grid-column: 2; grid-row: 4; min-width: 0; gap: 18px; padding: 20px; border: 1px solid #c7a66b; border-radius: 14px; background: linear-gradient(145deg, #153f3c, #21534d); }
#homeView .home-keertana .keertana-stanza { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#homeView .home-keertana .keertana-stanza p { color: #fff1d3; font: 400 clamp(20px, 1.2vw, 24px)/1.85 'Annamayya Tiro', serif; }
#homeView .home-keertana > .keertana-meaning { grid-column: 1 / -1; grid-row: 5; margin: 0; border: 1px solid #d5b372; border-radius: 14px; background: rgba(255,255,255,.64); }
#homeView .home-keertana .keertana-meaning p { max-width: none; font: 400 clamp(18px, 1vw, 22px)/1.85 'Annamayya Tiro', serif; }

/* Daily features share row heights, metadata chips and the existing cream palette. */
/* Shortcut cards keep a readable text column instead of squeezing four tiles. */
#homeView .home-portals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#homeView .home-portals button { grid-template-columns: 56px minmax(0, 1fr) 18px; gap: 12px; padding: 16px; }
#homeView .home-portals i { width: 56px; height: 56px; }
#homeView .home-portals b { font-size: 20px; line-height: 1.6; overflow-wrap: normal; }
#homeView .home-portals small { font-size: 16px; overflow-wrap: normal; }

.home-feature-grid { display: grid; gap: 24px; align-items: start; margin: 24px 0; }
.home-feature-grid.has-bhava-feature { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: stretch; }
.home-feature-grid > section { min-width: 0; }
.home-feature-grid.has-bhava-feature > section { display: grid; grid-template-rows: subgrid; grid-row: span 2; gap: 0; }
#homeView .home-feature-grid .section-heading, .home-bhava-feature > h3 { align-self: end; margin: 0 0 20px; }
.home-bhava-feature > h3 { font-size: 24px; }
#homeView .home-feature-grid .daily-card { grid-template-columns: 4px minmax(0, 1fr); min-height: 0; }
#homeView .home-feature-grid .daily-card { height: 100%; margin: 0; }
.home-bhava-card { height: auto; margin: 0; }
#homeView .home-feature-grid .daily-emblem, #homeView .home-feature-grid .daily-action { display: none; }
#homeView .home-feature-grid .daily-body { padding: 18px; }
#homeView .daily-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
#homeView .daily-card-tools { display: flex; flex: 0 0 auto; gap: 8px; margin: 16px 0 0; padding-top: 12px; border-top: 1px solid #e5d9c5; justify-content: flex-end; }
#homeView .daily-card-tools button { display: grid; place-items: center; width: var(--action-control-size); height: var(--action-control-size); padding: 0; border: 1px solid #c7a66b66; border-radius: 8px; background: transparent; color: #174a45; font: 18px/1 'Annamayya Tiro', serif; cursor: pointer; }
#homeView .daily-card-tools button.active { background: #174a45; color: #f3d28d; }
#homeView .daily-card-tools button:focus-visible { outline: 3px solid #b8843c; outline-offset: 3px; }

.home-bhava-card { align-self: start; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #d8c5a6; border-left: 4px solid #b8843c; border-radius: 22px; background: linear-gradient(115deg,#fffdf8,#f5ebd9); color: var(--ink); text-decoration: none; box-shadow: var(--v4-shadow); }
.home-bhava-preview { display: grid; gap: 14px; padding: 0 18px 18px; }
.home-bhava-preview img { display: block; width: 100%; height: auto; border-radius: 8px; }
.home-bhava-link { display: flex; flex-direction: column; flex: none; min-height: 0; color: inherit; text-decoration: none; }
#homeView .home-bhava-card > .daily-card-tools { margin: 0 18px 18px; }
.home-bhava-heading { padding: 18px; flex: none; }
.home-bhava-heading .song-meta { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid #e5d9c5; margin: 0; }
.home-bhava-card .home-bhava-heading h4 { margin: 12px 0 0; font-size: 22px; line-height: 1.6; }

/* One randomly selected explained keertana, loaded from the public catalogue. */
#homeView .home-explained-feature { margin: 28px 0; padding-top: 24px; border-top: 1px solid #d8c5a6; }
#homeView .home-explained-feature[hidden] { display: none; }
#homeView .home-explained-feature > .song-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
#homeView .home-explained-feature .section-heading { gap: 12px; }
#homeView .home-explained-feature .section-heading > div { min-width: 0; }
#homeView .home-explanation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
#homeView .home-explanation-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid #d8c5a6; border-radius: 16px; background: #fffaf0; padding: 20px; }
#homeView .home-explanation-card > h4 { margin: 0 0 16px; padding-bottom: 12px; border-bottom: 1px solid #d8c5a6; }
#homeView .home-explanation-scroll { flex: 1; max-height: 36rem; overflow-y: auto; overscroll-behavior: auto; scrollbar-gutter: stable; padding: 10px 8px 10px 0; scroll-padding-block: 10px; }
#homeView .home-explanation-scroll p { margin: 0 0 12px; }
/* Definitions must wrap as prose, never as two competing flex columns. */
:is(#homeView .home-explanation-scroll, #readerContent .managed-note-body) .note-glossary { display: block; margin: 12px 0; padding: 12px; }
:is(#homeView .home-explanation-scroll, #readerContent .managed-note-body) .note-glossary-item { display: block; margin: 0 0 12px; max-width: 100%; text-align: start; font-size: var(--reading-body); line-height: 1.85; }
:is(#homeView .home-explanation-scroll, #readerContent .managed-note-body) .note-glossary-item:last-child { margin-bottom: 0; }
:is(#homeView .home-explanation-scroll, #readerContent .managed-note-body) .note-glossary-item :is(strong, span) { display: inline; white-space: normal; overflow-wrap: anywhere; }
:is(#homeView .home-explanation-scroll, #readerContent .managed-note-body) .note-glossary-item strong::after { content: ' '; }
:is(#homeView .home-explanation-scroll, #readerContent .managed-note-body) :is(.note-highlight, .note-explanation, blockquote) { display: block; min-width: 0; max-width: 100%; text-align: start; font-size: var(--reading-body); line-height: 1.85; overflow-wrap: anywhere; }
:is(#homeView .home-explanation-scroll, #readerContent .managed-note-body) .note-highlight > strong { white-space: normal; }

#homeView .home-explanation-scroll:focus-visible { outline: 2px solid #b8843c; outline-offset: 4px; }
#homeView .home-explanation-source { font-size: 16px; }

/* One mobile breakpoint; preserve readable wrapping and stack the daily cards. */
@media (max-width: 650px) {
  body { --action-control-size: 44px; }
  #homeView .home-portals { grid-template-columns: minmax(0, 1fr); }
  #readerContent .lyric-manuscript .verse-lines { font-size: 18px !important; }
  /* One scrolling surface on phones: long home content expands into the page. */
  #homeView .home-explanation-scroll { max-height: none; overflow: visible; scrollbar-gutter: auto; padding-right: 0; }

  #homeView .home-explanation-grid { grid-template-columns: minmax(0, 1fr); }
  #homeView .vandana-reading { grid-template-columns: minmax(0, 1fr); }
  #homeView .home-keertana { grid-template-columns: minmax(0, 1fr); }
  #homeView .home-keertana .keertana-stanza p { font-size: 18px !important; }
  #homeView .home-keertana .keertana-meaning p { font-size: 18px !important; }
  #homeView .home-keertana > .section-kicker, #homeView .home-keertana > h3, #homeView .home-keertana > .keertana-meta { grid-column: 1; }
  #homeView .home-keertana > .sacred-feet { grid-column: 1; grid-row: 4; width: min(100%, 260px) !important; max-width: 100% !important; height: auto; justify-self: center; }
  #homeView .home-keertana > .keertana-verses { grid-column: 1; grid-row: 5; }
  #homeView .home-keertana > .keertana-meaning { grid-column: 1; grid-row: 6; }

  #homeView .guru-prayer-art { grid-column: 1; grid-row: 1; width: 180px; height: 270px; contain: none; justify-self: center; }
  #homeView .vandana-reading > .engraved-sloka { grid-column: 1; grid-row: 2; }
  #homeView .vandana-reading > .sloka-bhavamu { grid-column: 1; grid-row: 3; }

  /* Keep spotlight artwork in document flow; text grows to its natural height. */
  #homeView .home-legacy-spotlight { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; min-height: 0; padding: 20px; }
  #homeView .home-legacy-spotlight > .spotlight-mark { position: static; transform: none; width: 64px; height: 64px; grid-column: 1 / -1; justify-self: start; }
  #homeView .home-legacy-spotlight > div { grid-column: 1 / -1; max-width: 100%; }
  #homeView .home-legacy-spotlight > button { position: static; margin: 0; justify-self: start; }
  #homeView .home-legacy-spotlight > em { position: static; align-self: end; }
  .with-lord-icon { padding-right: 110px !important; min-height: 195px; }
  .with-lord-icon > .page-title-lord { right: 8px; width: 94px; height: 160px; }
  .page-intro.illustrated-page-intro.with-lord-icon { padding-left: 108px; }
  .page-intro.illustrated-page-intro.with-lord-icon::after { left: 8px; width: 92px; height: 150px; }
  .page-intro.illustrated-page-intro.with-lord-icon::before { left: 100px; }
  .with-lord-icon .about-monogram.annamacharya-portrait { width: 120px; height: 155px; flex-basis: 120px; }
  #homeView .hero { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  #homeView .hero-date { grid-column: 1 / -1; font-size: 14px; padding: 0; overflow: visible; justify-self: center; }
  #homeView .home-service-heading { grid-column: 1 / -1; grid-row: 3; text-align: center; margin: 0; }
  #homeView .hero-copy { grid-column: 1 / -1; grid-row: 2; }
  #homeView .hero h2 { font-size: 28px; }
  #homeView .hero-sub { font-size: 15px; }
  #homeView .hero > .hero-sub { grid-row: 4; white-space: normal; font-size: 18px; }
  #homeView .home-singing-annamayya { grid-row: 5; height: 150px; max-width: 100%; }
  #homeView .hero > .page-title-lord { grid-column: 2; grid-row: 5; height: 150px; max-width: 100%; }
  #homeView .hero-manuscript { grid-column: 1 / -1; grid-row: 6; }
  .home-feature-grid.has-bhava-feature { grid-template-columns: minmax(0,1fr); }
  .home-feature-grid.has-bhava-feature > section { display: block; grid-row: auto; }
  #homeView .home-feature-grid .daily-card, .home-bhava-card { height: auto; }

}

/* Shared action control scale: compact desktop glyphs, comfortable phone targets. */
body button.standard-icon-action { box-sizing: border-box; flex: 0 0 var(--action-control-size); width: var(--action-control-size); height: var(--action-control-size); min-width: var(--action-control-size); min-height: var(--action-control-size); padding: 0; border: 1px solid #c7a66b66; border-radius: 8px; background: transparent; color: #174a45; font-size: 18px; line-height: 1; }
body .reader-action-dock button > i { font-size: 18px; width: 22px; height: 22px; }
body .reader-action-dock button > i > svg { width: 18px; height: 18px; }

#shared-action-tooltip { position: fixed; z-index: 100000; max-width: min(280px, calc(100vw - 16px)); padding: 10px 14px; border: 0; border-radius: 12px; background: #173f3c; color: #f5dfb5; box-shadow: 0 3px 12px #0003; font: 600 14px/1.4 system-ui, sans-serif; text-align: center; pointer-events: none; }
#shared-action-tooltip[hidden] { display: none; }

/* Shared lyric layout: compact section label above full-width verse text. */
#readerContent .lyric-manuscript .lyric-card { display: block; padding: 14px 16px; }
#readerContent .verse-label { margin: 0 0 8px; }
#readerContent .verse-label span { font: 400 16px/1.65 'Annamayya Tiro', serif; padding: 2px 8px; }
#readerContent .lyric-manuscript .verse-lines { width: 100%; min-width: 0; font: 400 19px/1.85 'Annamayya Tiro', serif; }
#homeView .daily-lyrics p { display: block; }
#homeView .daily-lyrics b { display: block; margin-bottom: 6px; font-size: 16px; }
#homeView .daily-lyrics span { display: block; font-size: 18px; line-height: 1.85; }
#readerContent .managed-note-body { min-width: 0; max-width: 100%; }
#readerContent .managed-note-body :is(p, li, blockquote, .note-explanation) { font-size: 18px; line-height: 1.85; overflow-wrap: anywhere; }
#reader #readerClose { display: flex !important; align-items: center; justify-content: center; position: absolute; z-index: 20; top: 16px; left: 12px; right: auto; bottom: auto; width:44px; min-width:44px; height:44px; margin:0; padding: 0; border: 1px solid #c7a66b66; border-radius: 8px; background: transparent; color: #f3d28d; font: 18px/1 system-ui, sans-serif; cursor: pointer; }
#reader .reader-head { padding:16px 20px 14px 68px; }
#reader .reader-title-line { min-height:44px; margin:0; align-items:center; }
#reader .reader-title-line h2 { font-size:clamp(20px,2vw,28px); line-height:1.6; margin:0; min-width:0; }

#readerContent .reader-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; white-space: normal; }
#readerContent .reader-meta > span { white-space: nowrap; font-size: 13px; }
#readerContent .reader-meta > i { display: none; }
/* Phone reader header: one title line and one metadata line under the back button's
   row; the metadata row folds away while reading so lyrics keep the screen. */
@media (max-width: 600px) {
  #reader #readerClose { top: 6px; left: 8px; }
  #reader .reader-head { min-height: 0; padding: 6px 12px 6px 60px; transition: padding .2s ease; }
  #reader .reader-title-line { min-height: 44px; grid-template-columns: minmax(0, 1fr); }
  #reader .reader-title-line > span { display: none; }
  #reader .reader-title-line h2 { font-size: 19px; line-height: 1.45; }
  #readerContent .reader-meta { width: calc(100% + 48px); margin: 0 0 0 -48px; gap: 2px 8px; overflow: hidden; max-height: 60px; transition: max-height .2s ease, opacity .2s ease, margin .2s ease; }
  #readerContent .reader-meta > span { font-size: 12px; }
  #readerContent .reader-head.is-condensed .reader-meta { max-height: 0; opacity: 0; margin-top: 0; }
}
@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
  #reader .reader-head, #readerContent .reader-meta { transition: none; }
}

/* Home preview headings are two lines, never full lyric blocks. */
#homeView .home-pallavi-preview { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; white-space: pre-line; font-size: 22px; line-height: 1.6; margin-bottom: 14px; }

/* Audio library: shared typography and existing recording player template. */
.audio-library-filters { display:flex; flex-wrap:wrap; align-items:end; gap:16px; margin-block:24px; }
.audio-library-filters label { display:grid; gap:6px; flex:1 1 220px; min-width:0; }
.audio-library-filters input, .audio-library-filters select { width:100%; min-width:0; padding:12px; font:inherit; border:1px solid #d9c49d; border-radius:10px; background:#fffaf0; color:#194b48; }
.audio-library-song { border:1px solid #d9c49d; border-radius:12px; padding:12px; margin-block:10px; background:#fffaf0; min-width:0; }
.audio-song-heading { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.audio-song-heading > div { min-width:0; flex:1; }
#audiosView .audio-song-heading h3 { margin:2px 0; font-size:20px; line-height:1.6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.audio-song-heading button { flex:none; width:52px; height:44px; display:grid; place-items:center; }
.audio-song-heading button svg { width:25px; height:25px; pointer-events:none; }
.audio-library-song .voice-version.archive-version { border:0; border-top:1px solid #e0d2bd; border-radius:0; background:transparent; padding:8px 0; }
.audio-library-song button, .audio-library-filters button { font:inherit; padding:8px 12px; min-height:44px; border:1px solid #d9c49d; border-radius:8px; background:transparent; color:#194b48; }

/* The single shared tooltip replaces inherited dock bubbles and native titles. */
.reader-action-dock button::before, .reader-action-dock button::after { content:none !important; display:none !important; }

/* Compact audio heading keeps filters close to the title. */
#audiosView .page-intro { min-height:120px; padding:16px 108px 16px 94px !important; margin-bottom:16px; }
#audiosView .page-intro::after { left:18px; width:54px; height:54px; font-size:26px; }
#audiosView .page-intro::before { left:80px; top:16px; bottom:16px; }
#audiosView .page-intro h2 { margin:0; font-size:clamp(23px,2.3vw,32px); }
#audiosView .page-intro .eyebrow { margin:0; }
#audiosView .page-title-lord { right:14px; width:78px; height:100px; }
@media(max-width:650px) {
 #audiosView .page-intro { min-height:104px; padding:12px 76px 12px 16px !important; }
 #audiosView .page-intro::before, #audiosView .page-intro::after { display:none; }
 #audiosView .page-title-lord { right:8px; width:60px; height:84px; }
}

/* Persistent audio transport; stays above the lyrics dialog. */

/* Shared devotional player: existing artwork and responsive listening view. */
#musicPlayer { position:fixed; inset:auto 12px 12px calc(var(--music-content-left,0px) + 12px); z-index:20000; display:grid; grid-template-columns:86px minmax(0,1fr) auto 86px; grid-template-areas:"saint title controls lord" "saint timeline timeline lord" "queue queue queue queue"; gap:8px 16px; padding:16px 22px; border:3px double #e0bd72; border-radius:20px; background:radial-gradient(ellipse at top,#255e54,#103e3b 75%); color:#fff6df; box-shadow:0 8px 40px #072d3655,inset 0 0 0 4px #123f3a,inset 0 0 0 5px #d9bb7766; font:14px/1.5 system-ui,sans-serif; max-height:85dvh; overflow:auto; }
#musicPlayer[hidden] { display:none; }
.music-art { margin:0; align-self:center; }
.music-art img { display:block; width:100%; height:120px; object-fit:contain; }
.music-annamayya { grid-area:saint; }
.music-lord { grid-area:lord; }
.music-lord img { border-radius:0; transform:scale(1.12); filter:drop-shadow(0 0 10px #e7bb4926); }
.music-description { grid-area:title; min-width:0; align-self:center; }
.music-eyebrow { display:block; color:#dec087; font-size:12px; letter-spacing:1px; margin-bottom:5px; }
.music-description b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:18px; }
.music-description small { color:#dfd6bd; }
.music-buttons { grid-area:controls; display:flex; align-items:center; gap:6px; }
#musicPlayer button { width:38px; min-height:44px; border:1px solid #d5b46b66; border-radius:50%; background:transparent; color:#fff8e8; cursor:pointer; flex-shrink:0; }
#musicPlayer .music-buttons button { display:grid; place-items:center; color:#e8cc91; box-shadow:inset 0 0 0 3px #dfbd7510; }
#musicPlayer .music-buttons svg { width:25px; height:25px; display:block; pointer-events:none; }
#musicPlayer #musicToggle svg { width:28px; height:28px; }
#musicPlayer button:hover { background:#ffffff15; }
#musicPlayer button:focus-visible,#musicPlayer input:focus-visible,#musicPlayer summary:focus-visible { outline:2px solid #ffe2a4; outline-offset:3px; }
#musicPlayer #musicToggle { width:54px; height:54px; background:#e3c281; color:#163f38; box-shadow:0 0 0 4px #e3c28120; font-size:22px; }
#musicPlayer button[aria-pressed="true"] { background:#bd9548; color:#153f3d; }
#musicPlayer button:disabled { opacity:.4; }
.music-timeline { grid-area:timeline; display:flex; gap:10px; align-items:center; font-variant-numeric:tabular-nums; }
#musicSeek { flex:1; min-width:0; accent-color:#d9b76e; }
.music-volume { display:flex; align-items:center; gap:8px; font-size:12px; }
#musicVolume { width:75px; accent-color:#d9b76e; }
/* Devotional range handles remain native keyboard-operable inputs. */
#musicSeek, #musicVolume { appearance:none; -webkit-appearance:none; height:44px; background:transparent; cursor:pointer; }
#musicSeek { --music-handle:url("/assets/devotional-icons/chakra-v2.png"); }
#musicVolume { --music-handle:url("/assets/devotional-icons/shankha-v2.png"); }
#musicPlayer input[type="range"]::-webkit-slider-runnable-track { height:6px; background:#d8c18b; border:1px solid #f9e3b477; border-radius:8px; }
#musicPlayer input[type="range"]::-moz-range-track { height:6px; background:#d8c18b; border:1px solid #f9e3b477; border-radius:8px; }
#musicPlayer input[type="range"]::-webkit-slider-thumb { appearance:none; -webkit-appearance:none; width:34px; height:34px; margin-top:-15px; border:0; background:var(--music-handle) center/contain no-repeat; filter:drop-shadow(0 1px 2px #071f1c); }
#musicPlayer input[type="range"]::-moz-range-thumb { width:34px; height:34px; border:0; border-radius:0; background:var(--music-handle) center/contain no-repeat; filter:drop-shadow(0 1px 2px #071f1c); }
@media(forced-colors:active) {
 #musicPlayer input[type="range"] { appearance:auto; -webkit-appearance:auto; }
 #musicPlayer input[type="range"]::-webkit-slider-thumb { appearance:auto; -webkit-appearance:auto; background:ButtonText; width:20px; height:20px; margin-top:-8px; filter:none; }
 #musicPlayer input[type="range"]::-moz-range-thumb { background:ButtonText; width:20px; height:20px; filter:none; }
}

#musicPlayer details { grid-area:queue; border-top:1px solid #d5b46b33; padding-top:6px; min-width:0; }
#musicPlayer summary { cursor:pointer; color:#ead2a2; min-height:32px; }
#musicQueueSearch { width:100%; margin:8px 0; background:#ffffff0c; border:1px solid #c3aa7177; border-radius:8px; padding:10px; color:#fff6df; font:inherit; box-sizing:border-box; }
#musicQueueSearch::placeholder { color:#c5cfc5; }
#musicQueue { max-height:200px; overflow:auto; display:grid; grid-auto-rows:max-content; align-content:start; gap:5px; }
#musicQueue button { height:auto; box-sizing:border-box; font:inherit; width:100%; text-align:left; padding:10px 14px; border-radius:10px; min-width:0; overflow-wrap:anywhere; }
#musicQueue button[aria-current="true"] { border-left:4px solid #e5c783; background:#e5c78318; }
.music-queue-title { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; font-size:16px; line-height:1.8; }
#musicQueue small { display:block; color:#d2ceb9; font-size:12px; }
#musicPlayer.is-expanded { width:min(1120px,calc(100% - var(--music-content-left,0px) - 24px)); margin:auto; padding:26px; box-sizing:border-box; grid-template-columns:clamp(100px,17vw,190px) minmax(0,1fr) clamp(100px,17vw,190px); grid-template-areas:"saint title lord" "saint controls lord" "timeline timeline timeline" "reading reading reading" "queue queue queue"; max-height:calc(100dvh - 24px); overflow:auto; }
.is-expanded .music-art img { height:120px; }
.is-expanded .music-description { text-align:center; }
.is-expanded .music-description b { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; white-space:normal; line-height:1.7; font-size:23px; }
.is-expanded .music-buttons { justify-content:center; }
#musicPlayer #musicMinimize { display:grid; }
 #musicPlayer.is-minimized { width:auto; margin:0; padding:8px 10px; gap:0; grid-template-columns:minmax(0,1fr); grid-template-areas:"controls"; }
 #musicPlayer.is-minimized .music-art,#musicPlayer.is-minimized .music-description,#musicPlayer.is-minimized .music-timeline,#musicPlayer.is-minimized details,#musicPlayer.is-minimized #musicExpand { display:none; }
 #musicPlayer.is-minimized .music-buttons { justify-content:center; }
 #musicPlayer.is-minimized #musicToggle { width:44px; height:44px; }
body.music-player-open { padding-bottom:calc(var(--music-dock-height,180px) + 24px); }
body.music-player-open .reader { position:fixed; left:var(--music-dock-center,50%); width:min(820px,var(--music-dock-width,96vw)); top:12px; bottom:calc(var(--music-dock-height,180px) + 24px); height:auto; max-height:calc(100dvh - var(--music-dock-height,180px) - 36px); transform:translateX(-50%); }
@media(min-width:651px) and (max-width:1250px) {
 #musicPlayer { grid-template-columns:70px minmax(0,1fr) 70px; grid-template-areas:"saint title lord" "saint controls lord" "timeline timeline timeline" "queue queue queue"; }
 #musicPlayer .music-buttons { justify-content:center; }
}
@media(max-width:650px) {
 #musicPlayer { inset:auto 6px 6px; padding:12px; gap:8px; border-radius:15px; grid-template-columns:32px minmax(0,1fr) 32px; grid-template-areas:"saint title lord" "controls controls controls" "timeline timeline timeline" "queue queue queue"; }
 #musicPlayer .music-lord { display:block; }
 #musicPlayer .music-art img { height:42px; max-width:32px; object-fit:contain; }
 .music-eyebrow { font-size:10px; margin:0; }
 .music-description b { font-size:16px; }
 .music-description small { display:block; white-space:normal; overflow-wrap:break-word; }
 .music-buttons { justify-content:space-between; gap:2px; flex-wrap:nowrap; width:100%; max-width:400px; margin:auto; }
 #musicPlayer .music-buttons button { min-height:44px; width:0; min-width:0; padding:0; border-radius:9px; flex:1 1 0; }
 #musicPlayer #musicToggle { width:0; height:44px; flex:1 1 0; border-radius:50%; }

 .music-volume { display:none; }
 #musicPlayer.is-expanded { inset:auto 6px 6px; width:calc(100% - 12px); height:88dvh; max-height:calc(100dvh - 12px); padding:10px; gap:6px; overflow:hidden; grid-template-columns:32px minmax(0,1fr) 32px; grid-template-rows:auto auto 38px minmax(0,1fr) auto; grid-template-areas:"saint title lord" "controls controls controls" "timeline timeline timeline" "reading reading reading" "queue queue queue"; }
 #musicPlayer.is-expanded .music-lord { display:block; }
 #musicPlayer.is-expanded .music-art img { height:42px; max-width:32px; object-fit:contain; }
 #musicPlayer.is-expanded .music-annamayya img { transform:none; }
 #musicPlayer.is-expanded .music-eyebrow { display:none; }
 #musicPlayer .music-description b { display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:unset; line-clamp:unset; font-size:16px; line-height:1.5; }
 #musicPlayer.is-expanded .music-description { min-width:0; text-align:left; }
 #musicPlayer.is-expanded .music-description small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:11px; }
 #musicPlayer.is-expanded .music-timeline { font-size:12px; gap:6px; }

}

/* Shared list-only pallavi preview; canonical reader lyrics stay untouched. */
.pallavi-preview { display:-webkit-box!important; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden!important; white-space:normal!important; overflow-wrap:anywhere; }

.music-reading { display:none; }
#musicPlayer.is-expanded .music-reading { display:grid; grid-area:reading; grid-template-columns:minmax(0,1fr); gap:20px; max-height:42dvh; overflow:auto; padding:16px; border:1px solid #c3aa7177; border-radius:12px; background:#ffffff08; color:#fff6df; text-align:left; }
.music-reading section { min-width:0; }
.music-reading h3,.music-reading h4 { margin:0 0 10px; color:#ead2a2; font-size:17px; font-weight:600; }
.music-reading p,.music-reading article { margin:0 0 12px; }
.music-reading .music-lyrics-text { white-space:normal; }
.music-reading .music-stanza + .music-stanza { margin-top:20px; padding-top:14px; border-top:1px solid #c3aa7138; }
#musicPlayer .music-reading .music-stanza h4 { margin:0 0 6px; font-size:14px; font-weight:600; color:#ead2a2; }
.music-reading .music-verse-line { margin:0; padding:0; white-space:normal; word-break:normal; overflow-wrap:break-word; line-height:1.85; }
.music-reading { font-family:inherit; font-size:16px; line-height:1.8; overflow-wrap:anywhere; }
#musicPlayer .music-reading :is(section,article,div,p,li,blockquote,h3,h4,small,strong,em) { font-family:inherit; }
#musicPlayer .music-reading :is(p,li,blockquote,.note-highlight,.note-explanation) { font-size:inherit; color:inherit; }
#musicPlayer .music-reading :is(.note-highlight,.note-explanation,.note-glossary,blockquote) { background:#ffffff08; border-color:#c3aa7177; }
#musicPlayer .music-reading small { color:#d2ceb9; }
#musicPlayer .music-reading .note-glossary { display:block; }
#musicPlayer .music-reading .note-glossary-item { display:block; margin-bottom:8px; }
#musicPlayer .music-reading .note-glossary-item :is(strong,span) { display:inline; white-space:normal; }
#musicPlayer .music-reading .note-highlight { display:block; }
@media(max-width:650px) {
 #musicPlayer.is-minimized { padding:8px 10px; }
 #musicPlayer.is-minimized .music-buttons { width:100%; gap:2px; }
 #musicPlayer.is-minimized .music-buttons button { flex:1 1 0; width:0; min-width:0; min-height:44px; }

}
@media(max-width:650px){#musicPlayer.is-expanded .music-reading{grid-template-columns:minmax(0,1fr);font-size:16px;min-height:0;max-height:none;padding:10px;gap:14px;}}

/* Queue browsing gets the available viewport, without competing lyric scrolling. */
#musicPlayer.is-queue-open { display:flex; flex-direction:column; height:calc(100dvh - 24px); max-height:calc(100dvh - 24px); box-sizing:border-box; overflow:hidden; padding:12px 16px; gap:6px; }
#musicPlayer.is-queue-open .music-art,#musicPlayer.is-queue-open .music-eyebrow,#musicPlayer.is-queue-open .music-reading { display:none; }
#musicPlayer.is-queue-open .music-description { width:100%; text-align:left; flex:none; }
#musicPlayer.is-queue-open .music-description b { font-size:16px; white-space:nowrap; line-height:1.6; }
#musicPlayer.is-queue-open .music-description small { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
#musicPlayer.is-queue-open .music-buttons { justify-content:center; flex:none; }
#musicPlayer.is-queue-open .music-timeline { flex:none; }
#musicPlayer.is-queue-open > details { flex:1; min-height:0; display:flex; flex-direction:column; }
#musicPlayer.is-queue-open > details::details-content { display:contents; }
#musicPlayer.is-queue-open summary,#musicPlayer.is-queue-open #musicQueueSearch { flex:none; }
#musicPlayer.is-queue-open #musicQueue { flex:1; min-height:0; max-height:none; overflow:auto; align-content:start; overscroll-behavior:contain; }

/* Purpose and content-use page: shared default typography and devotional palette. */
#purposeView { max-width:1120px; margin:0 auto; color:#254c44; font:400 19px/1.9 'Annamayya Tiro',serif; }
#purposeView h1,#purposeView h2 { font-family:'Annamayya Tiro',serif; font-weight:400; }
#purposeView p { margin:12px 0; }
#purposeView [lang="en"] { font-family:system-ui,sans-serif; font-size:15px; line-height:1.8; }
#purposeView [lang="en"] h2 { font-family:inherit; font-size:22px; }
.purpose-hero { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:clamp(24px,4vw,48px); border:1px solid #bd9553; border-radius:22px; background:radial-gradient(ellipse at top right,#32665a,#103e3b 75%); color:#fff1d3; }
.purpose-hero h1 { font-size:clamp(32px,4vw,48px); margin:8px 0; color:#f2d397; }
.purpose-hero .purpose-eyebrow { color:#dfbd77; font-size:16px; letter-spacing:.04em; }
.purpose-hero .purpose-subtitle { font-size:clamp(20px,2vw,25px); }
.purpose-hero img { width:160px; height:210px; object-fit:contain; flex-shrink:0; }
.purpose-intro { padding:24px clamp(4px,2vw,24px); }
.purpose-intro>div { margin-top:24px; padding-top:20px; border-top:1px solid #dcc9a6; }
.purpose-pillars { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.purpose-pillars article { padding:24px; border:1px solid #dfcda9; border-radius:16px; background:#fffaf0; }
.purpose-pillars article>span { color:#9a7137; font:500 14px system-ui,sans-serif; }
.purpose-pillars h2 { font-size:22px; margin:12px 0; }
.purpose-gratitude { margin:26px 0; padding:24px; border-left:3px solid #b58c48; background:#f1ebdc; border-radius:0 14px 14px 0; }
.purpose-gratitude h2 { font-size:23px; margin:0 0 12px; }
.knowledge-sharing-notice { padding:clamp(20px,3vw,32px); border:1px solid #d4bd91; border-radius:18px; background:#f8f1e3; overflow-wrap:anywhere; }
.knowledge-sharing-notice h2 { margin:0 0 12px; font-size:25px; }
.knowledge-sharing-notice summary { padding:10px 0; cursor:pointer; min-height:44px; }
.knowledge-sharing-notice summary:focus-visible { outline:2px solid #174a45; outline-offset:4px; }
.knowledge-sharing-notice details>div { padding-top:12px; }
.knowledge-sharing-notice details>div+div { margin-top:20px; border-top:1px solid #d4bd91; }
@media(max-width:650px) {
  .purpose-hero { flex-direction:column-reverse; gap:8px; text-align:center; }
  .purpose-hero img { width:110px; height:140px; }
  .purpose-pillars { grid-template-columns:1fr; }
}