/* ブランドエリアを 2 行グリッドにし、サブコピーを下段全幅に配置。
           HTML 構造: <a class="site-brand--header"> 直下に
             <img class="site-brand__logo"> + <img class="site-brand__wordmark"> + <span class="site-brand__sub">
           の 3 要素フラット。grid-template-areas で正確に配置。 */
        body .site-header__brand .site-brand--header,
        body .site-header .site-brand--header {
            display: inline-grid;
            /* auto auto = ロゴ画像幅 + ワードマーク画像幅。1fr を使わないので
               sub の幅は logo + column-gap + wordmark の合計と一致する。 */
            grid-template-columns: auto auto;
            grid-template-rows: auto auto;
            grid-template-areas:
                "logo wordmark"
                "sub  sub";
            align-items: center;
            justify-items: start;
            column-gap: 4px;
            row-gap: 4px;
            line-height: 1;
            text-decoration: none;
        }
        .site-brand--header .site-brand__logo     { grid-area: logo; }
        .site-brand--header .site-brand__wordmark { grid-area: wordmark; }
        .site-brand--header .site-brand__sub {
            grid-area: sub;
            display: block;
            /* sub は 2 列スパンするので自動的に logo+gap+wordmark の合計幅になる。
               width: 100% は不要（むしろ親要素全幅に広がってしまうので明示禁止）。 */
            font-size: clamp(11px, 1.4vw, 14px);
            font-weight: 700;
            color: #D43030;
            letter-spacing: .03em;
            line-height: 1.25;
            margin: 2px 0 0;
            white-space: nowrap;
            /* 親 grid 幅を超える場合はトランケート（実害なし、保険） */
            overflow: hidden;
            text-overflow: ellipsis;
        }
        /* ダークモード時はやや明度を上げて視認性を確保 */
        html[data-theme="dark"] .site-brand--header .site-brand__sub {
            color: #FF7878;
        }
        /* モバイル: 文字をやや小さくし、必要なら改行可に */
        @media (max-width: 480px) {
            .site-brand--header .site-brand__sub {
                font-size: 10.5px;
                white-space: normal;
                max-width: 240px;
            }
        }