/* Shared readable proportions and responsive identity/navigation. */
:root { --page-width: 1200px; }
html { scroll-padding-top: 110px; }
body { font-size: 16px; line-height: 1.7; }
.container { max-width: var(--page-width); padding-inline: clamp(20px, 4vw, 40px); }
.main-header { position: sticky; background: #fff; }
.header-container { max-width: 1520px; height: auto; min-height: 96px; padding: 12px 32px; gap: 24px; flex-wrap: nowrap; }
.header-logo { flex: 0 0 auto; gap: 12px; }
.logo-img { width: 56px; height: 56px; flex: 0 0 56px; }
.logo-text { gap: 4px; }
.logo-name { display: flex; flex-direction: column; white-space: nowrap; line-height: 1.2; }
.logo-prefix { font-family: var(--font-sans); font-size: 12px; font-weight: 600; letter-spacing: .04em; }
.logo-title { font-size: 23px; font-weight: 400; }
.logo-sub { white-space: nowrap; font-size: 10px; line-height: 1.4; letter-spacing: 1.4px; color: #03658f; }
.header-nav { position: static; order: initial; width: auto; gap: 4px; flex: 1 1 auto; justify-content: center; }
.header-link { font-size: 14px; line-height: 1.4; padding: 12px 9px; white-space: nowrap; }
.header-link[aria-current="page"] { color: #03658f; }
.header-actions { flex: 0 0 auto; }
.header-donate { font-size: 14px; padding: 11px 20px; box-shadow: 0 3px 12px #f59e0b26; }
.inner-page main { padding-top: 0; }
.hero-banner-full { min-height: 640px; padding: 80px 0; }
.hero-title { font-size: clamp(2.25rem, 4.5vw, 3.75rem); }
.merchandise-intro { padding: clamp(40px, 5vw, 64px) 0; }
.merchandise-intro h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.15; margin: 12px 0 20px; }
.merchandise-lead { max-width: 680px; font-size: clamp(1rem, 1.4vw, 1.125rem); }
.merchandise-section > .container { max-width: var(--page-width); }
.shop-grid { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 36px 24px; }
.shop-description, .shop-album-link { font-size: 14px; }
.shop-photo-count { font-size: 12px; }
.heading-serif { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; }
.heading-serif-sm { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.25; }
.footer-logo { align-items: center; line-height: 1.4; }
@media (min-width: 1101px) and (max-width: 1399px) {
 .header-container { flex-wrap: wrap; gap: 8px 24px; padding-block: 14px 8px; }
 .header-nav { order: 3; flex-basis: 100%; justify-content: center; }
 .header-actions { margin-left: auto; }
 html { scroll-padding-top: 160px; }
}
@media (max-width: 1100px) {
 .header-container { min-height: 88px; padding: 12px 24px; }
 .header-nav { position: fixed; top: 88px; right: -100%; width: min(360px,100%); height: calc(100dvh - 88px); padding: 20px 24px 32px; background: #fff; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; overflow-y: auto; box-shadow: -8px 12px 24px #0f172a15; transition: right .25s ease; }
 .header-nav.active { right: 0; }
 .header-nav .header-link { width: 100%; font-size: 16px; padding: 13px 0; border-bottom: 1px solid #e2e8f0; }
 .burger-menu { display: block; }
 .header-donate { display: inline-flex; }
 .shop-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
 .hero-banner-full { min-height: 520px; padding: 64px 0; }
}
@media (max-width: 650px) {
 .header-container { padding-inline: 16px; gap: 12px; }
 .logo-img { width: 48px; height: 48px; flex-basis: 48px; }
 .logo-title { font-size: 21px; }
 .logo-prefix { font-size: 11px; }
 .logo-sub { font-size: 9px; letter-spacing: 1.2px; }
 .header-donate { display: none; }
 .shop-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 28px 16px; }
 .shop-card h3 { font-size: 16px; }
 .shop-description { font-size: 14px; }
 .hero-banner-full { min-height: 480px; padding: 48px 0; }
 .section { padding-block: 48px; }
}
@media (max-width: 359px) {
 .header-logo { gap: 8px; }
 .logo-title { font-size: 19px; }
 .shop-grid { grid-template-columns: 1fr; }
}