/* Size portraits from their available column, never from a fixed viewport height. */
.channel-branch{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.channel-branch .channel-worlds-heading,.channel-branch .character-rail,.channel-branch .character-footer{min-width:0}
.channel-branch .character-rail{container-type:inline-size;width:100%}
.channel-branch .character-card{box-sizing:border-box;flex:0 0 100%;width:100%;min-width:0;max-width:100%;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(16px,2vw,30px)}
.channel-branch .character-card>a{display:block;width:100%;height:auto;aspect-ratio:4/5;min-width:0;border-radius:55px 0 0 0;overflow:hidden}
.channel-branch .character-card img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 32%}
.channel-branch .character-card figcaption{min-width:0;padding:0;overflow-wrap:break-word}
.channel-branch .character-card h3{font-size:clamp(24px,2vw,34px)}
@container(max-width:480px){.channel-branch .character-card{grid-template-columns:minmax(0,1fr);gap:20px}.channel-branch .character-card>a{aspect-ratio:1/1;height:auto;border-top-left-radius:45px}.channel-branch .character-card figcaption{padding:0 2px 6px}.channel-branch .character-card h3{margin:8px 0}.channel-branch .character-card figcaption>p:not(.character-branch){font-size:13px}}
@media(max-width:800px){.channel-branch{grid-template-columns:minmax(0,1fr)}.channel-branch .character-card>a{height:auto}.channel-branch .character-card{max-width:100%;flex-basis:100%}}

/* Preserve the complete owned artwork, including the tea cup and lower scene. */
.channel-branch .character-card>a{aspect-ratio:auto;height:auto;background:transparent}
.channel-branch .character-card img{width:100%;height:auto;object-fit:contain;object-position:center;aspect-ratio:auto}

/* The production montage owns its height; portrait height must not move its second frame. */
.channel-branch .channel-scenes{display:flex;flex-direction:column;align-self:start;gap:24px;min-height:0;grid-row:2/5}
.channel-branch .channel-scenes .branch-scene{position:static;inset:auto;width:100%;margin:0;border:0}
.channel-branch .channel-scenes .branch-scene:first-child img{height:auto;aspect-ratio:16/9;object-fit:cover}
.channel-branch .channel-scenes .branch-scene:last-child{width:76%;align-self:flex-end}
.channel-branch .channel-scenes .branch-scene:last-child img{height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:0 55px 0 0}
.channel-branch .channel-scenes .branch-scene:last-child figcaption{padding:10px 0 0;background:transparent}
@media(max-width:800px){.channel-branch .channel-scenes{grid-row:auto;gap:20px}.channel-branch .channel-scenes .branch-scene:last-child{width:82%}}

/* Compact full-art portraits: scale within a bounded stage without cropping. */
.channel-branch .character-card{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center}
.channel-branch .character-card>a{height:clamp(330px,31vw,470px);width:100%;aspect-ratio:auto;display:flex;align-items:center;justify-content:center;border-radius:0;overflow:visible;background:transparent}
.channel-branch .character-card img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;border-radius:36px 0 0 0}
@container(max-width:480px){.channel-branch .character-card{grid-template-columns:minmax(0,1fr);gap:16px}.channel-branch .character-card>a{height:360px;justify-content:flex-start}.channel-branch .character-card figcaption{padding-left:0}}
@media(max-width:800px){.channel-branch .character-card>a{height:390px}}
@media(max-width:380px){.channel-branch .character-card>a{height:330px}}

/* A compact production diptych: wide establishing shot, inset detail on a shared stage. */
.channel-branch .channel-scenes{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto auto;gap:0;min-height:0;padding-bottom:8px;align-self:start;isolation:isolate}
.channel-branch .channel-scenes .branch-scene:first-child{grid-column:1/12;grid-row:1;position:relative;width:100%;z-index:0}
.channel-branch .channel-scenes .branch-scene:first-child img{aspect-ratio:16/9;height:auto;border-radius:60px 0 0 0;object-fit:cover}
.channel-branch .channel-scenes .branch-scene:first-child figcaption{padding:12px 0 0;max-width:36%;line-height:1.7}
.channel-branch .channel-scenes .branch-scene:last-child{grid-column:6/-1;grid-row:2;position:relative;align-self:start;justify-self:stretch;width:auto;margin:-21% 0 0;padding:8px 0 0 8px;border:0;background:#f3eee5;z-index:1}
.channel-branch .channel-scenes .branch-scene:last-child img{height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:0 0 42px 0;box-shadow:0 16px 28px -22px #173b3d80}
.channel-branch .channel-scenes .branch-scene:last-child figcaption{padding:10px 0 0 4px;background:transparent;line-height:1.7}
@media(min-width:1600px){.channel-branch .channel-scenes{max-width:760px}.channel-branch .channel-scenes .branch-scene:last-child{margin-top:-25%}}
@media(max-width:800px){.channel-branch .channel-scenes{grid-row:auto;margin-bottom:30px}.channel-branch .channel-scenes .branch-scene:first-child{grid-column:1/12}.channel-branch .channel-scenes .branch-scene:first-child img{border-top-left-radius:42px}.channel-branch .channel-scenes .branch-scene:last-child{grid-column:5/-1;width:auto;margin-top:-18%;padding:6px 0 0 6px}.channel-branch .channel-scenes .branch-scene:first-child figcaption{max-width:30%}}
@media(max-width:380px){.channel-branch .channel-scenes .branch-scene:last-child{grid-column:5/-1;margin-top:-12%}.channel-branch .channel-scenes .branch-scene:first-child figcaption{font-size:8px}.channel-branch .channel-scenes .branch-scene:last-child figcaption{font-size:8px}}

/* Give the complete chapter label its own row rather than squeezing its final word. */
.channel-branch>.branch-heading{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px 4vw}
.channel-branch>.branch-heading>.channel-label{grid-column:1/-1;max-width:none;display:flex;flex-wrap:wrap;gap:0 8px;padding-top:0;font-size:10px;line-height:1.8}
.channel-label span{white-space:nowrap}
.channel-branch>.branch-heading h3{grid-column:1}
.channel-branch>.branch-heading>p:last-child{grid-column:2}
@media(max-width:800px){.channel-branch>.branch-heading{grid-template-columns:minmax(0,1fr);gap:16px}.channel-branch>.branch-heading>.channel-label{display:grid;gap:3px;font-size:9px}.channel-branch>.branch-heading h3,.channel-branch>.branch-heading>p:last-child{grid-column:1}}

/* Warm editorial aside distinguishes production scope from teal capability headings. */
.channel-branch>.branch-heading>p:last-child{color:#76515b;font-size:14px;line-height:1.9;max-width:470px;align-self:end;padding:0 0 4px 24px;border-left:2px solid #c9a994;text-wrap:pretty}
@media(max-width:800px){.channel-branch>.branch-heading>p:last-child{font-size:13px;max-width:520px;padding:2px 0 2px 18px;margin-top:3px}}