:root {
--sea: #3369ad;
--sea-deep: #2962a9;
--panel: #4979b6;
--ink-on-blue: #ffffff;
--soft-on-blue: #d9dfff;
--pale: #e7ebff;
--hover-gold: #ffff00;
--box-title: #06418b;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--sea); color: var(--soft-on-blue);
font-family: Tahoma, Verdana, system-ui, sans-serif; font-size: 15px; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
.wrap { max-width: 960px; margin-inline: auto; padding-inline: 1rem; }
a { color: #fff; }
a:hover { color: var(--hover-gold); }
.site-head { padding-top: 1.2rem; }
.head-art img { border-radius: 8px; width: 100%; }
.site-nav { display: flex; flex-wrap: wrap; gap: .3rem .5rem; margin: .8rem 0 1.4rem; }
.site-nav a { background: var(--panel); color: #fff; text-decoration: none;
padding: .45rem .9rem; border-radius: 6px; font-size: .95rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { background: #fff; color: var(--box-title); }
.nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nav-burger { display: none; }
@media (max-width: 720px) {
.nav-burger { display: flex; align-items: center; gap: .7rem; min-height: 44px; margin-top: .8rem; padding: 0 .9rem; background: var(--panel); color: #fff; border-radius: 6px; font-size: .95rem; cursor: pointer; }
.nav-burger span { position: relative; display: block; width: 20px; height: 2px; background: currentColor; transition: background .2s; }
.nav-burger span::before, .nav-burger span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: currentColor; transition: transform .2s; }
.nav-burger span::before { top: -6px; }
.nav-burger span::after { top: 6px; }
.nav-toggle:checked ~ .nav-burger span { background: transparent; }
.nav-toggle:checked ~ .nav-burger span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle:checked ~ .nav-burger span::after { transform: translateY(-6px) rotate(-45deg); }
.nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid #fff; outline-offset: 2px; }
.site-nav { display: none; flex-direction: column; gap: .3rem; margin: .4rem 0 1.2rem; }
.nav-toggle:checked ~ .site-nav { display: flex; }
.site-nav a { padding: .7rem .9rem; }
}
main { display: block; }
h1 { font-size: clamp(1.25rem, 2.8vw, 1.6rem); color: var(--pale);
text-shadow: 0.08em 0.08em 0.07em #000856; font-weight: 600; margin: 0 0 1rem; }
h2 { font-size: 1.2rem; color: var(--pale); text-shadow: 0.08em 0.08em 0.07em #000856; margin: 1.6rem 0 .8rem; }
h3 { font-size: 1.05rem; color: var(--pale); margin: 1.3rem 0 .5rem; }
p { margin: 0 0 .9rem; }
.prose { max-width: 660px; text-align: justify; }
.range-links { display: flex; gap: 1.4rem; flex-wrap: wrap; margin: 1rem 0; }
.range-links figure { margin: 0; }
.range-links img { border-radius: 6px; }
.range-links figcaption { text-align: center; margin-top: .4rem; font-size: .92rem; }
.about-box { background: #fff; color: #333; border-radius: 8px; padding: 1rem 1.1rem; max-width: 300px; }
.about-box h4 { margin: 0 0 .5rem; color: var(--box-title); font-style: italic; font-size: 1rem; text-align: right; }
.about-box p { color: #333; font-size: .88rem; text-align: justify; margin: 0; }
.page-grid { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 820px) { .page-grid { grid-template-columns: 1fr 300px; } }
.side-col { display: grid; gap: 1.4rem; }
.side-col figure { margin: 0; }
.side-col figcaption { font-size: .88rem; margin-top: .35rem; }
.layered { position: relative; margin: 1rem 0; max-width: 100%; overflow-x: auto; }
.layered img { max-width: none; }
.catalogue { display: grid; gap: .4rem 1.4rem; }
.cat-item { margin: 0 0 1.2rem; }
.cat-item img { border-radius: 6px; }
.gallery-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.gallery-grid figure { margin: 0; }
.gallery-grid img { border-radius: 6px; width: 100%; }
.gallery-grid figcaption { font-size: .85rem; margin-top: .3rem; }
.contact-list { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.contact-list li { margin-bottom: .5rem; }
.email-img { display: inline-block; vertical-align: middle; }
.site-foot { background: var(--panel); margin-top: 2.4rem; padding: 1.2rem 0 1.4rem; text-align: center; }
.site-foot a { text-decoration: none; margin: 0 .35rem; }
.site-foot a:hover { color: #00008b; text-decoration: underline; }
.site-foot .fine { font-size: .8rem; margin: .5rem 0 0; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}