/* B2 uses the same maximum card/mascot sizes; names provide stable entry points. */
body.horizontal-portals{--deck-height:328px}
html body.horizontal-portals #home.hero{position:relative}
.horizontal-portals .film-gallery{justify-content:flex-start}
.horizontal-portals .film-viewport{flex:1;min-height:0}
.horizontal-portals .film-card[data-active=true] .card__rotator{box-shadow:0 19px 30px -7px #27323b48,0 6px 12px -6px #29343c33,1px 0 0 #d1c4a9,0 1px 0 #ffffffb0 inset}
.horizontal-portals .film-card:not([data-active=true]){filter:saturate(.88)}
.horizontal-portals .service-entry-bar{display:flex;align-items:center;gap:25px;width:min(100%,1000px);margin:8px auto 0;min-height:58px;flex:none;border-top:1px solid #cfd6cb;padding:6px 0 0}
.horizontal-portals .work-portals{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:10px;flex:1;min-width:0}
.horizontal-portals .work-portals a{position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;min-height:46px;padding:5px 19px 7px 10px;text-decoration:none;color:#596d63;transition:color .2s,background .2s;border-radius:7px 7px 0 0}
.horizontal-portals .portal-name{font:600 14px/1.45 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;letter-spacing:.1px;white-space:nowrap}
.horizontal-portals .portal-description{font:11px/1.4 -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif;letter-spacing:0;color:#7b847c;white-space:nowrap}
.horizontal-portals .portal-arrow{position:absolute;right:5px;top:7px;font:17px/1.2 Georgia,serif;color:#87988c;transition:color .2s,transform .2s}
.horizontal-portals .work-portals a::after{content:'';position:absolute;inset:auto 9px 0;height:2px;border-radius:2px;background:#ad895c;transform:scaleX(0);transform-origin:0 50%;transition:transform .35s ease}
.horizontal-portals .work-portals a[data-active=true]{color:#2f493e;background:linear-gradient(#e9eee100,#e9eee180)}
.horizontal-portals .work-portals a[data-active=true]::after{transform:scaleX(1)}
.horizontal-portals .work-portals a:hover{color:#253f35;background:#e9eee180}
.horizontal-portals .work-portals a:hover .portal-arrow,.horizontal-portals .work-portals a[data-active=true] .portal-arrow{color:#a27d4e;transform:translate(1px,-1px)}
.horizontal-portals .work-portals a:focus-visible{outline:2px solid #a78b61;outline-offset:3px}
.horizontal-portals .service-entry-bar .film-controls{flex:none;gap:7px;margin:0;min-height:38px}
.horizontal-portals .film-controls>button{width:30px;height:30px;background:transparent;border-color:#c8d0c4}
.horizontal-portals .film-controls>#film-count{display:block;font:9px/1.5 ui-monospace,"SFMono-Regular",monospace;letter-spacing:.5px;color:#7a887c;white-space:nowrap}
.horizontal-portals #film-pause{font:10px/1 Arial;margin-left:5px}
.horizontal-portals .horizontal-footer{position:absolute;top:19px;right:0;height:auto;display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:0;margin:0;z-index:8}
.horizontal-portals .comparison-switch{font-size:9px;gap:0}
.horizontal-portals .current-study{font:9px/1.5 Arial,sans-serif;letter-spacing:1px;color:#a17e52;margin-right:5px}
.horizontal-portals .comparison-switch a{font-size:9px;padding:4px 5px}
.horizontal-portals .comparison-switch a:nth-child(2){background:transparent;border-color:transparent;color:#718077}
.horizontal-portals .scene-caption button{font-size:10px;padding:4px 0}
.horizontal-portals #film-gallery:focus-visible{outline:1px solid #b2c0af;outline-offset:3px;border-radius:12px}
@media(min-width:851px) and (max-height:800px){
 body.horizontal-portals{--deck-height:238px}
 html body.horizontal-portals #home.hero{padding-top:6px;padding-bottom:6px;gap:5px}
 .horizontal-portals .bloom-stage{gap:4px}
 .horizontal-portals .horizontal-footer{top:10px}
 .horizontal-portals .service-entry-bar{margin-top:8px;min-height:58px}
}
@media(min-width:851px) and (min-height:1000px){body.horizontal-portals{--deck-height:348px}}
/* Tighten empty space at medium heights without changing the visible card size. */
@media(min-width:851px) and (min-height:801px) and (max-height:1000px){
 body.horizontal-portals{--mascot-height:238px}
 html body.horizontal-portals #home.hero{padding-top:14px;padding-bottom:12px;gap:8px}
 .horizontal-portals .bloom-stage{gap:10px}
 .horizontal-portals .identity{gap:4px}
}
@media(min-width:851px) and (min-height:801px) and (max-height:860px){
 body.horizontal-portals{--mascot-height:234px;--deck-height:292px}
 html body.horizontal-portals #home.hero{padding-top:10px;padding-bottom:8px;gap:6px}
 .horizontal-portals .bloom-stage{gap:6px}
 .horizontal-portals .bloom-title{font-size:clamp(52px,5.9vw,80px)!important}
 .horizontal-portals .bloom-title .intro-name{margin-bottom:8px}
}
@media(max-width:1100px) and (min-width:851px){
 .horizontal-portals .service-entry-bar{gap:15px}
 .horizontal-portals .work-portals{gap:5px}
 .horizontal-portals .portal-name{font-size:12px}
 .horizontal-portals .portal-description{font-size:10px;white-space:normal}
 .horizontal-portals .work-portals a{padding-left:7px}
 .horizontal-portals .horizontal-footer{gap:10px}
 .horizontal-portals .comparison-switch a{font-size:8px;padding-inline:3px}
}
@media(max-width:850px){
 body.horizontal-portals{--deck-height:325px}
 html body.horizontal-portals #home.hero{gap:10px}
 .horizontal-portals .horizontal-footer{position:static;width:100%;justify-content:space-between;gap:15px;flex:none;height:28px;order:3}
 .horizontal-portals .comparison-switch{font-size:10px}
 .horizontal-portals .comparison-switch a{font-size:10px;padding:4px 6px}
 .horizontal-portals .scene-caption button{font-size:11px}
 .horizontal-portals .service-entry-bar{gap:12px}
 .horizontal-portals .work-portals{gap:5px}
 .horizontal-portals .portal-description{font-size:10px;white-space:normal}
 .horizontal-portals .portal-name{font-size:12px}
 .horizontal-portals .work-portals a{padding-left:5px;padding-right:16px}
 .horizontal-portals .portal-arrow{right:1px;font-size:15px}
 .horizontal-portals .film-controls>button{width:30px;height:30px}
 .horizontal-portals .film-controls>#film-count{display:none}
}
@media(max-width:580px){
 body.horizontal-portals{--deck-height:330px}
 .horizontal-portals .service-entry-bar{display:block;position:relative;min-height:113px;padding-top:4px;margin-top:6px}
 .horizontal-portals .work-portals{grid-template-columns:1fr 1fr;column-gap:18px;row-gap:1px}
 .horizontal-portals .work-portals a{min-height:52px;padding:5px 22px 6px 6px;gap:3px}
 .horizontal-portals .portal-name{font-size:13px}
 .horizontal-portals .portal-description{font-size:10px;white-space:normal}
 .horizontal-portals .portal-arrow{right:7px;top:7px;font-size:17px}
 .horizontal-portals .service-entry-bar .film-controls{position:absolute;right:0;top:-26px;min-height:28px;gap:4px}
 .horizontal-portals .film-controls>button{width:25px;height:25px;background:#f8f7f2e8}
 .horizontal-portals #film-pause{margin-left:2px}
 .horizontal-portals .film-controls>#film-count{display:none}
 .horizontal-portals .horizontal-footer{margin:0;height:28px;gap:10px}
 .horizontal-portals .comparison-switch a{font-size:9px}
 .horizontal-portals .scene-caption button{font-size:10px}
}
@media(max-width:359px){.horizontal-portals .portal-description{font-size:9px}.horizontal-portals .portal-name{font-size:12px}.horizontal-portals .work-portals{column-gap:12px}}
@media(prefers-reduced-motion:reduce){.horizontal-portals .work-portals a,.horizontal-portals .portal-arrow,.horizontal-portals .work-portals a::after{transition:none}}