:root{
  --ink:#17222b;
  --muted:#5b6670;
  --line:#dfe5ea;
  --paper:#ffffff;
  --bg:#f5f7f9;
  --navy:#0b3d63;
  --navy-dark:#072d49;
  --link:#0a5e93;
  --max:1080px;
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.4}
a{color:var(--link);text-decoration-thickness:2px;text-underline-offset:3px}
.wrapper{max-width:var(--max);margin:0 auto;padding:0 22px}

/* ---- Header: full-bleed so the logo sits far left, nav stays on one line ---- */
.site-header{background:var(--paper);border-bottom:1px solid var(--line)}
/* 1fr auto 1fr: the empty third column mirrors the logo column, so the nav
   sits dead-centre in the viewport — directly over the centred page title —
   while the logo stays hard left. */
.header-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:9px 26px;max-width:none}
.logo-link{justify-self:start;display:inline-flex;flex-direction:column;align-items:flex-start;text-decoration:none;color:inherit}
.logo{width:150px;max-width:100%;height:auto;display:block}
.logo-chapter{display:block;white-space:nowrap;font-family:Georgia,'Times New Roman',serif;font-size:1.05rem;line-height:1.05;color:var(--navy);margin-top:1px}
.nav{justify-self:center;display:flex;gap:4px;align-items:stretch;justify-content:center;flex-wrap:nowrap;font-size:.8rem}
.nav a{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;line-height:1.15;
  color:var(--ink);text-decoration:none;padding:7px 10px;border-radius:14px;border:1px solid transparent}
.nav a span{display:block;white-space:nowrap}
.nav a[aria-current="page"],.nav a:hover{border-color:var(--line);background:#f2f6f9;color:var(--navy)}

/* ---- Page shell ---- */
main{padding:12px 0 16px}
.page{background:var(--paper);border:1px solid var(--line);box-shadow:0 6px 22px rgba(15,30,45,.06)}
.page-title{background:var(--navy);color:#fff;margin:0;padding:12px 28px;font-size:1.45rem;line-height:1.15;font-weight:500;letter-spacing:.2px}
.page-body{padding:18px 28px 20px}

/* ---- Home ---- */
.home-title{margin:0 0 8px;text-align:center;font-size:1.85rem;line-height:1.1;color:var(--navy-dark)}
.event-details{text-align:center;margin:0 0 12px;font-size:1rem;line-height:1.42}
.event-details .event-date{font-weight:700;font-size:1.1rem;display:block;margin-bottom:.15rem}
.event-details .event-time{display:block;margin-top:.15rem;font-weight:700}
/* fit-content keeps the block only as wide as its longest item, so it reads as
   centred under the page title instead of trailing off to the right */
.menu-list{list-style:none;margin:0 auto;padding:0 14px;width:fit-content;max-width:100%;border-top:1px solid var(--line)}
.menu-list li{border-bottom:1px solid var(--line)}
.menu-list a{display:block;padding:7px 4px;font-size:1.05rem;color:var(--ink);text-decoration:none}
.menu-list a:hover{color:var(--navy);padding-left:8px}
.menu-list .menu-sub{display:block;margin-top:.1rem;padding-left:1.3rem;font-size:.82rem;color:var(--muted)}

/* ---- Body content ---- */
.content-list{margin:0;padding-left:1.2rem;font-size:1.02rem}
.content-list li{margin:.4rem 0}
.content-list .sub-note{display:block;margin-top:.1rem;font-size:.88rem;color:var(--muted)}
.sub-list{list-style:none;margin:.2rem 0 0;padding-left:0}
.sub-list li{margin:.12rem 0;font-size:.92rem;color:var(--muted)}
.simple-text{font-size:1.02rem;margin:0 0 .7rem}
.section-label{font-weight:700;font-size:1.06rem;margin:.9rem 0 .2rem}
.subhead{margin:.85rem 0 .4rem;font-size:1.15rem;color:var(--navy-dark);text-align:center}
.download-line{margin-top:.75rem;padding-top:.6rem;border-top:1px solid var(--line);font-size:1rem}
.pdf-link{display:inline-block;font-weight:700}
.later-block{margin-top:1rem;padding-top:.8rem;border-top:1px solid var(--line);text-align:center}
.later-block .later-heading{font-weight:700;letter-spacing:.14em;font-size:1rem;color:var(--navy-dark);margin:0 0 .2rem}
.later-block p{margin:.12rem 0;font-size:.97rem}
.home-return{margin:.9rem 0 0;padding-top:.75rem;border-top:1px solid var(--line)}
.home-btn{display:inline-block;background:var(--navy);color:#fff;text-decoration:none;font-size:.92rem;padding:8px 20px;border-radius:999px}
.home-btn:hover{background:var(--navy-dark)}
.note{color:var(--muted);font-size:.9rem}

/* ---- Footer ---- */
.site-footer{border-top:1px solid var(--line);background:#fff;color:var(--muted);font-size:.8rem;padding:9px 0}
.footer-inner{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.footer-credit{display:block;width:100%;text-align:center;font-size:.68rem;color:#96a0a8;margin-top:5px}

/* ---- Too narrow to centre the nav without colliding with the logo:
       drop the phantom column and let the nav wrap under it instead ---- */
@media (max-width:1180px){
  .header-inner{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
  .nav{flex-wrap:wrap;justify-content:flex-start;width:100%}
}
/* ---- Phone: stack the header, put nav labels back on one line each ---- */
@media (max-width:700px){
  .header-inner{flex-direction:column;align-items:flex-start;padding:10px 16px}
  .logo{width:132px}
  .logo-chapter{font-size:.95rem}
  .nav{gap:3px;font-size:.78rem}
  .nav a{flex-direction:row;gap:.28em;padding:6px 8px;flex-wrap:wrap}
  .page-title{font-size:1.3rem;padding:13px 18px}
  .page-body{padding:16px 18px 18px}
  .home-title{font-size:1.7rem}
  .wrapper{padding:0 14px}
}