/* Shared visual system for the homepage and article page. */
:root{--green:#175442;--deep:#123e32;--gold:#efbd2b;--ink:#18332b;--muted:#66756d;--cream:#f8f7f2;--border:#e2e8e1;--radius-panel:12px;--radius-button:8px}
body{color:var(--ink)}
h2{font-size:32px;line-height:1.2;letter-spacing:-.8px}
h2:after{width:44px;height:3px;margin-top:11px;background:var(--gold)}
.section-heading{margin-bottom:24px}
header.site-header{background:var(--green)}
.topbar{background:#123e32}
.site-header .brand img,footer .brand img{clip-path:ellipse(48% 48% at 50% 50%)}
.site-header .brand strong{font-weight:700;letter-spacing:.1px}
.hero{gap:16px;margin-top:24px}
.feature,.paper-panel,.announcements,.about,.card,.sidebar-panel{border-radius:var(--radius-panel)}
.feature{isolation:isolate}
.feature h1{font-size:clamp(38px,4.2vw,58px);line-height:1.06;letter-spacing:-1.7px;max-width:620px}
.feature p{font-size:16px;line-height:1.55;max-width:600px}
.feature-content{bottom:28px}
.feature:after{background:linear-gradient(180deg,#123e3205 20%,#123e3266 52%,#123e32f5 100%)}
.paper-panel{background:var(--cream);padding:28px}
.paper-panel h2{font-size:32px}
.paper-panel p{font-size:14px;line-height:1.6;color:var(--muted)}
.button{border-radius:var(--radius-button);min-height:44px;padding:12px 22px;font-size:14px;font-weight:700;box-shadow:none;background:var(--gold);border-color:var(--gold);color:var(--ink)}
.button:hover,.button:focus-visible{background:#f4ca4b;border-color:#f4ca4b;box-shadow:0 6px 14px #18332b18;transform:translateY(-2px)}
.button.green,.article-actions .back-news{background:transparent;border:1px solid var(--green);color:var(--green)}
.button.green:hover,.button.green:focus-visible,.article-actions .back-news:hover,.article-actions .back-news:focus-visible{background:var(--green);border-color:var(--green);color:white}
.ticker{margin-top:28px;margin-bottom:56px;border-radius:var(--radius-button);background:var(--cream);border-color:var(--border);height:42px}
.ticker strong{background:var(--gold)}
.news-carousel .news-grid{gap:24px}
.news-carousel .card{flex-basis:calc((100% - 48px)/3);border-color:var(--border);box-shadow:0 2px 8px #18332b04}
.card-image{height:220px}
.card-photo{border-radius:11px 11px 0 0}
.news-grid .card-image img{clip-path:none}
.card-body{padding:24px 18px 18px}
.card h3{font-size:20px;line-height:1.35;letter-spacing:-.4px;font-weight:700}
.news-grid .card p,.news-grid .card:hover p,.news-grid .card:focus-within p{font-size:14px;line-height:1.65;color:var(--ink);margin:8px 0 18px}
.card-meta,.text-link{font-size:12px}
.text-link{font-weight:700}
.news-grid .card:hover,.news-grid .card:focus-within{transform:translateY(-5px);box-shadow:0 12px 24px #18332b12}
.card-image .tag{font-size:11px;background:#f8e6a5;color:var(--ink);padding:5px 12px}
.news-controls{margin-top:24px}
.info-grid{gap:24px;margin-top:56px;margin-bottom:56px}
.announcements{padding:24px;background:var(--cream)}
.announcements h2,.about h2{font-size:30px}
.notice{border-color:var(--border);border-radius:var(--radius-button);padding:10px 12px;gap:20px;margin-top:10px}
.notice h3{font-size:16px;line-height:1.4}
.notice p{font-size:14px;line-height:1.55;color:var(--muted)}
.notice time{background:#f1eddf}
.about{padding:26px;background:linear-gradient(100deg,#175442f5,#175442df),url('assets/waterfront.jpg') center/cover}
.about .intro{font-size:14px;line-height:1.6}
.about p{font-size:13px;line-height:1.7}
.services{margin:0 0 56px}
.service-grid{margin-top:26px;gap:0}
.service{gap:16px;padding-right:20px}
.service+.service{padding-left:24px;border-color:var(--border)}
.service h3{font-size:16px;line-height:1.4;margin-top:2px}
.service p{font-size:14px;line-height:1.6;color:var(--muted);margin:6px 0 12px}
.service-icon{background:#f1eddf}
footer{background:linear-gradient(110deg,#175442fa,#175442ef),url('assets/waterfront.jpg') center/cover;padding-top:48px;border-bottom:6px solid var(--gold)}
footer:before{opacity:.045}
.footer-columns{gap:32px}
.footer-links li{font-size:13px;line-height:1.6}
.footer-column h2{font-size:15px;letter-spacing:.6px}
.footer-bottom{margin-top:32px;padding-top:22px}
.scroll-top{box-shadow:0 5px 16px #18332b26}
.reading-article figure img{border-radius:var(--radius-panel)}
.sidebar-panel{background:var(--cream);border:1px solid var(--border)}
.share-button{border-radius:var(--radius-button)}
@media(min-width:681px) and (max-width:900px){.news-carousel .card{flex-basis:calc((100% - 24px)/2)}}
@media(max-width:1100px){.service-grid{row-gap:28px}}
@media(max-width:850px){.announcements,.about{padding:20px}.info-grid{gap:16px}.notice{gap:12px}.service+.service{padding-left:18px}}
@media(max-width:680px){h2,.paper-panel h2{font-size:28px}.hero{gap:16px;margin-top:18px}.feature h1{font-size:40px;letter-spacing:-1px}.feature-content{bottom:24px}.paper-panel{padding:24px}.ticker{margin-bottom:40px}.news-carousel .card{flex-basis:100%}.info-grid{margin-top:40px;margin-bottom:40px;gap:24px}.services{margin-bottom:40px}.section-heading{margin-bottom:20px}.announcements h2,.about h2{font-size:28px}.service+.service{padding-left:0}.card-image{height:230px}.footer-columns{gap:30px}}
@media(prefers-reduced-motion:reduce){.button:hover,.button:focus-visible,.news-grid .card:hover,.news-grid .card:focus-within{transform:none}}

/* Balanced spacing around updates and inside the About panel. */
.ticker{margin-top:28px;margin-bottom:28px}
.about{display:flex;flex-direction:column;padding-top:26px;padding-bottom:26px}
.about .about-extra{margin-top:14px;margin-bottom:20px}
.about .button{align-self:flex-start;margin-top:auto}
@media(max-width:850px){.about{padding-top:20px;padding-bottom:20px}}
@media(max-width:680px){.ticker{margin-top:24px;margin-bottom:24px}}

/* Keep mobile hero text and carousel controls in separate rows. */
@media(max-width:680px){
 .feature{min-height:500px}
 .feature-content{left:24px;right:24px;bottom:24px}
 .feature h1{font-size:clamp(32px,8.5vw,40px);line-height:1.08;margin-top:0;margin-bottom:12px}
 .feature p{font-size:15px;line-height:1.55}
 .feature .button{margin-top:16px;min-height:44px;padding:12px 20px}
 .feature .slider-controls{margin-left:0;margin-top:20px;display:flex;justify-content:space-between;align-items:center;gap:16px}
 .feature .slider-controls>div:last-child{display:flex;gap:10px}
 .feature .round{margin-left:0;width:36px;height:36px}
 .feature .dots{gap:14px;padding-left:4px}
}
@media(max-width:360px){.feature-content{left:20px;right:20px}.feature{min-height:480px}}

/* Edge-to-edge hero banner on mobile. */
@media(max-width:680px){
 .hero{padding-left:0;padding-right:0;margin-top:0}
 .feature{border-radius:0;width:100%}
 .hero .paper-panel{margin-left:18px;margin-right:18px}
}