*{margin:0;padding:0;box-sizing:border-box}
:root{--ink:#161513;--ink2:#2C2A26;--red:#8C1D18;--grey:#6B675E;--line:#E2DED6;--border:#C8C4BB;--cream:#F6F2EC;--dot:#EAE6DE;--footmut:#8C887F}
html{scroll-behavior:smooth}
body{background:#fff;font-family:'Lora',Georgia,serif;color:var(--ink);line-height:1.5}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
.wrapx{max-width:1120px;margin:0 auto;padding:0 24px}
.flash{max-width:1120px;margin:0 auto;padding:10px 14px;border-radius:4px;font:400 13px 'Public Sans',sans-serif}
.flash.err{background:#F7E3E3;border:1px solid #E0BEBB;color:#8C1D18}
.flash.ok{background:#E7F1E9;border:1px solid #BFD8C6;color:#1c6b4a}
.ustrip{border-bottom:1px solid var(--line);background:var(--cream)}
.ustrip .in{max-width:1120px;margin:0 auto;padding:6px 24px;display:flex;gap:18px;align-items:center;font:600 11px 'Public Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.ustrip .sp{margin-left:auto;display:flex;gap:18px;align-items:center}
.ustrip a{color:var(--grey)}.ustrip a.red{color:var(--red)}
.ustrip .who{color:var(--ink);text-transform:none;letter-spacing:0}.ustrip .who b{color:var(--red)}
.masthead{max-width:1120px;margin:0 auto;padding:26px 24px 0;text-align:center}
.masthead .row{display:flex;align-items:center;justify-content:center;gap:16px}
.masthead img{height:56px;width:auto}
.masthead .name{font:700 46px/1 'Lora',serif;letter-spacing:.02em;color:var(--ink)}
.masthead .sub{font:600 10.5px 'Public Sans',sans-serif;letter-spacing:.3em;text-transform:uppercase;color:var(--red);margin-top:7px}
.dateline{display:flex;align-items:center;gap:14px;margin-top:18px;font:600 11px 'Public Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--grey);border-top:3px double var(--ink);border-bottom:1px solid var(--line);padding:7px 0}
.dateline .r{margin-left:auto}
.pnav{max-width:1120px;margin:0 auto;padding:0 24px}
.pnav .in{display:flex;justify-content:center;align-items:stretch;gap:30px;padding:13px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.pnav .in > a,.pnav .drop{display:inline-flex;align-items:center}
.pnav a{font:600 13px 'Public Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);padding-bottom:3px;border-bottom:2px solid transparent;line-height:1.1}
.pnav a.on{color:var(--red);border-bottom:2px solid var(--red);font-weight:700}
.pnav a:hover{color:var(--red)}
.pnav a.lk i{font-size:10px;color:var(--red);margin-left:3px}
.lead{max-width:1120px;margin:0 auto;padding:26px 24px 0}
.lead .grid{display:grid;grid-template-columns:1.55fr 1fr;gap:30px;align-items:start}
.lead figure{margin:0}
.lead figure img,.lead .lead-ph{width:100%;height:360px;object-fit:cover;border:1px solid var(--line);filter:saturate(.92)}
.lead .lead-ph{background:linear-gradient(135deg,#8C1D1822,#8C1D180d)}
.lead figcaption{font:400 12px 'Public Sans',sans-serif;color:var(--grey);padding:8px 0 10px;border-bottom:1px solid var(--line)}
.lead .kick{font:700 10.5px 'Public Sans',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
.lead h1{font:700 34px/1.18 'Lora',serif;margin:10px 0 12px}
.lead p{font-family:'Public Sans',sans-serif;font-size:15px;color:var(--ink2);margin:0 0 14px}
.lead .acts{border-top:1px solid var(--line);padding-top:12px;display:flex;gap:12px;align-items:center}
.btn-red{background:var(--red);color:#fff;font:600 12px 'Public Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:10px 16px;display:inline-block}
.link-underline{font:600 12px 'Public Sans',sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink);padding-bottom:2px}
.secbar{max-width:1120px;margin:0 auto;padding:24px 24px 0}
.secbar .in{border-top:3px double var(--ink);border-bottom:1px solid var(--line);padding:10px 0;display:flex;gap:26px;flex-wrap:wrap;align-items:center}
.secbar .lbl{font:700 10.5px 'Public Sans',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
.secbar a{font:600 14px 'Lora',serif;color:var(--ink)}.secbar a:hover{color:var(--red)}
.sec{max-width:1120px;margin:0 auto;padding:26px 24px}
.sech{display:flex;align-items:baseline;gap:12px;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:18px}
.sech h2{font:700 22px 'Lora',serif;margin:0}
.sech .more{margin-left:auto;font:600 11px 'Public Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.sech .lockchip{font:700 9px 'Public Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--red);border:1px solid var(--red);padding:2px 7px;border-radius:2px}
.news3{display:grid;grid-template-columns:repeat(3,1fr)}
.news3 article{padding:0 24px;border-right:1px solid var(--line)}
.news3 article:first-child{padding-left:0}
.news3 article:last-child{border-right:none;padding-right:0}
.news3 .tag{font:700 10px 'Public Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.news3 h3{font:600 19px/1.32 'Lora',serif;margin:8px 0}
.news3 p{font:400 13.5px 'Public Sans',sans-serif;color:var(--ink2);margin:0}
.classif{background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.classif .in{max-width:1120px;margin:0 auto;padding:22px 24px}
.classif .lbl{text-align:center;font:700 10.5px 'Public Sans',sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--grey);border-bottom:1px solid var(--line);padding-bottom:10px;margin-bottom:18px}
.ads4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.ad{border:1px solid var(--line);background:#fff;padding:10px;display:block}
.ad .ph{height:130px;overflow:hidden;background:#e9e4db}
.ad .ph img{width:100%;height:100%;object-fit:cover}
.ad .ph.ph-mono{display:grid;place-items:center;color:#fff;font:700 30px 'Lora',serif}
.ad .flag{font:700 9.5px 'Public Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;margin-top:10px}
.ad .flag.spon{color:var(--red)}.ad .flag.list{color:var(--grey)}
.ad h3{font:600 16px 'Lora',serif;margin:4px 0 3px}
.ad p{font:400 12px 'Public Sans',sans-serif;color:var(--grey);margin:0}
.classif .foot{text-align:center;margin-top:16px;font:400 12px 'Public Sans',sans-serif;color:var(--grey)}
.classif .foot a{color:var(--red)}
.twoup{display:grid;grid-template-columns:1fr 1fr;gap:36px}
.svc-h{font:700 22px 'Lora',serif;margin:0 0 14px;border-bottom:1px solid var(--line);padding-bottom:8px}
.svc-list a{display:flex;gap:12px;align-items:baseline;padding:11px 0;border-bottom:1px dotted var(--dot)}
.svc-list a i{color:var(--red)}
.svc-list .nm{font:600 16px 'Lora',serif;flex:1}
.svc-list .mt{font:400 12px 'Public Sans',sans-serif;color:var(--grey)}
.svc-list a:hover .nm{color:var(--red)}
.emg-box{border:1px solid var(--ink);background:#fff}
.emg-box .r{display:flex;padding:10px 14px;border-bottom:1px solid var(--line)}
.emg-box .r:last-child{border-bottom:none}
.emg-box .r span{font:400 14px 'Lora',serif;flex:1}
.emg-box .r b{font:700 15px 'Public Sans',sans-serif;color:var(--red)}
.cul-head{display:flex;align-items:baseline;gap:12px;border-top:3px double var(--ink);padding-top:14px;margin-bottom:16px}
.cul-head h2{font:700 22px 'Lora',serif;margin:0}
.cul-head .more{margin-left:auto;font:600 11px 'Public Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--red)}
.cul4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px}
.cul4 a{display:block}
.cul4 .ph{height:120px;border:1px solid var(--line);overflow:hidden;background:#e9e4db}
.cul4 .ph img{width:100%;height:100%;object-fit:cover}
.cul4 h3{font:600 17px/1.3 'Lora',serif;margin:10px 0 4px;color:var(--ink)}
.cul4 p{font:400 12.5px 'Public Sans',sans-serif;color:var(--grey);margin:0}
.cul4 a:hover h3{color:var(--red)}
.youth3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.ycard{border-top:2px solid var(--ink);padding-top:12px}
.ycard .tag{font:700 10px 'Public Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.ycard h3{font:600 18px/1.3 'Lora',serif;margin:7px 0 5px}
.ycard p{font:400 12.5px 'Public Sans',sans-serif;color:var(--grey);margin:0}
.ycard .ymeta,.ymeta{font:400 12px 'Public Sans',sans-serif;color:var(--grey);margin-top:8px}
.res{background:var(--cream);border-top:1px solid var(--line)}
.res .in{max-width:1120px;margin:0 auto;padding:24px 24px 28px}
.res h2{font:700 22px 'Lora',serif;margin:0 0 14px}
.res4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.res4 a{border-top:2px solid var(--ink);padding-top:10px;display:block}
.res4 .nm{font:600 16px 'Lora',serif;color:var(--ink)}
.res4 .mt{font:400 12px 'Public Sans',sans-serif;color:var(--grey);margin-top:3px}
.res4 a:hover .nm{color:var(--red)}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.gal .ph{aspect-ratio:4/3;border:1px solid var(--line);position:relative;overflow:hidden;background:linear-gradient(135deg,#d8d2c7,#efe9df)}
.gal .ph img{width:100%;height:100%;object-fit:cover}
.gal .ph .pl{position:absolute;inset:0;display:grid;place-items:center;color:#9a9284;font-size:26px}
.gal .ph .cp{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(22,21,19,.72));color:#fff;font:400 11px 'Public Sans',sans-serif;padding:14px 9px 7px}
.nb{border:1px solid var(--line)}
.nb .n{display:flex;gap:12px;align-items:center;padding:12px 15px;border-bottom:1px solid var(--line)}
.nb .n:last-child{border-bottom:none}
.nb .n .tx{flex:1;font:400 14px 'Public Sans',sans-serif}
.nb .n .loc{font:400 11.5px 'Public Sans',sans-serif;color:var(--grey)}
.nb .chip-navy{font:700 9.5px 'Public Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--red);border:1px solid var(--red);padding:2px 7px}
.help2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mcard{border:1px solid var(--line);padding:15px}
.mcard .k{font:700 10px 'Public Sans',sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}
.mcard h3{font:600 17px/1.3 'Lora',serif;margin:7px 0 5px}
.mcard p{font:400 12.5px 'Public Sans',sans-serif;color:var(--grey);margin:0}
.caltable{border:1px solid var(--ink);background:#fff}
.caltable .r{display:flex;gap:14px;align-items:center;padding:11px 14px;border-bottom:1px solid var(--line)}
.caltable .r:last-child{border-bottom:none}
.caltable .dt{text-align:center;min-width:52px;border-right:1px solid var(--line);padding-right:12px}
.caltable .dt b{display:block;font:700 20px 'Lora',serif;line-height:1;color:var(--red)}
.caltable .dt small{font:600 9.5px 'Public Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.caltable .nm{font:600 15px 'Lora',serif}
.caltable .mt{font:400 12px 'Public Sans',sans-serif;color:var(--grey);margin-top:2px}
.gate{background:linear-gradient(120deg,#001A44,#002C6B);color:#fff;padding:34px;text-align:center;max-width:640px;margin:20px auto}
.gate i{font-size:30px;color:#9db4de}
.gate h3{font:700 20px 'Lora',serif;margin:8px 0 6px}
.gate p{font:400 13px 'Public Sans',sans-serif;color:#d6ddec;max-width:420px;margin:0 auto 14px}
.pfoot{background:var(--ink);color:var(--border);padding:28px 0 24px;margin-top:20px}
.pfoot .in{max-width:1120px;margin:0 auto;padding:0 24px;display:flex;gap:40px;flex-wrap:wrap}
.pfoot .brand{max-width:270px}
.pfoot .brand .n{font:700 15px 'Lora',serif;color:#fff;letter-spacing:.04em}
.pfoot .brand p{font:400 11.5px 'Public Sans',sans-serif;color:var(--footmut);margin-top:8px}
.pfoot .col h4{font:700 10.5px 'Public Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#fff}
.pfoot .col .links{display:flex;flex-direction:column;gap:6px;margin-top:9px}
.pfoot .col a{color:var(--border);font:400 12.5px 'Public Sans',sans-serif}
.pfoot .col a:hover{color:#fff}
@media(max-width:800px){.lead .grid,.twoup,.help2{grid-template-columns:1fr}.news3,.ads4,.cul4,.res4,.gal,.youth3{grid-template-columns:1fr 1fr}.news3 article{border-right:none;padding:12px 0;border-bottom:1px solid var(--line)}}

/* ---- Phase 5: mega-menu dropdowns ---- */
.pnav .in{position:relative;z-index:50}
.pnav .drop{position:relative}
.pnav .drop > a{display:inline-flex;align-items:center;gap:5px}
.pnav .drop > a i{font-size:9px;opacity:.6}
.pnav .drop::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;display:none}
.pnav .drop:hover::after{display:block}
.pnav .drop .menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:0;padding-top:14px;background:transparent;border:none;box-shadow:none;min-width:240px;display:none;z-index:60}
.pnav .drop .menu .menu-inner{background:#fff;border:1px solid var(--line);box-shadow:0 12px 30px rgba(22,21,19,.16);padding:6px}
.pnav .drop:hover .menu,.pnav .drop.open .menu{display:block}
.pnav .drop .menu a{display:block;padding:9px 13px;font:600 12.5px 'Public Sans',sans-serif;letter-spacing:.02em;text-transform:none;color:var(--ink);border:none}
.pnav .drop .menu a:hover{background:var(--cream);color:var(--red)}
.pnav .drop .menu a.lk{color:var(--red)}
.pnav .drop .menu a.lk i{font-size:9px;margin-left:3px}

/* ---- Phase 5: rotating hero banner ---- */
.hero-carousel{max-width:1120px;margin:26px auto 0;padding:0 24px;position:relative}
.hero-slides{position:relative;overflow:hidden;border:1px solid var(--line)}
.hero-slide{display:none}
.hero-slide.on{display:block}
.hero-slide img,.hero-slide .banner-ph{width:100%;height:340px;object-fit:cover;display:block}
.hero-slide .banner-ph{background:linear-gradient(135deg,#8C1D18,#243b6b);display:grid;place-items:center;color:#fff;font:700 26px 'Lora',serif}
.hero-slide .cap{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(22,21,19,.78));color:#fff;padding:40px 22px 16px}
.hero-slide .cap .tag{font:700 10px 'Public Sans',sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#e6b4b0}
.hero-slide .cap h2{font:700 26px 'Lora',serif;margin:4px 0 3px;color:#fff}
.hero-slide .cap p{font:400 13px 'Public Sans',sans-serif;color:#e8e5df;margin:0}
.hero-dots{display:flex;gap:7px;justify-content:center;margin-top:12px}
.hero-dots button{width:9px;height:9px;border-radius:50%;border:none;background:var(--border);cursor:pointer;padding:0}
.hero-dots button.on{background:var(--red)}
.hero-arrow{position:absolute;top:calc(50% - 10px);transform:translateY(-50%);background:rgba(255,255,255,.85);border:1px solid var(--line);width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:16px;color:var(--ink);z-index:3}
.hero-arrow.prev{left:36px}.hero-arrow.next{right:36px}

/* ---- Phase 5: scrollable ads when >4 ---- */
.ads-scroll{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:6px}
.ads-scroll .ad{flex:0 0 250px;scroll-snap-align:start}
.ads4.is-scroll{display:flex}

/* ---- Phase 5: symmetric news truncation ---- */
.news3 p.clamp{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:3.9em}
.news3 h3.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em}

/* ---- Phase 5: news search bar ---- */
.newssearch{display:flex;gap:10px;margin-bottom:18px;max-width:520px}
.newssearch input{flex:1;padding:9px 12px;border:1px solid var(--line);font:400 14px 'Public Sans',sans-serif}
.newssearch button{background:var(--red);color:#fff;border:none;padding:9px 16px;font:600 12px 'Public Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;cursor:pointer}

/* ---- Phase 5: content page (about etc.) ---- */
.contentpage{max-width:820px}
.contentpage .body{font-family:'Public Sans',sans-serif;font-size:15px;line-height:1.75;color:var(--ink2)}
.contentpage .body h2,.contentpage .body h3{font-family:'Lora',serif;color:var(--ink);margin:18px 0 8px}
.contentpage .body p{margin:0 0 12px}
.committee-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:8px}
.committee-grid .m{text-align:center}
.committee-grid .m .ph{width:100%;aspect-ratio:1;object-fit:cover;border:1px solid var(--line);background:linear-gradient(135deg,#8C1D1815,#243b6b12)}
.committee-grid .m .ph-empty{width:100%;aspect-ratio:1;border:1px solid var(--line);background:linear-gradient(135deg,#8C1D1815,#243b6b12);display:grid;place-items:center;color:#b7b1a6;font-size:30px}
.committee-grid .m .nm{font:600 15px 'Lora',serif;margin-top:9px}
.committee-grid .m .dg{font:400 12px 'Public Sans',sans-serif;color:var(--grey)}
@media(max-width:800px){.committee-grid{grid-template-columns:1fr 1fr}}

/* Phase 6: lead story full-width when banner is active (no redundant image) */
.lead-solo{max-width:820px;margin:0 auto;text-align:center;padding:8px 0 4px}
.lead-solo .kick{font:700 10.5px 'Public Sans',sans-serif;letter-spacing:.22em;text-transform:uppercase;color:var(--red)}
.lead-solo h1{font:700 32px/1.2 'Lora',serif;margin:10px 0 12px}
.lead-solo p{font-family:'Public Sans',sans-serif;font-size:15px;color:var(--ink2);margin:0 auto 16px;max-width:660px}
.lead-solo .acts{display:flex;justify-content:center;border-top:1px solid var(--line);padding-top:16px}

/* Phase 6: news article detail page */
.article{max-width:760px}
.article .amETA{font:700 10.5px 'Public Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.article h1{font:700 32px/1.22 'Lora',serif;margin:0 0 6px}
.article .adate{font:400 12.5px 'Public Sans',sans-serif;color:var(--grey);margin-bottom:18px;border-bottom:1px solid var(--line);padding-bottom:14px}
.article .abody{font-family:'Public Sans',sans-serif;font-size:15.5px;line-height:1.8;color:var(--ink2)}
.article .abody p{margin:0 0 14px}
.article .aback{display:inline-block;margin-top:22px;font:600 12px 'Public Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}
.news3 h3 a:hover,.news3 article a:hover h3{color:var(--red)}

/* Phase 7: services grouped by category */
.svc-groups{display:flex;flex-direction:column;gap:16px}
.svc-cat-h{display:flex;align-items:center;gap:8px;font:700 11px 'Public Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--red);border-bottom:1px solid var(--line);padding-bottom:6px;margin-bottom:8px}
.svc-cat-h i{font-size:14px}
.svc-items{display:flex;flex-direction:column;gap:7px}
.svc-item{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:2px 0}
.svc-item .nm{font:600 15px 'Lora',serif;color:var(--ink)}
.svc-item .mt{font:400 12px 'Public Sans',sans-serif;color:var(--grey);text-align:right}

/* Phase 7: committee contact details */
.committee-grid .m .ph-num{font:400 12px 'Public Sans',sans-serif;color:var(--ink2);margin-top:5px}
.committee-grid .m .ph-num i{color:var(--red);font-size:11px;margin-right:3px}

/* Phase 7: clamp lead standfirst to roughly the photo height */
.lead .grid .lead-clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}

/* Phase 8: gallery video/audio thumbnails + play badge */
.gal a.ph{display:block;position:relative;text-decoration:none}
.gal a.ph:hover .playbadge{transform:translate(-50%,-50%) scale(1.08);background:var(--red)}
.gal .playbadge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:rgba(140,29,24,.85);color:#fff;display:grid;place-items:center;font-size:20px;transition:transform .15s,background .15s;z-index:2}
.gal .mediakind{position:absolute;top:8px;left:8px;background:rgba(22,21,19,.78);color:#fff;font:700 8.5px 'Public Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;padding:3px 7px;border-radius:2px;z-index:2}

/* Phase 8: resource links pop-up */
.res4 .lc{display:inline-block;font:700 9px 'Public Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--red);border:1px solid var(--red);border-radius:2px;padding:1px 5px;margin-left:4px}
.resmodal{position:fixed;inset:0;background:rgba(22,21,19,.5);display:none;place-items:center;z-index:200;padding:20px}
.resmodal.open{display:grid}
.resmodal-box{background:#fff;max-width:460px;width:100%;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.25)}
.resmodal-h{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);font:700 16px 'Lora',serif}
.resmodal-x{background:none;border:none;font-size:24px;line-height:1;color:var(--grey);cursor:pointer}
.resmodal-x:hover{color:var(--red)}
.resmodal-b{padding:8px}
.reslink{display:flex;flex-direction:column;padding:11px 14px;border-bottom:1px solid var(--line);position:relative;text-decoration:none}
.reslink:last-child{border-bottom:none}
.reslink:hover{background:var(--cream)}
.reslink .rl-label{font:600 14px 'Lora',serif;color:var(--ink)}
.reslink:hover .rl-label{color:var(--red)}
.reslink .rl-desc{font:400 12px 'Public Sans',sans-serif;color:var(--grey);margin-top:2px;padding-right:20px}
.reslink .rl-ic{position:absolute;right:14px;top:13px;color:var(--red);font-size:12px}

/* ============================================================
   Phase 9 — Mobile responsiveness
   ============================================================ */

/* hamburger toggle — hidden on desktop */
/* hamburger toggle — hidden on desktop, shown only in the mobile query below */
.nav-toggle{display:none}
.pnav .nav-toggle{align-items:center;gap:9px;background:none;border:none;cursor:pointer;font:700 12px 'Public Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);padding:12px 24px;width:100%;justify-content:flex-start}
.nav-toggle .bars{position:relative;display:inline-block;width:20px;height:2px;background:var(--red);transition:background 0s}
.nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--red)}
.nav-toggle .bars::before{top:-6px}
.nav-toggle .bars::after{top:6px}

/* Tablet: tighten the mega-menu spacing */
@media(max-width:960px){
  .wrapx,.masthead,.pnav,.lead,.sec,.classif .in,.res .in,.pfoot .in,.ustrip .in,.hero-carousel,.secbar{padding-left:16px;padding-right:16px}
  .pnav .in{gap:18px}
  .masthead .name{font-size:38px}
  .lead .grid{gap:22px}
}

/* Phone: stack everything, switch nav to a tap-driven panel */
@media(max-width:720px){
  /* utility strip */
  .ustrip .in{flex-wrap:wrap;gap:8px 14px;font-size:10px;padding:7px 16px}
  .ustrip .sp{margin-left:auto;gap:12px}

  /* masthead */
  .masthead{padding:18px 16px 0}
  .masthead .row{flex-direction:column;gap:8px}
  .masthead img{height:44px}
  .masthead .name{font-size:32px;letter-spacing:.01em}
  .masthead .sub{font-size:9px;letter-spacing:.2em}
  .dateline{flex-direction:column;gap:3px;text-align:center;font-size:9.5px;margin-top:14px;padding:8px 0}
  .dateline .r{margin-left:0}

  /* NAV → hamburger panel */
  .nav-toggle{display:flex}
  .pnav .in{display:none;flex-direction:column;align-items:stretch;gap:0;padding:0;border-bottom:none}
  .pnav .in.open{display:flex;border-bottom:1px solid var(--line)}
  .pnav .in > a,.pnav .drop > a{width:100%;text-align:left;padding:13px 20px;border-top:1px solid var(--line);letter-spacing:.06em}
  .pnav a.on{border-bottom:none;background:var(--cream)}
  .pnav .drop{position:static}
  .pnav .drop > a{display:flex;justify-content:space-between;align-items:center}
  .pnav .drop > a i{transition:transform .2s}
  .pnav .drop.open > a i{transform:rotate(180deg)}
  /* submenu becomes an inline accordion */
  .pnav .drop::after{display:none!important}
  .pnav .drop .menu{position:static;transform:none;min-width:0;padding-top:0;display:none}
  .pnav .drop.open .menu{display:block}
  .pnav .drop .menu .menu-inner{border:none;box-shadow:none;background:var(--cream);padding:0}
  .pnav .drop .menu a{padding:11px 20px 11px 36px;border-top:1px solid var(--line);font-size:13px}

  /* secbar */
  .secbar .in{gap:12px 18px}
  .secbar a{font-size:13px}

  /* hero carousel */
  .hero-slide img,.hero-slide .banner-ph{height:220px}
  .hero-slide .cap h2{font-size:19px}
  .hero-slide .cap p{font-size:12px}
  .hero-arrow{width:32px;height:32px;font-size:14px}
  .hero-arrow.prev{left:16px}.hero-arrow.next{right:16px}

  /* lead */
  .lead .grid{grid-template-columns:1fr;gap:14px}
  .lead figure img,.lead .lead-ph{height:240px}
  .lead h1{font-size:26px}
  .lead-solo h1{font-size:24px}
  .lead .grid .lead-clamp{-webkit-line-clamp:unset}

  /* section headings + grids all single column */
  .sec{padding:20px 16px}
  .sech h2,.svc-h,.cul-head h2,.res h2,.cul4 + *,.classif .lbl{font-size:19px}
  .news3,.ads4,.cul4,.res4,.gal,.youth3,.twoup,.help2,.committee-grid{grid-template-columns:1fr!important}
  .news3 article{border-right:none;padding:14px 0;border-bottom:1px solid var(--line)}
  .news3 article:last-child{border-bottom:none}
  .ads-scroll .ad{flex-basis:78%}
  .committee-grid{grid-template-columns:1fr 1fr!important;gap:16px}
  .gal{grid-template-columns:1fr 1fr}
  .caltable,.emg-box{max-width:100%!important}
  .twoup{gap:24px}

  /* services grouped */
  .svc-item{flex-direction:column;gap:1px;align-items:flex-start}
  .svc-item .mt{text-align:left}

  /* footer stacks */
  .pfoot .in{flex-direction:column;gap:22px}
  .pfoot .brand{max-width:100%}

  /* resource modal fits small screens */
  .resmodal{padding:14px}
  .resmodal-box{max-width:100%}

  /* article/detail pages */
  .article h1{font-size:25px}
}

/* very small phones */
@media(max-width:400px){
  .masthead .name{font-size:27px}
  .gal{grid-template-columns:1fr}
  .committee-grid{grid-template-columns:1fr!important}
  .ustrip .in{font-size:9px}
}

/* Phase 10: news listing page — horizontal rows, no vertical separators */
.news-list{display:flex;flex-direction:column}
.news-list article{padding:16px 0;border-bottom:1px solid var(--line)}
.news-list article:last-child{border-bottom:none}
.news-list .tag{font:700 10px 'Public Sans',sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--red)}
.news-list h3{font:600 20px/1.3 'Lora',serif;margin:7px 0}
.news-list h3 a{color:var(--ink)}
.news-list h3 a:hover{color:var(--red)}
.news-list p{font:400 14px/1.6 'Public Sans',sans-serif;color:var(--ink2);margin:0 0 8px;max-width:760px}
.news-list .readmore{font:600 11px 'Public Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}

/* Phase 10: community services category cards + contacts pop-up */
.svc-cats{display:flex;flex-direction:column;gap:10px}
.svc-cat-card{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--line);background:#fff;text-decoration:none;transition:border-color .15s,background .15s}
.svc-cat-card:hover{border-color:var(--red);background:var(--cream)}
.svc-cc-h{display:flex;align-items:center;gap:9px;font:600 15px 'Lora',serif;color:var(--ink)}
.svc-cat-card:hover .svc-cc-h{color:var(--red)}
.svc-cc-h i{color:var(--red);font-size:15px}
.svc-cc-n{font:700 9px 'Public Sans',sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--red);border:1px solid var(--red);border-radius:2px;padding:2px 7px;white-space:nowrap}
/* contact rows inside the pop-up */
.svc-contact{padding:12px 14px;border-bottom:1px solid var(--line)}
.svc-contact:last-child{border-bottom:none}
.sc-name{font:600 15px 'Lora',serif;color:var(--ink)}
.sc-detail{font:400 12.5px 'Public Sans',sans-serif;color:var(--grey);margin-top:2px}
.sc-meta{display:flex;align-items:center;gap:16px;margin-top:7px;flex-wrap:wrap}
.sc-phone{font:600 13px 'Public Sans',sans-serif;color:var(--ink);text-decoration:none}
.sc-phone i{color:var(--red);font-size:12px;margin-right:3px}
.sc-phone:hover{color:var(--red)}
.sc-link{font:700 10px 'Public Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--red);text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.sc-link:hover{text-decoration:underline}

/* Phase 10: ads clickable only when linked */
.classif .ad{cursor:default}
.classif a.ad-link{cursor:pointer}

/* Phase 11: content-body list rendering (About/President/Aims/Committee etc.)
   Ensures bullets/numbers are indented and aligned, and that bullet lists show
   discs (not numbers) even if any stray data-list markup slips through. */
.contentpage .body ul,.contentpage .body ol,.article .abody ul,.article .abody ol{margin:0 0 14px;padding-left:26px}
.contentpage .body ul,.article .abody ul{list-style:disc}
.contentpage .body ol,.article .abody ol{list-style:decimal}
.contentpage .body li,.article .abody li{margin:4px 0;padding-left:4px;line-height:1.7}
.contentpage .body ul ul,.article .abody ul ul{list-style:circle}
/* Honour Quill's per-item marker if data-list survived anywhere */
.contentpage .body li[data-list="bullet"],.article .abody li[data-list="bullet"]{list-style:disc}
.contentpage .body li[data-list="ordered"],.article .abody li[data-list="ordered"]{list-style:decimal}