:root{
  --green:#0a7650; --green-dark:#085f40; --heading:#0a6b46; --red:#e5222e;
  --text:#666; --page:#4c4c4c; --panel:#f7f7f7; --line:#e4e4e4;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--page);border-top:6px solid var(--green);color:var(--text);font:14px/24px Roboto,Arial,sans-serif}
img,iframe{max-width:100%}
a{color:var(--heading);text-decoration:none}
a:hover{color:var(--red)}
ul{list-style:none;margin:0;padding:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.skip{position:absolute;left:-999px;background:#000;color:#fff;padding:8px 12px;z-index:100}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* boxed site */
.site{width:1018px;max-width:100%;margin:15px auto 24px;background:var(--panel);border-radius:4px;box-shadow:0 0 8px rgba(0,0,0,.3)}

/* header */
.site-header{position:relative;min-height:181px;display:flex;align-items:center;padding:20px 25px 20px 34px;border-radius:4px 4px 0 0}
.logo img{display:block;height:80px;width:auto;max-width:100%}
.social{position:absolute;right:25px;top:56px;display:flex;gap:8px}
.social a{display:block;width:20px;height:20px}
.social svg{width:100%;height:100%;fill:#bcbcbc}
.social a:hover svg{fill:var(--green)}
.banner{display:block;width:100%;height:auto}

/* navigation */
.main-nav{background:var(--green);position:relative}
.menu{display:flex;flex-wrap:wrap;padding-left:20px}
.menu>li{position:relative}
.menu a{display:block;color:#fff;font-size:14.500px;line-height:42px;padding:0 11px;white-space:nowrap}
.menu>li.current>a,.menu>li:hover>a{background:var(--red);color:#fff}
.sub{position:absolute;left:0;top:100%;min-width:240px;background:var(--green-dark);z-index:50;
  opacity:0;visibility:hidden;transform:translateY(6px);transition:.18s}
.sub a{line-height:22px;padding:10px 15px;border-top:1px solid rgba(255,255,255,.12);white-space:normal}
.sub a:hover{background:var(--red)}
.has-sub:hover>.sub,.has-sub:focus-within>.sub{opacity:1;visibility:visible;transform:none}
.nav-toggle{display:none;background:none;border:0;padding:10px 20px;cursor:pointer}
.nav-toggle span{display:block;width:26px;height:3px;background:#fff;margin:5px 0;transition:.25s}
.nav-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.nav-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* content box */
.main{padding:20px 25px;border-bottom:1px solid var(--line)}
.box{background:#fff;padding:20px 34px 98px 25px;box-shadow:0 0 6px rgba(0,0,0,.12)}
.page-title{margin:0 0 38px;font:400 30px/1.3 Ubuntu,Arial,sans-serif;color:var(--heading)}
.cols{display:grid;grid-template-columns:minmax(0,1fr) 291px;gap:26px;padding-left:10px}
.text p{margin:0 0 15px}
.announce-title{margin:0;padding:20px 22px;background:var(--panel);border-left:3px solid var(--green);
  font:italic 700 18px/24px Ubuntu,Arial,sans-serif;color:var(--heading)}
.announce{list-style:disc;padding-left:30px;margin:28px 0 0;color:var(--heading)}
.announce li{margin-bottom:0;line-height:24px}
.announce a{display:block}
.announce time{display:block;font-size:11px;line-height:20px;color:var(--text)}
.map{margin:16px 0 0 10px}
.map iframe{display:block;width:100%;height:480px;border:0}

/* widgets row */
.widgets{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start;padding:40px 25px 70px}
.widget{background:#fff;padding:14px 16px 20px;box-shadow:0 0 6px rgba(0,0,0,.12)}
.widget-title{margin:0 0 14px;font:400 18px/1.4 Ubuntu,Arial,sans-serif;color:var(--heading)}
.calendar caption{font-size:11px;text-transform:uppercase;color:#666;padding:4px 0 8px}
.calendar table{width:100%;border-collapse:collapse;text-align:center;margin-left:7px;width:calc(100% - 14px)}
.calendar th,.calendar td{border:1px solid #ddd;padding:5px 0;font-size:13.500px;line-height:24px}
.calendar th{background:#f1f1f1;color:#222;font-weight:700}
.calendar td{color:#777}
.calendar td.pad{background:#f6f6f6}
.calendar td.event a{display:block;font-weight:700;background:#eaf4ef}
.cal-nav{display:flex;justify-content:space-between;margin-top:4px}
.cal-nav a{font-size:13.500px}
.counter{text-align:center;color:#222}
.digits{display:flex;justify-content:center;margin-bottom:4px}
.digits img{height:26px;width:auto}
.counter p{margin:0;font-size:14px;line-height:24px}
.counter p img{display:inline-block;vertical-align:middle;max-height:20px}
.contact{margin:0;color:#222}
.contact em{font-style:italic}

/* footer */
.site-footer{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 0;padding:28px 20px 22px;
  border-top:1px dashed #ccc;font-size:12px;color:#444}
.site-footer p{margin:0}
.to-top{position:fixed;right:18px;bottom:18px;width:38px;height:38px;display:grid;place-items:center;background:#fff;
  border-radius:3px;box-shadow:0 1px 5px rgba(0,0,0,.3);opacity:0;visibility:hidden;transition:.25s;z-index:60}
.to-top svg{width:24px;height:24px}
.to-top.show{opacity:1;visibility:visible}

/* responsive */
@media (max-width:1050px){
  .site{margin:0 auto;border-radius:0}
  .widgets{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .site-header{min-height:0;padding:20px 15px;flex-direction:column;align-items:flex-start;gap:14px}
  .social{position:static}
  .nav-toggle{display:block}
  .menu{display:none;flex-direction:column;padding:0}
  .menu.open{display:flex}
  .menu a{white-space:normal;border-top:1px solid rgba(255,255,255,.14);padding:0 20px}
  .has-sub>a::after{content:"▾";float:right}
  .sub{position:static;opacity:1;visibility:visible;transform:none;display:none;background:rgba(0,0,0,.18)}
  .has-sub.open>.sub{display:block}
  .sub a{padding-left:36px}
  .cols{grid-template-columns:1fr;padding-left:0}
  .map{margin-left:0}
  .map iframe{height:340px}
  .box{padding:20px 18px 40px}
  .main{padding:14px}
}
@media (max-width:620px){
  .widgets{grid-template-columns:1fr;padding:25px 14px 40px}
  .page-title{font-size:25px;margin-bottom:22px}
  .site-footer{flex-direction:column;padding:22px 15px}
  .logo img{height:auto;width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* ===== Inner pages: news / article ===== */
:root{--purple:#8a5ba6;--link:#00798c}
.box--news,.box--members{padding-right:25px}
.box--news{padding-bottom:40px}
.box--members{padding-bottom:72px}
.entry p{margin:0 0 15px;color:#222}
.entry h2{margin:25px 0 18px;font:400 28px/1.3 Ubuntu,Arial,sans-serif;color:var(--purple)}
.entry a{color:var(--link);text-decoration:underline}
.entry a:hover{color:var(--red)}
.entry sup{font-size:.7em;line-height:0}

/* ===== Inner pages: data table (Life Members) ===== */
.dt-controls{display:flex;justify-content:space-between;align-items:center;margin:0 0 17px;color:#222;font-size:13px}
.dt-controls select{height:28px;margin-right:4px;padding:0 4px;border:1px solid #aaa;border-radius:3px;background:#fff;font:inherit}
.dt-search input{width:170px;height:36px;margin-left:4px;padding:0 8px;border:1px solid #eee;border-radius:2px;background:#f2f2f2;font:inherit}
.table-wrap{overflow-x:auto}
.members{width:100%;min-width:680px;table-layout:fixed;border-collapse:collapse;font-size:13px;color:#222}
.members th{font-weight:400;text-align:left}
.sort-row th{height:37px;padding:0;background:#d6e8f3}
.sort{position:relative;display:block;width:100%;height:37px;padding:0;border:0;background:none;cursor:pointer}
.sort::before,.sort::after{content:"";position:absolute;left:14px;border:solid transparent}
.sort::before{top:11px;border-width:0 4px 6px;border-bottom-color:#aaa}
.sort::after{bottom:11px;border-width:6px 4px 0;border-top-color:#aaa}
.sort[disabled]{cursor:default}
th[aria-sort=ascending] .sort::before{border-bottom-color:#444}
th[aria-sort=descending] .sort::after{border-top-color:#444}
.label-row th{padding:10px 30px 10px 8px;line-height:24px;vertical-align:top}
.members td{padding:8px;vertical-align:top;line-height:24px;border-top:1px solid #e2e2e2}
.members td.photo{padding-left:0}
.members tbody tr:nth-child(odd){background:#f7f7f7}
.members img{display:block;width:100px;height:100px;object-fit:cover}
.dt-foot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:13px;color:#222}
.dt-pages{display:flex;gap:4px}
.dt-pages button{min-width:34px;height:34px;padding:0 6px;border:1px solid transparent;border-radius:2px;background:none;color:#555;font:inherit;cursor:pointer}
.dt-pages button:hover:not([disabled]){border-color:#ccc}
.dt-pages .active{border-color:#999;color:#222}
.dt-pages button[disabled]{color:#bbb;cursor:default}
.dt-pages .dots{display:inline-block;min-width:34px;line-height:34px;text-align:center;color:#555}
@media (max-width:860px){.box--news,.box--members{padding:20px 18px 40px}}
@media (max-width:620px){
  .entry h2{font-size:22px}
  .dt-controls,.dt-foot{flex-direction:column;align-items:flex-start;gap:10px}
}

.news-item { margin-bottom: 28px; }
.news-item h2 { color: #8e5ba0; font-weight: 400; font-size: 28px; margin: 0 0 12px; }

.notice-list { list-style: none; margin: 0; padding: 0; }
.notice-list li { padding: 10px 0; border-bottom: 1px solid #e5e5e5; }
.notice-list time { display: block; font-size: 13px; color: #777; margin-top: 2px; }

.digits {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin: 8px 0 14px;
}
.digit {
  width: 30px;
  height: 42px;
  line-height: 42px;
  text-align: center;
  font: 700 24px/42px "Ubuntu", "Roboto", sans-serif;
  color: #fff;
  background: linear-gradient(#0a7d5c 0%, #006a4e 50%, #00523c 50%, #00634a 100%);
  border-radius: 4px;
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25), 0 1px 2px rgba(0, 0, 0, .2);
}

.calendar td.today { background: #006a4e; color: #fff; font-weight: 700; }
.calendar .cal-nav { display: flex; justify-content: space-between; margin: 10px 0 0; }