:root { color-scheme: light; --red: #a51c30; --blue: #183e63; --ink: #26313a; --muted: #54616b; --line: #d8dfe4; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: #fff; font: 16px/1.7 Georgia, serif; }
a { color: var(--blue); text-underline-offset: 3px; overflow-wrap: anywhere; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }
::selection { color: #fff; background: var(--blue); }
.wrap { width: calc(100% - 48px); max-width: 1120px; margin-inline: auto; }
.site-header { border-top: 5px solid var(--red); border-bottom: 1px solid var(--line); }
.identity { display: flex; align-items: center; gap: 32px; padding-block: 24px; }
.identity img { display: block; max-width: 100%; height: auto; }
.brand { font-size: clamp(26px, 4vw, 42px); line-height: 1.2; color: var(--red); font-weight: bold; text-decoration: none; }
.identity p { margin: 8px 0 0; color: var(--muted); }
.navigation { display: flex; flex-wrap: wrap; gap: 0 24px; }
.navigation a { display: block; padding: 12px 0; text-decoration: none; font: 600 15px/1.5 Arial, sans-serif; border-bottom: 3px solid transparent; }
.navigation a[aria-current] { color: var(--red); border-bottom-color: var(--red); }
main { padding-block: 44px 64px; min-height: 50vh; }
h1 { font-size: clamp(28px,4vw,38px); line-height: 1.25; margin: 0 0 32px; font-weight: normal; color: var(--blue); }
.page-content { overflow-wrap: anywhere; }
.page-content p { margin: 0 0 20px; max-width: 75ch; }
.page-content img { max-width: 100%; height: auto; vertical-align: middle; }
.page-content table { width: 100%; max-width: 100%; border-collapse: collapse; table-layout: fixed; }
.page-content td { padding: 8px 14px 8px 0; vertical-align: top; }
.page-content ul { padding-left: 24px; }
.page-content hr { border: 0; border-top: 1px solid var(--line); margin-block: 24px; }
.page-content iframe { display: block; border: 1px solid var(--line); width: 100%; min-height: 600px; }
.photo-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
.photo-grid figure { margin: 0; }
.photo-grid img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #f1f4f6; }
.albums img { width: 180px; max-width: 100%; }
.album-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 36px 24px; }
.album-grid article { min-width: 0; }
.album-grid img { display: block; margin-bottom: 8px; }
.home-intro { display: grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr); gap: 40px; align-items: start; }
.home-intro figure { margin: 0; }
.home-intro img { display: block; width: 100%; }
.home-intro figcaption { margin-top: 8px; font-size: 14px; color: var(--muted); }
.troop-logo { display: block; margin-top: 24px; }
.page-content p > img { display: block; margin-bottom: 16px; }
footer { background: #f1f4f6; border-top: 1px solid var(--line); padding-block: 28px; color: var(--muted); }
footer p { margin: 0 0 16px; }
footer nav { display: flex; flex-wrap: wrap; gap: 10px 24px; font: 14px/1.6 Arial,sans-serif; }
.scout-law { max-width: 85ch; font-size: 14px; margin: 24px 0 0; }
.skip-link { position: absolute; left: 16px; top: -100px; background: #fff; padding: 10px; }
.skip-link:focus { top: 12px; }
@media(max-width:700px) {
 .identity { gap: 18px; }
 .identity img { width: 100px; }
 .identity p { font-size: 14px; }
 .navigation { gap: 0 20px; }
 .navigation a { padding-block: 10px; }
 main { padding-block: 30px 44px; }
 .page-content table, .page-content tbody, .page-content tr, .page-content td { display: block; width: 100%; }
 .page-content td { padding: 0; }
 .photo-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
 .home-intro { grid-template-columns: 1fr; gap: 16px; }
 .home-intro figure { max-width: 400px; }
 .album-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 16px; }
}
@media(max-width:400px) { .wrap { width: calc(100% - 32px); } .identity { align-items: flex-start; } .brand { font-size: 25px; } }