/* Hagiazo's editorial theme. Layout and interaction primitives live in styles.css. */
:root {
  --paper: #f7f5f1;
  --ink: #292623;
  --muted: #746e66;
  --line: #e4dfd7;
  --green: #292623;
  --lime: #e6d7bd;
  --bronze: #8c6942;
}
body { -webkit-font-smoothing: antialiased; }
button, a { -webkit-tap-highlight-color: transparent; }
button { transition: background-color .18s, border-color .18s, color .18s, box-shadow .18s; }
.sidebar { background: #efede7; padding-top: 32px; }
.brand { font-family: var(--serif); font-size: 39px; font-weight: 400; letter-spacing: -1.8px; }
.brand-icon { color: var(--bronze); font-size: 31px; margin-right: 3px; }
.brand-dot { color: var(--bronze); }
.brand-caption { color: #71695f; font-size: 7px; letter-spacing: 1.4px; line-height: 1.9; margin-top: 8px; margin-bottom: 36px; }
.nav-item { color: #6d665e; border-radius: 5px; padding-top: 14px; padding-bottom: 14px; }
.nav-item.active { background: #292623; color: #fffaf2; font-weight: 500; box-shadow: 0 4px 10px #29262308; }
.nav-item:not(.active):hover { background: #e5e0d7; color: var(--ink); }
.nav-item i { background: #b29770; }
.nav-item svg { width: 19px; height: 19px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-note { border-top: 1px solid var(--line); padding-top: 24px; }
.sidebar-note .small-label { font-size: 8px; color: var(--bronze); }
.sidebar-note p { font-size: 26px; line-height: 1.3; color: #655b50; margin: 16px 0; }
.sidebar-note .text-button { color: #665b4e; font-size: 10px; }
.profile { border-color: #dcd5ca; }
.avatar, .sage, .rose { background: #e9e2d7; color: #796448; }
.topbar { height: 80px; background: #fcfbf8; padding-left: 48px; padding-right: 48px; }
#breadcrumb { color: #787168; font-size: 11px; letter-spacing: .3px; }
.demo-pill { border: 1px solid var(--line); border-radius: 3px; padding: 5px 8px; color: #81776c; font-size: 7px; }
.button { border-radius: 4px; padding: 12px 20px; font-weight: 500; letter-spacing: .2px; box-shadow: 0 2px 3px #29262308; }
.button:hover { filter: none; background: #494035; border-color: #494035; }
.button.light { background: transparent; border-color: #d9d0c3; color: #574a39; box-shadow: none; }
.button.light:hover { background: #f0ebe3; }
.button.small { padding: 9px 14px; }
.text-button:hover { color: var(--bronze); }
main { max-width: 1450px; padding: 40px 48px 60px; }
.eyebrow { color: var(--bronze); font-size: 8px; letter-spacing: 2.5px; font-weight: 500; }
h1 { font-size: clamp(42px, 4.2vw, 62px); letter-spacing: -1.5px; margin-top: 11px; margin-bottom: 13px; }
h2 { font-size: 31px; letter-spacing: -.4px; }
.intro { font-size: 12px; line-height: 1.8; margin-bottom: 32px; }
.hero {
  background: #292623;
  background-image: radial-gradient(ellipse at 90% 20%, #6f5d4540, transparent 60%);
  color: #f8f3e9;
  border-radius: 7px;
  padding: 39px 42px;
  min-height: 310px;
  margin-bottom: 37px;
}
.hero .small-label { color: #d6bf9e; font-size: 8px; letter-spacing: 2.3px; font-weight: 400; }
.hero h2 { font-size: clamp(37px, 3.3vw, 49px); line-height: 1.08; margin: 17px 0; max-width: 500px; }
.hero p { color: #c8bfb3; font-size: 11px; line-height: 1.8; margin-bottom: 24px; }
.hero .button { background: #e9dcc5; border-color: #e9dcc5; color: #312a21; padding: 12px 18px; font-size: 11px; }
.hero .button:hover { background: #fbefda; border-color: #fbefda; }
.hero-art { width: 35%; height: 290px; right: 35px; bottom: 0; opacity: 1; }
.hero-art .arch {
  inset: 8px 10% -12px;
  border: 1px solid #b8a07d66;
  border-bottom: 0;
  border-radius: 170px 170px 0 0;
  background: linear-gradient(110deg, #9c805a12, #b5986b28 50%, #28252200);
  overflow: visible;
}
.hero-art .arch::before, .hero-art .arch::after {
  content: '';
  position: absolute;
  inset: 14px;
  bottom: 0;
  border: 1px solid #b8a07d38;
  border-bottom: 0;
  border-radius: inherit;
}
.hero-art .arch::after { inset: 28px; bottom: 0; border-color: #b8a07d22; }
.hero-art .sun { width: 68px; height: 68px; top: 75px; left: calc(50% - 34px); background: linear-gradient(135deg, #e0c89f, #a58b63); box-shadow: 0 0 65px #c5a47618; }
.hero-art .hill, .hero-art svg { display: none; }
.hero-art::after { content: 'GATHER  /  GROW  /  BELONG'; position: absolute; bottom: 28px; width: 100%; text-align: center; color: #bda582; font-size: 6px; letter-spacing: 2.4px; }
.section-head { margin-bottom: 20px; }
.section-head p { font-size: 11px; margin-top: 7px; }
.section-head .text-button { color: #82694a; font-weight: 500; font-size: 10px; }
.live-grid { gap: 20px; margin-bottom: 40px; }
.live-card { border-radius: 6px; background: #fffefa; border-color: #e2dcd3; transition: box-shadow .2s, border-color .2s; }
.live-card:hover { border-color: #c7baa8; box-shadow: 0 8px 24px #49372109; }
.live-cover { height: 155px; background: linear-gradient(125deg, #665a4b, #3f3933); }
.live-cover::before { width: 150px; height: 230px; border: 1px solid #ddd0b933; background: transparent; border-radius: 100px 100px 0 0; left: auto; right: -15px; bottom: -70px; transform: rotate(25deg); }
.live-cover::after { width: 120px; height: 215px; border: 1px solid #ddd0b922; background: transparent; border-radius: 100px 100px 0 0; left: auto; right: 0; bottom: -70px; transform: rotate(25deg); }
.cover-1 { background: linear-gradient(125deg, #a68e73, #79644f); }
.cover-2 { background: linear-gradient(125deg, #575b5b, #333738); }
.cover-word { font-size: 29px; color: #fff9ef; text-shadow: none; padding: 20px; text-align: center; line-height: 1.1; }
.badge, .badge.live { top: 12px; left: 13px; font-size: 7px; letter-spacing: 1.1px; border-radius: 2px; background: #ffffff12; border: 1px solid #ffffff3d; color: #fff9ed; font-weight: 400; }
.cover-play { width: 25px; height: 25px; font-size: 11px; line-height: 23px; border-color: #ffffff44; }
.live-body { padding: 19px; }
.live-body h3 { font-size: 13px; font-weight: 500; margin: 8px 0 12px; }
.meta { font-size: 8px; letter-spacing: .2px; color: #7b7064; }
.host-line { color: #756b60; }
.host-line .avatar { background: #eee7dc; }
.card-bottom { margin-top: 18px; border-top: 1px solid #ece7de; padding-top: 14px; flex-wrap: wrap; }
.card-bottom .meta { font-size: 8px; }
.card-bottom .button { font-size: 10px; padding: 7px 11px; }
.columns { gap: 30px; }
.tabs { border-bottom: 1px solid var(--line); gap: 18px; margin: 4px 0 22px; }
.tab { padding: 10px 0 12px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: #7b746b; font-size: 10px; }
.tab.active { background: transparent; color: #3d3327; border-bottom-color: #98764d; font-weight: 600; }
.tab:hover { color: #32291f; }
.post { padding: 25px; border-radius: 6px; background: #fffefa; margin-bottom: 18px; }
.post h3 { font-family: var(--serif); font-size: 25px; font-weight: 400; margin-top: 19px; line-height: 1.2; }
.post p { color: #756d63; font-size: 12px; line-height: 1.9; }
.post-top strong { font-weight: 500; }
.post-type { background: #f1ece4; color: #826a4c; font-size: 8px; border-radius: 2px; padding: 3px 8px; }
.verse { border-color: #bca37e; background: #f7f3ec; padding: 13px 16px; color: #65533d; }
.verse small { color: #8a765b; }
.post-actions { border-color: #eee9e1; padding-top: 15px; }
.post-actions button { color: #7b6c58; }
.post-actions button:hover, .post-actions button[aria-pressed='true'] { color: #34291c; }
.daily { background: #eee7dc; border: 1px solid #e4d8c7; border-radius: 6px; padding: 28px; }
.daily .small-label { color: #826744; font-size: 8px; font-weight: 500; }
.daily .verse { color: #4b3f2f; font-size: 30px; line-height: 1.2; padding-top: 25px; }
.daily .verse small { font-size: 8px; letter-spacing: 1.2px; margin-top: 20px; }
.daily p { color: #7d705e; font-size: 11px; line-height: 1.8; margin-top: 23px; }
.daily .text-button { color: #6b5337; font-weight: 500; font-size: 10px; }
.side-content > section + section h2 { font-size: 25px; }
.group-icon { background: #eae3d7; color: #8d7352; border-radius: 5px; }
.group-mini { padding: 17px 0; }
.group-mini strong { font-weight: 500; }
.welcome-note strong { color: #776246; font-weight: 500; }
.group-card { background: #fffefa; border-radius: 6px; padding: 30px; }
.group-card p { line-height: 1.9; }
.empty { border-color: #d4c6b4; border-radius: 6px; }
footer { padding-left: 48px; padding-right: 48px; font-size: 9px; color: #877d71; }
footer .text-button { font-size: 9px; font-weight: 500; }
dialog { background: #fffefa; border-radius: 8px; padding: 30px; border-color: #ddd2c1; box-shadow: 0 24px 100px #25201b33; }
dialog::backdrop { background: #211c176b; }
dialog .small-label { color: var(--bronze); }
dialog p, dialog li { color: #756b5e; line-height: 1.8; }
input, textarea, select { border-color: #ded4c6; background: #fcfaf6; border-radius: 4px; accent-color: #8c6942; }
.notice, .discussion-reply { background: #f2ece3; border-color: #bda17b; border-radius: 4px; }
.preview-stage { background: #292623; color: #e9d8bc; border-radius: 4px; }
#toast { background: #292623; color: #fff8ed; border-radius: 5px; }
@media (max-width: 1150px) {
  main { padding: 32px 30px 45px; }
  .topbar { padding: 0 30px; }
  .hero { padding: 34px; }
  .hero-art { right: 12px; }
  .live-grid { gap: 14px; }
  .live-body { padding: 14px; }
  .live-cover { height: 145px; }
  .cover-word { font-size: 26px; }
  .columns { gap: 22px; }
  .tabs { gap: 13px; }
}
@media (max-width: 850px) {
  .brand { font-size: 0; }
  .brand-icon { margin: 0; font-size: 31px; }
  .hero-art { width: 35%; }
  .hero-copy { width: 67%; }
  h1 { font-size: 48px; }
  .side-content { gap: 22px; }
  .card-bottom { align-items: flex-start; }
}
@media (max-width: 580px) {
  .sidebar { background: #f5f1e9; padding: 0 0 env(safe-area-inset-bottom); height: calc(65px + env(safe-area-inset-bottom)); }
  .workspace { padding-bottom: calc(65px + env(safe-area-inset-bottom)); }
  .nav-item { padding: 13px 0; }
  .topbar { height: 67px; padding: 0 18px; }
  #breadcrumb { font-size: 9px; }
  .topbar .button.small { padding: 9px 10px; font-size: 10px; }
  .topbar .text-button { font-size: 10px; }
  main { padding: 28px 20px 35px; }
  h1 { font-size: 42px; letter-spacing: -1px; }
  .intro { font-size: 11px; margin-bottom: 25px; }
  .hero { min-height: 315px; padding: 28px; margin-bottom: 30px; }
  .hero-copy { width: 100%; }
  .hero .small-label { font-size: 7px; letter-spacing: 1.3px; }
  .hero h2 { font-size: 37px; }
  .hero p { max-width: 230px; }
  .hero-art { right: -68px; width: 55%; height: 240px; opacity: .3; }
  .hero-art::after { display: none; }
  .live-grid { gap: 14px; margin-bottom: 32px; }
  .live-card { grid-template-columns: 105px minmax(0, 1fr); }
  .live-cover { height: 100%; min-height: 190px; }
  .cover-word { font-size: 23px; padding: 12px; }
  .badge, .badge.live { left: 8px; right: 8px; font-size: 6px; padding: 4px; text-align: center; }
  .live-body { padding: 15px; }
  .live-body h3 { font-size: 12px; }
  .card-bottom { gap: 8px; margin-top: 12px; padding-top: 10px; }
  .card-bottom .meta { width: 100%; }
  .tabs { gap: 15px; }
  .tab { font-size: 9px; }
  .post { padding: 21px; }
  .post h3 { font-size: 25px; }
  .post-actions { gap: 12px; }
  .post-actions button { font-size: 9px; }
  .daily { padding: 28px; }
  .group-card { padding: 26px; }
  footer { padding: 20px; }
  #toast { bottom: calc(80px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* Featured encouragement film */
.install-strip { display: flex; align-items: center; gap: 13px; margin: 22px 48px 0; padding: 14px 18px; border: 1px solid var(--line); background: #fffefa; border-radius: 6px; }
.install-strip[hidden], .connection-status[hidden] { display: none; }
.install-strip img, .install-help img { border-radius: 9px; }
.install-strip strong { display: block; font-size: 11px; font-weight: 500; }
.install-strip span { display: block; font-size: 10px; color: var(--muted); }
.install-strip button { margin-left: auto; flex-shrink: 0; min-height: 44px; }
.install-help h2 { margin-top: 18px; }
.install-help h3 { font-size: 13px; margin: 20px 0 5px; }
.connection-status { padding: 10px 24px; background: #e9dcc5; color: #4c3d29; font-size: 11px; text-align: center; }
@media(max-width: 580px) {
  .install-strip { margin: 18px 20px 0; padding: 12px; gap: 10px; }
  .install-strip span { font-size: 9px; }
  .install-strip .button { font-size: 10px; padding: 8px 10px; }
  .topbar { padding-top: env(safe-area-inset-top); height: calc(67px + env(safe-area-inset-top)); }
  input, textarea, select { font-size: 16px; }
  .nav-item { min-height: 48px; }
  dialog { max-height: calc(100dvh - 30px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}
.scripture-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; }
.kjv-badge { font-size: 9px; letter-spacing: 1px; border: 1px solid #c9b89f; color: #715737; padding: 3px 7px; border-radius: 3px; }
.daily h2 { font-size: 29px; margin: 0 0 8px; }
.scripture-date { display: block; font-size: 10px; color: #78664e; }
.scripture-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; margin-top: 24px; }
.scripture-actions a { font-size: 10px; color: #6b5337; text-underline-offset: 4px; }
.daily .scripture-note { font-size: 9px; border-top: 1px solid #dcd0bd; padding-top: 15px; margin: 22px 0 0; }
.encouragement { display: grid; grid-template-columns: 1.05fr 1fr; background: #fffefa; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; margin: 0 0 38px; }
.encouragement-cover { min-height: 260px; border: 0; border-radius: 0; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 28px; color: #fff5e6; background: radial-gradient(ellipse at 50% 125%, #d1b180 0%, #9b7f5d 28%, #53473b 60%, #302d29 100%); }
.encouragement-cover::before { content: ''; position: absolute; width: 190px; height: 300px; border: 1px solid #eed6af38; border-radius: 150px 150px 0 0; top: 25px; transform: rotate(18deg); }
.encouragement-cover:hover { box-shadow: inset 0 0 80px #e7cda51a; }
.encouragement-cover:focus-visible { outline-offset: -5px; }
.film-label, .film-duration { position: relative; font-size: 7px; letter-spacing: 2px; }
.film-title { position: relative; font: 48px/1.2 var(--serif); margin: 16px 0; }
.film-play { position: relative; display: grid; place-items: center; padding-left: 3px; width: 44px; height: 44px; border: 1px solid #fff5e680; border-radius: 50%; background: #fff5e615; font-size: 12px; margin-bottom: 20px; }
.film-duration { opacity: .85; font-size: 8px; letter-spacing: 1.5px; }
.encouragement-copy { padding: 30px 34px; align-self: center; }
.encouragement-copy h2 { font-size: 34px; margin: 12px 0; }
.encouragement-copy p { font-size: 12px; color: var(--muted); line-height: 1.9; margin-bottom: 12px; }
.film-credit { display: block; font-size: 10px; color: #7d705f; line-height: 1.7; }
.encouragement-copy .button { margin-top: 20px; font-size: 11px; }
dialog:has(.encouragement-player) { width: min(800px, calc(100% - 30px)); }
.encouragement-player h2 { margin-top: 8px; font-size: 36px; }
#hope-video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #24211e; border-radius: 5px; }
.video-help { font-size: 11px; margin: 10px 0; }
.video-links { display: flex; gap: 18px; flex-wrap: wrap; font-size: 11px; color: #795d39; }
.video-links a { text-underline-offset: 4px; }
.video-reflection { margin: 22px 0 16px; padding: 18px 20px; background: #f3eee5; border-left: 2px solid #bda17b; }
.video-reflection p { font: 24px/1.3 var(--serif); margin: 10px 0; color: var(--ink); }
@media(max-width: 850px) {
  .encouragement-copy { padding: 24px; }
  .encouragement-copy h2 { font-size: 29px; }
  .film-title { font-size: 39px; }
}
@media(max-width: 580px) {
  .encouragement { grid-template-columns: 1fr; margin-bottom: 30px; }
  .encouragement-cover { min-height: 235px; }
  .encouragement-copy { padding: 25px; }
  dialog:has(.encouragement-player) { padding: 20px; }
}