body.heroes-city{background:#151a27;color:#f2e7cf;isolation:isolate}body.heroes-city:before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#10152280,#101522e8 85%),url('assets/home-scene/city.webp') center/cover;pointer-events:none}body.heroes-city:after{display:none}body.heroes-city>header{background:#141a28b8;border-bottom:1px solid #c3ab7840;backdrop-filter:blur(12px)}body.heroes-city>header a{color:#eee0bd}body.heroes-city .site-brand-readable{color:#f4e7c9}body.heroes-city main{max-width:1320px;padding:36px 24px 64px;background:transparent}body.heroes-city .page-title{padding:10px 0 23px;margin:0 0 22px;border-bottom:1px solid #bfa57466}body.heroes-city .page-title h1{font-size:42px;color:#f1dfb5;margin:8px 0 12px}body.heroes-city .page-title p{color:#c8ced5;font-size:13px}body.heroes-city .page-title .eyebrow{color:#c5ad7d}body.heroes-city .tools{margin:0 0 24px}body.heroes-city #hero-search{width:100%;background:#1c2232dc;border:1px solid #bea57570;border-radius:4px;color:#f5e9d1;padding:14px 18px;min-height:49px;box-shadow:none}body.heroes-city #hero-search::placeholder{color:#c0c3cd}body.heroes-city #hero-search:focus-visible{outline:2px solid #dcc28d;outline-offset:3px}body.heroes-city #hero-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}body.heroes-city #hero-list .hero-card{position:relative;display:block;min-width:0;overflow:hidden;aspect-ratio:3/4.3;border:1px solid #baa27670;border-radius:2px;background:#202333;box-shadow:0 12px 28px #0004;transition:transform .2s,border-color .2s;text-decoration:none}body.heroes-city #hero-list .hero-card>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top;opacity:1;transition:transform .3s}body.heroes-city #hero-list .caption{position:absolute;inset:auto 0 0;padding:44px 16px 17px;background:linear-gradient(transparent,#111626d9 28%,#111626fa);border:0;min-height:0}body.heroes-city #hero-list h3{font-size:23px;line-height:1.2;margin:7px 0 10px;color:#f4e5c3;font-family:Georgia,serif;text-align:right}body.heroes-city #hero-list small{font-size:10px;color:#d0b67f}body.heroes-city #hero-list .hero-summary{font-size:11px;line-height:1.85;color:#cbd0d9;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}body.heroes-city #hero-list .hero-link{display:block;font-size:10px;color:#e5c98e;margin-top:12px}body.heroes-city #hero-list .hero-card:hover{transform:translateY(-4px);border-color:#ead19c}body.heroes-city #hero-list .hero-card:hover>img{transform:scale(1.035)}body.heroes-city #hero-list .hero-card:focus-visible{outline:3px solid #e8cc94;outline-offset:3px}body.heroes-city>footer{background:#151a27;color:#bfc3cd;border-color:#baa27640}body.heroes-city>footer p,body.heroes-city>footer a{color:#bfc3cd}@media(max-width:1100px){body.heroes-city #hero-list{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:800px){body.heroes-city #hero-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}body.heroes-city main{padding:24px 16px 40px}body.heroes-city .page-title h1{font-size:32px}body.heroes-city #hero-list .caption{padding:36px 10px 12px}body.heroes-city #hero-list h3{font-size:19px}}@media(max-width:520px){body.heroes-city #hero-list{gap:8px}body.heroes-city #hero-list .hero-card{aspect-ratio:3/4.8}body.heroes-city #hero-list .caption{padding:26px 7px 9px}body.heroes-city #hero-list h3{font-size:15px;margin:4px 0 0}body.heroes-city #hero-list small{font-size:8px}body.heroes-city #hero-list .hero-summary,body.heroes-city #hero-list .hero-link{display:none}body.heroes-city .page-title h1{font-size:29px}body.heroes-city main{padding-inline:12px}}@media(prefers-reduced-motion:reduce){body.heroes-city #hero-list .hero-card,body.heroes-city #hero-list .hero-card>img{transition:none}}
body.heroes-city{background:linear-gradient(180deg,#111827ac,#111827ec),url('assets/home-scene/city.webp') center top/cover fixed}body.heroes-city:before{display:none}body.heroes-city>header .compact span,body.heroes-city>header .compact svg{color:#eee0bd}
/* Keep alphabetical card order left to right, while Arabic captions retain RTL. */
body.heroes-city #hero-list{direction:ltr}body.heroes-city #hero-list .hero-card{direction:rtl}
/* Navy replaces the legacy olive backing beneath transparent hero portraits. */
body.heroes-city #hero-list .hero-card,body.heroes-city #hero-list .hero-card>img{background-color:#192838}