/* ===== 外觀主題：JISE（configuration 的 branding.theme = jise，見 BrandingBean） =====
   版面在 css/banner.css，這裡只放這本刊的配色與裝飾圖；版型在 banner.css 之後載入，蓋過那邊的預設色。
   底色是 CSS 漸層，img/brand/jise/banner-bg.svg 是透明底的裝飾圖（1400×120，2026-10-15 重繪，設計檔在 design/banner），
   靠右貼齊、高度撐滿：不論螢幕多寬裝飾都在右側，字標固定在左側。最上層再疊一段左側壓暗，字標底下一律乾淨。
   同一個資料夾還有 favicon.ico／favicon.svg／apple-touch-icon.png。
   新增一套主題：複製這支改成新主題名、換掉顏色，圖放 img/brand/新主題/（四個檔名照舊），再把 branding.theme 改成新主題名。 */
.banner {
    background:
        linear-gradient(90deg, rgba(6, 24, 46, 0.9) 0, rgba(6, 24, 46, 0.7) 470px, rgba(6, 24, 46, 0) 700px),
        url('../../img/brand/jise/banner-bg.svg') right center / auto 100% no-repeat,
        linear-gradient(100deg, #06182e 0%, #09284a 55%, #0b3a5a 100%);
}

.banner:focus-visible {
    outline-color: #f2c94c;
}

.banner__title {
    border-left-color: #22d3ee;
}

.banner__system {
    color: #f2c94c;
}

/* 手機：左側壓暗改用百分比，因為裝飾圖會延伸到字標底下 */
@media (max-width: 600px) {
    .banner {
        background:
            linear-gradient(90deg, rgba(6, 24, 46, 0.92) 0, rgba(6, 24, 46, 0.55) 70%, rgba(6, 24, 46, 0.1) 100%),
            url('../../img/brand/jise/banner-bg.svg') right center / auto 100% no-repeat,
            linear-gradient(100deg, #06182e 0%, #09284a 55%, #0b3a5a 100%);
    }
}