/* Tokens and the base reset, shared by every page on the site.
 *
 * This is split out from styles.css because the emergency area needs the
 * design tokens but must NOT inherit the main site's component rules. Both
 * use class names like .topbar, .note, .warn and .field for different things,
 * and when styles.css was loaded on those pages its .topbar-in{height:60px}
 * pinned a header whose nav had wrapped to two lines, so the nav sat on top
 * of the page beneath it.
 *
 * index.html loads base.css then styles.css.
 * /emergency/* loads base.css then emergency.css.
 * Neither component sheet is ever loaded alongside the other.
 */
/* ---------- 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);

  /* The emergency plan area. Signal colours are content, not accent -- they are
     the five door markers a block captain reads from the street, so they are
     never spent on a button or a state. --pine-deep is a surface (the first-hour
     panel, the area's own topbar), which is why it is not --pine-ink. */
  --pine-deep:#1C3A31;
  --on-deep:#FFFFFF;
  --on-deep-2:#E9F1EC;
  --on-deep-3:#A9C6B8;
  --on-deep-4:#8FBCA8;
  --sig-green:#1E8E4A;
  --sig-yellow:#D99B0C;
  --sig-red:#BF3B2E;
  --sig-black:#1A1A1A;
  --sig-white:#FFFFFF;
  /* Archivo Narrow earns its download: eyebrows, rail numerals, table headers
     and tabular figures all need a condensed face the site did not have. */
  --serif:Literata,Georgia,"Times New Roman",serif;
  --sans:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --cond:"Archivo Narrow","Arial Narrow",Arial,sans-serif;
  --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);
    --pine-deep:#0B1310;
    --sig-green:#3CB16A;
    --sig-yellow:#E7B23A;
    --sig-red:#DB5A4C;
    --sig-black:#0A0A0A;
    --sig-white:#F3F6F4;
  }
}
: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);
  --pine-deep:#0B1310;
  --sig-green:#3CB16A;
  --sig-yellow:#E7B23A;
  --sig-red:#DB5A4C;
  --sig-black:#0A0A0A;
  --sig-white:#F3F6F4;
}

/* ---------- 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){
  :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}

/* Amber is already this site's "pay attention" colour -- today on the
   calendar, youth activities -- so an unfinished page borrows it rather than
   introducing a fifth hue. */
.pill{
  display:inline-block;margin-left:7px;padding:1px 7px;border-radius:999px;
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  background:var(--amber-soft);color:var(--amber);
  border:1px solid color-mix(in srgb, var(--amber) 38%, transparent);
  vertical-align:middle;white-space:nowrap;
}
.drawer .pill{margin-left:9px}

/* Wide viewports give the header more room than the single-page
   content column gets. */
@media (min-width:860px){

}

/* The horizontal nav only appears once it genuinely fits. "Emergency
   Preparedness" and "Meet with Bishopric" are long, and with the ward name
   beside them the row needs about 965px; below that the drawer is roomier
   than a squeezed line, and does not push the page sideways. */
@media (min-width:980px){
  .menu-btn{display:none}
  .drawer{display:none}
  .desknav{display:flex;gap:2px;align-items:center}
  .desknav a{font-size:14px;padding:7px 10px}
}