/* Family Book — consistent main-tab page headers.
   Calendar is the visual reference for Members and Family Tree.
   Memories keeps its approved sizing, but shares the same colour hierarchy. */

/* Shared eyebrow treatment */
.calendar-title-row .eyebrow,
.members-head .eyebrow,
.tree-head .eyebrow{
  margin:0 0 4px!important;
  color:#997354!important;
  font-size:.68rem!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
}

/* Shared main title treatment */
.calendar-title-row h1,
.members-head h1,
.tree-head h1{
  margin:0!important;
  color:#315c43!important;
  font-size:clamp(2.2rem,4vw,3.6rem)!important;
  line-height:1.05!important;
  font-weight:800!important;
  letter-spacing:-.02em!important;
}

/* Shared supporting-copy treatment */
.calendar-title-row p:last-child,
.members-head>div>p:last-child,
.tree-head>div>p:last-child{
  margin:7px 0 0!important;
  max-width:720px!important;
  color:#756c63!important;
  font-size:.92rem!important;
  line-height:1.5!important;
  font-weight:400!important;
}

/* Memories: preserve its existing approved sizing; align colours only.
   Target the real page wrapper directly so this works before/after polish classes mount. */
.memories-page .memories-head .eyebrow,
.memories-polished .memories-head .eyebrow{
  color:#997354!important;
}
.memories-page .memories-head h1,
.memories-polished .memories-head h1{
  color:#315c43!important;
}
.memories-page .memories-head p,
.memories-polished .memories-head p{
  color:#756c63!important;
}

/* Match Calendar's dark-theme title colour exactly. */
html[data-theme="dark"] .calendar-title-row h1,
html[data-theme="dark"] .members-head h1,
html[data-theme="dark"] .tree-head h1,
html[data-theme="dark"] .memories-page .memories-head h1,
html[data-theme="dark"] .memories-polished .memories-head h1{
  color:#a7cbb0!important;
}

/* Keep Calendar/Members/Tree descriptions warm and muted. */
html[data-theme="dark"] .calendar-title-row p:last-child,
html[data-theme="dark"] .members-head>div>p:last-child,
html[data-theme="dark"] .tree-head>div>p:last-child{
  color:#8f796b!important;
}

/* Memories dark-mode colours matched to the Calendar screenshot, without changing scale. */
html[data-theme="dark"] .memories-page .memories-head .eyebrow,
html[data-theme="dark"] .memories-polished .memories-head .eyebrow{
  color:#d7b48d!important;
}
html[data-theme="dark"] .memories-page .memories-head p,
html[data-theme="dark"] .memories-polished .memories-head p{
  color:#ab8f7c!important;
}

@media(max-width:620px){
  .calendar-title-row h1,
  .members-head h1,
  .tree-head h1{
    font-size:2rem!important;
    line-height:1.08!important;
  }

  .calendar-title-row p:last-child,
  .members-head>div>p:last-child,
  .tree-head>div>p:last-child{
    font-size:.74rem!important;
    line-height:1.4!important;
  }
}