:root{--navy:#1f2b4d;--blue:#3d4f86;--blue-d:#2c3a6b;--gold:#f5c518;--ink:#1c2442;--mute:#5b6483;--bg:#f3f5fa;--line:#d5daea;--serif:Georgia,"Times New Roman",serif;--sans:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
*{box-sizing:border-box}
body{margin:0;font:16px/1.55 var(--sans);color:var(--ink);background:var(--bg)}
a{color:var(--blue-d)}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.strip{height:10px;background:var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10'%3E%3Cpath d='M8 1.5 11 5 8 8.5 5 5z' fill='%23f5c518'/%3E%3C/svg%3E") repeat-x}
.masthead{background:#fff}
.masthead-in{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink)}
.brand .seal{width:52px;height:52px;border-radius:50%;object-fit:cover}
.brand small{display:block;font-size:12px;color:var(--mute)}
.brand strong{font:700 22px/1.1 var(--serif);color:var(--blue-d)}
.search{display:flex;gap:6px}
.search input{width:230px;max-width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:3px;font:inherit;font-size:14px}
.search button,.btn{background:var(--blue);color:#fff;border:0;border-radius:3px;padding:9px 16px;font:600 14px var(--sans);text-decoration:none;display:inline-block;cursor:pointer}
.btn.gold{background:var(--gold);color:var(--navy)}
.search button:hover,.btn:hover{background:var(--blue-d)}.btn.gold:hover{background:#ffd43b}
.mainnav{background:var(--blue)}
.mainnav .wrap{display:flex;flex-wrap:wrap}
.mainnav a{color:#e8ecfa;text-decoration:none;padding:12px 16px;font-size:14px;border-bottom:3px solid transparent}
.mainnav a:hover{color:#fff}
.mainnav a.on{color:#fff;border-bottom-color:var(--gold)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.hero{background:var(--blue-d);color:#fff}
.hero-in{display:grid;grid-template-columns:1fr 1.15fr;align-items:stretch;padding:0}
.hero-text{padding:36px 32px 36px 20px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:14px}
.hero h1{font:700 34px/1.15 var(--serif);margin:0}
.hero p{margin:0;color:#d7ddf3;max-width:46ch}
.hero-img img{width:100%;height:100%;min-height:300px;object-fit:cover}
.meta{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--mute)}
.meta b{font-weight:700;color:var(--blue-d)}
.hero .meta{color:#c4ccea}
.chip{background:var(--gold);color:var(--navy)!important;padding:2px 9px;border-radius:10px}
.block{padding-top:34px;padding-bottom:12px}
.block-head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--blue);margin-bottom:18px}
.block-head h2,.sect{font:700 22px var(--serif);margin:0 0 6px;color:var(--blue-d)}
.block-head a{font-size:13px;font-weight:600}
.grid3{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:24px}
.card .card-img{display:block;aspect-ratio:16/10;overflow:hidden;background:#dfe4f2}
.card img{width:100%;height:100%;object-fit:cover}
.noimg{width:100%;height:100%;min-height:120px;display:grid;place-items:center;background:var(--blue-d);color:var(--gold);font:700 28px var(--serif);aspect-ratio:16/10}
.card .meta{margin:10px 0 2px}
.card h3{font:700 18px/1.25 var(--serif);margin:0 0 6px}
.card h3 a{text-decoration:none;color:var(--blue-d)}.card h3 a:hover{text-decoration:underline}
.card p{margin:0;font-size:14px;color:var(--mute)}
.president{display:flex;gap:28px;align-items:center;flex-wrap:wrap}
.president img{width:240px;aspect-ratio:1;object-fit:cover;border:2px solid var(--gold)}
.president h2{font:700 24px var(--serif);margin:0;color:var(--blue-d)}
.role{font-weight:700;font-size:14px;margin:2px 0 10px}
.fact{border-top:3px solid var(--gold);padding-top:10px}
.fact h3{font:700 18px/1.25 var(--serif);margin:0 0 6px;color:var(--blue-d)}
.fact p{margin:0 0 6px;font-size:14px;color:var(--mute)}
.fact small{font-weight:700;font-size:12px}
.docs{list-style:none;margin:0;padding:0}
.docs li{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line)}
.docs div{flex:1}.docs small{display:block;color:var(--mute)}
.docs a{font-weight:700;font-size:14px}
.pdf{background:var(--navy);color:var(--gold);font:700 10px var(--sans);padding:9px 6px;border-radius:2px}
.ptitle{font:700 34px var(--serif);color:var(--blue-d);margin:0 0 4px}
.sub{color:var(--mute);margin:0 0 14px}
.chips{display:flex;gap:8px;margin:0 0 22px;flex-wrap:wrap}
.chip-link{padding:5px 14px;border-radius:14px;text-decoration:none;font-size:13px;font-weight:600;color:var(--blue-d)}
.chip-link.on{background:var(--blue);color:#fff}
.empty{color:var(--mute);padding:24px 0}
.narrow{max-width:760px}
.article{max-width:760px;padding-top:26px;padding-bottom:30px}
.crumbs{font-size:13px;color:var(--mute);margin-bottom:12px}
.article h1{font:700 36px/1.15 var(--serif);color:var(--blue-d);margin:10px 0 18px}
.lead{width:100%;margin:0 0 20px}
.prose{font:18px/1.7 var(--serif);text-align:justify;hyphens:auto}
.prose img{margin:18px 0}
.prose blockquote{border-left:4px solid var(--gold);margin:18px 0;padding:2px 18px;color:var(--mute)}
.prose h2,.prose h3{font-family:var(--serif);color:var(--blue-d)}
.attach{display:flex;gap:10px;align-items:center;margin:24px 0}
.officer img,.officer .noimg{aspect-ratio:4/5;width:100%;object-fit:cover;margin-bottom:10px}
.officer h3{font:700 18px var(--serif);margin:0;color:var(--blue-d)}
.contact{display:grid;grid-template-columns:110px 1fr;gap:8px 16px}.contact dt{font-weight:700}.contact dd{margin:0}
.foot{background:var(--navy);color:#cdd5f0;margin-top:44px}
.foot-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:30px;padding-top:26px;padding-bottom:30px}
.foot-brand{display:flex;gap:14px}.foot-brand .seal{width:48px;height:48px;border-radius:50%;flex:none}
.foot-brand strong{display:block;color:#fff;font-family:var(--serif)}.foot-brand span{font-size:13px}
.foot h4{margin:0 0 8px;color:#fff;font-family:var(--serif)}
.foot a{display:block;color:#cdd5f0;font-size:14px;padding:2px 0}
@media(max-width:760px){.hero-in{grid-template-columns:1fr}.hero-text{padding:26px 20px}.hero h1{font-size:27px}.hero-img{order:-1}.hero-img img{min-height:200px}.foot-in{grid-template-columns:1fr}.ptitle,.article h1{font-size:28px}}

/* News cards: visible frame so each story is clearly separate */
.card{display:flex;flex-direction:column;background:#fff;border:1px solid #b9c2de;border-bottom:4px solid var(--gold);border-radius:4px;overflow:hidden;box-shadow:0 2px 8px rgba(31,43,77,.10);transition:transform .2s,box-shadow .2s,border-color .2s}
.card:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 8px 18px rgba(31,43,77,.18)}
.card .meta{margin:12px 16px 2px}
.card h3{margin:0 16px 6px}
.card p{margin:0 16px 16px}

/* Formal justified text for published articles and summaries */
.prose p,.prose li,.prose blockquote{text-align:justify;hyphens:auto}
.card p,.hero p,.fact p,.officer p{text-align:justify;hyphens:auto}

/* Municipalities */
.muni-filter{display:block;width:100%;max-width:360px;margin:0 0 20px;padding:10px 12px;border:1px solid var(--line);border-radius:3px;font:inherit;background:#fff}
.muni-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.muni-tile{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:#fff;border:1px solid #b9c2de;border-left:5px solid var(--line);border-radius:4px;text-decoration:none;color:var(--ink);box-shadow:0 2px 8px rgba(31,43,77,.08);transition:transform .2s,box-shadow .2s,border-color .2s}
.muni-tile strong{font:700 17px var(--serif);color:var(--blue-d)}
.muni-tile small{color:var(--mute);font-size:12px}
.muni-tile span{margin-top:6px;font-size:13px;color:var(--mute)}
.muni-tile.has{border-left-color:var(--gold)}.muni-tile.has span{color:var(--blue-d);font-weight:700}
.muni-tile:hover{transform:translateY(-3px);border-color:var(--blue);box-shadow:0 8px 18px rgba(31,43,77,.18)}
.muni-link{font-weight:700;color:var(--blue-d)}
.crumbs{font-size:13px;color:var(--mute);margin-bottom:12px}
[hidden]{display:none!important}

/* Soft blue shadow along the bottom of photos */
.card-img,.lead,.prose img,.president img,.officer img,.officer .noimg,.hero-img{box-shadow:0 9px 12px -6px rgba(37,99,235,.55)}

/* Municipality logos */
.muni-tile{flex-direction:row;align-items:center;gap:14px}
.muni-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.mlogo{width:54px;height:54px;border-radius:50%;object-fit:cover;flex:none;background:#fff;border:2px solid var(--gold)}
.mlogo.ph{display:grid;place-items:center;background:var(--navy);color:var(--gold);font:700 22px var(--serif);border-color:var(--line)}
.mlogo.big{width:96px;height:96px;font-size:40px;border-width:3px}
.muni-head{display:flex;align-items:center;gap:20px;margin-bottom:6px;flex-wrap:wrap}
.muni-head .sub{margin:0}

.muni-links{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 26px}

/* Full-width layout: use the whole screen instead of a narrow centered column */
.wrap{max-width:none;padding-left:4vw;padding-right:4vw}
.article{max-width:900px;margin-left:auto;margin-right:auto}
.narrow{max-width:900px;margin-left:auto;margin-right:auto}
.hero .hero-in{padding:0}
.hero-text{padding:48px 40px 48px 4vw}
.hero-img img{min-height:420px}
.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.hero-text{padding:26px 4vw}.hero-img img{min-height:200px}}
@media(max-width:560px){.grid3{grid-template-columns:1fr}}
.card .card-img{aspect-ratio:16/9}

.muni-contact{max-width:640px;margin:0 0 28px;padding:16px 20px;background:#fff;border:1px solid #b9c2de;border-left:5px solid var(--gold);border-radius:4px;box-shadow:0 2px 8px rgba(31,43,77,.08)}
.muni-contact h2{font:700 18px var(--serif);color:var(--blue-d);margin:0 0 8px}
.muni-contact dl{display:grid;grid-template-columns:80px 1fr;gap:6px 14px;margin:0}
.muni-contact dt{font-weight:700;color:var(--navy)}.muni-contact dd{margin:0;overflow-wrap:anywhere}

/* Deeper blues and colored section bands (like the design mockup) */
:root{--navy:#0c1240;--blue:#18236b;--blue-d:#101a58;--line:#cdd4ea;--bg:#eef1f8}
.band{width:100%}
.band-tint{background:#e3e8f6;border-top:1px solid #cdd4ea;border-bottom:1px solid #cdd4ea}
.band-white{background:#fff}
.band .block{padding-top:38px;padding-bottom:42px}
.page-band{min-height:55vh}
.fact{background:#fff;border:1px solid var(--line);border-top:3px solid var(--gold);padding:14px 16px;border-radius:3px}
.foot{margin-top:0}
.hero{background:linear-gradient(110deg,#0c1240,#141d63 60%,#18236b)}

/* Compact banner and smaller news pictures */
.hero-in{min-height:0}
.hero-img{height:340px;overflow:hidden}
.hero-img img{width:100%;height:100%;min-height:0;object-fit:cover}
.hero-text{padding:34px 40px 34px 4vw}
.hero h1{font-size:30px}
.hero p{font-size:15px}
.card .card-img{aspect-ratio:auto;height:210px}
.card .noimg{aspect-ratio:auto;height:100%}
@media(max-width:760px){.hero-img{height:210px}.hero h1{font-size:25px}.card .card-img{height:190px}}

/* Photos fit completely inside their frame (nothing is cropped); a soft blurred copy fills the empty space */
.hero-img,.card .card-img{position:relative;background:var(--navy)}
.hero-img::before,.card .card-img::before{content:"";position:absolute;inset:-24px;background:var(--bg) center/cover;filter:blur(22px) brightness(.55)}
.hero .hero-img img,.card .card-img img{position:relative;object-fit:contain}
.card .noimg{position:relative}

/* The president and officer photos are shown in full (not cropped) */
.president img{width:auto;max-width:min(340px,100%);height:auto;max-height:460px;aspect-ratio:auto;object-fit:contain}
.officer img{aspect-ratio:auto;height:auto;max-height:520px;object-fit:contain}
.officer .noimg{aspect-ratio:auto;height:240px}
/* ===== Phone-only fixes (max 700px). Desktop is not affected. ===== */
@media(max-width:700px){
  .wrap{padding-left:16px;padding-right:16px}
  /* header */
  .masthead-in{gap:12px}
  .brand strong{font-size:20px}
  .search{width:100%}
  .search input{flex:1;width:auto;min-width:0}
  /* menu: one row, swipe sideways */
  .mainnav .wrap{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-left:0;padding-right:0}
  .mainnav .wrap::-webkit-scrollbar{display:none}
  .mainnav a{flex:none;white-space:nowrap;padding:12px 14px}
  /* hero */
  .hero-text{padding:22px 16px}
  /* sections */
  .band .block{padding-top:26px;padding-bottom:28px}
  .grid3{grid-template-columns:1fr;gap:18px}
  .president{flex-direction:column;align-items:flex-start;gap:16px}
  .president img{max-width:100%;max-height:380px}
  .docs li{flex-wrap:wrap;gap:10px}
  .attach{flex-wrap:wrap}
  /* easier reading: left-aligned text instead of justified */
  .prose,.prose p,.prose li,.prose blockquote,.card p,.hero p,.fact p,.officer p{text-align:left;hyphens:none}
  .prose{font-size:17px;overflow-wrap:break-word}
  .article{padding-top:18px}
  .article h1,.ptitle{font-size:26px}
  /* municipalities and contact */
  .muni-grid{grid-template-columns:1fr}
  .muni-head .mlogo.big{width:72px;height:72px;font-size:30px}
  .muni-contact{max-width:100%;padding:14px 16px}
  .muni-contact dl{grid-template-columns:1fr;gap:2px 0}
  .muni-contact dd{margin-bottom:8px}
  .contact{grid-template-columns:1fr;gap:2px 0}
  .contact dd{margin-bottom:10px}
  /* footer */
  .foot-in{gap:20px}
}