/* ---------- tokens ---------- */
:root{
  --ground:#F8FAF7;
  --surface:#FFFFFF;
  --surface-2:#EEF2ED;
  --ink:#1A211D;
  --ink-2:#4C5A53;
  --ink-3:#7A8880;
  --line:#DFE5DE;
  --line-2:#C9D3C9;
  --pine:#2E5A4B;
  --pine-ink:#234A3D;
  --pine-soft:#E4EFE8;
  --amber:#9E6520;
  --amber-soft:#F6EEE1;
  --on-pine:#FFFFFF;
  --shadow:0 1px 2px rgba(26,33,29,.05), 0 8px 24px -16px rgba(26,33,29,.28);
  --r:14px;
  --maxw:704px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#111614;
    --surface:#181E1B;
    --surface-2:#212925;
    --ink:#E9EEEA;
    --ink-2:#A8B5AD;
    --ink-3:#7A8A81;
    --line:#28312D;
    --line-2:#36423C;
    --pine:#83C4AA;
    --pine-ink:#9FD3BD;
    --pine-soft:#1C2B26;
    --amber:#DDA663;
    --amber-soft:#2A2318;
    --on-pine:#101613;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --ground:#111614;
  --surface:#181E1B;
  --surface-2:#212925;
  --ink:#E9EEEA;
  --ink-2:#A8B5AD;
  --ink-3:#7A8A81;
  --line:#28312D;
  --line-2:#36423C;
  --pine:#83C4AA;
  --pine-ink:#9FD3BD;
  --pine-soft:#1C2B26;
  --amber:#DDA663;
  --amber-soft:#2A2318;
  --on-pine:#101613;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
body{
  margin:0;
  background:var(--ground);
  color:var(--ink);
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:17px;
  line-height:1.55;
  -webkit-text-size-adjust:100%;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:Literata,Georgia,"Times New Roman",serif;font-weight:600;margin:0;text-wrap:balance;line-height:1.2}
p{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--pine);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 18px}

/* ---------- header ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb, var(--ground) 88%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-in{display:flex;align-items:center;gap:12px;height:60px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;min-width:0}
.brand svg{flex:none;color:var(--pine)}
.brand-name{display:block;font-family:Literata,Georgia,serif;font-weight:600;font-size:17px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-sub{display:block;font-family:"Public Sans",sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);line-height:1.3}
.spacer{flex:1}

.menu-btn{
  display:flex;align-items:center;gap:8px;
  height:38px;padding:0 12px;border-radius:9px;
  border:1px solid var(--line-2);background:var(--surface);
  font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
}
.menu-btn .bars{display:flex;flex-direction:column;gap:3.5px;width:15px}
.menu-btn .bars i{display:block;height:1.8px;background:currentColor;border-radius:2px;transition:transform .22s ease,opacity .18s ease}
body.nav-open .menu-btn .bars i:nth-child(1){transform:translateY(5.3px) rotate(45deg)}
body.nav-open .menu-btn .bars i:nth-child(2){opacity:0}
body.nav-open .menu-btn .bars i:nth-child(3){transform:translateY(-5.3px) rotate(-45deg)}

.desknav{display:none}
.desknav a{
  text-decoration:none;font-size:14.5px;font-weight:500;color:var(--ink-2);
  padding:7px 11px;border-radius:8px;white-space:nowrap;
}
.desknav a:hover{color:var(--ink);background:var(--surface-2)}
.desknav a.on{color:var(--pine-ink);background:var(--pine-soft);font-weight:600}

/* drawer */
.drawer{
  position:fixed;inset:60px 0 0;z-index:39;
  background:var(--ground);
  transform:translateY(-8px);opacity:0;pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
  overflow-y:auto;
}
body.nav-open{overflow:hidden}
body.nav-open .drawer{opacity:1;transform:none;pointer-events:auto}
.drawer-in{padding:12px 18px 40px;max-width:var(--maxw);margin:0 auto}
.drawer a{
  display:flex;align-items:baseline;gap:12px;
  text-decoration:none;padding:17px 4px;border-bottom:1px solid var(--line);
  font-family:Literata,Georgia,serif;font-size:21px;font-weight:600;letter-spacing:-.01em;
}
.drawer a .idx{font-family:"Public Sans",sans-serif;font-size:11px;font-weight:600;color:var(--ink-3);letter-spacing:.1em}
.drawer a.on{color:var(--pine-ink)}
.drawer .note{margin-top:26px;font-size:13.5px;color:var(--ink-3);line-height:1.6}

@media (min-width:860px){
  .menu-btn{display:none}
  .drawer{display:none}
  .desknav{display:flex;gap:2px;align-items:center}
  .desknav a{font-size:14px;padding:7px 10px}
  :root{--maxw:820px}
  .topbar .wrap{max-width:1140px}
  .topbar-in{height:66px}
  .brand{flex:none}
  .brand-name{overflow:visible;text-overflow:clip}
}
@media (min-width:1180px){
  .desknav a{font-size:14.5px;padding:7px 13px}
}

/* ---------- page shell ---------- */
main{padding:0 0 72px}
.page{display:none;animation:fade .28s ease both}
.page.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .page{animation:none}
  .drawer{transition:none}
  *{scroll-behavior:auto!important}
}

.eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);
  margin-bottom:10px;
}
.lede{color:var(--ink-2);font-size:17.5px;line-height:1.6}
.section{margin-top:40px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;margin-bottom:14px}
.section-head h2{font-size:22px;letter-spacing:-.015em}
.section-head a{font-size:14px;font-weight:600;color:var(--pine-ink);text-decoration:none}
.section-head a:hover{text-decoration:underline}

/* ---------- home ---------- */
.hero{padding:44px 0 6px}
.hero h1{font-size:clamp(34px,9vw,50px);letter-spacing:-.025em}
.hero .lede{margin-top:14px}

.meeting{
  margin-top:26px;display:flex;flex-wrap:wrap;gap:2px 28px;
  padding:18px 20px;border-radius:var(--r);
  background:var(--pine-soft);
  border:1px solid color-mix(in srgb, var(--pine) 22%, transparent);
}
.meeting div{padding:6px 0}
.meeting dt{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb, var(--pine-ink) 78%, var(--ink-2));margin-bottom:2px}
.meeting dd{margin:0;font-size:16.5px;font-weight:600;color:var(--ink)}

.tiles{display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:620px){.tiles{grid-template-columns:1fr 1fr}}
.tile{
  display:block;text-decoration:none;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;transition:border-color .15s ease,transform .15s ease;
}
.tile:hover{border-color:var(--line-2);transform:translateY(-1px)}
.tile h3{font-size:18.5px;letter-spacing:-.01em;margin-bottom:5px}
.tile p{font-size:14.5px;color:var(--ink-2);line-height:1.5}
.tile .arrow{margin-top:12px;display:inline-block;font-size:13px;font-weight:600;color:var(--pine-ink);letter-spacing:.01em}

/* ---------- calendar ---------- */
.seg{
  display:inline-flex;padding:3px;gap:3px;border-radius:11px;
  background:var(--surface-2);border:1px solid var(--line);
}
.seg button{
  padding:8px 18px;border-radius:8px;font-size:14px;font-weight:600;color:var(--ink-2);
  transition:background .15s ease,color .15s ease;
}
.seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

/* Wrapping variant of the segmented control, for the preparedness tabs. Five
   tabs do not fit on one phone line, and horizontal scrolling hides options
   from exactly the readers least likely to go looking for them. */
.segwrap{display:flex;flex-wrap:wrap;margin-top:24px}
.segwrap button{flex:1 1 auto;min-height:44px;text-align:center;white-space:nowrap}
@media (max-width:560px){
  .segwrap{display:grid;grid-template-columns:1fr 1fr;gap:4px}
  .segwrap button{padding:11px 10px;font-size:14.5px}
}
#prepList{margin-top:18px}

.daygroup{margin-top:26px}
.daygroup > h3{
  font-family:"Public Sans",sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  padding-bottom:9px;border-bottom:1px solid var(--line);
}
.daygroup.today > h3{color:var(--amber)}
.ev{
  display:flex;gap:15px;padding:15px 2px;border-bottom:1px solid var(--line);
}
.ev .when{
  flex:none;width:74px;font-size:13.5px;font-weight:600;color:var(--ink-2);
  font-variant-numeric:tabular-nums;padding-top:2px;
}
.ev .when small{display:block;font-weight:500;color:var(--ink-3);font-size:12.5px}
.ev .body h4{margin:0;font-size:16.5px;font-weight:600;letter-spacing:-.005em;line-height:1.35}
.ev .body .meta{margin-top:3px;font-size:14px;color:var(--ink-2)}
.ev .cat{
  display:inline-block;margin-top:7px;font-size:10.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
}
.cat.worship{color:var(--pine)}
.cat.activity{color:var(--amber)}
.cat.service{color:var(--ink-3)}
.cat.leadership{color:var(--ink-3)}

/* month grid */
.mnav{display:flex;align-items:center;justify-content:space-between;margin-top:26px}
.mnav h3{font-size:20px;letter-spacing:-.015em}
.mnav .btns{display:flex;gap:6px}
.mnav button{
  width:38px;height:38px;border-radius:9px;border:1px solid var(--line-2);
  background:var(--surface);display:grid;place-items:center;color:var(--ink-2);
}
.mnav button:hover{color:var(--ink);border-color:var(--ink-3)}
.dow{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:16px}
.dow span{text-align:left;padding-left:5px;font-size:10.5px;font-weight:700;letter-spacing:.1em;color:var(--ink-3);padding-bottom:8px}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cell{
  position:relative;min-height:56px;border-radius:9px;
  display:flex;flex-direction:column;align-items:stretch;gap:3px;
  padding:5px 4px 6px;text-align:left;
  background:var(--surface);
  border:1px solid var(--line);
  overflow:hidden;
}
.cell:hover{border-color:var(--line-2)}
.cell .num{
  font-size:12.5px;font-weight:600;line-height:1;color:var(--ink-2);
  font-variant-numeric:tabular-nums;flex:none;padding-left:1px;
}
.cell.out{background:transparent;border-color:transparent}
.cell.out .num{color:var(--ink-3);opacity:.55}
.cell.out .chip{opacity:.45}
.cell.today{border-color:color-mix(in srgb, var(--amber) 60%, transparent)}
.cell.today .num{color:var(--amber);font-weight:700}
.cell.sel{border-color:var(--pine);box-shadow:inset 0 0 0 1px var(--pine);background:var(--pine-soft)}
.cell.sel .num{color:var(--pine-ink)}
.cell .chips{display:flex;flex-direction:column;gap:2px;min-width:0}
.chip{
  font-size:9.5px;line-height:1.22;font-weight:600;letter-spacing:-.005em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;word-break:break-word;
  color:var(--pine-ink);
}
.chip.activity{color:var(--amber)}
.chip.service,.chip.leadership{color:var(--ink-2)}
.chip.more{color:var(--ink-3);font-weight:700;-webkit-line-clamp:1}
@media (max-width:559px){
  /* claw back horizontal room so event names stay readable on a phone */
  .dow,.grid{margin-left:-14px;margin-right:-14px}
  .grid{gap:2px}
  .cell{padding:4px 3px 5px;border-radius:7px}
  .cell .num{font-size:12px}
  .chip{font-size:10px}
}
@media (min-width:560px){
  .cell{min-height:70px;padding:7px 6px 8px}
  .cell .num{font-size:13.5px}
  .chip{font-size:11px;line-height:1.25}
}
@media (min-width:860px){
  .cell{min-height:86px}
  .chip{font-size:11.5px}
}
.selday{margin-top:24px}
.selday > h3{font-family:"Public Sans",sans-serif;font-size:12px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);padding-bottom:9px;border-bottom:1px solid var(--line)}
.empty{padding:22px 2px;color:var(--ink-3);font-size:15px}

.subscribe{
  margin-top:34px;padding:18px 20px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--line);
}
.subscribe h3{font-size:17px;margin-bottom:5px}
.subscribe p{font-size:14.5px;color:var(--ink-2);line-height:1.55}
.subscribe .links{display:flex;flex-wrap:wrap;gap:10px;margin-top:13px}
.subscribe .links a{
  text-decoration:none;font-size:14px;font-weight:600;padding:9px 15px;border-radius:9px;
  border:1px solid var(--line-2);color:var(--ink);
}
.subscribe .links a:hover{border-color:var(--pine);color:var(--pine-ink)}

/* ---------- prep / announcements ---------- */
.stack{display:grid;gap:12px;margin-top:22px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.card h3{font-size:18px;letter-spacing:-.01em;margin-bottom:6px}
.card p{font-size:15px;color:var(--ink-2);line-height:1.6}
.card .tag{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}

/* Grouped prep content: an optional subheading over a list of lines. Contact-style
   rows use .k/.v so the label and value align without a table. */
.card .subhead{font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--ink);margin:15px 0 6px}
.card .subhead:first-of-type{margin-top:12px}
.preplist{list-style:none;margin:0;padding:0}
.preplist li{font-size:15px;color:var(--ink-2);line-height:1.55;padding:5px 0 5px 17px;position:relative}
.preplist li::before{content:"";position:absolute;left:3px;top:12px;width:4px;height:4px;border-radius:50%;background:var(--ink-3)}
.preplist li .k{display:inline}
.preplist li .v{display:inline;font-weight:600;color:var(--ink)}
.preplist li .k::after{content:" — ";color:var(--ink-3);font-weight:400}
.preplist li .v a{color:var(--pine-ink);text-decoration:none;font-weight:600}
.card .note{font-size:13.5px;color:var(--ink-3);margin-top:10px;font-style:italic}
.embed{margin:14px 0 4px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
.embed iframe{display:block;width:100%;height:clamp(340px,58vh,560px);border:0}
.card .warn{font-size:14.5px;color:var(--ink);background:var(--amber-soft);border-left:3px solid var(--amber);border-radius:6px;padding:10px 13px;margin-top:12px;line-height:1.5}
@media (max-width:560px){
  .preplist li .k,.preplist li .v{display:block}
  .preplist li .k::after{content:""}
  .preplist li .v{margin-top:1px}
}

.ann{border-bottom:1px solid var(--line);padding:22px 2px}
.ann .date{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.ann h3{font-size:19px;margin:7px 0 6px;letter-spacing:-.012em}
.ann p{font-size:15.5px;color:var(--ink-2);line-height:1.6}

.todo{color:var(--ink-3);font-style:italic;font-weight:400}


.callout{
  margin-top:22px;padding:18px 20px;border-radius:var(--r);
  background:var(--amber-soft);border:1px solid color-mix(in srgb, var(--amber) 30%, transparent);
}
.callout h3{font-size:17px;margin-bottom:5px;color:var(--ink)}
.callout p{font-size:14.5px;color:var(--ink-2);line-height:1.55}

footer{border-top:1px solid var(--line);margin-top:56px;padding:26px 0 40px}
footer p{font-size:13px;color:var(--ink-3);line-height:1.65}
footer .proto{margin-top:10px;font-size:12.5px;color:var(--ink-3)}